Navigation Block links inherits color from List Block color in Global Styles

[liviopv]

Quick summary

No response

Steps to reproduce

1. In Global Styles, set a custom text color for the List Block
2. In the Header Template part, set a custom text color for the Navigation Block that's different the color from Step 1
3. Create a post or page and add a List Block to the content
4. The Navigation Block will inherit the color from the List Block instead of the custom color defined at the block level

What you expected to happen

The Navigation Block should inherit the color defined at block level

What actually happened

The Navigation Block incorrectly inherits the color from a different ol/ul element in the page, the List Block

Browser

Google Chrome/Chromium

Context

Customer report

Platform (Simple, Atomic, or both?)

Simple, Atomic

Other notes

No response

Reproducibility

Consistent

Severity

Some (< 50%)

Available workarounds?

Yes, easy to implement

Workaround details

Unset the custom color for the List Block, or override the menu color with CSS

[liviopv]

Possibly related to Automattic/themes#6589 and Automattic/themes#6602

[cuemarie]

Looks related to these too:

• FSE: Submenus with background color inherit CSS on pages where list block is present #75908
• List Block CSS changes padding of navigation with backgrounds WordPress/gutenberg#49445
• List block: style rule conflicts with Navigation block menu item with background color WordPress/gutenberg#50342

Seems there's a larger underlying issue here where the Nav Block is inheriting more than just color (or padding, in the issus linked above) from the List block.

[cuemarie]

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

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

📌 FINDINGS/SCREENSHOTS/VIDEO

• I can replicate this issue, along with many other issues between the List block and other parts of a site, on TT3 in a self-hosted environment.

Please find triage notes and screen recordings on this issue:

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

📌 ACTIONS

• Assigned to @Automattic/t-rex as this relates to Global Styles
• Reported in /gutenberg: List Block styles are impacting several other blocks in editor and live site WordPress/gutenberg#50486

[Copons]

Thanks for reporting this!

Since this is a Core bug, I'm going ahead with closing this issue.

Some reasonings:

• The Core issue is already filed and briefly discussed, with a similar bug surfaced.
• The bug might require a major foundational discussion of the editor itself (already started in the PR for the similar bug), which can't be a T-Rex endeavour, since we don't work full time on the editor. 😅
• The bug affects only a fraction of Dotcom users, possibly power users at that.
• There is a proposed easy workaround.