Twenty Twenty-One: With WP5.7 RC2, the text color for the dark background color palette is dark instead of white.

[bduclos]

In WP 5.6, when the user chooses “Black",  "Dark Gray or  "Gray" as the background-color for the Media & Text,  Cover, Paragraph and Heading blocks, the text is by default white. With 5.7 RC2, the text is now dark.

Steps to reproduce the issue with WP 5.7 RC2:

• Insert a Media & Text block.
• Set its background color as Black using the first color palette item.
• Insert a paragraph inside the block.
• Observe that by default, the text is dark. In WP 5.6 the text was white.

The following code in 5.6 has disappeared from 5.7:

:not(.has-text-color).has-black-background-color[class],
:not(.has-text-color).has-gray-background-color[class],
:not(.has-text-color).has-dark-gray-background-color[class] {
	color: var(--global--color-white);
}

[hellofromTonya]

Show the issue in action with 5.7 RC1

[hellofromTonya]

Issue does not exist with version 5.6.2

[hellofromTonya]

This regression was introduced with #51927 [49987].

[hellofromTonya]

Problem exists with other blocks too such as columns

[hellofromTonya]

Also seeing the problem in the Columns block with paragraph blocks in each column, i.e. see image.

Trac ticket: https://core.trac.wordpress.org/ticket/52702

[hellofromTonya]

After applying PR 1070 - Works as expected

[hellofromTonya]

To test the patch:

• In terminal: npm run grunt patch:https://github.com/WordPress/wordpress-develop/pull/1070 to pull the patch down to your machine
• In a post, add the Media & Text block.
• Set a image and add text.
• Set the background color to a dark color by going to Color settings > Background Color.
• Is the text white?
• Add a Columns blocks.
• Set the background color to a dark color by going to Color settings > Background Color.
• Set to 2-columns
• Add a Paragraph block into each column with some text
• Observe the text color. Is it white?

[poena]

I did a test with dark mode on and off and with different color combinations and I believe the PR solves the issue.

[paaljoachim]

Testing.

WordPress 5.7 RC2.
Theme: Twenty Twenty One.
Active plugins: WordPress Beta Tester.

Initial test.
Added Media & Text block.
Added black background.
In paragraph block inserted some text. Default is a very dark color.

Testing patch.
​http://localhost:8889/
Twenty Twenty One
WordPress 5.7 alpha.

In terminal:

npm run grunt patch:https://github.com/WordPress/wordpress-develop/pull/1070

In a post added Media & Text block.
Changed the background color to black.
Added some text to the paragraph block.
Default text is now white.

Added a Columns block with 3 columns.
Changed the background color to black.
Added paragraph block into all three columns.
Added text into the first column.
Default text is now white.

Additional test.
Added a Heading block.
Changed the background color to black.
Added some text to the Heading block.
Default text is now white.

Additional test.
Wrote some text that defaults to the paragraph block.
Changed the background color to black.
Default text automatically turned white.

[paaljoachim]

Screenshot of multiple block types where the background color is black. Text is automatically changed to white.

[ryelle]

Looks good! briefly tested it myself but it seems well-covered by everyone else :) Tagging for commit.

[desrosj]

In 50493:

Twenty Twenty-One: Make text readable when dark background is selected for the Media & Text block.

This change ensures that the text in the Media & Text block is readable when dark background colors are selected.

This is a regression that was introduced in [49987].

Props hellofromTonya, poena, paaljoachim, ryelle.
Fixes #52702.

[desrosj]

In 50494:

Twenty Twenty-One: Make text readable when dark background is selected for the Media & Text block.

This change ensures that the text in the Media & Text block is readable when dark background colors are selected.

This is a regression that was introduced in [49987].

Props hellofromTonya, poena, paaljoachim, ryelle.
Merges [50493] to the 5.7 branch.
Fixes #52702.

[desrosj]

In 50667:

Twenty Twenty-One: Rebuild IE specific editor stylesheet.

This was not updated to include the changes from [50493].

Fixes #52981. See #52702.

[peterwilsoncc]

In 50680:

Twenty Twenty-One: Rebuild IE specific editor stylesheet.

This was not updated to include the changes from [50493].

Props desrosj.
Merges [50667] to the 5.7 branch.
Fixes #52981. See #52702.

Committed via https://core.trac.wordpress.org/changeset/50493.