-
Notifications
You must be signed in to change notification settings - Fork 4.3k
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
The CSS class is-dark-theme
is not set in the post editor
#60299
Comments
The commit to fix this issue was reverted to fix a problem with Safari, see #60616. I'm reopening this issue as it needs to be solved, but with a different approach. |
Not sure if that would break anything, but maybe the best wait to fix the issue is to move |
Based on this comment, looks like the problem with Safari is broader because also the CSS classes Regarding the bug reported at #60550 I'm not sure the root cause was the change in #60300 as that change followed an already existing pattern used for the Anyways, to illustrate a couple of the issues triggered by the missing A block in 'select mode' now shows a blue outline (left) but it is supposed to show a white outline (dark): In addition to the outline, the Spacer block, when selected, shows a full dark background (left) but it is supposed to show a lighter background (right): |
My suggestion would be to move the class to the |
I've been testing pretty exensively. While moving the class to the thml element seems trivial, it doesn't work well anyways with themes that may handle the body background dynamically. For example, Twenty Twenty-One does have its won 'dark mode toggle' feature that changes the body background after the editor That's a pre-existing issue and I suspect it never worked well. However, it seems there's a need to a better mechanism to get the actual body background color even when it gets changed by themes or plugins features. |
A first attempt to fix this issue was reverted in #60616. I can still reproduce the incorrect behavior in the Post editor. @glendaviesnz @ellatrix any change to explore an alternative approach to fix this issue> |
This issue is still a blocker for #60275 To recap: In the post editor the CSS classes of the iframe body are initially:
and after the page is fully loaded, a re-render replaces the classes with:
As such, |
I'm against changing the admin selected UI color as a result of the theme's background color (the block outlines). It doesn't scale as-is, and actually makes the experience more confusing as what was once familiar is no longer. If we were to work on this, the resulting solution needs to be complete, accounting for:
Otherwise, you can have a black site with white sections and you no longer see any selected blocks. It cannot be a site-wide condition. |
Thanks for your feedback. I'm not sure it's directly related to this issue. It may be a follow-up consideration to address separately. |
I propose adding a bodyClasses property to settings in the 'core/block-editor' store and refactoring the iframe component to use that state to maintain its body classes. useDarkThemeBodyClassName could update the store and not be overwritten by the iframe component's onLoad behavior. |
Description
Splitting this out from #60275
To be more accurate, in the Post editor the CSS class
is-dark-theme
is initially applied but than removed.In the Site editor, it works as expected.
It seems to be something missed with the refactorings of the editor irame, editor styles scoping and such.
When a theme has a dark background color, useDarkThemeBodyClassName is responsible for adding the
is-dark-theme
CSS class to the editor iframe body element.It does that, but then the body gets updated and gets new CSS classes when the iframe is fully loaded, see the
Iframe
component internal handling of the classes in the onload callback and then the classes are set to the body.I'm not sure whether that means the
body
gets entirely replaced. Regardless the new CSS classes replace the initial ones thus removingis-dark-theme
it it was set.The
is-dark-theme
CSS class is necessaty to make some editor features and styles work correctly.Step-by-step reproduction instructions
block-editor-iframe__body editor-styles-wrapper
.is-dark-theme
.block-editor-iframe__body editor-styles-wrapper
.block-editor-iframe__body editor-styles-wrapper is-dark-theme
.is-dark-theme
class.block-editor-iframe__body editor-styles-wrapper post-type-post admin-color-fresh wp-embed-responsive
.Screenshots, screen recording, code snippet
No response
Environment info
No response
Please confirm that you have searched existing issues in the repo.
Yes
Please confirm that you have tested with all plugins deactivated except Gutenberg.
Yes
The text was updated successfully, but these errors were encountered: