Menu Items: Lower the specificity of the fallback background color

[yashitamittal11]

What?

This PR is lowering the specificity of the fallback background color for the menu items, so the color selected in the block settings is honored.

Why?

This PR solves the background color issue in the submenu items in the navigation block.
The issue exists on the Varia and its child themes.

How?

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.

This PR lowers the specificity of the fallback background color for the menu items to honor the user-selected settings.

Testing Instructions

1. Activate Hever or any other Varia child theme on a site.
2. Open a post or page and add the Navigation block.
3. Add menu items and submenu items.
4. Choose a background color(primary, secondary, foreground) for the navigation block.
5. View the page. The background color should be visible on clocking the submenu.

Screenshots or screencast

| Before |

| After |

[github-actions]

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @yashitamittal11! In case you missed it, we'd love to have you join us in our Slack community, where we hold regularly weekly meetings open to anyone to coordinate with each other.

If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information.

[tellthemachines]

Thanks for your contribution @yashitamittal11 ! Are you able to reproduce this on a default theme such as Twenty Twenty Two or Twenty Twenty One? I notice the issue you linked to is not from a WordPress repo.

If it can't be reproduced in any of the default themes, we can still consider a request for lowering the specificity of a CSS rule (this is an area we are continuously trying to improve!) but it would be better in that case to open an issue so we can discuss this further, rather than directly submitting a PR.

I'd also add that this particular part of the code - background colors for the Navigation block - has already caused us much pain in the past, so any change we make will need extensive testing first 😅

[yashitamittal11]

I checked this issue on the default theme Twenty Twenty Two and Twenty Twenty One, and the navigation block colors are working fine on those themes.

Should I open a new issue in the Gutenberg repo for further discussion?

[carolinan]

Hi!
This issue needs specific testing. With the Emptytheme, I am getting different results depending on if the submenu is in a page list or is a submenu link item. For page list, the submenu background color option does not work at all in the editor, where the submenu background is always white (not transparent).

[carolinan]

"Emptytheme" which has no theme styles for the navigation block that can conflict, can be found in the Gutenberg repo, in the test folder.

[tellthemachines]

Should I open a new issue in the Gutenberg repo for further discussion?

That would be ideal, thanks @yashitamittal11 !

[yashitamittal11]

Thanks, everyone! I have created a new issue here: #42256
I am not able to add labels or reviewers to the issue. Maybe I don't have permission.
Can someone please help me add the labels? 🙏

[andreszs]

This is a theme-specific design flaw, not a general Wordpress issue IMO.

[scruffian]

This seems to be theme specific.