Skip to content

Instantly share code, notes, and snippets.

@gsarig
Last active September 13, 2021 15:09
Show Gist options
  • Save gsarig/fb09a45b4aded64c4f3ea1d44128c618 to your computer and use it in GitHub Desktop.
Save gsarig/fb09a45b4aded64c4f3ea1d44128c618 to your computer and use it in GitHub Desktop.
Highlight Gutenberg Blocks. An easier way to tell apart Gutenberg blocks on the Editor, with just a few lines of CSS. Read more: https://www.gsarigiannidis.gr/an-easier-way-to-tell-apart-gutenberg-blocks-on-the-editor/
.wp-block:not([data-type="core/paragraph"]):not(.block-list-appender):not(.block-editor-default-block-appender):not(.editor-post-title):hover::before,
.wp-block-group:hover::before {
content: '';
width: 100%;
height: 100%;
pointer-events: none;
border: 1px dashed;
position: absolute;
top: 0;
left: 0;
}
.wp-block:not([data-type="core/paragraph"]):not(.block-list-appender):not(.block-editor-default-block-appender):not(.editor-post-title):hover::after,
.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