Make WordPress Core

Opened 4 years ago

Closed 3 weeks ago

#50304 closed defect (bug) (worksforme)

Twenty Twenty: Text in Verse Block in the block editor is too dark to see against a dark page background

Reported by: pauljacobson's profile pauljacobson Owned by:
Milestone: Priority: normal
Severity: normal Version: 5.4.1
Component: Bundled Theme Keywords: has-screenshots needs-testing
Focuses: ui, css Cc:

Description (last modified by sabernhardt)

The color of text in a Verse Block is dark, and when used on a site with the Twenty Twenty theme, and where the site's background is set to a dark color, it's not possible to see the text in the block editor.

Steps to reproduce

  1. Activated Twenty Twenty on a test site on WordPress.com
  2. Changed the site background (main content and header/footer) to black in Colors in the Customizer
  3. Created a new post in the block editor, and added a Verse Block
  4. Added text to the Verse Block (pasted from an external source, no external/inline styling was added to the pasted text).

What I expected

Verse Block text should adapt to the dark background like text in other blocks, like a Paragraph Block.

What happened instead

Instead, the text in the Verse Block is almost impossible to see because it's dark text against a dark background.

Browser / OS version

Firefox Developer Edition v77b, macOS 10.15.5 (not sure what the user who reported this issue is using)

Screenshot / Video

https://d.pr/i/dOYOBN/qWszm6Wi9y
https://d.pr/i/luTBOl/5MIvbyOEBE
https://d.pr/i/iq2G6M/7TtwenDVkH

Context / Source

User report on WordPress.com (3022847-zen)

Change History (4)

#1 @SergeyBiryukov
4 years ago

  • Component changed from Themes to Bundled Theme

#2 @dolgelukkig
4 years ago

Update form the user:

If it’s helpful, let them know I always use the latest version of Firefox on Windows 10.

#3 @sabernhardt
22 months ago

  • Description modified (diff)
  • Focuses css added
  • Keywords needs-testing added
  • Summary changed from Twenty Twenty theme: Text in Verse Block in the block editor is too dark to see against a dark page background to Twenty Twenty: Text in Verse Block in the block editor is too dark to see against a dark page background

Thanks for the ticket and sorry for the delayed response!

The Verse block had specified a dark text color within the editor before WordPress 5.8 (GB27736):

pre.wp-block-verse {
	color: $gray-900;
}

I did not experience the dark text on the front end, even with an older WordPress version, so I think we can call this fixed (with the editor update in recent versions).

Last edited 21 months ago by sabernhardt (previous) (diff)

#4 @sabernhardt
3 weeks ago

  • Milestone Awaiting Review deleted
  • Resolution set to worksforme
  • Status changed from new to closed

I checked the text color in the Verse block again with WordPress 6.5.2. Whether the editor is in an iframe or not, the color is light when the theme background is dark.

Thanks for your contribution!

Note: See TracTickets for help on using tickets.