Navigation block submenu dropdown spacing styles overridden by List block

[lushkant]

Description

I found this bug while working with the Navigation block dropdown submenus. Specifically, the spacing styles of the dropdown menu gets overridden (at the front-end only, works fine in the editor) by List block styles when there is a submenu background color set in Navigation block.

These are the styles coming from the List block -

ol.has-background, ul.has-background {
    padding: 1.25em 2.375em;
}

These are the styles that should take effect but gets overridden by the List block styles mentioned above-

.wp-block-navigation ul, .wp-block-navigation ul li {
    list-style: none;
    padding: 0;
}

This issue can be reproduced in any core theme, and I have tested it with TwentyTwentyFour to TwentyTwentyOne themes.

Proposed Solution -

To add preceding values in Navigation block styles -

.wp-block-navigation ul.has-background {
    padding: 0;
}

I have tested this and it works without breaking any existing behavior.
I'll now go on to add a PR, I'm open to making any changes in it if there's an issue with the current solution.

Step-by-step reproduction instructions

1. Go to the block editor screen on any page.
2. Add a Navigation block, along with a submenu and dropdown items.
3. Set the Submenu overlay Background, Text color in the Navigation block (Take a look at the screenshots below for ref.)
4. Make sure to add/have a List block somewhere in that page.
5. Save/publish and visit live preview.
6. Hover/click over the submenu and see the dropdown taking additional spacing from List block.

Screenshots, screen recording, code snippet

1. Screencast of the issue -
   https://www.youtube.com/watch?v=-PiupdsKqxU&ab_channel=KrishnaisIndiehacking

2. Screenshot from the block editor where dropdowns work as expected -

3. Screenshot from the front-end/live preview where the issue is present -

4. Style settings tab reference -

Environment info

• WordPress v6.4.2
• Gutenberg v17.4.1
• Themes: Any Core Theme
• Arc Browser v1.21.3

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

[ramonjd]

I think this is a duplicate of:

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

Also related:

• Add class to <ul> in List block. #12420

A longer-term fix might be to add a classname to the List Block. See:

• Add block class name to the list block #56469

[talldan]

Closing as a duplicate

[lushkant]

@talldan @ramonjd My bad I searched everywhere for Navigation block related issues but should have also looked at List block issues. I'll remember to do so next time.

Still can you guys point me how to find if related/similar issue is already present, I mean is there any other rather efficient way to go at finding it?

[talldan]

It is difficult with so many issues on the repo. I don't really have any good advice other than trying different labels and search terms. Often I know about the existence of duplicates from reading or being involved in the discussion on the other issue.

[lushkant]

It is difficult with so many issues on the repo. I don't really have any good advice other than trying different labels and search terms. Often I know about the existence of duplicates from reading or being involved in the discussion on the other issue.

Makes sense, I will try to be more involved as well in the coming days so that I don't end up posting a duplicate again.

Thank you for your help Daniel 😃