Navigation block: Text Overlay not working in mobile view

[paaljoachim]

Description

The header is an orange/yellow color.
Menu items are white.
Submenu & Overlay text is black.

Submenu shows the text as black.

Hamburger menu area still shows the menu items in white.

Step-by-step reproduction instructions

Screenshots, screen recording, code snippet

Environment info

WordPress 6.2.2
Gutenberg plugin 16.0

Please confirm that you have searched existing issues in the repo.

No

Please confirm that you have tested with all plugins deactivated except Gutenberg.

No

[carolinan]

I am not able to reproduce this on Gutenberg trunk. I did not test with the published 16.0 version.

Please confirm that you have tested with all plugins deactivated except Gutenberg.
No

Would you be able to deactivate all other plugins so that a plugin conflict can be ruled out?
Did you remove all custom CSS?

[carolinan]

I have to take that back; I see now that the color is working in the Site Editor but not the front.
Resulting CSS output on front, color:inherit is overriding color: var(--wp--preset--color--contrast);

.wp-block-navigation a:where(:not(.wp-element-button)) {
	color: inherit;
	text-decoration: none;
}

a:where(:not(.wp-element-button)) {
	color: var(--wp--preset--color--contrast);
	text-decoration: underline;
}

[MaggieCabrera]

I thought this one was related to some recent changes but when I look at the actual CSS this seems like a much older problem and I started uncovering inconsistencies everywhere. I want to fix this but also set some tests or something to avoid regressions in the future. In any case, I'm trying to test all possible cases. Can you help out with what I have right now? Let me know if my assumptions are correct and if I'm missing other cases, please!

To test, paste in the editor the following markup. I'm using TT3 pilgrimage variation because it has a link color defined:

<!-- wp:paragraph -->
<p>We are testing using TT3 with the variation pilgrimage, that has <a href="#">green link colors</a></p>
<!-- /wp:paragraph -->

<!-- wp:group {"style":{"spacing":{"padding":{"top":"clamp(1.5rem, 5vw, 2rem)","bottom":"clamp(1.5rem, 5vw, 2rem)","left":"var:preset|spacing|30","right":"var:preset|spacing|30"}}},"borderColor":"primary","layout":{"type":"constrained"}} -->
<div class="wp-block-group has-border-color has-primary-border-color" style="padding-top:clamp(1.5rem, 5vw, 2rem);padding-right:var(--wp--preset--spacing--30);padding-bottom:clamp(1.5rem, 5vw, 2rem);padding-left:var(--wp--preset--spacing--30)"><!-- wp:paragraph -->
<p>This is a nav block with no color settings:</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>On desktop: </p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><!-- wp:list-item -->
<li>The first and second link should be green unless the theme specifies a color for the nav block links</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>On mobile:</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><!-- wp:list-item -->
<li>The first and second link should be green unless the theme specifies a color for the nav block links</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list -->

<!-- wp:navigation {"ref":429} /--></div>
<!-- /wp:group -->

<!-- wp:group {"style":{"spacing":{"padding":{"top":"clamp(1.5rem, 5vw, 2rem)","bottom":"clamp(1.5rem, 5vw, 2rem)","left":"var:preset|spacing|30","right":"var:preset|spacing|30"}},"elements":{"link":{"color":{"text":"var:preset|color|cyan-bluish-gray"}}}},"backgroundColor":"vivid-red","textColor":"vivid-cyan-blue","layout":{"type":"constrained"}} -->
<div class="wp-block-group has-vivid-cyan-blue-color has-vivid-red-background-color has-text-color has-background has-link-color" style="padding-top:clamp(1.5rem, 5vw, 2rem);padding-right:var(--wp--preset--spacing--30);padding-bottom:clamp(1.5rem, 5vw, 2rem);padding-left:var(--wp--preset--spacing--30)"><!-- wp:paragraph -->
<p>This is a nav block inside a group block that has red background, blue text and <a href="#">link color set to gray</a> but the nav block has no color settings</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>On desktop: </p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><!-- wp:list-item -->
<li>The first and second link should be gray unless the theme specifies a color for the nav block links</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>On mobile:</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><!-- wp:list-item -->
<li>The first and second link should be gray unless the theme specifies a color for the nav block links</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list -->

<!-- wp:navigation {"ref":429} /--></div>
<!-- /wp:group -->

<!-- wp:group {"style":{"spacing":{"padding":{"top":"clamp(1.5rem, 5vw, 2rem)","bottom":"clamp(1.5rem, 5vw, 2rem)","left":"var:preset|spacing|30","right":"var:preset|spacing|30"}},"elements":{"link":{"color":{"text":"var:preset|color|cyan-bluish-gray"}}}},"backgroundColor":"vivid-red","textColor":"vivid-cyan-blue","layout":{"type":"constrained"}} -->
<div class="wp-block-group has-vivid-cyan-blue-color has-vivid-red-background-color has-text-color has-background has-link-color" style="padding-top:clamp(1.5rem, 5vw, 2rem);padding-right:var(--wp--preset--spacing--30);padding-bottom:clamp(1.5rem, 5vw, 2rem);padding-left:var(--wp--preset--spacing--30)"><!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>This is a nav block inside a group block that has red background, blue text and <a href="#">link color set to gray</a> but nav block has purple text and yellow background </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>On desktop:</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><!-- wp:list-item -->
<li>The first link should be purple and the second link should inherit the same color</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>On mobile:</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><!-- wp:list-item -->
<li>The first link should be purple and the second link should inherit the same color</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list -->

<!-- wp:navigation {"ref":429,"textColor":"vivid-purple","backgroundColor":"luminous-vivid-amber"} /--></div>
<!-- /wp:group -->

<!-- wp:group {"style":{"spacing":{"padding":{"top":"clamp(1.5rem, 5vw, 2rem)","bottom":"clamp(1.5rem, 5vw, 2rem)","left":"var:preset|spacing|30","right":"var:preset|spacing|30"}},"elements":{"link":{"color":{"text":"var:preset|color|cyan-bluish-gray"}}}},"backgroundColor":"vivid-red","textColor":"vivid-cyan-blue","layout":{"type":"constrained"}} -->
<div class="wp-block-group has-vivid-cyan-blue-color has-vivid-red-background-color has-text-color has-background has-link-color" style="padding-top:clamp(1.5rem, 5vw, 2rem);padding-right:var(--wp--preset--spacing--30);padding-bottom:clamp(1.5rem, 5vw, 2rem);padding-left:var(--wp--preset--spacing--30)"><!-- wp:paragraph -->
<p>This is a nav block inside a group block that has red background, blue text and <a href="#">link color set to gray</a> but the nav block has purple text and yellow background and pink text and orange background for the overlay</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>On desktop:</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><!-- wp:list-item -->
<li>The first link should be purple and the second link should be pink</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>On mobile:</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><!-- wp:list-item -->
<li>The first link should be purple and the second link should be pink</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list -->

<!-- wp:navigation {"ref":429,"textColor":"vivid-purple","backgroundColor":"luminous-vivid-amber","overlayBackgroundColor":"luminous-vivid-orange","overlayTextColor":"pale-pink"} /--></div>
<!-- /wp:group -->

Edit: my nav block consists of one link and then a second link inside the submenu of the first one

[paaljoachim]

I went to one of my dev sites.
Made a new page and in the code editor pasted in the above code.
Using the default Twenty Twenty Three. (Not sure what the TT3 pilgrimage variation is.)

Stitched together screenshots in the backend.

This page:
https://webkonsulenten.com/nav-test/

[MaggieCabrera]

It looks very broken indeed, but my question mostly is: are my assumptions correct? By that I mean the text I wrote on the markup:

This is a nav block inside a group block that has red background, blue text and link color set to gray but the nav block has purple text and yellow background and pink text and orange background for the overlay

On desktop:

The first link should be purple and the second link should be pink

On mobile:

The first link should be purple and the second link should be pink

I'm planning on using these as assertions for tests, to make sure we don't make any more regressions once this is fixed.