WordPress.org

Make WordPress Core

Opened 7 weeks ago

Closed 7 weeks ago

Last modified 2 weeks ago

#52702 closed defect (bug) (fixed)

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

Reported by: bduclos Owned by: desrosj
Milestone: 5.7 Priority: normal
Severity: normal Version: 5.7
Component: Bundled Theme Keywords: has-patch commit dev-reviewed
Focuses: css Cc:

Description

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);
}

Attachments (5)

52702-reproduce-issue.gif (1.3 MB) - added by hellofromTonya 7 weeks ago.
Show the issue in action with 5.7 RC1
52702-with-WP5.6.2.gif (497.4 KB) - added by hellofromTonya 7 weeks ago.
Issue does not exist with version 5.6.2
Screen Shot 2021-03-03 at 3.34.40 PM.png (708.4 KB) - added by hellofromTonya 7 weeks ago.
Problem exists with other blocks too such as columns
52702-after-pr1070.gif (2.9 MB) - added by hellofromTonya 7 weeks ago.
After applying PR 1070 - Works as expected
Screen Shot 2021-03-04 at 15.50.06.png (96.7 KB) - added by paaljoachim 7 weeks ago.
Screenshot of multiple block types where the background color is black. Text is automatically changed to white.

Change History (27)

#1 @SergeyBiryukov
7 weeks ago

  • Milestone changed from Awaiting Review to 5.7

@hellofromTonya
7 weeks ago

Show the issue in action with 5.7 RC1

@hellofromTonya
7 weeks ago

Issue does not exist with version 5.6.2

This ticket was mentioned in Slack in #core-themes by hellofromtonya. View the logs.


7 weeks ago

This ticket was mentioned in Slack in #core by hellofromtonya. View the logs.


7 weeks ago

#4 @hellofromTonya
7 weeks ago

This regression was introduced with #51927 [49987].

Last edited 7 weeks ago by hellofromTonya (previous) (diff)

#5 @hellofromTonya
7 weeks ago

  • Keywords needs-patch added

@hellofromTonya
7 weeks ago

Problem exists with other blocks too such as columns

This ticket was mentioned in Slack in #core-themes by hellofromtonya. View the logs.


7 weeks ago

#7 @hellofromTonya
7 weeks ago

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

This ticket was mentioned in PR #1070 on WordPress/wordpress-develop by hellofromtonya.


7 weeks ago

  • Keywords has-patch added; needs-patch removed

@hellofromTonya
7 weeks ago

After applying PR 1070 - Works as expected

#10 @hellofromTonya
7 weeks ago

  • Keywords needs-testing added

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?
Last edited 7 weeks ago by hellofromTonya (previous) (diff)

#11 @poena
7 weeks ago

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

This ticket was mentioned in Slack in #core-themes by hellofromtonya. View the logs.


7 weeks ago

#13 @paaljoachim
7 weeks ago

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.

Last edited 7 weeks ago by paaljoachim (previous) (diff)

@paaljoachim
7 weeks ago

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

#14 @ryelle
7 weeks ago

  • Keywords commit dev-feedback added

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

#15 @hellofromTonya
7 weeks ago

  • Keywords needs-testing removed

This ticket was mentioned in Slack in #core by hellofromtonya. View the logs.


7 weeks ago

#17 @desrosj
7 weeks ago

  • Owner set to desrosj
  • Resolution set to fixed
  • Status changed from new to closed

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.

#18 @desrosj
7 weeks ago

  • Keywords fixed-major added
  • Resolution fixed deleted
  • Status changed from closed to reopened

#19 @desrosj
7 weeks ago

  • Resolution set to fixed
  • Status changed from reopened to closed

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.

#20 @SergeyBiryukov
7 weeks ago

  • Keywords dev-reviewed added; dev-feedback fixed-major removed

This ticket was mentioned in Slack in #core by monikarao. View the logs.


7 weeks ago

#22 @desrosj
2 weeks ago

In 50667:

Twenty Twenty-One: Rebuild IE specific editor stylesheet.

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

Fixes #52981. See #52702.

#23 @peterwilsoncc
2 weeks ago

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.

Note: See TracTickets for help on using tickets.