Make WordPress Core

Opened 15 months ago

Closed 7 months ago

#55990 closed defect (bug) (fixed)

Twenty Twenty: Pullquote Block: Add Citation Text Color Issue

Reported by: nithins53's profile nithins53 Owned by: audrasjb's profile audrasjb
Milestone: 6.2 Priority: normal
Severity: normal Version: 6.0
Component: Bundled Theme Keywords: has-patch commit
Focuses: ui, css Cc:

Description

When we add pullquote block on twenty twenty theme, then add color to text, the color is not added to the citation text.

Steps to replicate:

  1. Activate Twenty Twenty Theme
  2. Insert pullquote block
  3. Add color

For more information, the screen recording link is attached below.

https://www.loom.com/share/ec1d513866714f83addf6a63fd2a4065

Thank You.

Attachments (4)

#55990.patch (1.9 KB) - added by kajalgohel 15 months ago.
added patch for adding color of citation text in editor and front side
#55990.2.patch (1.9 KB) - added by kmadhak 15 months ago.
Added Patch
55990.3.patch (2.9 KB) - added by devtanbir 12 months ago.
55990.4.patch (3.6 KB) - added by sabernhardt 12 months ago.
inheriting text color for citation when user specifies color for the Pullquote or Quote block, or if one of those blocks is inside a block with a background

Download all attachments as: .zip

Change History (20)

@kajalgohel
15 months ago

added patch for adding color of citation text in editor and front side

#1 @kajalgohel
15 months ago

  • Keywords has-patch added

#2 @kajalgohel
15 months ago

  • Focuses ui css added

#3 @SergeyBiryukov
15 months ago

  • Milestone changed from Awaiting Review to 6.1
  • Summary changed from Twenty Twenty Theme-Pullquote Block: Add Citation Text Color Issue to Twenty Twenty: Pullquote Block: Add Citation Text Color Issue

@kmadhak
15 months ago

Added Patch

#4 @sabernhardt
12 months ago

  • Keywords needs-patch added; has-patch removed

Both these patches change the text color for any Pullquote block's citation, not just when the user specifies a color for the block.

These styles should stay the same, and new selectors would include .has-text-color. Matching the text color to the rest of the block when it only has a background (.has-background) could be good, too. Ideally, it would also work if the quote is inside a Group block with a special color.

Using either inherit or currentColor would work, but Twenty Twenty uses inherit for the text color on other elements.

@devtanbir
12 months ago

#5 @nithins53
12 months ago

@sabernhardt does the new patch from @devtanbir look good to you?

#6 @sabernhardt
12 months ago

That patch includes the Quote block, but it still unnecessarily changes the citation color for blocks when the user keeps the default colors.

@sabernhardt
12 months ago

inheriting text color for citation when user specifies color for the Pullquote or Quote block, or if one of those blocks is inside a block with a background

#7 @sabernhardt
12 months ago

  • Keywords has-patch needs-testing added; needs-patch removed

Test scenarios (both front end and editor):

  1. Quote and Pullquote blocks with default color settings would still have the theme's default gray citation text.
  2. Quote and Pullquote blocks with Text color, either theme-related or custom, would have the same color for the citation as the quote text.
  3. When setting one color for the Quote block (not Pullquote), set a different color for the Paragraph block inside it. The citation should inherit the Quote block's color, and the Paragraph should have its own color.
  4. Create a Group or Column block with a background color, and insert Quote and Pullquote blocks with the default color options. To avoid low contrast with the gray, the text color for the citation should match the quote.
  5. Save your post. Go to Customize and, under Colors, create a custom Primary Color. Then return to the post you created to check all the blocks again, in the editor and the front end. With default colors, the citation text would not be the same gray as before, but it would not match the quote text either.
  6. You could also try these blocks in a Widget area. To make it easier, you could select "Copy all content" (or "Copy all blocks") from the 3-dot Options menu when editing the post. Then go to the Widgets editor, create a Paragraph block, and paste the copied blocks into that paragraph block.
Last edited 12 months ago by sabernhardt (previous) (diff)

#8 @sabernhardt
12 months ago

  • Milestone changed from 6.1 to 6.2

#9 @James Roberts
10 months ago

Tested 55990.4.patch on 6.2, running Twenty Twenty - the following tests were performed:

  1. Added a Quote and Pullquote block with no color settings. Works as expected - Both citations had a text color of the default grey 69603E on the front end and in the editor.
  2. Added a Quote and Pullquote block, with a custom text color of FF0000. Works as expected - Both citations inherited the text color of FF0000 on the front end and in the editor.
  3. Added a Quote block, with a custom text color of FF0000. I gave the paragraph a custom text color of 0000FF. Works as expected - The paragraph had a text color of 0000FF, and the citation inherited the text color of FF0000, on the front end and in the editor.
  4. Added a Group block, with a custom background color of FF0000. Within the group, I added Quote and Pullquote blocks with no color settings. Works as expected - All quote and citation text color matched, on the front end and in the editor.
  5. Repeated test 4, but added custom text color settings of 0000FF to both the Quote and Pullquote blocks. Works as expected - All citation text inherited the text color of 0000FF.
  6. Repeated test 5, but within the Quote block, I added a custom text color of FFFFFF to the paragraph. Works as expected - Same results as test 5, but the Quote block's paragraph had a text color of FFFFFF on both the front end and in the editor.

These tests were performed on a page, and within the footer widget areas, with the same results.

Last edited 10 months ago by James Roberts (previous) (diff)

#10 @sapayth
9 months ago

Tested 55990.4 patch on 6.2-alpha-54642-src with Twenty Twenty theme. Tested on both post and pages.

  1. Added Pullquote block with default settings. The quote color is black and the citation color is gray in both editor and in the front end.
  2. Added a Pullquote block with suggested text colors. Both the quote color and citation color are same in the editor and in the front end. As expected.
  3. Added a Pullquote block with custom text colors. Both the quote color and citation color are same in the editor and in the front end. As expected.
  4. Added multiple Pullquote block in the same page with different colors. All outputs with respective colors. As expected.
Version 0, edited 9 months ago by sapayth (next)

#11 @rafinkhan
8 months ago

Test Report

This report validates that the indicated patch addresses the issue.

Patch tested: https://core.trac.wordpress.org/attachment/ticket/55990/55990.4.patch

Environment

  • OS: macOS 13.0
  • Web Server: Nginx
  • PHP: 7.4.1
  • WordPress: 6.2-alpha-55092
  • Browser: Firefox 108.0.2
  • Theme: Twenty Twenty (twentytwenty)
  • Active Plugins:
    • No Plugins activated

Actual Results

  • ✅ Issue resolved with patch.

Additional Notes

  • I have found the pullquote block's citation text color working as expected after applying the patch in Twenty Twenty theme. It's working correctly both in the Editor & preview mode.

Supplemental Artifacts

Before the patch: https://d.pr/i/OZFuI0

After the patch: https://d.pr/i/adnT4S

#12 @robinwpdeveloper
8 months ago

Test Report

This report validates that the indicated patch addresses the issue.

Patch tested: https://core.trac.wordpress.org/attachment/ticket/55990/55990.4.patch

Environment

  • OS: macOS 11.2.3
  • Web Server: Nginx
  • PHP: 7.4.30
  • WordPress: 6.2-alpha-54642-src
  • Browser: Chrome 109.0.5414.119
  • Theme: Twenty Twenty
  • Active Plugins:
    • No Plugins activated

Actual Results

  • ✅ Issue resolved with patch.

Additional Notes

  • Found fix on editor and frontend

Supplemental Artifacts

Before:
Editor - https://d.pr/i/DCyobR

After:
Editor - https://d.pr/i/6BoD8h
Frontend - https://d.pr/i/tBVAdr

RTL Editor - https://d.pr/i/HHWKBr
RTL Frontend - https://d.pr/i/quRq95

#14 @poena
8 months ago

  • Keywords commit added; needs-testing removed

#15 @audrasjb
7 months ago

  • Owner set to audrasjb
  • Status changed from new to accepted

Self assigning for commit.

#16 @audrasjb
7 months ago

  • Resolution set to fixed
  • Status changed from accepted to closed

In 55317:

Twenty Twenty: Properly reflect text color changes in Quote and Pullquote block.

This changeset ensures that text color for citation are inherited when the user specifies color for the Pullquote or Quote block, or if one of those blocks is inside a block with a background.

Props nithins53, kajalgohel, kmadhak, sabernhardt, devtanbir, james-roberts, sapayth, rafinkhan, robinwpdeveloper, poena.
Fixes #55990.

Note: See TracTickets for help on using tickets.