Twenty Nineteen: The pullquote block appears to have a problem when selecting the text color.

[utsav72640]

To reproduce the issue with the pullquote block and text color:

1) Activate the Twenty Nineteen theme on your WordPress website.
2) Create a new post or page.
3) Add a pullquote block to the content.
4) Select the pullquote text and attempt to change its color.
5) Notice that the selected text color is not applied to the pullquote text in the WordPress editor.
6) Notice that the text color is still not applied to the pullquote text.
7) In summary, selecting text color for pullquote block does not seem to work properly, as the applied color is not visible in the editor and working on the front-end of the website.

Sharing a video can be very helpful in identifying and understanding the issue with the pullquote block and text color.

Video URL :- ​https://www.awesomescreenshot.com/video/16723789?key=f90c7b7a2685bbaccf2457bad3384f83

## Twenty Nineteen: The pullquote block appears to have a problem when selecting the text color. Fixed

Pullqoute block has an issue with selecting a color. Fixed this issue with a change of some CSS code.

Image1: ​https://prnt.sc/-SUk4prZKz9F
Image2: ​https://prnt.sc/-QS5Ty-nLmPP
Image3: ​https://prnt.sc/C2F-qsPDM0Bp

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

[utsav72640]

Thanks for the report and detailed instructions, @SergeyBiryukov

So what can we have to do the next step. Can you please assist to me ?

[wildworks]

An issue similar to this ticket has been reported in the Gutenberg repository: ​https://github.com/WordPress/gutenberg/issues/54530

[poena]

#60561 was marked as a duplicate.

[viralsampat]

I have checked above mentioned issue and resolved it. Here, I have added my patch.

[viralsampat]

Back-end

[viralsampat]

Front-end

[wildworks]

@viralsampat Thank you for submitting the patch.

The CSS files for the Twenty Nineteen theme are automatically generated via node-sass. Therefore, we cannot edit the CSS files directly.

We need to perform the following steps:

• Go to the theme directory and run npm install to install the npm dependencies
• Make changes to the scss file
• Run npm run build or npm run watch to generate the CSS file

Also, I think it's best to avoid using the !important rule as much as possible.

From what I've researched briefly, we may be able to solve the problem by adding a style like the one below here: ​https://github.com/WordPress/wordpress-develop/blob/c8d4bc734fcf35c34f042b29d0897a955680ac0b/src/wp-content/themes/twentynineteen/style-editor.scss#L543

.wp-block-pullquote {
	// ...
	&.has-text-color {
		p,
		.wp-block-pullquote__citation {
			color: inherit;
		}
	}
}

[poena]

I am not able to reproduce the issue unless I also change the background color to a color from the themes color palette.
Which matches this ticket: https://core.trac.wordpress.org/ticket/56456

That is because the theme has a built in color contrast feature created before the block had the color options.

I suggesting closing the older ticket and continuing here because there are more comments, screenshots etc on this ticket.

[poena]

I found yet another ticket, and I believe it has the most complete patch: https://core.trac.wordpress.org/ticket/56455

I know I just suggested that we should continue here, but because there was a patch submitted only 3 weeks ago, I think both this ticket and 56456 should be closed.

[karmatosed]

Thank you, everyone, for your work, particularly @poena, for your investigation. Based on the recommendation, I am going to close this ticket.

[karmatosed]

#56456 was marked as a duplicate.