#52129 closed defect (bug) (fixed)
Twenty Twenty-One: Striped background in table issue
Reported by: |
|
Owned by: |
|
---|---|---|---|
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)
Change History (28)
#1
@
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
@
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 :)
#4
@
4 years ago
- Summary changed from Striped background in table issue to Twenty Twenty-One: Striped background in table issue
#5
@
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
and
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.
#6
@
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.
#7
@
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?
#8
@
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:
Dark mode on:
Custom background color, dark enough to trigger light text:
Dark background color from palette:
Trac ticket: https://core.trac.wordpress.org/ticket/52129
#11
@
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
@
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
@
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.
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
#19
@
4 years ago
- Keywords fixed-major added
- Resolution fixed deleted
- Status changed from closed to reopened
Reopening to backport.
4 years ago
#20
Merged into Core in https://core.trac.wordpress.org/changeset/49864.
Normal mode (works fine)