WordPress.org

Make WordPress Core

Opened 9 months ago

Closed 9 months ago

Last modified 8 months 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 9 months ago.
Show the issue in action with 5.7 RC1
52702-with-WP5.6.2.gif (497.4 KB) - added by hellofromTonya 9 months 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 9 months ago.
Problem exists with other blocks too such as columns
52702-after-pr1070.gif (2.9 MB) - added by hellofromTonya 9 months ago.
After applying PR 1070 - Works as expected
Screen Shot 2021-03-04 at 15.50.06.png (96.7 KB) - added by paaljoachim 9 months ago.
Screenshot of multiple block types where the background color is black. Text is automatically changed to white.

Change History (27)

#1 @SergeyBiryukov
9 months ago

  • Milestone changed from Awaiting Review to 5.7

@hellofromTonya
9 months ago

Show the issue in action with 5.7 RC1

@hellofromTonya
9 months ago

Issue does not exist with version 5.6.2

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


9 months ago

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


9 months ago

#4 @hellofromTonya
9 months ago

This regression was introduced with #52676 [50469].

Why?

With the Media & Text block, the inner block does not have a class attribute ending in __inner-container. Therefore, the CSS is not being applied.

Version 0, edited 9 months ago by hellofromTonya (next)

#5 @hellofromTonya
9 months ago

  • Keywords needs-patch added

@hellofromTonya
9 months ago

Problem exists with other blocks too such as columns

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


9 months ago

#7 @hellofromTonya
9 months 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.


9 months ago

  • Keywords has-patch added; needs-patch removed

@hellofromTonya
9 months ago

After applying PR 1070 - Works as expected

#10 @hellofromTonya
9 months 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 9 months ago by hellofromTonya (previous) (diff)

#11 @poena
9 months 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.


9 months ago

#13 @paaljoachim
9 months 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 9 months ago by paaljoachim (previous) (diff)

@paaljoachim
9 months ago

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

#14 @ryelle
9 months 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
9 months ago

  • Keywords needs-testing removed

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


9 months ago

#17 @desrosj
9 months 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
9 months ago

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

#19 @desrosj
9 months 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
9 months ago

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

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


9 months ago

#22 @desrosj
8 months 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
8 months 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.