Ensure root selector (body) is not wrapped in :root :where() #63726
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
talldan
added
[Type] Bug
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the Unlinked AccountsThe following contributors have not linked their GitHub and WordPress.org accounts: @mleathem. Contributors, please read how to link your accounts to ensure your work is properly credited in WordPress releases. If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
talldan
changed the title
talldan
added
the
Backport to WP Minor Release
There was a problem hiding this comment.
Thanks for the rapid response on this fix @talldan 🚀
Quick question; it looks like this will address the PHP and frontend side of the issue, do we also need to update the JS side of global styles?
I have a suspicion that we'll also need to update the use-global-styles-output.js hook.
Similar to the top-level element-only selector fix, we could probably just add the skipSelectorWrapper flag to the root block selector linked above.
|
Size Change: +4 B (0%) Total Size: 1.75 MB
ℹ️ View Unchanged
|
talldan
force-pushed
the
fix/root-selector-specificity
branch
from
a7e7d2a
to
594184c
Compare
aaronrobertshaw
approved these changes
Jul 19, 2024
There was a problem hiding this comment.
Appreciate the quick iteration here as well 🙇
This is now testing well for me. I can confirm the root body selector is back to body after this PR and matches what it was with WP6.5.5.
I also gave this a smoke test against a range of block style variations and didn't spot any regressions there.
WP 6.5.5
Editor Before / After
Frontend Before / After
If there is a chance to get this into WP6.6.1 we'll need the test instructions updated for the latest changes and an extra approval or two.
|
Thanks @aaronrobertshaw, I've updated the test instructions. |
andrewserong
approved these changes
Jul 19, 2024
There was a problem hiding this comment.
This code change LGTM, too, and is testing well for me:
✅ Post and site editor styles target the simple body selector
✅ In the non-iframed editor, styles target the editor wrapper as expected
✅ Styles on the site frontend target the simple body selector
Looks good to land to me!
|
I've tested the changes in this PR against the
|
2 tasks
12 tasks
pento
pushed a commit
to WordPress/wordpress-develop
that referenced
this pull request
Aug 6, 2024
…e(). Pre-WordPress 6.6, the `body` selector was used for styles associated with the body. In 6.6, this was mistakenly changed to `:root :where(body)`, an increase in specificity, causing some issues for themes. This change reverts the specificity increase, styles again use the `body` selector. Syncs PHP changes from WordPress/gutenberg#63726. Props talldanwp, andrewserong, aaronrobertshaw, mukesh27, hellofromtonya. Fixes #61704. git-svn-id: https://develop.svn.wordpress.org/trunk@58856 602fd350-edb4-49c9-b593-d223f7449a82
markjaquith
pushed a commit
to markjaquith/WordPress
that referenced
this pull request
Aug 6, 2024
…e(). Pre-WordPress 6.6, the `body` selector was used for styles associated with the body. In 6.6, this was mistakenly changed to `:root :where(body)`, an increase in specificity, causing some issues for themes. This change reverts the specificity increase, styles again use the `body` selector. Syncs PHP changes from WordPress/gutenberg#63726. Props talldanwp, andrewserong, aaronrobertshaw, mukesh27, hellofromtonya. Fixes #61704. Built from https://develop.svn.wordpress.org/trunk@58856 git-svn-id: http://core.svn.wordpress.org/trunk@58252 1a063a9b-81f0-0310-95a4-ce76da25c4cd
github-actions bot
pushed a commit
to gilzow/wordpress-performance
that referenced
this pull request
Aug 6, 2024
…e(). Pre-WordPress 6.6, the `body` selector was used for styles associated with the body. In 6.6, this was mistakenly changed to `:root :where(body)`, an increase in specificity, causing some issues for themes. This change reverts the specificity increase, styles again use the `body` selector. Syncs PHP changes from WordPress/gutenberg#63726. Props talldanwp, andrewserong, aaronrobertshaw, mukesh27, hellofromtonya. Fixes #61704. Built from https://develop.svn.wordpress.org/trunk@58856 git-svn-id: https://core.svn.wordpress.org/trunk@58252 1a063a9b-81f0-0310-95a4-ce76da25c4cd
talldan
added
Backported to WP Core
pento
pushed a commit
to WordPress/wordpress-develop
that referenced
this pull request
Aug 9, 2024
…e(). Pre-WordPress 6.6, the `body` selector was used for styles associated with the body. In 6.6, this was mistakenly changed to `:root :where(body)`, an increase in specificity, causing some issues for themes. This change reverts the specificity increase, styles again use the `body` selector. Syncs PHP changes from WordPress/gutenberg#63726. Reviewed by hellofromTonya. Merges [58856] and [58861] to the 6.6 branch. Props talldanwp, andrewserong, aaronrobertshaw, mukesh27, hellofromTonya. Fixes #61704. git-svn-id: https://develop.svn.wordpress.org/branches/6.6@58874 602fd350-edb4-49c9-b593-d223f7449a82
markjaquith
pushed a commit
to markjaquith/WordPress
that referenced
this pull request
Aug 9, 2024
…e(). Pre-WordPress 6.6, the `body` selector was used for styles associated with the body. In 6.6, this was mistakenly changed to `:root :where(body)`, an increase in specificity, causing some issues for themes. This change reverts the specificity increase, styles again use the `body` selector. Syncs PHP changes from WordPress/gutenberg#63726. Reviewed by hellofromTonya. Merges [58856] and [58861] to the 6.6 branch. Props talldanwp, andrewserong, aaronrobertshaw, mukesh27, hellofromTonya. Fixes #61704. Built from https://develop.svn.wordpress.org/branches/6.6@58874 git-svn-id: http://core.svn.wordpress.org/branches/6.6@58270 1a063a9b-81f0-0310-95a4-ce76da25c4cd
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What?
Fixes #63712
Trac backport ticket - https://core.trac.wordpress.org/ticket/61704
In WordPress 6.6, there was a general effort to lower and level specificity, but a couple of selectors seem to have mistakenly had their specificity raised.
The styles associated with the
bodyare an example. In 6.5 these styles used the simplebodyselector. In 6.6 the selector is:root :where(body), an increase in specificity.Why?
These changes may cause some problems for themes, especially the typography styles in the body, which will cascade.
How?
Reverts the selector back to
bodyprops to @aaronrobertshaw for pointing me to the fix
Testing Instructions
Editor styles
bodyelement inside theedit-site-visual-editor__editor-canvasiframe.bodyselector and not a:root :where(body)selector.Frontend styles
bodyselector and not a:root :where(body)selector.Expected:
Before: