Make WordPress Core

Opened 2 years ago

Closed 19 months ago

Last modified 19 months 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.


21 months ago

#4 @joedolson
21 months ago

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

#5 @joedolson
21 months ago

  • Keywords good-first-bug added

#6 @abubakar89
20 months ago

I am working on this @joedolson

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

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

#10 @dhrupo
19 months 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
19 months 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.