Make WordPress Core

Opened 3 years ago

Last modified 18 months ago

#53094 new defect (bug)

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

Reported by: kpdaa's profile kpdaa Owned by:
Milestone: Future Release Priority: normal
Severity: normal Version: 5.7.1
Component: Bundled Theme Keywords: has-screenshots
Focuses: css Cc:


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[]d see

Attachments (5)

Screenshot_20210426-220855.png (106.7 KB) - added by kpdaa 3 years ago.
Screenshot_20210426-220905.png (134.2 KB) - added by kpdaa 3 years ago.
53094.diff (1.8 KB) - added by sabernhardt 23 months ago.
low opacity for light backgrounds
core-trac-53094-pre-patch.png (25.3 KB) - added by davidbaumwald 21 months ago.
core-trac-53094-post-patch.png (12.9 KB) - added by davidbaumwald 21 months ago.

Download all attachments as: .zip

Change History (13)

#1 @SergeyBiryukov
3 years ago

  • Summary changed from dark mode issue in twenty twenty one theme to Twenty Twenty-One: Dark mode issue

#2 @justinahinon
3 years ago

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:

23 months ago

low opacity for light backgrounds

#3 @sabernhardt
23 months ago

  • Focuses css added
  • Keywords has-patch added
  • Milestone changed from Awaiting Review to 6.0

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.

#4 @sabernhardt
23 months ago

#54715 was marked as a duplicate.

#5 @davidbaumwald
21 months ago

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?

#6 @sabernhardt
21 months ago

  • Keywords has-patch removed

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.

#7 @sabernhardt
21 months ago

  • Milestone changed from 6.0 to Future Release

#8 @poena
18 months ago

  • Summary changed from Twenty Twenty-One: Dark mode issue to Twenty Twenty-One: Dark mode issue with cover block colors
Note: See TracTickets for help on using tickets.