How can I hide block-id labels in editor mode?

Custom CSS & Theme Design
4

There are a few ways to go about this:

/* hide blockID completely - not recommended */
.cm-blockid {
    opacity: 0;
}

/* hide blockID except if on active line */
:not(.cm-active) > .cm-blockid {
    opacity: 0;
}

/* hide blockID except on hover or active line */
:not(.cm-active) > .cm-blockid {
    opacity: 0;
}

:not(.cm-active) > .cm-blockid:hover {
    opacity: 1;
}

/* dim blockID except when on line */
.cm-blockid {
    opacity: 0.3;
}

.cm-active > .cm-blockid {
    opacity: 0.8;
}

Pick your poison!

I think display: none is going to produce some weird behavior here, but TurkeyTips has a good point. If you only want these for Live Preview, add .is-live-preview to the front of the selectors.

2 Likes