FSE: Submenus with background color inherit CSS on pages where list block is present

[syhussaini]

2023-04-18 Update - Findings show that this is not unique to Bitácora, but to any FSE theme where the submenu has a background color. Relevant Gutenberg report: WordPress/gutenberg#49445 -cuemarie

Quick summary

Bitácora Theme shows submenus with additional Padding when the Page has a list of items added using List Block. The submenu appears correctly when the page without a List Block is viewed.

Please see this image for reference:

Steps to reproduce

1. Activate Bitácora theme.
2. Now add submenu items in the menu
3. Add a new page with List Block
4. Now view the page with the List Block to see the menu appear with additional padding.submenu items

What you expected to happen

The menu should appear the same as it appears when on a page without a List Block.

What actually happened

The submenu appears with additional padding.

Impact

Some (< 50%)

Available workarounds?

Yes, easy to implement

Platform (Simple and/or Atomic)

Simple

Logs or notes

No response

[syhussaini]

user on this ticket 6211163-zen is impacted with this issue.

[github-actions]

Support References

This comment is automatically generated. Please do not edit it.

• 6211163-zen
• 6158230-zen
• 6267568-zen
• 6279660-zen
• 6318112-zen
• 6569091-zen
• 6773296-zen
• 7391190-zen

[cuemarie]

Very similar issue reported here on Munchies theme:

• Muchies theme: dropdown navigation breaks on pages with lists #75244

I've been having trouble replicating but perhaps between the two I can figure this out :)

[cuemarie]

📌 SCRUBBING : RESULT - Replicated / Could Not Replicate / Uncertain

• Tested on Simple – Replicated
• Tested on Atomic – Replicated
• Replicable outside of Dotcom – Yes

📌 FINDINGS/SCREENSHOTS/VIDEO

• I was able to replicate this on a brand new Free site, created today:

c6K55E.mp4

Looks like it's stemming from this inline CSS:

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

Which is overriding the default padding setting for the .wp-block-navigation ul:

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

Same result on AT and Simple, tested with CTGL, Vetro, and

AT Site, Vetro

Simple Site, CTGL

**Simple Site, TT3 (Default)

📌 ACTIONS

• Assigned to Cylon
• Looks like this was reported here as well: List Block CSS changes padding of navigation with backgrounds WordPress/gutenberg#49445

[cuemarie]

User report from #75244, who would like to be notified when this is resolved:

• 6158230-zd-woothemes

[cuemarie]

Ran into this here: 42217934-hc

Provided the following CSS as a workaround:

/* fix submenu padding bug | xxx-hc [XX] */
.wp-block-navigation ul, .wp-block-navigation ul li {
  list-style: none;
  padding: 0;
}

[cuemarie]

Also related:

• List block: style rule conflicts with Navigation block menu item with background color WordPress/gutenberg#50342

[cuemarie]

Created a more generalized core report here:

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

[ariel-maidana]

6267568-zd-woothemes
Please notify the user once this issue is fixed.

[ariel-maidana]

Another case here: 6279660-zd-woothemes
Please let the user know once this issue is fixed.

[sourourn]

Another case here: 6318112-zd-woothemes
Please let the user know once this issue is fixed.

[jp-imagines]

Came across another instance in 6569091-zd-woothemes, gave CSS to fix. Follow-up not needed.

[CodeAllNightNDay]

Encountered the issue here:
6773296-zen

Gave CSS for the workaround.

[eduardozulian]

Another report in 7391190-zen, using the Munchies theme. Shared the following CSS as a workaround:

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

[annezazu]

Digging through layers of reports on the Gutenberg GitHub repo and this should have been resolved:

WordPress/gutenberg#50486 (comment)

I am going to close this out but let's please reopen and/or flag for me if folks can still replicate this. Thank you!