Hever theme Navigation block: Sub menu background transparent when picking a suggested color

[mxhassani]

Quick summary

When using the Navigation block with the hever theme, the background of the submenu appear transparent:

Steps to reproduce

1. Activate the hever theme
2. From Gutenberg 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 front end

What you expected to happen

The sub-menu to have the same background color as the menu

What actually happened

The sub-menu background is transparent

Context

4808600-zen

Simple, Atomic or both?

Simple, Atomic

Theme-specific issue?

Was only able to replicate with Hever

Browser, operating system and other notes

Firefox 97 on macOS (Catalina 11.6)

Reproducibility

Consistent

Severity

Some (< 50%)

Available workarounds?

Yes, easy to implement

Workaround details

Select a custom background color instead:

[mxhassani]

Additional: found a report related to the opposite scenario: picking custom colors results in a transparent background. No theme specified. No follow up: Automattic/wp-calypso#44839

[Robertght]

Adding the case from the above closed issue.

Chat: #23206333-hc
Follow-up Ticket: #3215856-zen

[CodeAllNightNDay]

I have the same thing happening with the Morden theme and can reproduce it on a test site.
Chat: 34314339-hc
Ticket: 4822423-zen

[separatelyunited]

Adding an additional report of this happening on Learnomattic which uses Rockfield as its theme.

When any of the theme colors are chosen (or no color is chosen) submenu backgrounds are transparent.

Styling shows correctly in the page editor, but not on the live site.

We have used the workaround mentioned above to use a custom color for now.

[wojtekn]

I have the same issue as reported under #5271

Ticket: 5176150-zen

[Gustavo-Hilario]

I have been checking this. It looks like the code below is causing this issue:

.wp-block-navigation .wp-block-navigation-item {
    background-color: inherit;
}

Here is a screencast:

Screen.Capture.on.2022-05-23.at.19-42-39.mp4

It looks like it affects Varia child themes, but I still don't know how to fix that. The CSS code causing this issue comes from a minified CSS file. I'm subscribing to this issue to learn more about this. If someone works and fixes this issue, please DM me to share some details 🙏 I'm eager to learn how to fix some 🐛

[gwensmithx]

It seems to me we can only use CSS here on a case-by-case basis depending on what theme colour is chosen. I've been trying to figure out a way to apply an overall theme fix with CSS but it looks to me like specific CSS classes are not being added to the submenu element when a theme colour is selected.

As @Gustavo-Hilario mentioned, removing this declaration fixes the issue in the browser:

.wp-block-navigation .wp-block-navigation-item { background-color: inherit; }

as it falls back to using one of the color variables such as background-color: var(--wp--preset--color--secondary); but as far as I know, there isn't a way to remove or bypass this declaration only using CSS, unless you're adding the specific colour.

If someone comes up with an overall theme fix using CSS, please let me know! I've been trying to troubleshoot this for awhile.

[yashitamittal11]

I tested this issue and found the issue is present in the base Varia theme. I think the problem is related to the specificity of the CSS styles.

In the Varia theme, the style block .wp-block-navigation .wp-block-navigation-item { background-color: inherit; } has CSS specificity of 20 and the style block .has-secondary-background-color has CSS specificity of 10 so the former style overrides the secondary color chosen for the block.

However, in other themes like Seedlet, the .has-secondary-background-color[class] selector has a CSS specificity of 20 which is same as the style block .wp-block-navigation .wp-block-navigation-item { background-color: inherit; }

I am not sure why the default style does not override the secondary style in this case. 🤔

[NoHopeRadio]

I was taking a look at this, and I know this isn't the best solution, but I did notice looking at the .has-tertiary-background-color and other predefined color options in the Quadrat theme, they all get around an issue here two ways, and one is by having an !important after the defined color variations. I did just test this, and adding !important for the built-in color classes in the /blocks/utilities/_style.scss file in Varia seems to solve the issue, but there is still the extra inherit showing, and I'd like to find the source of that before testing the potential ramifications of forcing this.

I think many of Quadrat's rules are based on Twenty Twenty-Two's and are supposed to be temporary, so it's possible these !importants were a workaround there too.

[github-actions]

Support References

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

• 4808600-zen
• 3215856-zen
• 4822423-zen
• 5176150-zen

[NoHopeRadio]

A little further research:

It seems that Varia and children use the default Gutenberg rules for the Navigation block, and one potential fix might be to add rules for this. I suspect that the changes made in the thread below may need some refinement for Varia's theme color rules:

WordPress/gutenberg#35725