Twenty Nineteen: Pullquote Block Text Color not reflected on frontend

[nithins53]

On Twenty Nineteen theme, when we add the Pullquote block, and add color to the text, it is only reflected on the editor and not on the front end.

Steps to Replicate:

1. Activate the Twenty Nineteen theme
2. Insert Pullquote block
3. Enter text and add color

For more information, screen recording link attached below.

​https://www.loom.com/share/74752e102b50468fb38d591949d93c0e

Thank You.

[umesh84]

added patch

[sabernhardt]

Thanks for the report!

This had been fixed on #49410, but now the color class is added to the .wp-block-pullquote figure instead of the blockquote element.

Perhaps each color in _blocks.scss could include a selector like .wp-block-pullquote.has-primary-color blockquote.

    .has-primary-color,
    .wp-block-pullquote blockquote.has-primary-color,
    .wp-block-pullquote.has-primary-color blockquote,
    .wp-block-pullquote.is-style-solid-color blockquote.has-primary-color,
    .wp-block-pullquote.is-style-solid-color blockquote.has-primary-color > p {
        color: $color__link;
    }

(The Solid Color block style seems unavailable now, so that may not need adjustment.)

[sabernhardt]

Oops, I missed the patch. If we use inherit instead of my suggestion, a patch still needs to include changes to the appropriate SCSS file (and both style.css and style-rtl.css).

[deepakvijayan]

Fix pullquote text color not updating issue (patch for sass as well)

[deepakvijayan]

Fix pullquote text color not updating issue (patch for sass as well) + style-rtl.css

[nithins53]

Replying to sabernhardt:

Oops, I missed the patch. If we use inherit instead of my suggestion, a patch still needs to include changes to the appropriate SCSS file (and both style.css and style-rtl.css).

The new patch by Deepak Vijayan seems to cover what you have mentioned.

[nithins53]

@sabernhardt 55981.2.diff covers both the SCSS files.

[sabernhardt]

Thanks for the patch! Removing the color from the blockquote element works with trunk and the latest Gutenberg. Then it falls back to the body color (also #111) when no special colors are specified.

However, there was a reason to add it in the first place. The editor's theme.css used to make the block a gray color, which was ​changed to `currentColor` for Gutenberg 9.4.

.wp-block-pullquote {
  color: #40464d;
}

To accommodate older versions of WordPress, Twenty Nineteen probably could move that color from the blockquote to the block container.

	.wp-block-pullquote {
		color: $color__text-main;
		border-color: transparent;
		border-width: 2px;
		padding: $size__spacing-unit;

		blockquote {
			border: none;
			margin-top: calc(4 * #{ $size__spacing-unit});
			margin-bottom: calc(4.33 * #{ $size__spacing-unit});
			margin-right: 0;
			padding-left: 0;
		}

[nithins53]

@sabernhardt Thank you for testing it out.

[poena]

Move the text color to the wrapper

[poena]

In 55981.3, I implemented the change that @sabernhardt suggested and moved the text color.

This worked well for me in 5.9.4 and 6.1-beta2-54351.

I found one exception, when the pull quote has the black background color from the palette, the theme enforces a white text color:

.editor-styles-wrapper .has-dark-gray-background-color p {
    color: #fff;
}

I assume this was added to maintain a high color contrast, -but before there were text color options.
Do we consider this a bug or feature?

[chaion07]

@nithins53 thank you for reporting this. We reviewed this ticket during a ​recent bug-scrub session. Based on the feedback received from the team we are making the following changes:

1. Adding keyword dev-feedback for visibility
2. We need to consider the exception mentioned by @poena
3. A feedback from the core committers would be highly appreciated

Cheers!

Props to @nithins53 @cu121 @robinwpdeveloper

[audrasjb]

As per today's bug scrub:

Looking at comment:7, I think we can probably mark this one as ready for commit. The proposed patch fixes the issue, and the small exception doesn’t look like a bug to me, it’s an exception, and maybe even a feature.

[audrasjb]

In 54413:

Twenty Nineteen: Ensure Pullquote Block text color is reflected on front-end.

This changeset ensures Pullquote Block text is consistent between the editor a on front-end.

Props nithins53, umesh84, sabernhardt, deepakvijayan, poena.
Fixes #55981.

[sabernhardt]

This still needs the compiled stylesheets :)

…4413

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

[whaze]

hi
i add a PR with compiled stylesheets from https://core.trac.wordpress.org/changeset/54413

[audrasjb]

Thanks @whaze!
@poena or @sabernhardt are you available to review this follow-up patch? (I have a lot on my plate today).

[sabernhardt]

front end, with compiled stylesheets

[sabernhardt]

The patch fixes the reported problem: compiled stylesheets add the correct text color for quote text within the post content.

We may want to revisit this, however, on another ticket. The citation is always gray in the post content, and theme color classes do not apply outside of .entry-content (for any blocks).

[audrasjb]

Thanks a lot @sabernhardt!

Yes a new ticket to address further issues in the next major would be a nice to have :)

[audrasjb]

In 54466:

Twenty Nineteen: Add missing compiled CSS declarations after [54413].

Follow-up to [54413].

Props sabernhardt, whaze.
Fixes #55981.

Committed in https://core.trac.wordpress.org/changeset/54466

[sabernhardt]

For the follow-up tickets, we can probably use #56455 and #56456.