Make WordPress Core

Opened 16 months ago

Closed 15 months ago

Last modified 6 months ago

#58071 closed defect (bug) (reported-upstream)

List block forces padding on navigation block with background color

Reported by: ravanh's profile RavanH Owned by:
Milestone: Priority: normal
Severity: normal Version: 6.2
Component: Editor Keywords:
Focuses: Cc:

Description

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.

Attachments (1)

Schermafdruk van 2023-04-04 01-41-55.png (43.3 KB) - added by RavanH 16 months ago.
screen shot

Download all attachments as: .zip

Change History (5)

#1 follow-up: @sabernhardt
15 months ago

  • Component changed from General to Editor
  • Milestone Awaiting Review deleted
  • Resolution set to reported-upstream
  • Status changed from new to closed

Thanks for the report!

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

#2 in reply to: ↑ 1 @RavanH
15 months ago

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

#3 @sabernhardt
15 months ago

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

#4 @sabernhardt
6 months ago

#60338 was marked as a duplicate.

Note: See TracTickets for help on using tickets.