WordPress.org

Make WordPress Core

Opened 12 months ago

Closed 12 months ago

Last modified 12 months ago

#52129 closed defect (bug) (fixed)

Twenty Twenty-One: Striped background in table issue

Reported by: celendesign Owned by: 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 12 months ago.
Normal mode (works fine)
SNAG-0001.png (61.4 KB) - added by celendesign 12 months ago.
Dark mode (text is unreadable)
52129.patch (1.0 KB) - added by poena 12 months ago.
Add text color to rows with background color.
striped-table-darkmode-editor.png (12.8 KB) - added by poena 12 months ago.
With patch, in the editor, dark mode enabled.
striped-table-darkmode-front.png (11.8 KB) - added by poena 12 months ago.
With patch, front, dark mode enabled.
striped-table-pink-background-dark-mode.png (11.4 KB) - added by poena 12 months ago.
Striped table block with pink background, with dark mode enable, front view.

Download all attachments as: .zip

Change History (28)

@celendesign
12 months ago

Normal mode (works fine)

@celendesign
12 months ago

Dark mode (text is unreadable)

#1 @audrasjb
12 months 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
12 months 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
12 months ago

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

#4 @SergeyBiryukov
12 months ago

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

#5 @poena
12 months 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
12 months ago

Add text color to rows with background color.

#6 @poena
12 months 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
12 months ago

With patch, in the editor, dark mode enabled.

@poena
12 months ago

With patch, front, dark mode enabled.

#7 @poena
12 months 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 12 months ago by poena (previous) (diff)

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


12 months ago

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


12 months ago

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
12 months 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.


12 months ago

#13 @desrosj
12 months 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
12 months 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 12 months ago by poena (previous) (diff)

@poena
12 months ago

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

#15 @prbot
12 months ago

ryelle commented on PR #832:

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

#16 @prbot
12 months ago

carolinan commented on PR #832:

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.


12 months ago

#18 @desrosj
12 months 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
12 months ago

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

Reopening to backport.

#21 @desrosj
12 months 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
12 months 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.