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

[pauljacobson]

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)

[dolgelukkig]

Update form the user:

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

[sabernhardt]

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).

[sabernhardt]

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!