Make editor CSS more specific so it doesn't leak out of the editor

[johngodley]

Some editor CSS leaks out of the editor and can affect the surrounding page. When Gutenberg is used inside wp-admin this is not a problem as the CSS has been designed to fit there, but if Gutenberg is used in another context then this leaky CSS means that CSS overrides are needed, and things get messy. This is more apparent if the editor is used on the same page as rendered blocks.

For example, Gutenberg is used on the wordpress.org support forums, which are front-end pages not in wp-admin. These pages contain rendered blocks. For example, the page footer is a navigation block. CSS from the editor .wp-block-navigation-item .wp-block-navigation-item__content adds a cursor style which overrides the page style (and which must then be specifically overridden on the page to restore it).

The CSS comes from the Gutenberg editor.css file. Looking through this it seems to contain a lot of CSS that will affect rendered blocks. If the CSS is only for the editor then ideally it should be made specific to the editor.

i.e. .wp-block-navigation-item .wp-block-navigation-item__content becomes .block-editor__container .wp-block-navigation-item .wp-block-navigation-item__content

What is your proposed solution?

Increase the specificity of editor CSS so it is tied to something in the editor.

[ellatrix]

This is fixed by #48286. All editors are now iframed by default. The post editor will be iframed if all blocks are v3 or higher. If you're creating a custom block editor, make sure to use the Iframe component.