Twenty Twenty-One: Dark mode issue with cover block colors

[kpdaa]

Dear team, I had chosen cover block from block editor, selected background color as cover color, select border for the cover block, add heading. Now, when I see this page in dark mode, the cover block is not converting the dark background. kindly try et your en[alakh.co.in]d see

[justinahinon]

Hello @kpdaa,

I've tried reproducing your issue but can not.

Here's my setup information:

WordPress version: 5.8-alpha-50427-src)
Are all plugins deactivated
Operating system: macOS Big Sur 11.1
Browser: Firefox Developer Edition 89.0b3

Here are the steps I followed:

• On the fresh WordPress installation, enable dark mode for Twenty Twenty One in the customizer
• In a new post, add a cover block, with a background image, and styles set to border
• Add a heading block in the cover block
• In frontend, switch between Dark Mode on and off.

Screen record: ​https://cln.sh/TJEDZG

[sabernhardt]

low opacity for light backgrounds

[sabernhardt]

Thanks for the report!

This can happen with light background colors—when no image is selected—for a Cover block. As seen on #54715, this occurs with the sample content.

For consideration, the patch sets the light background overlay to a very low opacity so it still has a hint of the intended color.

[sabernhardt]

#54715 was marked as a duplicate.

[davidbaumwald]

Pre-patch

[davidbaumwald]

Post-patch

[davidbaumwald]

I followed reproduction steps in comment 2 precisely except for _not_ using an image. The first screenshot shows what happens before applying the patch, and the second screenshot shows the change after applying the latest patch.

@sabernhardt Is this what you were expecting?

[sabernhardt]

That looks the way I expected it without the background image. However, I apparently failed to test the patch with an image to discover that it can affect those blocks, too. Cover blocks are meant to have an image or video (otherwise a Group block could be more appropriate), so it would need stricter matching to avoid changing the block when used as intended.