Make WordPress Core

Opened 6 months ago

Last modified 2 months ago

#57250 new defect (bug)

Twenty Twenty theme quote block ciation is having issue with text color.

Reported by: nidhidhandhukiya's profile nidhidhandhukiya Owned by:
Milestone: Future Release Priority: normal
Severity: normal Version:
Component: Bundled Theme Keywords: has-testing-info has-screenshots has-patch needs-testing
Focuses: css Cc:

Description

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.

Attachments (5)

CleanShot 2022-12-02 at 10.26.21@2x.png (517.4 KB) - added by nidhidhandhukiya 6 months ago.
Issue before patch
57250.patch (1.9 KB) - added by nidhidhandhukiya 6 months ago.
CleanShot 2022-12-02 at 10.27.53@2x.png (642.9 KB) - added by nidhidhandhukiya 6 months ago.
screenshot after applying patch
57250.2.diff (2.1 KB) - added by costdev 6 months ago.
Adds a space between inherit and !important.
57250.3.patch (1.1 KB) - added by nidhidhandhukiya 5 months ago.
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.

Download all attachments as: .zip

Change History (20)

@nidhidhandhukiya
6 months ago

screenshot after applying patch

#1 @costdev
6 months ago

  • Focuses css added
  • Keywords has-testing-info has-screenshots has-patch needs-testing added
  • Milestone changed from Awaiting Review to 6.2

#2 @costdev
6 months ago

  • Keywords needs-testing removed

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.
Last edited 6 months ago by costdev (previous) (diff)

@costdev
6 months ago

Adds a space between inherit and !important.

#3 @costdev
6 months ago

  • Keywords commit added

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

#4 @sabernhardt
6 months ago

  • Keywords commit removed

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
5 months ago

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.

#5 @robinwpdeveloper
4 months ago

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

#6 @robinwpdeveloper
4 months ago

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

#7 @fencermonir
4 months ago

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

#9 @robinwpdeveloper
4 months ago

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

Last edited 4 months ago by robinwpdeveloper (previous) (diff)

This ticket was mentioned in Slack in #core-test by robinwpdeveloper. View the logs.


4 months ago

#13 @poena
4 months ago

  • Keywords needs-testing added
  • Milestone changed from 6.2 to Future Release

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

#14 @robinwpdeveloper
4 months ago

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

#15 @poena
2 months ago

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.


Note: See TracTickets for help on using tickets.