Make WordPress Core

Opened 22 months ago

Last modified 5 weeks ago

#58171 new defect (bug)

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

Reported by: utsav72640's profile utsav72640 Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version: 6.2
Component: Bundled Theme Keywords: has-patch close
Focuses: ui, administration Cc:

Description

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

Attachments (3)

58171.patch (1.3 KB) - added by viralsampat 12 months ago.
I have checked above mentioned issue and resolved it. Here, I have added my patch.
CleanShot 2024-02-20 at 00.06.52@2x.png (429.8 KB) - added by viralsampat 12 months ago.
Back-end
CleanShot 2024-02-20 at 00.07.52@2x.png (1.6 MB) - added by viralsampat 12 months ago.
Front-end

Change History (12)

#1 @SergeyBiryukov
22 months ago

  • Summary changed from Twenty Ninteen - The pullquote block appears to have a problem when selecting the text color. to Twenty Nineteen: The pullquote block appears to have a problem when selecting the text color.

This ticket was mentioned in PR #4402 on WordPress/wordpress-develop by bijit027.


22 months ago
#2

  • Keywords has-patch added

## 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

#3 @utsav72640
21 months ago

Thanks for the report and detailed instructions, @SergeyBiryukov

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

#4 @wildworks
17 months ago

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

#5 @poena
12 months ago

#60561 was marked as a duplicate.

@viralsampat
12 months ago

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

#6 @karmatosed
6 months ago

  • Keywords needs-testing added

#7 @wildworks
5 months ago

@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;
		}
	}
}

#8 @poena
5 weeks ago

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.

#9 @poena
5 weeks ago

  • Keywords close added; needs-design-feedback needs-testing removed

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.

Note: See TracTickets for help on using tickets.