Adding css property for core/list markers in theme.json has unexpected css output

[itsamoreh]

Description

I added the following in theme.json for the core/list block:

"styles": {
  "blocks": {
    "core/list": {
      "css": "& ::marker {color: var(--wp--preset--color--pink);}"
    }
  }
}

Works great on unordered lists, but it unexpectedly affects the text for ordered lists.

When you take a look at the CSS produced, you can see why.

ol, ul ::marker {
    color: var(--wp--preset--color--pink);
}

I expect the following to be produced instead:

ol ::marker, ul ::marker {
    color: var(--wp--preset--color--pink);
}

Step-by-step reproduction instructions

1. Style list markers using the css property on the core/list block in theme.json
2. Observe that the wrong css rule is output - ol, ul ::marker instead of ol ::marker, ul ::marker

Screenshots, screen recording, code snippet

No response

Environment info

• WordPress 6.3, bundled version of Gutenberg, a barebones block theme

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[t-hamano]

Thanks for the report. I too think this is a bug.

The list block has two selectors - ul and ol.

However, the process_blocks_custom_css() function that outputs the custom CSS for the block does not take into account the possibility that the $selector variable has a comma-separated string.

gutenberg/lib/class-wp-theme-json-gutenberg.php

Lines 1141 to 1143 in 9394581

	$processed_css .= ( ! str_contains( $part, '{' ) )
	? trim( $selector ) . '{' . trim( $part ) . '}' // If the part doesn't contain braces, it applies to the root level.
	: trim( $selector . $part ); // Prepend the selector, which effectively replaces the "&" character.

I think the selector parser should be improved to handle different cases.

[carolinan]

In addition, the list block should use a block name as a selector, not generic ol and ul.
#12420