Editor CSS should be isolated from the page

[dd32]

The Block editor loads the editor stylesheet into the context of the page, however the Block Editor CSS loaded is not scoped to the editor instance at all.

This causes an issue for sites where blocks are present outside of the editor, such as on WordPress.org Forums where the <header> and <footer> are blocks. In our case, it seems that some specific CSS rules we can add will resolve this, but it's likely that future Gutenberg style updates may break other blocks.

The editor should likely be loaded within an iframe, and communicate with the parent page through postMessage for ideal compatibility (props @StevenDufresne for the suggestion).

[johngodley]

We've looked into various ways of putting the editor on the page, including iframes and shadow DOM. They all suffer from problems, and the best compromise has always been to just tackle CSS.

Iframes cause issues with focus, accessibility, popups, resizing, and probably some other things I've forgotten. You also do want some CSS from the surrounding page to affect the editor, so it looks like it belongs there. Things quickly get complicated.

Shadow DOM looks ideal, but rich text editing in Gutenberg doesn't work at all for some reason.

Fundamentally I think this is something that needs to be fixed in Gutenberg itself and things like iframes are workarounds that indicate a failure of Gutenberg. Making Gutenberg CSS more specific will improve Gutenberg (this is an issue that affects anyone wanting to use it as an editor). It should also make the site CSS better as it too won't be as specific. For example, bbPress has unnecessarily aggressive CSS selectors and it would be better for bbPress and sites that use it if these were made more specific.

My aim is to try and start feeding these things back into Gutenberg, and bbPress too. A lot of what is in this plugin should disappear, as should site specific fixes.

Saying all of that, it is a bit of a pain in the meantime. Things don't tend to break often though.

[dd32]

I fully agree that this is likely something that should be tackled within Gutenberg itself, it seemed like creating a tracking issue here with the impact it has would be the best first step towards being able to upstream this though.

[johngodley]

I've raised the issue here: WordPress/gutenberg#46877

[adamwoodnz]

WordPress/gutenberg#46877 has now been closed, is this still a issue?

I'm wondering if the hotfix can be removed from the Support Forums theme.