New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Multiple Themes: Site Editor doesn't display correct custom background color in Simple Sites #7777
Comments
@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 |
8097521-zd-a8c |
Support References This comment is automatically generated. Please do not edit it.
|
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) |
Ticket: 8100341-zd-a8c |
The user in the ticket above says:
Here's that other issue, for context: |
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 |
I have a case where the background was not affected but the Font 8190715-zd-a8c The editor loaded a default CleanShot.2024-05-16.at.10.31.17.mp4 |
@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 Automattic/wp-calypso#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. 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! |
Reported in 8182859-zen 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 |
✅ Solved via D149075-code The unexpected gray background is no longer visible, and the editor correctly applies custom background color and style variations correctly. Screen.Recording.2567-05-20.at.11.07.26.movThis 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; |
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:Steps to reproduce
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
The text was updated successfully, but these errors were encountered: