List css added via theme.json are applied globally.

[jdamner]

Description

When using the CSS configuration in the theme.json for list blocks, the selector used by WP is ol, li { ... }. This means that any CSS added here is applied at a global scope, such as to all site furniture, menus even the WP-Admin bar.

I would expect that the list block output to contain a class and then the CSS from the theme.json to be limited to that class. Ie
ol.wp-block-list, ul.wp-block-list { ... }

Step-by-step reproduction instructions

Add the following snippet to theme.json in your theme

{
  "styles": { 
    "blocks": { 
      "core/list": {
        "css": "&:not(ol) > li::marker { content: '— '; color: 'red' }"
        },
      }
    }
}

Visit the site.

Screenshots, screen recording, code snippet

See the admin-bar having the list-style applied.

Environment info

WP 6.4.1, this will affect all browsers and environments though.

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.

This issue was also proposed a long time ago in #12420. As a temporary solution, the code in this comment might be helpful.