Improve Colour Picker Copy and Pasting UX

[Nyiriland]

What problem does this address?

Better UX for pasting/copying colours within the colour picker. Below is a Figma mockup.

What is your proposed solution?

See above screenshot. Essentially:

• Colour picker opens with "detailed inputs" mode already active
• "Show detailed inputs" toggle (now unnecessary) is replaced with a button to copy colour value
• In future iterations, could potentially condense colour value input fields to a single row to reduce vertical space.

[iwasthesword]

I agree with this. As a standard UX when clicking I expect it to be editable/selected so I can choose to either copy or paste it.

[mghenciu]

+1 for an UI/UX rework here.

Developers Tools from Chrome use a similar popup - and the (first) UX flow is to edit the HEX value, not copy:

---

To be more empathic , I tried using the flow using only the WP context (meaning that I tried copying a gradient from a Section to another). And here is another pain point - # char handling.

• So I went to a section, selected the color
• clicked on the HEX to copy it
  
• HEX was copied with Number sign #2873FF
• I went to another Section to paste the copied HEX
• and when I paste it, it doesn't works because it should be without the #
  

---

For the second paint point, a potential solution would be to make it like in Figma & Chrome Dev Tools - if a user would paste #7B61FF or 7B61FF, those will both work.

[stokesman]

Nicely detailed suggestions @Nyiriland. The main issue here should now be resolved by #41222. The issue noted by @mghenciu should be resolved by #41223.

It looks like this issue could be closed. The unaddressed suggestion is:

In future iterations, could potentially condense colour value input fields to a single row to reduce vertical space.

There may be another open issue to which the suggestion could be appended.

[annezazu]

For context, with WordPress 6.2, the current view looks like this:

As a result, and based on the above comment from @stokesman, I'm going to close this issue out!