#56023 closed defect (bug) (worksforme)
Twenty Twenty-One: Default quote block style overrides citation color on the front.
Reported by: | poena | Owned by: | |
---|---|---|---|
Milestone: | Priority: | low | |
Severity: | minor | Version: | |
Component: | Bundled Theme | Keywords: | needs-patch good-first-bug |
Focuses: | ui, accessibility, css | Cc: |
Description
In WordPress versions 5.3-5.6:
The default block style for the quote block overrides the citation color on the front with a hard coded color.
Depending on version, different hard coded colors are used. None of them has a high enough contrast with the default green background and the dark mode background color.
This is minor, but does affect accessibility since it does not pass WCAG 2.0 requirements for color contrast.
This override also means that if someone customized the CSS custom properties, their changes are not applied.
Testing instructions:
Install one of the versions mentioned above.
(These can be installed using WP-CLI or downloaded form https://wordpress.org/download/releases/)
Create a new post or page.
Add two quote blocks: One with the default and one with the large style. Add some text to the quote and citation.
Save and view post or page on the front of the website.
View the source (using browser console) and confirm that the block styles from
wp-includes/css/dist/block-library/theme.min.css
are overriding the theme css for the citation.
Example from 5.4:
.wp-block-quote__citation, .wp-block-quote cite, .wp-block-quote footer { color: #6c7781; font-size: 13px; margin-top: 1em; position: relative; font-style: normal; }
We will need to increase the specificity of the theme's CSS, - but not enough to affect the color options available for the quote block on newer versions of WordPress.
Change History (11)
This ticket was mentioned in Slack in #accessibility by sabernhardt. View the logs.
2 years ago
This ticket was mentioned in Slack in #accessibility by joedolson. View the logs.
2 years ago
#7
@
2 years ago
We tested this during a contributor day on November 4 and were not able to reproduce it on 5.6.10. The correct color is used with this version.
#8
@
2 years ago
WordPress version 5.4.12 does not include Twenty Twenty-One, and if we test 5.4.12 with theme version 1.1 and 1.7 (current), the citation color is correct.
#9
@
2 years ago
It seems that this issue may have been fixed in one of the recent minor WordPress releases. Are you able to reproduce the issue @abubakar89?
#10
@
2 years ago
@poena, I tried this earlier but could not reproduce the issue. I was thinking, about what I have done wrong but after hours of debugging, I found the problem was solved.
#11
@
2 years ago
- Milestone 6.2 deleted
- Resolution set to worksforme
- Status changed from new to closed
Thank you for testing. It seems the order in which the different CSS files are loaded have changed since the issue was discovered.
Let's close this ticket. It can be reopened if the problem resurfaces.
Thank you again!
I am working on this @joedolson