Make WordPress Core

Opened 4 years ago

Closed 4 years ago

Last modified 4 years ago

#52129 closed defect (bug) (fixed)

Twenty Twenty-One: Striped background in table issue

Reported by: celendesign's profile celendesign Owned by: audrasjb's profile audrasjb
Milestone: 5.6.1 Priority: normal
Severity: normal Version: 5.6
Component: Bundled Theme Keywords: has-patch, needs-testing, fixed-major, twenty-twenty-one-1.1
Focuses: accessibility, css Cc:

Description

In the new WordPress theme twenty twenty one, the striped background table format doesn't work properly in dark mode. The font color of the gray background striped rows becomes unreadable.

Example: https://hitchedtotravel.com/croatia-road-trip-10-days/

Attachments (6)

SNAG-0000.png (75.5 KB) - added by celendesign 4 years ago.
Normal mode (works fine)
SNAG-0001.png (61.4 KB) - added by celendesign 4 years ago.
Dark mode (text is unreadable)
52129.patch (1.0 KB) - added by poena 4 years ago.
Add text color to rows with background color.
striped-table-darkmode-editor.png (12.8 KB) - added by poena 4 years ago.
With patch, in the editor, dark mode enabled.
striped-table-darkmode-front.png (11.8 KB) - added by poena 4 years ago.
With patch, front, dark mode enabled.
striped-table-pink-background-dark-mode.png (11.4 KB) - added by poena 4 years ago.
Striped table block with pink background, with dark mode enable, front view.

Download all attachments as: .zip

Change History (28)

@celendesign
4 years ago

Normal mode (works fine)

@celendesign
4 years ago

Dark mode (text is unreadable)

#1 @audrasjb
4 years ago

  • Component changed from General to Bundled Theme
  • Focuses accessibility added
  • Keywords needs-patch added
  • Milestone changed from Awaiting Review to 5.6.1
  • Owner set to audrasjb
  • Status changed from new to accepted

Hi and welcome to WordPress Core Trac @celendesign

Thank you for spotting this. Moving to milestone 5.6.1. It would be nice to fix this in the next point release, and in the upcoming Theme release.

#2 @audrasjb
4 years ago

  • Focuses css added

Indeed, we should add color: var(--global--color-dark-gray) to table.is-style-stripes tbody tr:nth-child(odd), .wp-block-table.is-style-stripes tbody tr:nth-child(odd) CSS selector. Not sure we want to add this in the main style.css file, or the dark mode specific stylesheet. Pinging @poena to get some expert eyes on this :)

#3 @celendesign
4 years ago

Hi @audrasjb, thank you for checking this and for your fast support!

#4 @SergeyBiryukov
4 years ago

  • Summary changed from Striped background in table issue to Twenty Twenty-One: Striped background in table issue

#5 @poena
4 years ago

Hi!

Because Twenty Twenty-One uses SCSS, we need to update the sass files and then compile them to create the different .css files.

I found the same problem in the editor, so we need to update both

https://github.com/WordPress/wordpress-develop/blob/master/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/table/_editor.scss

and

https://github.com/WordPress/wordpress-develop/blob/master/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/table/_style.scss

Instead of using the dark grey color variable directly, we should use --table--has-background-text-color. This variable is also used when the block itself has a background color.

@poena
4 years ago

Add text color to rows with background color.

#6 @poena
4 years ago

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

I did not include compiled files in the patch because when I compiled them I got lots of unrelated formatting problems with the IE stylesheets, tabs were replaced with spaces.

@poena
4 years ago

With patch, in the editor, dark mode enabled.

@poena
4 years ago

With patch, front, dark mode enabled.

#7 @poena
4 years ago

There are two related problems that can be seen in the screenshots:

The caption is the wrong color and size
The header label is in the wrong position, centered in the editor but left on the front.

Do we need to open new issues for them or can they be part of this one?

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

#8 @desrosj
4 years ago

@poena I think they are fine to tackle here. They all fall under the umbrella of "table styling improvements/bug fixes".

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


4 years ago

This ticket was mentioned in PR #832 on WordPress/wordpress-develop by ryelle.


4 years ago
#10

This fixes the striped table style on dark backgrounds, and also improves the frontend + editor consistency- fixing the caption style and centering both table headers and footers.

For the dark mode stripes, I've used rgba(240, 240, 240, 0.15), so that it will show up on all dark backgrounds. Previously dark colors were using --global--color-dark-gray which was invisible if the site background was dark grey.

Normal, default background:

https://i0.wp.com/user-images.githubusercontent.com/541093/102802849-50308300-4385-11eb-8403-e59fdf26fc59.png

Dark mode on:

https://i0.wp.com/user-images.githubusercontent.com/541093/102802850-50308300-4385-11eb-9491-3854a1593c87.png

Custom background color, dark enough to trigger light text:

https://i0.wp.com/user-images.githubusercontent.com/541093/102802851-50c91980-4385-11eb-8473-67758cafc05a.png

Dark background color from palette:

https://i0.wp.com/user-images.githubusercontent.com/541093/102802852-50c91980-4385-11eb-853e-ecde84ccd8fe.png

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

#11 @ryelle
4 years ago

I switched to a dark stripe background color to avoid more edge cases - in 52129.patch the links in my table were still white.

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


4 years ago

#13 @desrosj
4 years ago

  • Keywords needs-testing removed

@ryelle's PR is looking good in my testing. I do prefer not using white as the background. It makes the striping less drastic and the table feels more natural. Previously it felt like the white rows were being emphasized for some reason.

#14 @poena
4 years ago

  • Keywords needs-testing added

I have confirmed that the header label and column alignments work correctly in the editor and front.
The caption and border details look good.

On dark body backgrounds, when the table block uses the background color setting and the striped style:
-The light stripe background color is barely visible.
-Text color in the odd row is the primary color so it is invisible to me.

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

@poena
4 years ago

Striped table block with pink background, with dark mode enable, front view.

ryelle commented on PR #832:


4 years ago
#15

Table in dark mode with a set background color, now always uses the light-gray color.

Editor:
https://i0.wp.com/user-images.githubusercontent.com/541093/102817318-9265be80-439d-11eb-94de-c76ad933b861.png

Frontend:
https://i0.wp.com/user-images.githubusercontent.com/541093/102817319-9265be80-439d-11eb-8954-f5e398c4415a.png

carolinan commented on PR #832:


4 years ago
#16

This works well for me in chrome.

It does not work in IE11, because .is-IE.is-dark-theme is overriding text colors, but if we want to improve that it can be done in a separate issue because it is not related only to the table block.

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


4 years ago

#18 @desrosj
4 years ago

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

In 49864:

Twenty Twenty-One: Improve striped table styling in Dark Mode.

This change improves the display of table blocks with the “Stripes” style selected.

Previously, the text was not visible in striped rows when using Dark Mode.

Props ryelle, poena, melchoyce, celendesign, audrasjb.
Fixes #52129.

#19 @desrosj
4 years ago

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

Reopening to backport.

#21 @desrosj
4 years ago

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

In 49867:

Twenty Twenty-One: Improve striped table styling in Dark Mode.

This change improves the display of table blocks with the “Stripes” style selected.

Previously, the text was not visible in striped rows when using Dark Mode.

Props ryelle, poena, melchoyce, celendesign, audrasjb.
Merges [49864] to the 5.6 branch.
Fixes #52129.

#22 @desrosj
4 years ago

  • Keywords twenty-twenty-one-1.1 added

Adding a custom keyword for querying tickets included in the Twenty Twenty-One version 1.1 release in the future.

Note: See TracTickets for help on using tickets.