List block forces padding on navigation block with background color

[RavanH]

When a navigation block (in page content or in the block theme editor header) has a custom background color set, each UL element in the navigation list will have the class .has-background

When adding a list block to a page or post, that page source will have block specific CSS:

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

This will give the navigation menu an enormous and undesired padding, on each page or post that has a list block.

[RavanH]

screen shot

[sabernhardt]

Thanks for the report!

We're already tracking this issue in ​GB36586 if you would like to follow it and/or add anything there.

[RavanH]

Replying to sabernhardt:

Thanks for the report!

We're already tracking this issue in ​GB36586 if you would like to follow it and/or add anything there.

I'm not sure. The general discussion about when and where additional padding for blocks with a custom background color makes sense seems unrelated to me. Everyone would agree (I think) that in the case of a navigation block submenu item, no additional padding should be set. And indeed it is not expressly given more padding than it already has.

The extra padding comes from a conflicting style rule for another block: the List block. So it is only occurring on pages that include a List block, not on other pages.

My suggestion would be to either make the List block CSS more specific to list block UL/OL elements (extra wp-block-list class makes sense here) or to add CSS to the Navigation block to neutralise the List block CSS (makes less sense to me)...

[sabernhardt]

It's related, though the more general GB30725 might be closer.