[FSE] Navigation submenu text color always black

[renata-franco]

Quick summary

I had a chat with a user trying to make their submenu items text the color orange, but this would not change no matter the color you choose. It always stayed Black. We had to provide a Custom Design upgrade (The user is on Personal plan) and also CSS to fix this.

Steps to reproduce

1. Go to Site Editor.
2. Add a Menu that has submenus on the Navigation block of the Header.
3. Select the Navigation block to change the colors of the text.
4. The color of the menu text changes, but the submenus stays black.
5. Background color does change properly.

What you expected to happen

The submenu text should change the color to what is chosen in the additional settings of the Navigation block.

What actually happened

Submenu text always stays black.

Context

The report of this issue can be found in this Slack thread.

Global Styles do not affect the text color either in this case.

I replicated the issue in a simple site with Premium plan, and an AT site with eCom plan. Both had the same problem.

Simple, Atomic or both?

Simple, Atomic

Theme-specific issue?

Tried with several FSE ready themes: Byrne, Marl, and Zoologist, and the bug was there.

However, I tried the new theme called Skatepark and the submenu did change colors properly.

Browser, operating system and other notes

No response

Reproducibility

Consistent

Severity

One

Available workarounds?

Yes, easy to implement

Workaround details

Providing CSS for the user to change the color.

[Greatdane]

Confirmed on Byrne, Marl, and Zoologist, but Twenty Twenty-Two applied the colors correctly.

[Robertght]

I can confirm this happens with Videomaker and Baxter as well. I can change it through the Customizer colors and use a different Foreground color, but that's not ideal.

It's this that doesn't work as expected(doesn't follow the colors set within the editor):

.wp-block-navigation .has-child .wp-block-navigation__submenu-container a {
    color: var(--wp--custom--navigation--submenu--color--text);
}

Should this be fixed inside Blockbase premium?

cc @Automattic/serenity @jeffikus

[chiape]

+1 with Quadrat white theme

zd-5336560

[ai2n]

Same issue with Archeo themel. #36418572-hc

[Addison-Stavlo]

If I am understanding correctly this may be describing the same issue as https://github.com/Automattic/wp-calypso/issues/65419 ?

Issue can be replicated with any theme that has style definitions for core/navigation-link in theme.json

This seems to be an issue with Gutenberg itself. Created an issue here https://github.com/WordPress/gutenberg/issues/42963

If so we can close one of these issues in favor of the other.

[ccwalburn]

Same issue in Arbutus theme.

• [ ] 36550352-hc

Provided CSS workaround.

[rw-ye]

Another report;

• [ ] 5534563-zd-woothemes

Theme: Appleton

Provided CSS workaround

[github-actions[bot]]

Support References

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

• [ ] 5534563-zen

[tanjoymor]

The report mentioned above is the same issue, I didn’t find this one in my searches. One point of clarification on this report is that it is only affecting “Universal” themes (these are the ones that still have a Menu section in the Customizer but they aren’t all properly tagged as Universal in the filters, all themes mentioned in this report are Universal themes). It is affecting all Universal themes and CSS only works if they have a plan that supports Additional CSS.

[Addison-Stavlo]

closing this (duplicate) issue in favor of - https://github.com/Automattic/wp-calypso/issues/65419 , lets track there