Twenty Twenty-One: Text color is not reflected when having background color

[wildworks]

Originally reported as a Gutenberg issue: ​https://github.com/WordPress/gutenberg/issues/51828

In #52129, there was a problem with text being obscured in dark mode. The approach taken to solve this was to override the text color with var(--table--has-background-text-color) variable if it had a background color.
Later, however, the table block now supports text color and can be set to any text color.
The text color changed by block support is not applied because it is overwritten by the color of the var(--table--has-background-text-color) variable mentioned above.

[wildworks]

In the striped table, if a background color is set, it is overwritten by the text color of the theme

[shailu25]

Patch added

[harshgajipara]

Test Report for https://core.trac.wordpress.org/attachment/ticket/58608/58608.diff Patch.

Backend:
=======
Before patch: ​https://prnt.sc/Uhz7lE9AgVfK
After patch: ​https://prnt.sc/4qrJkX_3wIVU

Front end:
=========
Before patch: ​https://prnt.sc/CWk7YDCTMN7T
After patch: ​https://prnt.sc/1WuyLxZK8Ky6

https://core.trac.wordpress.org/attachment/ticket/58608/58608.diff Patch is Working fine

[alvitazwar052]

Test Report

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

Environment

• OS: macOS 12.4
• Web Server: Nginx
• PHP: 7.4.33
• WordPress: 6.3-alpha-55505-src
• Browser: Chrome
• Theme: Twenty-twenty-one

ScreenCast

Before

• Backend: ​https://prnt.sc/Zqv5GC2lypkA
• Frontend: ​https://prnt.sc/IxPFdeS_PhcE

After

• Backend: ​https://prnt.sc/tAhxLMk4dQH3
• Frontend: ​https://prnt.sc/Li07XVfwDrlp

Actual Results

• The patch is working as expected✅

[karmatosed]

Moving to this release for consideration.

[hmbashar]

Test Report

Patch tested: 58608.diff

Environment

• WordPress: 6.6-alpha-57778-src
• PHP: 8.3.7
• Server: nginx/1.25.4
• Database: mysqli (Server: 8.3.0 / Client: mysqlnd 8.3.7)
• Browser: Chrome 125.0.0.0
• OS: macOS
• Theme: Twenty Twenty-One 2.2
• MU Plugins: None activated
• Plugins:
  • FakerPress 0.6.6
  • Test Reports 1.1.0

Actual Results

1. Resolved an issue with the editor through a patch, but still experiencing a possible frontend problem.

Before Patch

Editor ​https://prnt.sc/TdexpuQN94qC
Frontend ​https://prnt.sc/jU-e5H0HoZ-y

After Patch

Editor ​https://prnt.sc/NDsbrSFVxpfG
Frontend ​https://prnt.sc/nJoXYVUYp52i

[karmatosed]

As this in testing still possibly has issues, let's punt to future release and have that reviewed. Thank you everyone this shows the importance of testing.

[karmatosed]

Assigning to myself to test for possible commit.

[karmatosed]

I also experience a front-end issue still @shailu25 can you check your patch please?

[shailu25]

@karmatosed Thanks for the feedback.

I will update the patch accordingly.

[shailu25]

Patch Refreshed.

[wildworks]

@shailu25 Thank you for submitting a patch.

As I understand it, the style of this theme is managed by Sass, and the CSS files are generated automatically, so we cannot make changes directly to the CSS files. We will need to make changes using the following steps:

• Go to the theme directory: cd src/wp-content/themes/twentytwentyone/
• Install the npm library: npm install
• Run watch mode: npm run start
• Make changes to the file
• Test your changes
• When testing is complete, build the style: npm run build

Once the build is complete, you will see that many files have been updated, not just the sass files you changed, but also ie.css and style.css.map, for example, but these are expected changes.

You will need to update this section to resolve the front-end issue:

​https://github.com/t-hamano/wordpress-develop/blob/a799101e46ef0a042814c189a6331c23a52a100c/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/table/_style.scss#L32

Additionally, when testing a patch, we will need to make sure it works properly in dark mode as well. Go to "Appearance > Customize > Colors & Dark Mode" and check "Dark Mode support". A button called "Dark Mode: On/Off" should appear in the bottom right of the screen.

[shailu25]

The patch requires additional revisions based on the above comment.