[wp-trac] [WordPress Trac] #51090: Twenty Nineteen: Gutenberg default displayed color picker is not working

[WordPress Trac]

#51090: Twenty Nineteen: Gutenberg default displayed color picker is not working
---------------------------+------------------------------
 Reporter:  kishanjasani   |       Owner:  poena
     Type:  defect (bug)   |      Status:  assigned
 Priority:  normal         |   Milestone:  Awaiting Review
Component:  Bundled Theme  |     Version:  5.5
 Severity:  normal         |  Resolution:
 Keywords:  has-patch      |     Focuses:
---------------------------+------------------------------

Comment (by 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>
 }}}

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/51090#comment:6>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform