[wp-trac] [WordPress Trac] #56023: Twenty Twenty-One: Default quote block style overrides citation color on the front.

[WordPress Trac]

#56023: Twenty Twenty-One: Default quote block style overrides citation color on
the front.
---------------------------+-----------------------------
 Reporter:  poena          |      Owner:  (none)
     Type:  defect (bug)   |     Status:  new
 Priority:  low            |  Milestone:  Awaiting Review
Component:  Bundled Theme  |    Version:
 Severity:  minor          |   Keywords:
  Focuses:                 |
---------------------------+-----------------------------
 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.

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/56023>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform