Make WordPress Core

Opened 4 years ago

Closed 3 months ago

#51090 closed defect (bug) (duplicate)

Twenty Nineteen: Gutenberg default displayed color picker is not working

Reported by: kishanjasani's profile kishanjasani Owned by: poena's profile poena
Milestone: Priority: normal
Severity: normal Version: 5.5
Component: Bundled Theme Keywords: has-patch reporter-feedback needs-testing-info
Focuses: Cc:


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.

Attachments (2)

51090.patch (1.5 KB) - added by wpamitkumar 4 years ago.
51090-2.patch (1.7 KB) - added by wpamitkumar 4 years ago.
Please check this patch for WordPress/wordpress-develop git repo.

Download all attachments as: .zip

Change History (11)

#1 @wpamitkumar
4 years ago

  • Keywords has-patch added; needs-patch removed
  • Severity changed from normal to major

Hi @kishanjasani, welcome to WordPress Core Trac!

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

4 years ago

#2 @SergeyBiryukov
4 years ago

  • Component changed from Themes to Bundled Theme
  • Keywords needs-design removed
  • Summary changed from Gutenberg default displayed color picker is not working ( Twenty Nineteen Theme ) to Twenty Nineteen: Gutenberg default displayed color picker is not working

4 years ago

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

#3 @nayana123
2 years ago

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

#4 @poena
7 months ago

  • Owner set to poena
  • Status changed from new to assigned

#5 @poena
7 months ago

  • Severity changed from major to normal

#6 @poena
6 months ago

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>

#7 @poena
6 months ago

  • Keywords reporter-feedback needs-testing-info added

#8 @sabernhardt
6 months ago

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.

#9 @poena
3 months ago

  • Milestone Awaiting Review deleted
  • Resolution set to duplicate
  • Status changed from assigned to closed

Duplicate of #49787.

I will close this ticket as a duplicate, but it can always be re-opened.

Note: See TracTickets for help on using tickets.