Cover Block has a dark overlay despite selecting white overlay color in the block settings

[devNigel]

Quick summary

The overlay color of the Cover Block is acting odd with the theme Coutoire. If you select any other Secondary color other than the default one set by the theme, the Cover block has a dark overlay.

This dark overlay stays despite applying a white #ffffff overlay in the Block settings.

I tried reproducing with other themes, but could not identify any pattern to it.

Steps to reproduce

1. In an Atomic or Simple site, activate the Coutoire theme.
2. Keep a note of the Color settings in the Customizer. For the time being, keep it default colors.
3. Add a Cover block with a background image in a post or a page.
4. You will notice the Cover block's overlay color works as expected.
5. Now in the Customizer, choose a different Secondary Color and save it.
6. Go back to the page or post with the Cover block.
7. You will notice a dark overlay in the Cover block.
8. Try applying the white color or enter #ffffff in the Custom color for the overlay.
9. You will notice the dark overlay persists

What you expected to happen

The overlay color should change according to the settings of the block and it should not depend on the Secondary color in the Customzier settings.

What actually happened

There was a dark overlay in the Cover block when the Secondary color was changed.

Context

User report: 31526121-hc

Operating System

No response

Browser

No response

Simple, Atomic or both?

Simple, Atomic

Theme-specific issue?

Coutoire

Was not able to confirm on other themes such as Twenty Twenty One.

Other notes

Screen recording:

Screen.Recording.2021-09-16.at.7.49.06.PM.mov

Customizer Color settings:

Reproducibility

Consistent

Severity

Some (< 50%)

Available workarounds?

Yes, easy to implement

Workaround details

Set a custom background overlay color closer to #ffffff such as #f7f7f7

[jordesign]

I'n no longer able to recreate this behaviour with the newest version of the Cover block in GB. Custom color or setting to White overlay both work - even when Coutoire has a custom secondary color.
Test page - PdA28y-b-p2

Closing this issue as non-reproducible.

[CodeAllNightNDay]

I had this issue happen today with the Hever theme. 4803421-zen If I select one of the pre-existing colors, the overlay color will not change on the live page but looks okay in the editor. If it is changed to any other color, the overlay will show on the live site. Is there any other way to address this issue for the user?

[tellisbethel]

Similar issue here, I believe: 4803627-zd-woothemes
All color options for the Cover block overlay can be selected except the Tertiary color palette option for some reason. When this is selected, the overlay defaults (on the live site, not in the editor) to the Foreground color option.

[IoanaAMuresan]

Customer here experiencing the same issue: 4805323-zen - asking to be kept in the loop when the issue's been fixed.

[dcoleonline]

@IoanaAMuresan I sent a CSS workaround specific to the site for the site in 4805323-zen, but it was sent in 4822606-zen.

The relevant code was:

/* set background color for cover blocks with 90 opacity */
.wp-block-cover .has-background-dim-90 {
    background-color: #f5f5f5;
}

[filipanoscampos]

Another case here 34858171-hc.
Shared CSS workaround.

[MaggieCabrera]

We have tried reproducing this both in Hever and Coutoire, but weren't successful. Can you please provide with steps to reproduce this on simple sites?

[Robertght]

I can confirm this is not reproducible anymore. Closing.

Potentially related: Automattic/wp-calypso#57711