InLine Color Picker behaves erratically, closes unexpectedly

[formosattic]

Quick summary

Color picker can't be set manually, it works by pasting it but is erratic (see below notes)

Issue already reported in the Gutenberg repo, but posting here for reference and track reports:

• Highlight: can't manually type in a custom HEX code WordPress/gutenberg#37628
• Color Picker: Problem with HEX copy & paste WordPress/gutenberg#37018

Steps to reproduce

1. Add text in Paragraph block
2. Use Highlight, then try to set a custom color either by typing it manually or paste a hex code (ex: 0000FF)

What you expected to happen

That the custom hex code would update.

What actually happened

When typing HEX code

The Highlight won't let me manually enter an HEX code, and the color picker also jumps.

When pasting HEX code

• the color picker jumps
• the HEX code isn't properly updated in the color picker, I have to paste it again or click on the color palette where it shows the HEX properly set

Context

4637218-zd-woothemes

Simple, Atomic or both?

No response

Theme-specific issue?

No response

Browser, operating system and other notes

No response

Reproducibility

No response

Severity

No response

Available workarounds?

No response

Workaround details

No response

[formosattic]

Tested, it's still an issue.

[Robertght]

Another case here: 4650946-zen

This workaround did the trick for me:

To work around, I have to paste the code somewhere else, then copy it again without the #.

[donalirl]

Seen in #33488011-hc

[edequalsawesome]

Also reported in 4709174-zen

[Agepeuve]

Another case in the ES forums - https://wordpress.com/es/forums/topic/no-puedo-cambiar-color-de-fondo-de-los-bloques-o-resaltar-en-otro-color-alguna-palabra/

[cometgrrl]

Added to the HE Cross-repo Watchlist.

This issue is tracking an issue in another repository. All +1's of end-user reports should be done on this issue, while any discussion related to the issue itself and its fix should be done on the issue in the outside repository.

[carinapilar]

Got another one on 33973744-hc - the workaround didn't work, I had to use the Tab to move to the color field, paste the code, and leave the field, that was what made the color change stick.

[msilbers]

reported by 33995772-hc

[formosattic]

From #60507 , other user reports:

• 4725572-zen (user wants reply once fixed)
• 33875036-hc

[the-misha]

Reported in 33906107-hc (gave workaround).

[thekingsprojects]

Another report here: 4800099-zen

The user is also experiencing an issue with color settings in the right settings panel, but that appears to be plugin-related in some way. Ideally, the Highlight issue would allow them to work around whatever that problem actually is.

Gave them the pasting workaround for now. They'd appreciate an update when we know more.

[nicolynramos]

Another report here: 4846715-zen

[wpshellbelle]

Another report at 34603662-hc
I was able to duplicate the issue on my end on my test site as well. The workaround did work for me.

[susanjanec]

Another report - 24915200-hc
Workaround didn't work for me

[alpavanoglu]

I closed 4800099-zen. A new ticket needs to opened to inform the user when the issue is resolved.

[cuemarie]

Reported here: 5259323-zd-woothemes . New ticket to update user when resolved.

This user is seeing the specific issue noted in #60507 - the color picker under Highlight defaults back to #000000, no matter what they type. User's workaround was to copy/paste the code - this applies the color, but displays the issues noted above as well (color is picked, but the hex code doesn't match in the color picker.) I was able to replicate the same issue on my test AT site.

[hacchism]

Another report at 36125794-hc

[github-actions]

Support References

This comment is automatically generated. Please do not edit it.

• 4637218-zen
• 4650946-zen
• 4709174-zen
• 4725572-zen
• 4800099-zen
• 4846715-zen
• 5259323-zen
• 5834953-zen
• 5836244-zen

[devNigel]

Another report: 36828672-hc

Suggested copy pasting the color code.

[ha-un]

Another report: 36913007-hc

[ariel-maidana]

Another report: 5834953-zd-woothemes
Pasting hex code didn't work, but we were able to manually enter HSL values as a workaround.

[zdenys]

39296060-hc User is very annoyed by the bug. We should let them know once it's fixed.

• 5836244-zd-woothemes

[cuemarie]

Added to the Dotcom Bug Prioritization Board. The 2 Core issues linked in the original report are resolved, but we're still seeing these reports come in, so let's re-triage this through our current process and see if we can get more 👀 on it.

[cuemarie]

📌 SCRUBBING : RESULT - Replicated / Could Not Replicate / Uncertain

• Tested on Simple: Replicated
• Tested on AT: Replicated
• Tested on Self-hosted: Replicated
• Replicable on Core? Yes

📌 FINDINGS/SCREENSHOTS/VIDEO

• I'm still able to replicate this issue, though it seems to have improved. The first time I open the Highlight > Color picker and try to type in hex code numbers, it closes on me and defaults to 000000; but if I open it again and move the slider around, I'm then able to type in code. If I open the color picker on a new highlighted string and paste hex code, the code applies but the color picker does close on me again

AT Example

Screen.Capture.on.2023-03-10.at.21-39-59.mov

Simple Example

Screen.Capture.on.2023-03-10.at.21-37-00.mp4

Self-Hosted Example

Screen.Capture.on.2023-03-10.at.21-39-01.mov

📌 ACTIONS

• Marked as Triaged for Quality Squad review

[cuemarie]

Found this in Core that may be related: WordPress/gutenberg#41088

[cuemarie]

Created new issues based on my testing:

• Behavior in WP 6.1.1, Gutenberg inactive: Inline Highlight ColorPicker - Typing hex codes default to 000000, causes colorpicker to jump location WordPress/gutenberg#49286
• Behavior in WP 6.1.1 + Gutenberg 15.4.0: Inline Highlight ColorPicker - In Gutenberg 15.4.0, ColorPicker closes the first time I try to change colors WordPress/gutenberg#49287

[cuemarie]

The core issue WordPress/gutenberg#49287 was recently closed as fixed, thanks to WordPress/gutenberg#54736 (Merged in GB 16.8), so that should help down the line!