Make WordPress Core

Opened 8 months ago

Closed 22 hours ago

#56006 closed defect (bug) (fixed)

Twenty Fourteen: Text color not reflected in Editor and front in Pullquote block

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

Description

In Twenty Fourteen Theme when we select Pullquote block and add text color, it is not reflected in the editor and front.

Steps to replicate:

1: Activate the Twenty Fourteen Themes
2: Add Pullquote block
3: Enter text and select color

For better understanding I provide video link.
https://www.loom.com/share/8cf5cfa4e11f4a6f86ddc78c22c99612

Attachments (6)

#56006.patch (1.2 KB) - added by umesh84 8 months ago.
added patch
56006.1.patch (1.7 KB) - added by sabernhardt 4 months ago.
inheriting colors, similar to r54381 with more selectors for citations, plus increasing specificity to remove border in editor
pullquote-2014-post-front-1.png (289.0 KB) - added by sabernhardt 4 months ago.
before patch: post on front end with widgets
pullquote-2014-post-editor-1.png (169.2 KB) - added by sabernhardt 4 months ago.
before patch: post editor
pullquote-2014-post-front-2.png (290.8 KB) - added by sabernhardt 4 months ago.
with patch: post on front end with widgets
pullquote-2014-post-editor-2.png (167.6 KB) - added by sabernhardt 4 months ago.
with patch: post editor

Download all attachments as: .zip

Change History (18)

@umesh84
8 months ago

added patch

#1 @SergeyBiryukov
8 months ago

  • Component changed from General to Bundled Theme
  • Keywords has-patch added; needs-patch removed
  • Milestone changed from Awaiting Review to 6.1

#2 @audrasjb
4 months ago

  • Keywords changes-requested added

Hello and thanks for the patch.
However, I don't think it's ready yet as it duplicates the color declaration.

Maybe see this related changeset [54381].

@sabernhardt
4 months ago

inheriting colors, similar to r54381 with more selectors for citations, plus increasing specificity to remove border in editor

@sabernhardt
4 months ago

before patch: post on front end with widgets

@sabernhardt
4 months ago

before patch: post editor

@sabernhardt
4 months ago

with patch: post on front end with widgets

@sabernhardt
4 months ago

with patch: post editor

#3 @sabernhardt
4 months ago

  • Keywords needs-testing added; changes-requested removed

Twenty Fourteen needs a few more selectors for citations than Twenty Sixteen did. Also, the top and bottom borders are removed on the front, so I added a class for a more specific selector.

#4 @sabernhardt
4 months ago

  • Milestone changed from 6.1 to 6.2

#5 @bgoewert
2 months ago

  • Keywords has-screenshots added; needs-testing removed

Test Report

This report validates that the indicated patch addresses the issue.

Patch tested: 56006.1.patch

Environment

  • OS: Pop_OS! 22.04
  • Localhost: wordpress-develop & Docker Desktop
  • WordPress: trunk
  • Browser: Firefox 107, GNOME Web 43, Chrome 108
  • Theme: twentyfourteen
  • Active Plugins: None

Steps to Test

  1. Clone wordpress-develop
  2. Navigate to src/.
  3. Apply patch.
  4. Activate twentyfourteen theme.
  5. Create new post.
  6. Add pullquote block.
  7. Change text color to the theme's green (#24890D).
  8. Publish post with colored pullquote.

Expected Results

  • Top and bottom borders are removed from post editor.
  • Pullquote displayed in the post editor matches front-end.

Actual Results

  • ✅️ Top and bottom borders removed from editor.
  • ✅️ Editor matches what is displayed on front-end.

Supplemental Artifacts

Image showing the editor before patch was applied.
https://i.imgur.com/0Ztxw5R.png

Images showing both the editor and front-end after patch was applied.
https://i.imgur.com/4iYTy7q.png
https://i.imgur.com/ErAhoiP.png

#6 @bgoewert
2 months ago

  • Keywords needs-testing added

Adding needs-testing back because I'm a noob.

#7 @ruchirj
4 weeks ago

Hello You just to need edit the file.
twentyfourteen/css/editor-style.css
line number 177 delete the line "color: #767676;"
and your done.

Last edited 4 weeks ago by ruchirj (previous) (diff)

#8 @amitbarai013
3 weeks ago

Test report of https://core.trac.wordpress.org/attachment/ticket/56228/56228.diff

Environment

WordPress 6.1.1
PHP 7.4.1
Chrome 108.0.5359.124 (Official Build) (x86_64)
macOS monetery 12.6.2
Theme: Twenty Fouteen
Gutenberg enabled
Plugin: no plugin


Steps to Test

  1. Navigate to Posts > Add new
  2. Add Pullquote block to the page and add texts to the block.
  3. Try to change the color of the texts.
  4. The change of the color will not reflect on the editor page as well as on the front page.


Results before adding patch
Before adding the patch, the color of the text was not getting changed.


Final result after adding patch (✅)
Color of the text is getting changed after adding the patch


Screenshot:

  1. Before applying the patch: https://d.pr/v/17J6UV
  2. After applying the patch: https://d.pr/v/AZSP47
Last edited 3 weeks ago by amitbarai013 (previous) (diff)

#9 @robinwpdeveloper
3 days ago

Test Report

This report validates that the indicated patch addresses the issue.
Patch tested: https://core.trac.wordpress.org/attachment/ticket/56006/56006.1.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 Fourteen
  • Active Plugins:
    • No Plugins activated

Actual Results

  • ✅ Issue resolved with patch.
  • ✅ Border removed (Editor and Frontend)
  • ✅ Color issue fixed (Editor and Frontend)

Additional Notes

  • Checked RTL and fixed as well.

Supplemental Artifacts

Before: https://d.pr/i/R2459G

After:
Editor - https://d.pr/i/OohwdI
Frontend - https://d.pr/i/LPvy9c

#10 @shamayel007
3 days ago

Test Report

This report validates that the indicated patch addresses the issue.

Patch tested: https://core.trac.wordpress.org/attachment/ticket/56006/56006.1.patch

Environment

  • OS - Windows 11 Home Single Language (Version 22H2)
  • OS build - 22621.1105
  • Web Server: Nginx/1.16.0
  • PHP: 7.4.3
  • WordPress: 6.2-alpha-54642-src
  • Browser: Opera GX
  • Browser Version: isLVL 4 (core: 93.0.4585.52)
  • Theme: Twenty Fourteen
  • Active Plugins:
    • No Plugins activated

Actual Results

  • ✅ Issue got resolved after the patch was applied.
  • ✅ Border got removed (in both Editor and Frontend)
  • ✅ Color issue got fixed (in both Editor and Frontend)

Supplemental Artifacts

before patch (editor): https://d.pr/i/2483Sv
before patch (frontend): https://d.pr/i/a2iZeY

after patch (editor): https://d.pr/i/PUQ1fO
after patch (frontend): https://d.pr/i/uslDDK

#11 @audrasjb
23 hours ago

  • Keywords commit added; needs-testing removed
  • Owner set to audrasjb
  • Status changed from new to accepted

Thanks all for your tests!
Self assigning for commit.

#12 @audrasjb
22 hours ago

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

In 55228:

Twenty Fourteen: Correctly reflect text color changes in Pullquote block.

This changeset ensures text color changes on Pullquote block are reflected on both front-end and in the editor.

Props umesh84, audrasjb, sabernhardt, bgoewert, ruchirj, amitbarai013, robinwpdeveloper, shamayel007.
Fixes #56006.

Note: See TracTickets for help on using tickets.