Block custom CSS: Fix incorrect CSS when multiple root selectors

[wildworks]

Backports changes to PHP files made in the Gutenberg plugin with: ​https://github.com/WordPress/gutenberg/pull/53602

This patch fixes a problem where nested custom CSS is not output correctly when a block has multiple root selectors.

Testing Instructions

• Insert two types of List blocks in the post editor:

<!-- wp:list -->
<ul><!-- wp:list-item -->
<li>List Item</li>
<!-- /wp:list-item -->
<!-- wp:list-item -->
<li>List Item</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list -->
<!-- wp:list {"ordered":true} -->
<ol><!-- wp:list-item -->
<li>List Item</li>
<!-- /wp:list-item -->
<!-- wp:list-item -->
<li>List Item</li>
<!-- /wp:list-item --></ol>
<!-- /wp:list -->

• In the src/wp-content/themes/twentytwentythree/theme.json file, apply custom CSS to the list block as follows:

{
	...
	"styles": {
		"blocks": {
			"core/list": {
				"css": "background: #ccc; & ::marker{ color: red;}"
			}
		},
		...
	},
	...

}

• View the post.
• The gray background color and red marker style should be correctly applied to both the Ordered and Unordered lists.

• Check that the global style is output correctly as shown below.

<style id='global-styles-inline-css'>
ol, ul{
	background: #ccc;
}
ol ::marker, ul ::marker{
	color: red;
}
</style>

• If this patch is not applied, nested CSS will not be output correctly as shown below.

<style id='global-styles-inline-css'>
ol, ul{
	background: #ccc;
}
ol, ul ::marker{
	color: red;
}
</style>

[mikachan]

Hi @isabel_brison, @bernhard-reiter. Pinging you both as I've noticed you as owners of similar tickets 🙏

This ticket and patch is a backport of the PHP files from ​this Gutenberg PR, mentioned above. It's a bug fix that I believe should be included in either 6.4 Beta 3 or at the latest RC1. I'm unsure of the process from here around testing and considering it for commit. Hoping you can help, thank you!

Also tentatively cc. @karmatosed for when you're back.

[wildworks]

Let me give you a little background as it may help you decide.

The problem is that custom CSS is not being output correctly, both in the frontend and in the editor. This custom CSS is generated via PHP on the front end and via JavaScript in the editor. ​Gutenberg's PR fixed both aspects of this.

The editor side, i.e. JavaScript, fixes are part of the Gutenberg package and were backported to WordPress 6.4 Beta2. However, the PHP changes (i.e. the patch attached to this ticket) have not yet been committed to core, so the front end will still have issues.

Therefore, a core commit is required to resolve this issue on the front end as well.

[isabel_brison]

Thanks @wildworks! I can help with reviews next week if this hasn't been committed by then. Given that the corresponding Gutenberg PR has already been cherry-picked to the release branch, I guess this patch should go in asap.

To help things along, would you be able to open a PR on ​https://github.com/WordPress/wordpress-develop with the patch so CI can run on it?

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

[wildworks]

Sorry for the late reply. I've submitted a pull request.

By the way, this PHP code has exactly the same logic as the JS on the editor side: ​https://github.com/WordPress/gutenberg/blob/trunk/packages/block-editor/src/components/global-styles/use-global-styles-output.js#L1132-L1158

If the PHP code that has been changed as a result of the review is committed on the core side, it may be necessary to submit a PR on the Gutenberg side and backport it again to reflect it on the JS side.

[isabel_brison]

In 56812:

Editor: fix incorrect block custom CSS output.

Fixes output of block custom CSS when multiple rules require a descendant selector.

Props wildworks, mikachan.
Fixes #59499.

Committed in r56812.