Color Picker: Problem with HEX copy & paste

[supernovia]

Description

Hex code pastes incorrectly when I copy a HEX color from one block and try to paste it into another

Step-by-step reproduction instructions

1. Create a couple of blocks in different customized colors

2. Copy the hex code from one block:

   • Tap the color box
   • Click on the hex color to copy

3. Paste into the hex code for another block

   • Be sure to click into the color, then click the slider, then paste. Clicking on the hex code will just copy that instead.

Note the hex box includes a # in front and only allows six characters, but the paste includes a #. The seventh character gets cut off, and we end up with an invalid hex color, so it defaults to black.

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

Could we adjust the box so that it can handle a #, as well as two more characters for alpha if there is one?

Screenshots, screen recording, code snippet

You can see a vide of the bug here:
https://cloudup.com/cJD1MDyAEBZ (download original if needed)

And a screenshot (though it's less clear) here

e

That color is supposed to be a pale pink, but the last character of the code gets cut off.

Environment info

• Gutenberg 12.0.1
• WordPress 5.8.2

Browser and OS doesn't seem to matter, as a forum volunteer duplicated this on her system. I noticed the problem this morning on WordPress.com; she noticed it and reported it as well here. It's also happening on a .org installation with Gutenberg.

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[formosattic]

Copy & Paste kind of works now but is still broken. I can paste the HEX code, but:

• 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

Environment info

• Gutenberg 12.2.0
• WordPress 5.8.2

[melchoyce]

Also just encountered this — it's a pain when working with multiple custom colors!

[annezazu]

This should be resolved as of Gutenberg 12.7 💥 #38335

Here's a video of the current experience:

custom.hex.mov

I confirmed it works when pasting from another block too. I also wasn't able to replicate the jumping @formosattic using Gutenberg 12.9 and WordPress 5.9.2! Hopefully, that's also resolved. If not, please create a new issue about that specific experience (happy to handle that as well).