Quadrat: Submenu items appear to be the wrong color

[kjellr]

Steps to replicate

• Populate Quadrat's navigation block (I did so while using it as a block-based theme)
• Ensure there are submenu items.
• View on desktop — see that the items appear as black on white.
• View on mobile — see that the items appear black against the dark purple background.

Result

Desktop	Mobile

Expected

Desktop	Mobile

Desktop:

Background: var(--wp--custom--color--background)
Border: 1px solid var(--wp--custom--color--secondary)
Text Color: var(--wp--custom--color--foreground)

Mobile:

Text Color: var(--wp--custom--color--foreground)

[pbking]

That mobile design isn't what was expected at all. The mobile menu should (and does for me) look more like this:

I wasn't able to reproduce the above testing in 'Classic' mode or in 'FSE' mode.

[kjellr]

@pbking I just tried again on a fresh site and got the same result. Here's how I did it:

Navigation.mp4

1. Start a fresh WP site, install the Gutenberg plugin.
2. Go to the Pages section of your new site, add some pages and subpages.
3. Add an index.html so the theme loads in FSE mode.
4. Upload the theme, activate it.
5. Open the site editor.
6. Click on the nav block, choose to "Add all pages".
7. Hover over these items, notice the incorrect colors.

[kjellr]

(Either way, I'd like for us to update the submenu border in your screenshots so it is var(--wp--custom--color--secondary) instead of the pink)

[pbking]

Update:
Debugging here I found that the submenu container is styled with class="submenu-container" while locally it's using wp-block-navigation-link__container.

It shouldn't be a matter of how the navigation block is constructed (with __unstableLocation or building it out via FSE) as in both scenarios the Navigation block is doing the rendering... So I'm not sure why the above is happening in the given environment. Delving deeper, just updating my findings thus far.

[pbking]

Ah HAH! The difference is that the situation in question was using the page-list block which (unfortunately) creates different markup than if you added page-link blocks individually.

I can address this with a slight CSS change, however I believe that the correct fix lies in the block. I'll look into both.

[kjellr]

Thanks for tracking that down!

[pbking]

This item in Gutenberg, once resolved, will eliminate the need for multiple classes.