Twenty Twenty: Quote block citation is having issue with text color.

[nidhidhandhukiya]

Steps to reproduce the issue :-

1. Activate Twenty Twenty theme.
2. Choose Quote block.
3. Choose any text color.

You can able to see text color is not refclated on the ciation.

[nidhidhandhukiya]

Issue before patch

[nidhidhandhukiya]

screenshot after applying patch

[costdev]

Test Report

Patch tested: 57250.patch

Steps to test

1. Navigate to Appearance > Themes.
2. Activate Twenty Twenty.
3. Navigate to Posts > Add New.
4. Insert a Quote block.
5. Add a quote and citation.
6. 🐞 Change the text color of the Quote block.
7. 🐞 Save the post and view it on the frontend.
8. Navigate to Settings > General.
9. Change the language to an RTL language.
10. 🐞 View the post in the Editor.
11. 🐞 View the post on the frontend.

Expected Results

When reproducing a bug:

• ❌ (LTR) The text color does not change for the citation in the editor.
• ❌ (LTR) The text color does not change for the citation on the frontend.
• ❌ (RTL) The text color does not change for the citation in the editor.
• ❌ (RTL) The text color does not change for the citation on the frontend.

When testing a patch to validate it works as expected:

• ✅ (LTR) The text color changes for the citation in the editor.
• ✅ (LTR) The text color changes for the citation on the frontend.
• ✅ (RTL) The text color changes for the citation in the editor.
• ✅ (RTL) The text color changes for the citation on the frontend.

Environment

• Server: Apache (Linux)
• WordPress: 6.2-alpha-54642-src
• Browser: Chrome 108.0.0.0
• OS: Windows 10
• Theme: Twenty Twenty
• Plugins: None activated

Actual Results

When reproducing a bug:

• ❌ Issue reproduced - LTR - Editor.
• ❌ Issue reproduced - LTR - Frontend.
• ❌ Issue reproduced - RTL - Editor.
• ❌ Issue reproduced - RTL - Frontend.

When testing a patch to validate it works as expected:

• ✅ Issue fixed with the patch - LTR - Editor.
• ✅ Issue fixed with the patch - LTR - Frontend.
• ✅ Issue fixed with the patch - RTL - Editor.
• ✅ Issue fixed with the patch - RTL - Frontend.

Notes

• The patch does not include a space between inherit and !important. Attaching refreshed patch that includes this space.

[costdev]

Adds a space between inherit and !important.

[costdev]

I think this one is ready for commit consideration. Adding the keyword for review.

[sabernhardt]

Before inheriting colors, the selector needs to check whether someone chose a color (text and/or background).

The current patch would change the text color in both Quote and Pullquote blocks that do not specify any special color. It also can affect content made without the block editor at all.

Adding another class should be enough to avoid !important, too.

.wp-block-quote.has-text-color cite,
.wp-block-pullquote.has-text-color cite {
  color: inherit;
}

Related tickets include #56006 and #56008.

[nidhidhandhukiya]

This same issue is happening with the pull quote block also in the twenty twenty theme. This patch will resolve the issue for both the block.

[robinwpdeveloper]

I have reproduced the issue for both blocks.
Issue reproduced successfully.

Editor(LTR): ​https://d.pr/i/3u3pjR
Editor(RTL): ​https://d.pr/i/wutqGi

Frontend (LTR): ​https://d.pr/i/u195If
Frontend (RTL): ​https://d.pr/i/9aLvsK

[robinwpdeveloper]

Test Report

This report validates that the indicated patch doesn't address the issue.

Patch tested: https://core.trac.wordpress.org/attachment/ticket/57250/57250.3.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-Three
• Active Plugins:
  • No Plugins activated

Actual Results

LTR:

• ✅ PullQuote Block (Editor) => Issue resolved with patch.
• ✅ PullQuote Block (Fronted) => Issue doesn't resolved with patch.
• ❌ Quote block (Editor) => Issue not resolved with the patch
• ❌ Quote block (Frontend) => Issue not resolved with the patch

Additional Notes

• I didn't build any asset file. I just applied the patch with npm run grunt patch:url and hard cleared cache.

Supplemental Artifacts

Add screenshots
After applying the patch
Editor: ​https://d.pr/i/Ah24Nt
Frontend: ​https://d.pr/i/eCl92j

[fencermonir]

Test Report

Patch tested: https://core.trac.wordpress.org/attachment/ticket/57250/57250.3.patch

Environment
OS: macOS Ventura 13.1
Web Server: Nginx
PHP: PHP 8.0.25
WordPress: 6.2-alpha-54642-src
Browser: Chrome 109.0.5414.119
Theme: Twenty Twenty-Three

Active Plugins:
No Plugins activated

Actual Results
LTR & RTL:
✅ PullQuote Block (Editor) => Issue resolved with patch.
❌ PullQuote Block (Fronted) => Issue doesn't resolve with the patch.
✅ Quote block (Editor) => Issue resolved with the patch
❌ Quote block (Frontend) => Issue not resolved with the patch

Additional Notes
I didn't build any asset files. I just applied the patch with npm run grunt patch: URL and hard cleared cache.

Add screenshots
After applying the patch
Editor: ​https://d.pr/i/aEM961
Editor(RTL): ​https://d.pr/i/d4R7WP
Frontend: ​https://d.pr/i/hNMYGk
Frontend(RTL): ​https://d.pr/i/LafhvJ

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

[robinwpdeveloper]

Thanks @nidhidhandhukiya and @costdev for your help with the patches.
Since 6.2 beta 1 is almost knocking in the door, I have added a PR.

Earlier we have 2 diff for this ticket.
I have merged into one and removed important too.

Also implemented suggestion from @sabernhardt
This patch should work for LTR and RTL in both Editor and Frontend.

Fixed Quote and Pullquote block title and cite color issue.
Screenshot (For both blocks):
Editor - ​https://d.pr/i/tPDWLB
Frontend - ​https://d.pr/i/Ad8Yj5

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

[robinwpdeveloper]

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

[poena]

Moving this out of the 6.2 milestone, but there is still some time if people are available to test the new pull request.

[robinwpdeveloper]

After deep investigation here is my feedback:

• We will concentrate on Quote block only. Pullquote issue fixed in another ticket.

• Previously attached patches worked, but now its not working. I believe HTML structure has been changed recently.

• Using css and inherit color won't fix the color issue of cite. Current structure : blockquote has two childs => p tag (title) and cite (citation). So inheriting color won't work as title color applied to p tag.

Possible fix:

• Solution 1: Apply color to p tag and cite both.
• Solution 2: Apply color to the parent (blockquote) instead and cite and p tag can interit the color.

Screenshot: ​https://d.pr/i/ug8ihz

[poena]

I retested this using WP version 6.2-RC4-55587.
I am not able to reproduce the issue where the text color option does not apply a color to the cite.

• The default colors work in the editor and front.
• Text color selected with the color picker works for the inner blocks and for the cite, in both the editor and front.
• Text color from the palette works for the inner blocks and for the cite, in both the editor and front.

[sabernhardt]

This was fixed as part of [55317].