Twenty Nineteen: Gutenberg default displayed color picker is not working

[kishanjasani]

To Re-produce issue :

Activate twenty nineteen theme.

Now Add Paragraph block to post or page and select some text manually.

Go to More Rich Text control -> Select Text Color

Actually a CSS classes for theme_support editor-color-palette is not working.

Please have a look at /sass/blocks/_blocks.scss

CSS of that generated classes are not applied properly.

It's also not working on color pallate too.

[wpamitkumar]

Hi @kishanjasani, welcome to WordPress Core Trac!

I have added a fix for this CSS loading issue which will resolve the current issue.

[wpamitkumar]

Please check this patch for WordPress/wordpress-develop git repo.

[nayana123]

Checked with the latest version of WP and it's looking good.

[poena]

Hi @kishanjasani & @wpamitkumar

I am testing Twenty Nineteen version 2.7 and WordPress 6.4 RC 4. I am using Chrome on Windows. No plugins are active.

I am not sure if I understand the problem correctly. To be honest I got confused because the ticket mentions adding paragraphs, but the linked image, as well as the patch, shows the pull quote block.
Can you provide any more information or testing instructions? I do understand that a very long time has passed since the problem was reported and that you might not remember :).

I tested the following, can you please confirm if I am testing the correct problem?
I want to add that I do not see the JavaScript error that is shown in the linked image file.

Testing instructions

1) Add a pull quote block.
2) Change the background color to the Blue color in the palette.

-Notice that the text color changes from the default text color to white. This is part of the theme's color contrast feature, which is intended to improve the accessibility by increasing the color contrast ratio.

3) Click on the quote text in the block. Select part of the text. In the toolbar, open the More option and select the Highlight option. Add a highlight text color from the theme palette, and a custom color from the color picker.

Notice that the part of the text that is highlighted is black if the following palette colors are chosen:

• Blue
• Dark blue
• Dark grey
• Light grey

And white if the white color is chosen.

Now please test the colors on the front of the website. Notice that the part of the text that is highlighted
always show the selected highlight color, the correct color.
So there is an inconsistency where the editor and front does not show the same color. This is a bug.

In the editor:
Viewing the source in the browser developer tools shows that the text color is from the browser styles:

mark {
    background-color: mark;
    color: marktext;
}

The <mark> element that is used for the highlight has the class names has-inline-color has-palette-color-name-here, but the style attribute does not actually contain the inner color:

<mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-secondary-color" data-rich-text-format-boundary="true">highlighted text -palette</mark>

Compared to the front:

<mark style="background-color:rgba(0, 0, 0, 0);color:#e7e532" class="has-inline-color">highlighted text -palette</mark>

[sabernhardt]

I apparently have seen the theme preset color issue with Inline Color (now Highlight). See ticket:50120#comment:25 and the screenshot below it.

The Highlight uses mark instead of span, which results in a new text color. However, the basic issue seems to be the same as #49787. When the editor does not add text color in a style attribute, the element does not get that from the theme.

For a Pullquote block with a background color, the color issue is reported on #56456. Twenty Nineteen's editor styles set the text color to either white or black, even when a user selects another text color.