Color picker: Improve inserting values from clipboard

[hanneslsm]

Description

When inserting a custom color there are too many unnecessary steps involved. After opening the color picker inserting from the clipboard should be easier.

Step-by-step reproduction instructions

Let's say I have a custom color I want to transfer to a text Gutenberg.

1. In my example I copy a color from Figma.
2. Open up the color panel for the text.
3. Open up the color picker
4. Try to paste the color value. Not working.

--

• When you have the color picker open
• you have to select the current Hex Value first either with
  • the cursor or
  • keyboard (CMD + A)
• delete the current value and
• paste the copied value.
• You have to do all of these because if you just select the input field and insert the value, it will be appended to the current value

@annezazu Maybe this is an issue for the UX & Polish board? ;)

Screenshots, screen recording, code snippet

Screen.Recording.2023-05-10.at.10.45.24.mp4

Environment info

• Wordpress 6.2
• GB 15.7.1

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

[hanneslsm]

To add on that, accidentally copied spaces, tabs in front of/and # should be removed automatically.

Screen.Recording.2023-05-10.at.11.09.31.mp4

[hanneslsm]

And maybe we could even remove the step that the color picker for a custom color must be opened. Why not just CMD+V when the Color Palette Panel is opened?

[annezazu]

Tagging in @WordPress/gutenberg-design for thoughts here! Not adding to the UX & Polish just yet as it's not in an actionable state for developers. Thanks for opening 🥳

[richtabor]

maybe we could even remove the step that the color picker for a custom color must be opened

Probably, if its a hex value.

[richtabor]

Why not just CMD+V when the Color Palette Panel is opened?

That could be fun. Not sure technically how plausible this is, but interesting idea.

[hanneslsm]

Not adding to the UX & Polish just yet as it's not in an actionable state for developers.

Quick and actionable would be that the input field of the Hex value is selected by default when opening the color picker. This would remove at least one click. Should I create a new issue just for that?