Elements: Avoid specificity bump for top-level element-only selectors #63403
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
aaronrobertshaw
added
[Type] Bug
aaronrobertshaw
requested review from
tellthemachines and
ellatrix
as code owners
|
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 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. |
|
I've flagged this as ready for review while I work on the backport, just in case there is another RC and we can sneak this fix in. |
|
Size Change: +167 B (+0.01%) Total Size: 1.76 MB
ℹ️ View Unchanged
|
aaronrobertshaw
added
the
Backport to WP Minor Release
aaronrobertshaw
commented
Jul 11, 2024
Comment on lines
+1
to
+3
| https://github.com/WordPress/wordpress-develop/pull/7012 | ||
|
|
||
| * https://github.com/WordPress/gutenberg/pull/63403 |
There was a problem hiding this comment.
As this PR is intended for a 6.6 point release if there isn't an RC4, I've point the backport changelog under 6.6. If that needs changing let me know.
talldan
approved these changes
Jul 11, 2024
andrewserong
approved these changes
Jul 12, 2024
There was a problem hiding this comment.
This is testing great for me, thanks so much for the detailed testing instructions! The code change itself is straightforward and logical, but the extra detail in the testing instructions very much helps us be confident of the change here 👍
Here are my running testing notes:
✅ Custom HTML nav structure/markup is styled correct in post & site editors, and frontend
✅ Global element + hover styles correct in post & site editors, and frontend
✅ Global block type element styles correct in post & site editors, and frontend
✅ Element style overrides on block instances (e.g. individual paragraph block) correct in post & site editors, and frontend
✅ Block style variations including nested block element styles working correctly in post & site editors, and frontend
✅ Block style variation element styles are capped at 0-1-0
✅ Nested block style variations reflect the nesting structure in post & site editors, and frontend
✅ Block instance element styles (e.g. a Group block's Button styles) override the block style variation's element styles
✅ Other elements, heading and cite work as expected (TIL the pullquote block has color: inherit that overrides the cite element styles — this is not an issue with this PR, just something I noticed)
✅ button and caption selectors are wrapped in :root :where() at all times.
LGTM! 🚀
aaronrobertshaw
deleted the
fix/top-level-element-only-selectors-specificity
branch
|
There's a backport available for the PHP changes in WordPress/wordpress-develop#7012 |
andrewserong
added
the
Backport to Gutenberg RC
|
I just cherry-picked this PR to the Gutenberg release/18.8 branch to get it included in the next release: 32ff78f This will still need to be cherry picked for a core release. |
andrewserong
added a commit
that referenced
this pull request
Jul 16, 2024
…#63403) Co-authored-by: aaronrobertshaw <aaronrobertshaw@git.wordpress.org> Co-authored-by: talldan <talldanwp@git.wordpress.org> Co-authored-by: andrewserong <andrewserong@git.wordpress.org> Co-authored-by: youknowriad <youknowriad@git.wordpress.org> Co-authored-by: carolinan <poena@git.wordpress.org> Co-authored-by: wolffe <butterflymedia@git.wordpress.org>
andrewserong
removed
the
Backport to Gutenberg RC
andrewserong
added
the
Backport to WP 6.7 Beta/RC
|
There was a conflict while trying to cherry-pick the commit to the wp/6.6 branch. Please resolve the conflict manually and create a PR to the wp/6.6 branch. PRs to wp/6.6 are similar to PRs to trunk, but you should base your PR on the wp/6.6 branch instead of trunk. |
andrewserong
added a commit
that referenced
this pull request
Jul 17, 2024
…#63403) Co-authored-by: aaronrobertshaw <aaronrobertshaw@git.wordpress.org> Co-authored-by: talldan <talldanwp@git.wordpress.org> Co-authored-by: andrewserong <andrewserong@git.wordpress.org> Co-authored-by: youknowriad <youknowriad@git.wordpress.org> Co-authored-by: carolinan <poena@git.wordpress.org> Co-authored-by: wolffe <butterflymedia@git.wordpress.org>
|
A merge PR targeting the |
andrewserong
added a commit
that referenced
this pull request
Jul 17, 2024
…#63403) (#63637) Co-authored-by: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Co-authored-by: aaronrobertshaw <aaronrobertshaw@git.wordpress.org> Co-authored-by: talldan <talldanwp@git.wordpress.org> Co-authored-by: youknowriad <youknowriad@git.wordpress.org> Co-authored-by: carolinan <poena@git.wordpress.org> Co-authored-by: wolffe <butterflymedia@git.wordpress.org> Co-authored-by: aaronrobertshaw <aaronrobertshaw@git.wordpress.org> Co-authored-by: andrewserong <andrewserong@git.wordpress.org>
ellatrix
added
Backported to WP Core
|
Please urgently review the prioritisation issues being caused, in which inline styles are always overriding styles linked in external stylesheets. (Inline rules defined later in the cascade with the same specificity override externally-linked rules.) |
|
Thanks for flagging this @markhowellsmead 👍 There is an open ticket regarding the element styles issue for WP6.6. This comment outlines a custom plugin build that can be used to test this fix in the context of WP6.6. It would be great if you could try that and provide feedback on the ticket. Another option if your site is using Gutenberg, is to update it to 18.8 which was released today and contains this fix. |
|
Thanks @aaronrobertshaw; I haven't used the Gutenberg plugin on our client sites yet because it's always broken quite a lot of things whenever I've tried to use it before, because of the rapid pace of development and because of its beta status. However, using 18.8.0 does fix the one CSS case I mentioned. |
Thank you @markhowellsmead for testing and confirming ⭐ |
2 tasks
pento
pushed a commit
to WordPress/wordpress-develop
that referenced
this pull request
Jul 18, 2024
…tors Prevent issues (e.g. links being underlined) caused by a bump in CSS specificity for top-level element-only global element styles. Backports the PHP changes from WordPress/gutenberg#63403. Fixes #61630. Fixes #61660. Props aaronrobertshaw, andrewserong, noisysocks. git-svn-id: https://develop.svn.wordpress.org/trunk@58749 602fd350-edb4-49c9-b593-d223f7449a82
markjaquith
pushed a commit
to markjaquith/WordPress
that referenced
this pull request
Jul 18, 2024
…tors Prevent issues (e.g. links being underlined) caused by a bump in CSS specificity for top-level element-only global element styles. Backports the PHP changes from WordPress/gutenberg#63403. Fixes #61630. Fixes #61660. Props aaronrobertshaw, andrewserong, noisysocks. Built from https://develop.svn.wordpress.org/trunk@58749 git-svn-id: http://core.svn.wordpress.org/trunk@58151 1a063a9b-81f0-0310-95a4-ce76da25c4cd
github-actions bot
pushed a commit
to platformsh/wordpress-performance
that referenced
this pull request
Jul 18, 2024
…tors Prevent issues (e.g. links being underlined) caused by a bump in CSS specificity for top-level element-only global element styles. Backports the PHP changes from WordPress/gutenberg#63403. Fixes #61630. Fixes #61660. Props aaronrobertshaw, andrewserong, noisysocks. Built from https://develop.svn.wordpress.org/trunk@58749 git-svn-id: https://core.svn.wordpress.org/trunk@58151 1a063a9b-81f0-0310-95a4-ce76da25c4cd
pento
pushed a commit
to WordPress/wordpress-develop
that referenced
this pull request
Jul 18, 2024
…tors. Prevent issues (e.g. links being underlined) caused by a bump in CSS specificity for top-level element-only global element styles. Ref: PHP changes from WordPress/gutenberg#63403. Reviewed by hellofromTonya. Merges [58749] to the 6.6 branch. Props aaronrobertshaw, andrewserong, noisysocks, annubis, butterflymedia, clarktbt, hellofromTonya, jorbin, joedolson, swissspidy, courane01, raquelandefeld, talldanwp, markhowellsmead, youknowriad, poena, cbirdsong. Fixes #61630, #61660. git-svn-id: https://develop.svn.wordpress.org/branches/6.6@58751 602fd350-edb4-49c9-b593-d223f7449a82
markjaquith
pushed a commit
to markjaquith/WordPress
that referenced
this pull request
Jul 18, 2024
…tors. Prevent issues (e.g. links being underlined) caused by a bump in CSS specificity for top-level element-only global element styles. Ref: PHP changes from WordPress/gutenberg#63403. Reviewed by hellofromTonya. Merges [58749] to the 6.6 branch. Props aaronrobertshaw, andrewserong, noisysocks, annubis, butterflymedia, clarktbt, hellofromTonya, jorbin, joedolson, swissspidy, courane01, raquelandefeld, talldanwp, markhowellsmead, youknowriad, poena, cbirdsong. Fixes #61630, #61660. Built from https://develop.svn.wordpress.org/branches/6.6@58751 git-svn-id: http://core.svn.wordpress.org/branches/6.6@58153 1a063a9b-81f0-0310-95a4-ce76da25c4cd
ellatrix
removed
the
Backport to WP Minor Release
|
Will this also address the padding over rides on the body tag. if you have body{padding-top:150px} for say a fixed header the new root specificity will overide it |
carstingaxion
pushed a commit
to carstingaxion/gutenberg
that referenced
this pull request
Jul 18, 2024
…WordPress#63403) Co-authored-by: aaronrobertshaw <aaronrobertshaw@git.wordpress.org> Co-authored-by: talldan <talldanwp@git.wordpress.org> Co-authored-by: andrewserong <andrewserong@git.wordpress.org> Co-authored-by: youknowriad <youknowriad@git.wordpress.org> Co-authored-by: carolinan <poena@git.wordpress.org> Co-authored-by: wolffe <butterflymedia@git.wordpress.org>
6 tasks
12 tasks
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.
Fixes: #63345
What?
With the levelling of CSS specificity in #61638, it resulted in a bump in specificity for top level element-only selectors e.g. links, h1-6, etc. This PR avoids wrapping such selectors to maintain the previous specificity in <=6.5.
Why?
If themes defined element styles that used only elements in the selector, the
0-1-0from the:root :where()wrapped selectors would override them. This allows selectors such asheader nav ul li ato continue to take precedence over our default core top level element styles.How?
Avoids wrapping the top-level element selectors in
:root :where()unless those element selectors already used class level selectors. Pseudo selectors, e.g.:hoveror:focus, are class-level selectors as well and this PR also makes sure they are capped at0-1-0for correct nesting of block style variations etc.Testing Instructions
After each step below, make sure that the same styles are applied on the frontend.
header nav ul li a. You'll need to toggle the custom HTML block preview for it to pick up the custom CSS.styles.elementsandstyles.blocks.core/group.elements.linkstyles. The following snippets can be used to create theme.json partial files within the theme's/stylesdirectory which will then be registered as block style variations.Example Block Style Variation Partials
{ "$schema": "https://schemas.wp.org/trunk/theme.json", "version": 3, "title": "Custom Links", "slug": "custom-links", "blockTypes": [ "core/group" ], "styles": { "elements": { "link": { "color": { "text": "crimson" }, ":hover": { "color": { "text": "darkmagenta" } } }, "button": { "color": { "background": "purple", "text": "white" }, ":hover": { "color": { "background": "darkorchid" } } } }, "blocks": { "core/group": { "elements": { "link": { "color": { "text": "dodgerblue" }, ":hover": { "color": { "text": "darkseagreen" } } }, "heading": { "color": { "text": "teal" } } } } } } }{ "$schema": "https://schemas.wp.org/trunk/theme.json", "version": 3, "title": "Alt Links", "slug": "alt-links", "blockTypes": [ "core/group" ], "styles": { "elements": { "link": { "color": { "text": "green" }, ":hover": { "color": { "text": "lime" } } } }, "blocks": { "core/group": { "elements": { "link": { "color": { "text": "coral" }, ":hover": { "color": { "text": "brown" } } } } } } } }0-1-0specificityheadingandcitea test, they should not have their selectors wrapped unless the style includes a pseudo selectorbuttonandcaptiona run as well. Their selectors should be wrapped in:root :where()at all times.Screenshots or screencast
Screen.Recording.2024-07-11.at.5.07.27.PM.mp4