FSE: Unusable Editor on Themes with Custom Background Color

[carinapilar]

Quick summary

It seems that the new editor isn't loading custom background colors from themes, so depending on the theme you have on the site, you aren't able to see the content in the editor.

Steps to reproduce

1. Activate a theme that has a dark background color, and light text color (examples I tried: Remote, Geologist, Skatepark, etc).
2. After activating the theme, go to Appearance > Editor.

What you expected to happen

To see the editor with the same content you see on the live site.

What actually happened

It's not loading the background color, so you can't really see the text in light color to edit the content.

Context

Found this when helping a user today, and was able to replicate this on 2 of my Simple test sites.

With the Remote theme for example, this is what I have on the live site:

And this is how it loads in the editor:

Browser, operating system and other notes

Was able to replicate the issue on Chrome and Firefox, on macOS.

Reproducibility

Consistent

Severity

All

Available workarounds?

No, but the platform is still usable.

[noahtallen]

We can definitely reproduce this on new sites with the editor. Interestingly, this does not happen while sandboxed. As a result, we think there are two issues:

1. The implementation in Gutenberg relies on the load-order of CSS for specificity, which is a really fragile practice, and easily breaks.
2. The minifier on dotcom somehow changes the load order so that the white style is higher specificity than others, breaking it for simple sites. (This is why the issue wasn't caught in Gutenberg originally, since they did test this scenario)

Our thought for now is to delete the broken line of code on dotcom, since the issue it was fixing doesn't apply to all/most of our themes. We also think this could be contained to just simple sites, though we'll need to test that.

A proper fix is on the way in Gutenberg, though it won't be available for a week or two most likely: https://github.com/WordPress/gutenberg/pull/46752/files#r1055807165

[noahtallen]

This should be hotfixed for simple sites now. (see D97057-code)

[Gustavo-Hilario]

There is another report about this issue on an AT site: 5840151-zen

The background of the site is black on the live site. For a few milliseconds, it is black on the Site Editor, but then it becomes white. This seems to be the CSS code that is causing the issue:

[github-actions]

Support References

This comment is automatically generated. Please do not edit it.

• 5840151-zen
• 5848623-zen
• 5848682-zen
• 5856827-zen

[noahtallen]

Same issue, then :/

This one can't be hotfixed, but hopefully we can get a patch release soon.

If I'm not mistaken, this issue is more intermittent on Atomic, right? (I did test yesterday and didn't reproduce)

[Gustavo-Hilario]

If I'm not mistaken, this issue is more intermittent on Atomic, right?

Yeah. It is intermittent on Atomic. I also can't reproduce this issue on my end. However, yesterday, I also noticed this issue on another AT site here: 38939383-hc ( Munchies. The user didn't notice this because their background is a light yellow)

[Gustavo-Hilario]

Another report here: 37815582-hc (Atomic Site – Theme: Munchies)

[cuemarie]

Another AT site: 35421353-hc on Theme: Quadrat

• 5848623-zd-woothemes follow up when this is resolved would be appreciated.

As a workaround, I helped them move the content on their Home template onto their home page via post content block, so they can edit most of their front page via the page editor for now.

[alliebbush2]

AT Site-5848682-zd Theme: Disco
5848682-zd- follow up when this is resolved would be appreciated.

[noahtallen]

We are hoping that the Gutenberg v14.9.1 release will fix this issue, which should be on Atomic tomorrow.

[synora]

Another report came in at 5856827-zd. The theme is Appleton, site is Atomic, and I can replicate it.
Happy to hear that a fix is in the works!

[noahtallen]

I think this fix should be live now. Of course, please re-open if there are more reports!