List block: style rule conflicts with Navigation block menu item with background color

[RavanH]

Description

When there is a List block on a page, these style rules are added:

<style id='wp-block-list-inline-css'>
    ol,ul {
        box-sizing: border-box
    }

    ol.has-background,ul.has-background {
        padding: 1.25em 2.375em
    }
</style>

The problem with ul.has-background is that it not only affects the padding of the list block UL but also the Navigation block when the sub-menus are set to have a different background color.

Step-by-step reproduction instructions

1. Create a main menu with submenu items
2. Set a custom Submenu background color for that main navigation block
3. Add a List block to a page
4. Compare the main menu submenu items on the page with the List block to other pages without a list block

Screenshots, screen recording, code snippet

Environment info

• WordPress: 6.3-alpha-55716
• PHP: 8.1.18
• Server: Apache
• Database: mysqli (Server: 10.6.12-MariaDB / Client: mysqlnd 8.1.18)
• Browser: Chrome 113.0.0.0 (Linux)
• Theme: Twenty Twenty-Three 1.1
• MU-Plugins: None activated
• Plugins:
  • Gutenberg 15.7.0
  • WordPress Beta Tester 3.3.7

Note: the issue also occurs on WP 6.2 and without Gutenberg...

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

[RavanH]

My suggestion: make the block list style rules more specific to the List block. For example:

<style id='wp-block-list-inline-css'>
    .wp-block-list {
        box-sizing: border-box
    }

    .wp-block-list.has-background {
        padding: 1.25em 2.375em
    }
</style>

And add the class wp-block-list to the List block element.

[cuemarie]

Created a more generalized report here:

• List Block styles are impacting several other blocks in editor and live site #50486

[iamtakashi]

It'd be great if this gets fixed soon. We need to add custom CSS to every theme to fix this issue.

[jordesign]

Closing this in favour of the duplicate/broader issue mentioned above.
#50486

[RavanH]

Excellent. Thanks @jordesign :)