Multiple Themes: Site Editor doesn't display correct custom background color in Simple Sites

[liviopv]

Quick summary

Affected themes: Videomaker, Videmaker White, Kerr

When applying a custom background toe the site via Global Styles, either by selecting a specific color or picking a Style Variation, the editor canvas will not display the custom color.

For all three themes, the background in the site editor is always #ddd.

Instead of pulling the the color from background-color: var(--wp--custom--color--background);, it uses:

.edit-site .interface-interface-skeleton__content {
    background-color: #ddd;
}

Steps to reproduce

1. Activate Videomaker, Videomaker White or Kerr
2. Select a Style Variation or change the background color in Global Styles
3. The background color will remain #ddd

What you expected to happen

Site Editor should honor the user choice and display the custom background color

What actually happened

Background color is always #ddd

Browser

Google Chrome/Chromium, Mozilla Firefox

Context

User report

Platform (Simple, Atomic, or both?)

Simple

Other notes

No response

Reproducibility

Consistent

Severity

Some (< 50%)

Available workarounds?

No but the platform is still usable

Workaround details

No response

[liviopv]

@arthur791004 the timeline on the report makes me think it could be related to Gutenberg 18.1.x on Simple, which included some background-related PRs. Pinging you since you handled the merge

[liviopv]

8097521-zd-a8c

[github-actions[bot]]

Support References

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

• [ ] 8097521-zen
• [ ] 8100341-zen
• [ ] 8190715-zen
• [ ] 8182859-zen

[supernovia]

I just saw this with a user too and made a video. I can confirm it doesn't happen in Ron, which also includes a dark background by default.

(Removing video since I realized the user shared their email address on it, but please PM me if you want to see it)

[supernovia]

Ticket: 8100341-zd-a8c

[supernovia]

The user in the ticket above says:

This problem has started I think around the 18th of April and by coincidence that is also the time where my slideshow autoplay had stopped working as well.

Here's that other issue, for context: https://github.com/Automattic/jetpack/issues/36973

[chad1008]

It looks like some other colors are off as well, specifically headings (that I've noted so far). That bit isn't really visible until you peel back the wonky background color. That tends to overshadow everything else!

Messing with the styles, the theme's actual colors emerge after disabling the first couple of active styles including the defaults being set by body. Initial thought is that we're dealing with CSS files being loaded in the wrong order for some reason.

[liviopv]

I have a case where the background was not affected but the Font

8190715-zd-a8c

The editor loaded a default serif font when editing in desktop mode, but switched to the correct sans serif font when switching the preview or deactivating theme styles. Switching Gutenberg 18.3 off "fixed" the issue.

https://github.com/Automattic/themes/assets/14153300/85919c0c-9492-4571-bb61-594c49e9b9ee

[miksansegundo]

@liviopv I tracked the issue and found it is caused by the core wp-admin styles leaking into the editor canvas (iframe) when they should be applied in the editor UI. See https://github.com/Automattic/wp-calypso/issues/86778

The styles in WordPress /wp-admin/css/common.css apply to the previews in the editor in Dotcom.

The styles that apply to the body element are the cause of the issues reported here. #f0f0f1; is the background color that breaks theme style variations and custom background color.

body {
    background: #f0f0f1;
    color: #3c434a;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    font-size: 13px;
    line-height: 1.4em;
    min-width: 600px;
}

@Automattic/lego solved a similar issue, and I feel positive about solving these too.

Let me discuss it with the team and get back to you soon!

[caitlindawn]

Reported in 8182859-zen

Theme: Quadrat Black

Can replicate on both Atomic and Simple site

[arthur791004]

Reported in 8182859-zd-a8c Theme: Quadrat Black Can replicate on both Atomic and Simple site

This seems to be a different issue. The post editor is not wrapped into iframe because Gutenberg detects the site has Meta Boxes (e.g.: YOAST) and it leads to the styles are not applied to the content of .edit-post-visual-editor correctly. I guess it's a Gutenberg issue and it may also happen on the self-hosted sites 🤔

[miksansegundo]

✅ Solved via D149075-code

The unexpected gray background is no longer visible, and the editor correctly applies custom background color and style variations correctly.

https://github.com/Automattic/themes/assets/1881481/157a1695-a3ad-45e7-8978-2ad0119699b7

This fix prevents the styles from /wp-admin/css/common.css affecting the editor canvas and that also solves other potential issues related to using the following unexpected styles:

background: #f0f0f1;
color: #3c434a;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
font-size: 13px;
line-height: 1.4em;
min-width: 600px;