Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
itsamoreh opened this issue Aug 11, 2023 · 2 comments · Fixed by #53602
Closed

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

itsamoreh opened this issue Aug 11, 2023 · 2 comments · Fixed by #53602
Assignees
Labels
Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json [Status] In Progress Tracking issues with work in progress [Type] Bug An existing feature does not function as intended

Comments

@itsamoreh
Copy link

itsamoreh commented Aug 11, 2023

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.

screen-capture 2023-08-11 at 7 17 55 PM

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

@itsamoreh itsamoreh changed the title Adding CSS for core/list markers in theme.json has unexpected output Adding CSS for core/list markers in theme.json has unexpected css output Aug 11, 2023
@t-hamano
Copy link
Contributor

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.

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

@t-hamano t-hamano added [Type] Bug An existing feature does not function as intended Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json labels Aug 12, 2023
@t-hamano t-hamano self-assigned this Aug 12, 2023
@t-hamano t-hamano added the [Status] In Progress Tracking issues with work in progress label Aug 12, 2023
@itsamoreh itsamoreh changed the title Adding CSS for core/list markers in theme.json has unexpected css output Adding css property for core/list markers in theme.json has unexpected css output Aug 13, 2023
@carolinan
Copy link
Contributor

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json [Status] In Progress Tracking issues with work in progress [Type] Bug An existing feature does not function as intended
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants