Make WordPress Core

Opened 22 months ago

Closed 19 months ago

Last modified 18 months ago

#56008 closed defect (bug) (fixed)

Twenty Sixteen: Pullquote Block: Color not reflected in editor and front end

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

Description (last modified by SergeyBiryukov)

In the twenty Sixteen theme, when we add color to text in pullquote block, the color is not reflected in the editor and the front end.

This defect was mentioned and closed in the following ticket, but seem to have resurfaced: #47019

Steps to replicate:

  1. Activate Twenty Sixteen theme
  2. Add pullquote block
  3. Add color

For more information, screen recording link is attached below.

https://loom.com/share/37ddc79e79b74a438efa3c86e8f795ef

Thank You.

Attachments (6)

56008.patch (1.1 KB) - added by nidhidhandhukiya 22 months ago.
after applying this solution the issue is resolved.
Capture d’écran 2022-09-29 à 00.19.20.png (213.9 KB) - added by audrasjb 19 months ago.
Before patch - editor
Capture d’écran 2022-09-29 à 00.19.29.png (188.6 KB) - added by audrasjb 19 months ago.
Before patch - front-end
Capture d’écran 2022-09-29 à 00.29.02.png (204.6 KB) - added by audrasjb 19 months ago.
After patch - editor
Capture d’écran 2022-09-29 à 00.29.10.png (175.2 KB) - added by audrasjb 19 months ago.
After patch - front-end
56008.1.patch (1.2 KB) - added by sabernhardt 19 months ago.

Download all attachments as: .zip

Change History (20)

#1 @SergeyBiryukov
22 months ago

  • Description modified (diff)
  • Summary changed from Twenty Sixteen:Pullquote Block: Color no reflected in editor and front end to Twenty Sixteen: Pullquote Block: Color not reflected in editor and front end

@nidhidhandhukiya
22 months ago

after applying this solution the issue is resolved.

#2 @nithins53
22 months ago

  • Keywords has-patch added; needs-patch removed

This ticket was mentioned in Slack in #core by nithins53. View the logs.


21 months ago

#4 @SergeyBiryukov
21 months ago

  • Milestone changed from Awaiting Review to 6.1

Hi there, thanks for the ticket! Moving to 6.1 for testing and review.

#5 @audrasjb
19 months ago

  • Keywords changes-requested added

I feel a bit concerned about adding an !important CSS declaration at the very end of the editor stylesheet. I put together a new PR with a different approach and I'll send some screenshots.

@audrasjb
19 months ago

Before patch - editor

@audrasjb
19 months ago

Before patch - front-end

@audrasjb
19 months ago

After patch - editor

@audrasjb
19 months ago

After patch - front-end

#7 @audrasjb
19 months ago

  • Keywords has-screenshots added; changes-requested removed

Pinging @poena to get some expertise on this change 🙏 😌

#8 @sabernhardt
19 months ago

As with Twenty Twenty (#55990), I would not want to change the text color when the user keeps the theme's default Text and Background color settings.

However, if someone selects a text color for this block or else a background for content including the pullquote, inheriting should be better.

With block-library/style.css, the paragraph already inherits the text color.

#9 @poena
19 months ago

Hi,
I have tested patch 56008.1.

WordPress 6.1-beta2-54351: both the default color and custom color (text and background) works well for me in the editor and the front.

5.9.4:
The default and custom text colors are correct on the front.

Background colors selected from the palette does not show on the front.
Background colors selected with the color picker, does show on the front since the color is inline.

I don't fully understand why, but WordPress
sets the background color to none:

.wp-block-pullquote:not(.is-style-solid-color) {
    background: none;
}

The theme could solve this with a higher specificity, targeting the has-background class.

In the editor, the cite is the default color even if a custom text color is selected.
I believe the difference is that in 5.9.4, the citation text is not in an actual
cite element but in a div.
This should be solvable by adding .wp-block-pullquote__citation
The markup in the editor is:

<figure class="block-editor-block-list__block wp-block has-border-color has-bright-red-border-color has-bright-blue-color has-yellow-background-color has-text-color has-background is-selected wp-block-pullquote" id="block-a3c0d349-3b27-4ecb-ad67-90f27ef5ecff" tabindex="0" role="document" aria-label="Block: Pullquote" data-block="a3c0d349-3b27-4ecb-ad67-90f27ef5ecff" data-type="core/pullquote" data-title="Pullquote" style="border-color: rgb(255, 103, 95); color: rgb(0, 122, 204); background-color: rgb(255, 239, 142);">
<blockquote><div role="textbox" aria-multiline="true" aria-label="Pullquote text" class="block-editor-rich-text__editable rich-text" style="white-space: pre-wrap; min-width: 1px;" contenteditable="true"><p>quote text</p></div>
<div role="textbox" aria-multiline="true" aria-label="Pullquote citation text" class="block-editor-rich-text__editable wp-block-pullquote__citation rich-text" style="white-space: pre-wrap; min-width: 1px;" contenteditable="true">cite</div>
</blockquote>
</figure>

So again it depends on which WP version we are fixing it for. If it is enough to solve it in 6.1, then the patch is ready in my opinion.

#10 @audrasjb
19 months ago

Thanks @sabernhardt and @poena!

Looks like 56008.1 is the best approach then.

Concerning the issue, we need to primarily fix it for 6.1, since the only officially supported version of WordPress is the current version. Older versions are only receiving security fixes. Plus it doesn't make much sense to me to run an old WP version and to only update plugins or themes. That's why I'm in favor of fixing this for the current version and that's all :)

#11 @nithins53
19 months ago

The patch 56008.1 works perfectly fine on WP 6.1 beta 2.

#12 @audrasjb
19 months ago

  • Keywords commit added
  • Owner set to audrasjb
  • Status changed from new to accepted

Self assigning for commit.

#13 @audrasjb
19 months ago

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

In 54381:

Twenty Sixteen: Improve Pullquote Block text color consistency between editor and front-end.

This changeset ensures the text color selected for the text of the Pullquote Block is reflected on both front-end and on the editor.

Props nithins53, nidhidhandhukiya, audrasjb, sabernhardt, poena.
Fixes #56008.

#14 @sabernhardt
18 months ago

#56540 was marked as a duplicate.

Note: See TracTickets for help on using tickets.