Global Styles: Fix block custom CSS pseudo element selectors #63980
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
Closed
2 tasks
|
Size Change: +72 B (0%) Total Size: 1.76 MB
ℹ️ View Unchanged
|
|
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: @harlet. 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. |
|
Backport is available in WordPress/wordpress-develop#7097. |
aaronrobertshaw
added
the
Backport to WP Minor Release
andrewserong
approved these changes
Jul 26, 2024
|
I'm writing from mobile as this goes so fast and I don't know if I get to test before you merge. |
|
Good question @harlet 👍
This PR does not take into account the proposed selector. It only fixes two issues noted in the description.
A compound selector with two I confirmed this on a site using a vanilla WP 6.5.5 install and no plugins. Using a custom css snippet such as To my knowledge, the custom CSS feature in Global Styles wasn't meant as a complete 1:1 replacement for CSS stylesheets as it isn't really feasible here to re-implement the entire CSS spec. |
aaronrobertshaw
force-pushed
the
fix/block-custom-css-pseudo-element-selectors
branch
from
7ee3d8c
to
b7b61ed
Compare
ramonjd
approved these changes
Jul 30, 2024
There was a problem hiding this comment.
I've specifically tested pseudo elements, with several variants ::before, ::first-letter, ::selection
Also tested some nested rules (e.g., $.test {}) to ensure they still work
CSS before
:root :where(.wp-block-heading){}:root :where(.wp-block-heading::before ){content: 'Foo'}
After
:root :where(.wp-block-heading)::before{content: 'Foo'}
|
Thanks for the reviews and testing 🙇 I'll get this merged so it is one step closer for the next point release. |
aaronrobertshaw
deleted the
fix/block-custom-css-pseudo-element-selectors
branch
12 tasks
pento
pushed a commit
to WordPress/wordpress-develop
that referenced
this pull request
Aug 14, 2024
Fixes a regression introduced in [58241] where selectors with pseudo elements are wrapped within `:where()` causing malformed CSS and the CSS rule(s) not being applied. When processing custom CSS for blocks, this changeset: * Strips the pseudo-elements from the original nested selector, performs the required wrapping in `:root :where`, then re-appends the pseudo-element selector with its leading combinators if present. * Removes empty CSS rules. It includes the PHP changes. Reference: * PHP changes from [WordPress/gutenberg#63980 Gutenberg PR 63980]. Follow-up to [58241], [56812], [55216]. Props aaronrobertshaw, wongjn, harlet7, dballari, ramonopoly, andrewserong, aristath, hellofromTonya. Fixes #61769. git-svn-id: https://develop.svn.wordpress.org/trunk@58896 602fd350-edb4-49c9-b593-d223f7449a82
|
PHP changes committed to WordPress Core's |
markjaquith
pushed a commit
to markjaquith/WordPress
that referenced
this pull request
Aug 14, 2024
Fixes a regression introduced in [58241] where selectors with pseudo elements are wrapped within `:where()` causing malformed CSS and the CSS rule(s) not being applied. When processing custom CSS for blocks, this changeset: * Strips the pseudo-elements from the original nested selector, performs the required wrapping in `:root :where`, then re-appends the pseudo-element selector with its leading combinators if present. * Removes empty CSS rules. It includes the PHP changes. Reference: * PHP changes from [WordPress/gutenberg#63980 Gutenberg PR 63980]. Follow-up to [58241], [56812], [55216]. Props aaronrobertshaw, wongjn, harlet7, dballari, ramonopoly, andrewserong, aristath, hellofromTonya. Fixes #61769. Built from https://develop.svn.wordpress.org/trunk@58896 git-svn-id: http://core.svn.wordpress.org/trunk@58292 1a063a9b-81f0-0310-95a4-ce76da25c4cd
github-actions bot
pushed a commit
to platformsh/wordpress-performance
that referenced
this pull request
Aug 14, 2024
Fixes a regression introduced in [58241] where selectors with pseudo elements are wrapped within `:where()` causing malformed CSS and the CSS rule(s) not being applied. When processing custom CSS for blocks, this changeset: * Strips the pseudo-elements from the original nested selector, performs the required wrapping in `:root :where`, then re-appends the pseudo-element selector with its leading combinators if present. * Removes empty CSS rules. It includes the PHP changes. Reference: * PHP changes from [WordPress/gutenberg#63980 Gutenberg PR 63980]. Follow-up to [58241], [56812], [55216]. Props aaronrobertshaw, wongjn, harlet7, dballari, ramonopoly, andrewserong, aristath, hellofromTonya. Fixes #61769. Built from https://develop.svn.wordpress.org/trunk@58896 git-svn-id: https://core.svn.wordpress.org/trunk@58292 1a063a9b-81f0-0310-95a4-ce76da25c4cd
|
Thank you for committing this one @hellofromtonya 🙇 |
vcanales
pushed a commit
that referenced
this pull request
Sep 4, 2024
Unlinked contributors: harlet. Co-authored-by: aaronrobertshaw <aaronrobertshaw@git.wordpress.org> Co-authored-by: andrewserong <andrewserong@git.wordpress.org> Co-authored-by: ramonjd <ramonopoly@git.wordpress.org> Co-authored-by: dballari <dballari@git.wordpress.org> Co-authored-by: wongjn <wongjn@git.wordpress.org>
pento
pushed a commit
to WordPress/wordpress-develop
that referenced
this pull request
Sep 4, 2024
Fixes a regression introduced in [58241] where selectors with pseudo elements are wrapped within `:where()` causing malformed CSS and the CSS rule(s) not being applied. When processing custom CSS for blocks, this changeset: * Strips the pseudo-elements from the original nested selector, performs the required wrapping in `:root :where`, then re-appends the pseudo-element selector with its leading combinators if present. * Removes empty CSS rules. It includes the PHP changes. Reference: * PHP changes from [WordPress/gutenberg#63980 Gutenberg PR 63980]. Follow-up to [58241], [56812], [55216]. Reviewed by andrewserong. Merges [58896] to the 6.6 branch. Props aaronrobertshaw, wongjn, harlet7, dballari, ramonopoly, andrewserong, aristath, hellofromTonya. Fixes #61769. git-svn-id: https://develop.svn.wordpress.org/branches/6.6@58987 602fd350-edb4-49c9-b593-d223f7449a82
markjaquith
pushed a commit
to markjaquith/WordPress
that referenced
this pull request
Sep 4, 2024
Fixes a regression introduced in [58241] where selectors with pseudo elements are wrapped within `:where()` causing malformed CSS and the CSS rule(s) not being applied. When processing custom CSS for blocks, this changeset: * Strips the pseudo-elements from the original nested selector, performs the required wrapping in `:root :where`, then re-appends the pseudo-element selector with its leading combinators if present. * Removes empty CSS rules. It includes the PHP changes. Reference: * PHP changes from [WordPress/gutenberg#63980 Gutenberg PR 63980]. Follow-up to [58241], [56812], [55216]. Reviewed by andrewserong. Merges [58896] to the 6.6 branch. Props aaronrobertshaw, wongjn, harlet7, dballari, ramonopoly, andrewserong, aristath, hellofromTonya. Fixes #61769. Built from https://develop.svn.wordpress.org/branches/6.6@58987 git-svn-id: http://core.svn.wordpress.org/branches/6.6@58383 1a063a9b-81f0-0310-95a4-ce76da25c4cd
talldan
added a commit
that referenced
this pull request
Sep 4, 2024
* Fix canvas issues by removing VisualEditor’s height (#63724) Unlinked contributors: wp-seopress. Co-authored-by: t-hamano <wildworks@git.wordpress.org> Co-authored-by: carolinan <poena@git.wordpress.org> * Post Editor: Prevent popover from being hidden by metabox (#63939) * Post Editor: Prevent popover from being hidden by metabox * Use `.interface-interface-skeleton__content` instead of `.interface-interface-skeleton__body` Co-authored-by: t-hamano <wildworks@git.wordpress.org> Co-authored-by: stokesman <presstoke@git.wordpress.org> Co-authored-by: talldan <talldanwp@git.wordpress.org> Co-authored-by: Rishit30G <rishit30g@git.wordpress.org> Co-authored-by: dhananjaykuber <dhananjaykuber@git.wordpress.org> * Global Styles: Fix block custom CSS pseudo element selectors (#63980) Unlinked contributors: harlet. Co-authored-by: aaronrobertshaw <aaronrobertshaw@git.wordpress.org> Co-authored-by: andrewserong <andrewserong@git.wordpress.org> Co-authored-by: ramonjd <ramonopoly@git.wordpress.org> Co-authored-by: dballari <dballari@git.wordpress.org> Co-authored-by: wongjn <wongjn@git.wordpress.org> * Avoid errors for post types without a 'menu_icon' (#64015) Unlinked contributors: karan4official. Co-authored-by: Mamaduka <mamaduka@git.wordpress.org> Co-authored-by: t-hamano <wildworks@git.wordpress.org> * Data Views: Don't render action modal when there are no eligible items (#64250) Co-authored-by: Mamaduka <mamaduka@git.wordpress.org> Co-authored-by: youknowriad <youknowriad@git.wordpress.org> * Post editor: apply space below content using a pseudo-element instead of padding-bottom (#64639) Co-authored-by: talldan <talldanwp@git.wordpress.org> Co-authored-by: stokesman <presstoke@git.wordpress.org> Co-authored-by: t-hamano <wildworks@git.wordpress.org> Co-authored-by: carolinan <poena@git.wordpress.org> Co-authored-by: PC888 <kracked888@git.wordpress.org> * Featured Image Block: Reduce CSS specificity (#64463) Co-authored-by: dsas <dsas@git.wordpress.org> Co-authored-by: aaronrobertshaw <aaronrobertshaw@git.wordpress.org> Co-authored-by: talldan <talldanwp@git.wordpress.org> Co-authored-by: ramonjd <ramonopoly@git.wordpress.org> Co-authored-by: andrewserong <andrewserong@git.wordpress.org> * Inserter: use lighter grammar parse to check allowed status (#64902) Co-authored-by: ellatrix <ellatrix@git.wordpress.org> Co-authored-by: Mamaduka <mamaduka@git.wordpress.org> Co-authored-by: jsnajdr <jsnajdr@git.wordpress.org> Co-authored-by: tyxla <tyxla@git.wordpress.org> * Prepare JSON schemas for Draft 7 update (#63582) Co-authored-by: ajlende <ajlende@git.wordpress.org> Co-authored-by: t-hamano <wildworks@git.wordpress.org> Co-authored-by: scruffian <scruffian@git.wordpress.org> * Fix missing ref support for textAlign and textColumns in theme.json schema (#63625) * Add missing ref support for textAlign and textColumns * Update the theme.json reference docs Co-authored-by: ajlende <ajlende@git.wordpress.org> Co-authored-by: t-hamano <wildworks@git.wordpress.org> Co-authored-by: jeryj <jeryj@git.wordpress.org> * Don't allow duplicating template parts in non-block-based themes (#64379) Co-authored-by: t-hamano <wildworks@git.wordpress.org> Co-authored-by: Mamaduka <mamaduka@git.wordpress.org> Co-authored-by: MadtownLems <madtownlems@git.wordpress.org> * Fix bumped specificity for layout styles in non-iframed editor (#64076) * Fix too specific layout styles in non-iframed editor * Ensure first/last child rules take precedence * Adjust selectors so that `> :first-child`/`> :last-child` still has 0,2,0 specificity to override theme.json spacing * Update tests * Update client side layout selectors to match theme json * Add backport changelog ---- Co-authored-by: talldan <talldanwp@git.wordpress.org> Co-authored-by: andrewserong <andrewserong@git.wordpress.org> Co-authored-by: ramonjd <ramonopoly@git.wordpress.org> Co-authored-by: aaronrobertshaw <aaronrobertshaw@git.wordpress.org> * Update postcss-prefixwrap dependency to 1.51.0 to fix prefixing in `:where` selectors (#64458) * Update postcss-prefixwrap dependency to 1.51.0 to fix prefixing in :where selectors * Add extra test for :where with a pseudo selector ---- Co-authored-by: talldan <talldanwp@git.wordpress.org> Co-authored-by: aaronrobertshaw <aaronrobertshaw@git.wordpress.org> Co-authored-by: andrewserong <andrewserong@git.wordpress.org> Co-authored-by: andreiglingeanu <andreiglingeanu@git.wordpress.org> * Revert "Update postcss-prefixwrap dependency to 1.51.0 to fix prefixing in `:where` selectors (#64458)" This reverts commit 53a370e. * Update postcss-prefixwrap dependency to 1.51.0 to fix prefixing in `:where` selectors (#64458) * Update postcss-prefixwrap dependency to 1.51.0 to fix prefixing in :where selectors * Add extra test for :where with a pseudo selector ---- Co-authored-by: talldan <talldanwp@git.wordpress.org> Co-authored-by: aaronrobertshaw <aaronrobertshaw@git.wordpress.org> Co-authored-by: andrewserong <andrewserong@git.wordpress.org> Co-authored-by: andreiglingeanu <andreiglingeanu@git.wordpress.org> * Post Editor: fix click space after post content to append (#64992) * Fix minimally * Revise comment * Stop propagation and don’t prevent default * Insert default block if no blocks are present * re-build package lock to match format * Revert "Inserter: use lighter grammar parse to check allowed status (#64902)" This reverts commit 9b9bbe8. --------- Co-authored-by: Mitchell Austin <mr.fye@oneandthesame.net> Co-authored-by: t-hamano <wildworks@git.wordpress.org> Co-authored-by: carolinan <poena@git.wordpress.org> Co-authored-by: Aki Hamano <54422211+t-hamano@users.noreply.github.com> Co-authored-by: stokesman <presstoke@git.wordpress.org> Co-authored-by: talldan <talldanwp@git.wordpress.org> Co-authored-by: Rishit30G <rishit30g@git.wordpress.org> Co-authored-by: dhananjaykuber <dhananjaykuber@git.wordpress.org> Co-authored-by: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Co-authored-by: aaronrobertshaw <aaronrobertshaw@git.wordpress.org> Co-authored-by: andrewserong <andrewserong@git.wordpress.org> Co-authored-by: ramonjd <ramonopoly@git.wordpress.org> Co-authored-by: dballari <dballari@git.wordpress.org> Co-authored-by: wongjn <wongjn@git.wordpress.org> Co-authored-by: George Mamadashvili <georgemamadashvili@gmail.com> Co-authored-by: Mamaduka <mamaduka@git.wordpress.org> Co-authored-by: youknowriad <youknowriad@git.wordpress.org> Co-authored-by: Daniel Richards <daniel.richards@automattic.com> Co-authored-by: PC888 <kracked888@git.wordpress.org> Co-authored-by: Dean Sas <dean@deansas.org> Co-authored-by: dsas <dsas@git.wordpress.org> Co-authored-by: Ella <4710635+ellatrix@users.noreply.github.com> Co-authored-by: ellatrix <ellatrix@git.wordpress.org> Co-authored-by: jsnajdr <jsnajdr@git.wordpress.org> Co-authored-by: tyxla <tyxla@git.wordpress.org> Co-authored-by: Alex Lende <alex+github.com@lende.xyz> Co-authored-by: ajlende <ajlende@git.wordpress.org> Co-authored-by: scruffian <scruffian@git.wordpress.org> Co-authored-by: jeryj <jeryj@git.wordpress.org> Co-authored-by: MadtownLems <madtownlems@git.wordpress.org>
pento
pushed a commit
to WordPress/wordpress-develop
that referenced
this pull request
Sep 4, 2024
Updates the versions from the [WordPress/gutenberg@a74a70e released packages] for the following bugfixes: * [WordPress/gutenberg#63980 Global Styles: Fix block custom CSS pseudo element selectors] * [WordPress/gutenberg#64463 Featured Image Block: Reduce CSS specificity] * [WordPress/gutenberg#64076 Fix bumped specificity for layout styles in non-iframed editor] * [WordPress/gutenberg#64379 Don't allow duplicating template parts in non-block-based themes] * [WordPress/gutenberg#64250 Data Views: Don't render action modal when there are no eligible items] * [WordPress/gutenberg#63724 Fix canvas issues by removing VisualEditor’s height] * [WordPress/gutenberg#64992 Post Editor: fix click space after post content to append] * [WordPress/gutenberg#63939 Post Editor: Prevent popover from being hidden by metabox] * [WordPress/gutenberg#64639 Post editor: apply space below content using a pseudo-element instead of padding-bottom] * [WordPress/gutenberg#64015 Avoid errors for post types without a 'menu_icon'] * [WordPress/gutenberg#64458 Update postcss-prefixwrap dependency to 1.51.0 to fix prefixing in :where selectors] Props vcanales. Fixes #61982. See #61704, #61769, #61829. git-svn-id: https://develop.svn.wordpress.org/trunk@58988 602fd350-edb4-49c9-b593-d223f7449a82
markjaquith
pushed a commit
to markjaquith/WordPress
that referenced
this pull request
Sep 4, 2024
Updates the versions from the [WordPress/gutenberg@a74a70e released packages] for the following bugfixes: * [WordPress/gutenberg#63980 Global Styles: Fix block custom CSS pseudo element selectors] * [WordPress/gutenberg#64463 Featured Image Block: Reduce CSS specificity] * [WordPress/gutenberg#64076 Fix bumped specificity for layout styles in non-iframed editor] * [WordPress/gutenberg#64379 Don't allow duplicating template parts in non-block-based themes] * [WordPress/gutenberg#64250 Data Views: Don't render action modal when there are no eligible items] * [WordPress/gutenberg#63724 Fix canvas issues by removing VisualEditor’s height] * [WordPress/gutenberg#64992 Post Editor: fix click space after post content to append] * [WordPress/gutenberg#63939 Post Editor: Prevent popover from being hidden by metabox] * [WordPress/gutenberg#64639 Post editor: apply space below content using a pseudo-element instead of padding-bottom] * [WordPress/gutenberg#64015 Avoid errors for post types without a 'menu_icon'] * [WordPress/gutenberg#64458 Update postcss-prefixwrap dependency to 1.51.0 to fix prefixing in :where selectors] Props vcanales. Fixes #61982. See #61704, #61769, #61829. Built from https://develop.svn.wordpress.org/trunk@58988 git-svn-id: http://core.svn.wordpress.org/trunk@58384 1a063a9b-81f0-0310-95a4-ce76da25c4cd
github-actions bot
pushed a commit
to gilzow/wordpress-performance
that referenced
this pull request
Sep 4, 2024
Updates the versions from the [WordPress/gutenberg@a74a70e released packages] for the following bugfixes: * [WordPress/gutenberg#63980 Global Styles: Fix block custom CSS pseudo element selectors] * [WordPress/gutenberg#64463 Featured Image Block: Reduce CSS specificity] * [WordPress/gutenberg#64076 Fix bumped specificity for layout styles in non-iframed editor] * [WordPress/gutenberg#64379 Don't allow duplicating template parts in non-block-based themes] * [WordPress/gutenberg#64250 Data Views: Don't render action modal when there are no eligible items] * [WordPress/gutenberg#63724 Fix canvas issues by removing VisualEditor’s height] * [WordPress/gutenberg#64992 Post Editor: fix click space after post content to append] * [WordPress/gutenberg#63939 Post Editor: Prevent popover from being hidden by metabox] * [WordPress/gutenberg#64639 Post editor: apply space below content using a pseudo-element instead of padding-bottom] * [WordPress/gutenberg#64015 Avoid errors for post types without a 'menu_icon'] * [WordPress/gutenberg#64458 Update postcss-prefixwrap dependency to 1.51.0 to fix prefixing in :where selectors] Props vcanales. Fixes #61982. See #61704, #61769, #61829. Built from https://develop.svn.wordpress.org/trunk@58988 git-svn-id: https://core.svn.wordpress.org/trunk@58384 1a063a9b-81f0-0310-95a4-ce76da25c4cd
pento
pushed a commit
to WordPress/wordpress-develop
that referenced
this pull request
Sep 4, 2024
Updates the versions from the [WordPress/gutenberg@a74a70e released packages] for the following bugfixes: - [WordPress/gutenberg#63980 Global Styles: Fix block custom CSS pseudo element selectors] - [WordPress/gutenberg#64463 Featured Image Block: Reduce CSS specificity] - [WordPress/gutenberg#64076 Fix bumped specificity for layout styles in non-iframed editor] - [WordPress/gutenberg#64379 Don't allow duplicating template parts in non-block-based themes] - [WordPress/gutenberg#64250 Data Views: Don't render action modal when there are no eligible items] - [WordPress/gutenberg#63724 Fix canvas issues by removing VisualEditor’s height] - [WordPress/gutenberg#64992 Post Editor: fix click space after post content to append] - [WordPress/gutenberg#63939 Post Editor: Prevent popover from being hidden by metabox] - [WordPress/gutenberg#64639 Post editor: apply space below content using a pseudo-element instead of padding-bottom] - [WordPress/gutenberg#64015 Avoid errors for post types without a 'menu_icon'] - [WordPress/gutenberg#64458 Update postcss-prefixwrap dependency to 1.51.0 to fix prefixing in :where selectors] Reviewed by jorbin, hellofromTonya. Merges [58988] to the 6.6 branch. Props vcanales. Fixes #61982. See #61704, #61769, #61829. git-svn-id: https://develop.svn.wordpress.org/branches/6.6@58989 602fd350-edb4-49c9-b593-d223f7449a82
markjaquith
pushed a commit
to markjaquith/WordPress
that referenced
this pull request
Sep 4, 2024
Updates the versions from the [WordPress/gutenberg@a74a70e released packages] for the following bugfixes: - [WordPress/gutenberg#63980 Global Styles: Fix block custom CSS pseudo element selectors] - [WordPress/gutenberg#64463 Featured Image Block: Reduce CSS specificity] - [WordPress/gutenberg#64076 Fix bumped specificity for layout styles in non-iframed editor] - [WordPress/gutenberg#64379 Don't allow duplicating template parts in non-block-based themes] - [WordPress/gutenberg#64250 Data Views: Don't render action modal when there are no eligible items] - [WordPress/gutenberg#63724 Fix canvas issues by removing VisualEditor’s height] - [WordPress/gutenberg#64992 Post Editor: fix click space after post content to append] - [WordPress/gutenberg#63939 Post Editor: Prevent popover from being hidden by metabox] - [WordPress/gutenberg#64639 Post editor: apply space below content using a pseudo-element instead of padding-bottom] - [WordPress/gutenberg#64015 Avoid errors for post types without a 'menu_icon'] - [WordPress/gutenberg#64458 Update postcss-prefixwrap dependency to 1.51.0 to fix prefixing in :where selectors] Reviewed by jorbin, hellofromTonya. Merges [58988] to the 6.6 branch. Props vcanales. Fixes #61982. See #61704, #61769, #61829. Built from https://develop.svn.wordpress.org/branches/6.6@58989 git-svn-id: http://core.svn.wordpress.org/branches/6.6@58385 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.
Fixes: #63932
What?
Fixes two problems with custom css for blocks:
:where()Why?
How?
When processing custom CSS for blocks, strip out pseudo-elements from the original nested selector, perform the required wrapping in
:root :where, then re-append the pseudo-element selector with its leading combinators if present.Testing Instructions
&::before { content: 'Foo' }Screenshots or screencast