[Color Picker] Make custom HEX text field available without a click

[kjellr]

Currently (Gutenberg 12.4), the color value inputs are not available unless you click on the "Show detailed inputs" button. If you don't click that button, click on the hex value shown, you'll activate a "Copy" action.

Users who want to input their own custom HEX values need to learn to hit that icon before they can modify the current HEX value. I've found this to be confusing personally — more often than not, I'm coming here to input a custom value, not copy one, and I have to do an extra click to make that happen. Besides, the copy action feels a little over-engineered: it's generally common to copy/paste content from a standard form field.

I'd suggest we just go ahead and show the detailed inputs by default:

... and if we really want a copy action, we can display it where the "Show detailed inputs" button currently lives:

(We'd need a new icon though, I just borrowed the "Pages" icon for now)

[jasmussen]

This makes sense to me. Designwise, one thing we could do is keep the interface as is, only let the hex code be editable on click, and then surface a copy icon inside the input field when it's focused?

[supernovia]

then surface a copy icon inside the input field when it's focused?

I like that. Can we be sure the copy format matches what one should paste, or better, make the input field automatically handle hex code whether or not there's a # in front?

[dozentis]

Nice, that you mentioned this issue, I am also annoyed by this and wanted to report. (I had to recolor 10 blocks lately, and when inserting the hex value, I kept accidentally coming up with copy instead of edit

Four clicks and a long way with the mouse to paste a color value from clipboard. (screenshot WP5.9.1)

)

[dozentis]

My suggestion for quicker copying the color-value

[dozentis]

And there is a little bug when copying a color by click from there and paste to another place. If you paste a copied color you'll notice that it pastes the hex sign too and the color becomes invalid.

[aaronrobertshaw]

The two main issues here should now be resolved with #41222 and #41223 landing.

• ColorPicker: Only display detailed inputs #41222
  • A new copy button was added for all color models as you otherwise cannot easily copy the non-hex colors
  • It made sense to keep that copy button consistent
• ColorPicker: Strip hash from pasted hex values in ColorPicker #41223
  • This PR improved the UX around pasting hex values into its input field