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

[nithins53]

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.

[nidhidhandhukiya]

after applying this solution the issue is resolved.

[SergeyBiryukov]

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

[audrasjb]

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.

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

[audrasjb]

Before patch - editor

[audrasjb]

Before patch - front-end

[audrasjb]

After patch - editor

[audrasjb]

After patch - front-end

[audrasjb]

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

[sabernhardt]

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.

[poena]

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.

[audrasjb]

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 :)

[nithins53]

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

[audrasjb]

Self assigning for commit.

[audrasjb]

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.

[sabernhardt]

#56540 was marked as a duplicate.