Skip to content

Instantly share code, notes, and snippets.

Last active September 13, 2021 15:09
What would you like to do?
Highlight Gutenberg Blocks. An easier way to tell apart Gutenberg blocks on the Editor, with just a few lines of CSS. Read more:
.wp-block-group:hover::before {
content: '';
width: 100%;
height: 100%;
pointer-events: none;
border: 1px dashed;
position: absolute;
top: 0;
left: 0;
.wp-block-group:hover::after {
content: attr(data-title);
position: absolute;
top: -20px;
left: unset;
right: 0;
padding: 0 8px;
font-size: 11px;
background: #404040;
color: #fff;
display: inline-block;
height: 20px;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment