WordPress rewrites your editor styles… sometimes

I'm using the old "2021" theme as a parent theme for this site. Why? Because it's the last of the default themes not based in Gutenberg blocks. So-called "classic" themes are the best themes. Fight me.

Anyway, this theme has enormous post titles out of the box for whatever reason ⸺ the trend of the time, I guess. It took me several hot seconds to realize why I couldn't get my editor styles meant to fix this situation to take effect.

First, a quick refresher on how to get an editor-only stylesheet involved. It depends on your setup:

• When using the classic editor or if you have so-called "classic" meta boxes below the Gutenberg editor, add_editor_style() will suffice.
• When neither of those are true, the block editor gets put into an iframe, and in this case you'll have to use the enqueue_block_assets hook instead.

It's this first method, add_editor_style(), where you can run into trouble. I could see my stylesheet being loaded in the network log but could find nothing from it in the rules panel: its styles weren't applying. Only upon scrolling upward in the DOM while inspecting the post title did I see a bunch of <style> tags added dynamically, and sure enough there was mine ⸺ only different.

CSS nesting has been baseline for a bit, so I've been writing styles that way whenever possible. Nesting is half (or more) the reason I even started using Sass, and now it's supported natively by all major browsers. Neat. Consider this example bit of nested CSS:

.nesting {
    .is-busted {
        background: magenta;
    }
}

This, however, is how it will look after WP is done fussing with it during its Gutenberg spin-up routines:

:where(.editor-styles-wrapper) .nesting {
    :where(.editor-styles-wrapper) .is-busted {
        background: magenta;
    }
}

The resulting selector is quite different from what I intended:

/* Good! */
.nesting .is-busted { background: magenta }

/* Not good! */
:where(.editor-styles-wrapper) .nesting :where(.editor-styles-wrapper) .busted { background: magenta }

I didn't want to give up my beautiful nesting to appease this silly system, nor did I feel like getting Sass involved for such a trivial stylesheet, so I switched from add_editor_style to the enqueue_block_assets hook.

If there's a bug in WP's Trac system about this, I didn't find it in the eight or so seconds I spent googling it. Granted, I started this post months ago and only just got around to finishing it, so maybe it's changed since then.