Make WordPress Core

Opened 2 years ago

Closed 2 years ago

Last modified 2 years ago

#56023 closed defect (bug) (worksforme)

Twenty Twenty-One: Default quote block style overrides citation color on the front.

Reported by: poena's profile 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)

#1 @antonvlasenko
2 years ago

  • Focuses ui accessibility css added

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

#4 @joedolson
2 years ago

  • Keywords needs-patch added
  • Milestone changed from Awaiting Review to 6.2

#5 @joedolson
2 years ago

  • Keywords good-first-bug added

#6 @abubakar89
2 years ago

I am working on this @joedolson

#7 @poena
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 @poena
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.

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

#9 @poena
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?

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

#10 @dhrupo
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 @poena
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!

Note: See TracTickets for help on using tickets.