Color picker – Add full gradient support

[barklund]

Full gradient support added in this PR.

With full test coverage for color picker, color input and all color-related util functions!

See it in action here: https://youtu.be/V3qsoONXUwk

Fully fixes #263.

[barklund]

Replying to various comments by @spacedmonkey:

Weird thing I noticed, I couldn't undo gradient changes. As in, I made 5 points in the gradient when I pressed undo, all the changes were reverted. Is this expected?

Works for me. I can undo and redo each separate gradient change just fine - done with mouse or keyboard. Basically, if the actual page layout updates when you change any individual thing, each individual change will always create an entry in the history. It simply can't not happen.

I noticed that the arrow keys do not work, as it doesn't matter what directory, the marker always goes left.

Well spotted.

I am also going to post my thoughts I posted on the gutenberg gradient picker as they are very similar in design and functionality. WordPress/gutenberg#17603 (comment)

You have many separate comments there, trying to address them individually:

• Removing a control point should be easy: need UX for this. Currently you can drag a stop 30px off the gradient or press delete/backspace when focused. If we want to make it more explicit, UX is needed.
• Overlaying control points are currently possible: Yes. And the result UX is a bit tricky. Potential mitigation should happen both when adding and moving stops. UX decision needed.
• I don't think a mark should able to be move pass the next order in order: Why not? Works great for me - re-ordering stops happen here. UX decision needed.
• Should there be a max number of control points? : If need be, it could very easily be added. UX decision needed.
• Delete gradient stop by keyboard: Implemented here.
• Move gradient stop by keyboard: Implemented here.
• Add gradient stop by keyboard: Implemented and addressed here.

Should we add more testing to this? Maybe some basic e2e or intergration tests?

I want to add a lot more testing to the color picker, but it's very time intensive. I am working on it, though. It'll be mostly integration testing for this complex component.

@spacedmonkey for further comments and discussion, please if at all possible make them inline, as it's so much easier to have a conversation going in an inline thread rather than in disjoint comments on the main PR. I have linked to all relevant parts of the PR inline above. Thanks 😃

[swissspidy]

Impressive work! 💪

Edit: Just noticed a small thing while looking at another PR, but I'd say this should be handled in a new PR.

Let's get this beast in first!