Global Styles: Prevent empty CSS rules and malformed selectors for custom css for blocks

[aaronrobertshaw]

This ticket tracks the merging of PHP files for the following Gutenberg changes:

• ​https://github.com/WordPress/gutenberg/pull/63980

These changes fix two issues with the generation of custom css for blocks with Global Styles.

1. Empty CSS rules e.g. :root :where(.wp-block-heading){}
2. Malformed pseudo element selectors :root :where(.wp-block-heading::before)

Syncs the changes from ​https://github.com/WordPress/gutenberg/pull/63980

These updates include the PHP fixes for empty CSS rules and invalid selectors for Global Styles custom CSS for blocks.

Please note: JS package updates will be required to resolve the issue in the editor.

#### Testing Instructions

1. In the site editor navigate to Styles > Blocks > Heading > Advanced
2. Add the following into the Custom CSS field: &::before { content: 'Foo' }
3. Ensure the page being edited has a heading block
4. Save and view the frontend
5. Confirm the heading block has a pseudo element displaying the word "Foo".

## Screenshots or screencast

Before	After

Before	After

Trac ticket: https://core.trac.wordpress.org/ticket/61769

I tested along the lines of ​https://github.com/WordPress/gutenberg/pull/63980 also LGTM

Thanks for reviewing so quickly, folks!

[hellofromTonya]

Changing the version to 6.6.0 as it appears [56812] introduced the bug.

Self-assigning for review and commit.

[hellofromTonya]

Test Report

This report validates that the indicated patch addresses the issue.

Patch tested: ​https://github.com/WordPress/wordpress-develop/pull/7097

Environment

• OS: macOS
• Web Server: Core's Docker instance
• PHP: 7.4.29
• WordPress: 6.7-alpha-58576-src
• Browser: Firefox 129.0.1
• Theme: Twenty Twenty-Four
• Active Plugins: None

Actual Results

When reproducing a bug/defect:

• ❌ 'Foo' is not added to the start of each header.
• ❌ the generated CSS is not expected:

:root :where(.wp-block-heading::before ){content: 'Foo'}

Also noting, the following empty CSS exists, which is not expected:

:root :where(.wp-block-heading){}

When testing the bugfix patch:

• ✅ 'Foo' is added to the start of each header.
• ✅ The generated CSS is as expected.

:root :where(.wp-block-heading)::before{content: 'Foo'}

• ✅ The empty CSS no longer exists.

Observations

Using the provided testing instructions, I'm able to reproduce the reported issue and the patch resolves it.

[hellofromTonya]

Patch: ​https://github.com/WordPress/wordpress-develop/pull/7097

• ✅ Tests well for me (see test report).
• ✅ There are multiple test reports and approvals in the PR and the original Gutenberg PR.
• ✅ All PHP changes from the ​original Gutenberg PR are included.

LGTM for commit 👍

[hellofromTonya]

In 58896:

Editor: Fix block custom CSS pseudo element selectors in global styles.

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 ​Gutenberg PR 63980.

Follow-up to [58241], [56812], [55216].

Props aaronrobertshaw, wongjn, harlet7, dballari, ramonopoly, andrewserong, aristath, hellofromTonya.
Fixes #61769.

Committed to trunk via https://core.trac.wordpress.org/changeset/58896.

[hellofromTonya]

Reopening for 2nd committer sign-off to backport [58896] to the 6.6 branch.

[hellofromTonya]

Pinging committers involved in this change for a 2nd committer sign-off to backport it to the 6.6. branch for 6.6.2 RC1 on Sep 4th.

@aaronrobertshaw @andrewserong @talldanwp

[andrewserong]

I've re-tested ​https://github.com/WordPress/wordpress-develop/pull/7097 applied on the 6.6 branch and it's all working correctly. Adding the dev-reviewed keyword, marking this as ready for backporting to the 6.6 branch.

[hellofromTonya]

In 58987:

Editor: Fix block custom CSS pseudo element selectors in global styles.

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 ​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.

[hellofromTonya]

In 58988:

Editor: Update packages for 6.6.2 RC1.

Updates the versions from the ​released packages for the following bugfixes:

• ​Global Styles: Fix block custom CSS pseudo element selectors
• ​Featured Image Block: Reduce CSS specificity
• ​Fix bumped specificity for layout styles in non-iframed editor
• ​Don't allow duplicating template parts in non-block-based themes
• ​Data Views: Don't render action modal when there are no eligible items
• ​Fix canvas issues by removing VisualEditor’s height
• ​Post Editor: fix click space after post content to append
• ​Post Editor: Prevent popover from being hidden by metabox
• ​Post editor: apply space below content using a pseudo-element instead of padding-bottom
• ​Avoid errors for post types without a 'menu_icon'
• ​Update postcss-prefixwrap dependency to 1.51.0 to fix prefixing in :where selectors

Props vcanales.
Fixes #61982.
See #61704, #61769, #61829.

[jorbin]

In 58989:

Editor: Update packages for 6.6.2 RC1.

Updates the versions from the ​released packages for the following bugfixes:

• ​Global Styles: Fix block custom CSS pseudo element selectors
• ​Featured Image Block: Reduce CSS specificity
• ​Fix bumped specificity for layout styles in non-iframed editor
• ​Don't allow duplicating template parts in non-block-based themes
• ​Data Views: Don't render action modal when there are no eligible items
• ​Fix canvas issues by removing VisualEditor’s height
• ​Post Editor: fix click space after post content to append
• ​Post Editor: Prevent popover from being hidden by metabox
• ​Post editor: apply space below content using a pseudo-element instead of padding-bottom
• ​Avoid errors for post types without a 'menu_icon'
• ​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.