Make WordPress Core

Opened 7 months ago

Last modified 2 days ago

#59801 new defect (bug)

Twenty Fifteen: Pullquote block issues with text color and border

Reported by: viralsampat's profile viralsampat Owned by:
Milestone: Future Release Priority: normal
Severity: normal Version: 6.3.2
Component: Bundled Theme Keywords: has-patch 2nd-opinion
Focuses: css Cc:

Description

Hello Team,

I have worked on the "Pullquote" block into the "Twenty Fifteen" theme and found that the text color for admin is not changed.

Here, I have attached its video.

Issue: https://share.cleanshot.com/2QPVLc7H737ghxjw8lft

Thanks,

Attachments (3)

59801.patch (1.5 KB) - added by viralsampat 7 months ago.
I have checked above mentioned issue and resolved it. Here, I have added my patch.
59801.re-establish-color.patch (1.8 KB) - added by sabernhardt 2 days ago.
assigns lighter gray to .wp-block-pullquote, inherits special Text color for quotes, adjusts citation text color when block has a special Background color
59801.inherit-all.patch (1.9 KB) - added by sabernhardt 2 days ago.
inherits text color for both blockquote and the citation, removes Pullquote-related changes from r58368

Download all attachments as: .zip

Change History (8)

@viralsampat
7 months ago

I have checked above mentioned issue and resolved it. Here, I have added my patch.

#1 @poena
2 months ago

  • Component changed from Themes to Bundled Theme

#2 @karmatosed
4 weeks ago

  • Keywords has-patch added; needs-patch removed

#3 @karmatosed
4 weeks ago

  • Keywords needs-refresh added; dev-feedback removed
  • Milestone changed from Awaiting Review to Future Release

Unless mistaken this patch will also remove the default color. Can you explore if this is the case @viralsampat and how to ensure it doesn't get removed?

#4 @karmatosed
2 weeks ago

  • Keywords reporter-feedback added

@sabernhardt
2 days ago

assigns lighter gray to .wp-block-pullquote, inherits special Text color for quotes, adjusts citation text color when block has a special Background color

@sabernhardt
2 days ago

inherits text color for both blockquote and the citation, removes Pullquote-related changes from r58368

#5 @sabernhardt
2 days ago

  • Keywords 2nd-opinion added; needs-refresh reporter-feedback removed
  • Summary changed from The pullquote block text color and border issue into the theme Twenty Fifteen to Twenty Fifteen: Pullquote block issues with text color and border

Border

Both patch options edit the border styles the same ways.

  1. The blockquote element should not have its own border. The editor shows one because the .editor-block-list__block class is obsolete and the selector needs to be replaced. (The extra border was also mentioned on #59612, but its latest patch only includes border color classes for the theme.)
  2. I added a default border style of solid for the block so people would not need to use that control for the most common style.

Text Color

The default text color for this theme originally had a lighter gray for quotes, including the Pullquote block, and then it set the citation to the body color again.

blockquote {
  color: #707070;
  color: rgba(51, 51, 51, 0.7);
}
.wp-block-pullquote cite,
blockquote cite,
blockquote small {
  color: #333; /* body color */
}

However, WordPress 5.9 (GB30951) made the Pullquote's elements inherit the block color on the front end (except when a theme uses a higher specificity or sets the color later in the cascade) more than two years ago.

.wp-block-pullquote p,
.wp-block-pullquote blockquote,
.wp-block-pullquote cite {
  color: inherit;
}

Since 6.4, the iframe editor has also inherited the body color, so some people might not know that the colors were ever different. This could be considered an established design change, though unintentional.

59801.re-establish-color.patch: I am not entirely comfortable with reassigning the color to the block container to re-establish the original design, but I made a patch to show how it might work.

  • Sets semi-transparent gray (with fallback) on .wp-block-pullquote (and blockquote within the editor)
  • Makes blockquote inherit any custom Text color
  • Makes citation inherit the text color when a user chooses a different Background color (setting either a Text or Background color on the Pullquote does not necessarily mean that the user wanted the citation color to match the quote, but a dark Background requires the ability to change the citation color)

59801.inherit-all.patch would officially establish the matching colors with this theme.

  • Makes both the blockquote and the citation inherit the text color from their containers
  • Removes Pullquote-related changes from [58368]
Note: See TracTickets for help on using tickets.