Make WordPress Core

Opened 9 months ago

Closed 8 months ago

Last modified 8 months ago

#59499 closed defect (bug) (fixed)

Block custom CSS: Fix incorrect CSS when multiple root selectors

Reported by: wildworks's profile wildworks Owned by: isabel_brison's profile isabel_brison
Milestone: 6.4 Priority: normal
Severity: normal Version: 6.4
Component: Editor Keywords: gutenberg-merge has-patch
Focuses: Cc:

Description

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>

Attachments (1)

patch.diff (1.4 KB) - added by wildworks 9 months ago.

Download all attachments as: .zip

Change History (10)

@wildworks
9 months ago

#1 @wildworks
9 months ago

  • Keywords has-patch added

#2 @mikachan
9 months ago

  • Component changed from General to Editor
  • Milestone changed from Awaiting Review to 6.4

#3 @mikachan
9 months ago

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.

#4 @wildworks
9 months ago

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.

#5 @isabel_brison
9 months ago

  • Keywords gutenberg-merge added
  • Version set to trunk

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?

#7 @wildworks
9 months ago

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.

#8 @isabel_brison
8 months ago

  • Owner set to isabel_brison
  • Resolution set to fixed
  • Status changed from new to closed

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.

@isabel_brison commented on PR #5427:


8 months ago
#9

Committed in r56812.

Note: See TracTickets for help on using tickets.