Make WordPress Core

Opened 4 years ago

Last modified 4 weeks ago

#49931 assigned defect (bug)

Twenty Nineteen: Group color styles prevent custom colors

Reported by: joen's profile Joen Owned by: poena's profile poena
Milestone: Future Release Priority: normal
Severity: normal Version:
Component: Bundled Theme Keywords: has-patch needs-testing 2nd-opinion
Focuses: css Cc:

Description

When TwentyNineteen was created, the ability to colorize various blocks was not as full-featured as it is today. You could easily choose text and background colors in a block, that would have no contrast at all.

However this is less of an issue today, where the contrast checker will help inform you whether the text is sufficiently legible or not.

In addition to this, the rules that colorize text according to what background color you applied to a group means that custom colors don't work at all, which will be more of an issue as global styles let you colorize more aspects.

This was originally reported in https://github.com/WordPress/gutenberg/issues/21672.

Attachments (2)

group.gif (2.3 MB) - added by Joen 4 years ago.
Text color not working in group.
49931.diff (1.3 KB) - added by poena 4 months ago.
Update style-editor.scss

Change History (11)

@Joen
4 years ago

Text color not working in group.

#1 @SergeyBiryukov
4 years ago

  • Component changed from Themes to Bundled Theme

#2 @SergeyBiryukov
4 years ago

  • Summary changed from TwentyNineteen: Group color styles prevent custom colors to Twenty Nineteen: Group color styles prevent custom colors

#3 @poena
8 months ago

  • Milestone changed from Awaiting Review to 6.5
  • Owner set to poena
  • Status changed from new to assigned

@poena
4 months ago

Update style-editor.scss

#4 @poena
4 months ago

  • Keywords has-patch needs-testing added; needs-patch removed

While testing on WordPress 6.4.2 and current trunk I found that when a container block has a background color from the palette, the text color works on the front but not in the editor.

Because of that I have submitted a patch that only updates the style-editor.scss file.
With the patch, the default contrasting text color is only applied if the user has not selected a text color.

Testing Instructions

Steps to Test

  1. Apply the patch
  2. Build the updated stylsheets by running the npm command "npm run build"
  3. Go to the block editor.
  4. Add a group block with a paragraph. Select the group and add the blue background color and any text color.
  5. Confirm that the colors work in the editor and the front.
  6. Select the paragraph and add a text color. Confirm that this text color is used, and not the text color that was set on the group: It should override the group colors.
  7. Now repeat step 4-6 with the different background colors: blue, dark blue, dark grey, light grey, and white.
  8. Finally, open the Customizer, open the color panel, and change the color from default to custom.

Confirm that the colors work in the editor and the front.

Bonus: Try with other blocks such as columns and media & text.

Expected Results

The text color that the user chooses shows in both the editor and the front,
no matter what the background color is.

Last edited 4 months ago by poena (previous) (diff)

#5 @harshgajipara
4 months ago

Test Report

This report validates that the indicated patch addresses the issue.

Patch tested: https://core.trac.wordpress.org/attachment/ticket/49931/49931.diff

Environment

OS: Windows
PHP: 8.1.9
WordPress: 6.4.2
Browser: Chrome
Theme: Twenty Nineteen
Plugins: None activated

Actual Results:

✅ Before patch: The text color works on the front but not in the editor.
Backend: https://prnt.sc/WHmD63qd3TA3
Frontend: https://prnt.sc/6aNJcIEp3AFp

✅ After patch: The text color works on the front and the editor.
Backend: https://prnt.sc/wGDg97IAxbdk
Frontend: https://prnt.sc/oou0Qlg8HiWl

#6 @shailu25
4 months ago

Test Report

This Report validates that the indicated patch addresses the issue.✅

Patch Tested: https://core.trac.wordpress.org/attachment/ticket/49931/49931.diff

Environment:

WordPress - 6.4.2
OS - Windows
Browser - Chrome
Theme: Twenty Nineteen
PHP - 8.0.18
Active Plugin - None

Expected Results:

  • The text color that the user chooses should show in both the editor and the front.

Actual Results:

  • After Applying Patch, The text color that the user chooses are showing in both the editor and the front.✅

Before Patch Screenshots:

Backend: https://prnt.sc/E331xIlxosWQ
Frontend: https://prnt.sc/RG2ZmY0BCL79

After Patch Screenshots:

Backend: https://prnt.sc/mdDuvU_muVL5
Frontend: https://prnt.sc/EaqTVuW4n6E0

With Different Background & Text Color:
Backend: https://prnt.sc/9yoJwJY9Ad4J
Front-end: https://prnt.sc/yP9bDO4CAqE9

#7 @poena
3 months ago

  • Keywords 2nd-opinion added
  • Milestone changed from 6.5 to Future Release

Thank you for testing.
I'm still hesitant about this PR because I'm wondering if this could be fixed without the :not.

Last edited 3 months ago by poena (previous) (diff)

#8 @karmatosed
5 weeks ago

I'm still hesitant about this PR because I'm wondering if this could be fixed without the :not.

I tend to agree with you @poena and wonder if just saying if have the class works better? I might be missing something though.

#9 @poena
4 weeks ago

Pinging @sabernhardt for feedback about the use of :not(.has-text-color) to apply a default text color to a block only when a user does not use a block setting to change the text color.

Note: See TracTickets for help on using tickets.