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: |
|
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)
Change History (12)
#1
@
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
#3
@
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
@
17 months ago
An issue similar to this ticket has been reported in the Gutenberg repository: https://github.com/WordPress/gutenberg/issues/54530
#7
@
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
ornpm 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
@
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
@
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.
## 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