Twenty Twenty: Pullquote Block: Add Citation Text Color Issue

[nithins53]

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.

[kajalgohel]

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

[kmadhak]

Added Patch

[sabernhardt]

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.

[nithins53]

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

[sabernhardt]

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

[sabernhardt]

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

[sabernhardt]

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.

[James Roberts]

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.

[sapayth]

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 12.6 (Monterey)
• Web Server: Nginx
• PHP: 7.4.33
• WordPress: 6.2-alpha-54642-src
• Browser: Google Chrome 108.0.5359.124 (Official Build) (x86_64)
• Theme: Twenty Twenty
• Active Plugins:
  • None

Actual Results

• ✅ patch is working as mentioned.

Additional Notes

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.

[rafinkhan]

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

[robinwpdeveloper]

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

[robinwpdeveloper]

Related: https://core.trac.wordpress.org/ticket/57250

[audrasjb]

Self assigning for commit.

[audrasjb]

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.