Navigation block: Sub menu background transparent when picking a suggested background color on Varia

[yashitamittal11]

Description

When using the Navigation block with the Varia and its child themes, the background color selected from the block settings is not honored. It is because the specificity of the fallback menu background color is higher than the CSS specificity of the selected block color.

I expect the background color selected for the Navigation block to apply to the submenu.

Step-by-step reproduction instructions

Steps to reproduce

1. Activate the Varia or any child theme
2. Add a Navigation block
3. Add a menu element and a submenu to it
4. From the sidebar, select a background color
5. Make sure it's one of the colors suggested (not a custom color)
6. Save and check in the front end

Screenshots, screen recording, code snippet

I created a PR to fix this issue, however it needs further discussion.
Link to the PR: #42211

Environment info

• WordPress version 6.0
• Gutenberg version 13.6.0

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

Yes

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

Yes

[carolinan]

Hi!
In the navigation block, there is both a block called submenu, and one called page list, which has sub menus.
Can you clarify which block to use to reproduce this?
Can I assume that it is the page list, as that is the block that is updated in the PR?

Which overlay and submenu setting are enabled? As in, "Overlay menu, mobile", "Open on click" "Show arrow".

[carolinan]

Is the background color also set on the navigation block itself? I mean from the image it looks like there is an an orange color on the navigation block? Like this?:

[yashitamittal11]

In the navigation block, there is both a block called submenu, and one called page list, which has sub menus.
Can you clarify which block to use to reproduce this?

I tested the issue using the submenu inside the navigation block. I don't see an option to add a page list as a submenu in the navigation block. Here's a screen recording for your reference -

Menu.Navigation.mov

Can I assume that it is the page list, as that is the block that is updated in the PR?

I updated the pagelist block as we figured the fallback style is coming from there.

Is the background color also set on the navigation block itself? I mean from the image it looks like there is an an orange color on the navigation block? Like this?:

Yes, the background color is set on the navigation block. I also tried adding the background color to the submenu via the 'Submenu & Overlay background' option but it doesn't work.

Which overlay and submenu setting are enabled? As in, "Overlay menu, mobile", "Open on click" "Show arrow".

'Overlay Menu = Always' => Background color displays fine

I am able to reproduce the issue on the big screen if
'Overlay Menu = Off' or 'Overlay Menu = Mobile'

The settings "Open on click" and "Show arrow" didn't matter in my test. I am able to reproduce the issue with both settings enabled and disabled.

[yashitamittal11]

I checked the background color for the submenu is working fine in the default Twenty Twenty Two and Twenty Twenty One theme. Should we handle this change in the Varia theme if it is not impacting other themes?

I noticed different themes are handling the colors differently.
For example - Twenty Twenty Two theme has an!importantselector to override the fallback background color.

Seedlet theme adds the extra [class] selector to override the default color.

@mtias @tellthemachines

[yashitamittal11]

Closing this issue as it is theme specific.