Feature/colour

[lukecarbis]

An alternate approach to a colour picker control.

Closes #201.
Resolves #32.

[lukecarbis]

Here's a template you can use to test the colour picker (just change the field name on line 1 to match your field): https://gist.github.com/lukecarbis/28d70ece69ee97adfbf769011301a573

[RobStino]

I'm still QA testing, but noticed the following. Mostly discussed in our call earlier.

• The text input for the text field should not read only. I'm guessing that any pasted/typed input will mean the control will have to recognise what's being input.
• The hashed background on the colour indicator for Alpha colour types
• Hover state you mentioned isn't working
• The Colour indicator circle size isn't the same height as the text input. Looks funky
• Need to style the colour indicator for the inspector

[lukecarbis]

Okay – I've updated the PR with those fixes. A couple of notes:

• The colour indicator circle is now 28px with 1px margin on top and bottom (total 30px), whereas the text input is 30px high. This colour indicator height matches the other colour circles in Gutenberg.
• Know unfixable (for now) issue: changing the colour in the colour picker, then in the text input, the colour circle doesn't update after the text changes
• This also fixes an issue where error'ed fields (such as bad URLs or Emails) in the sidebar weren't receiving the correct red border styles

[RobStino]

Tested and confirming:

• Checked background looks great!
• No more read only. Nice!
• Sidebar styling looks good

Re the colour indicator circle placement in the editor, is it possible to have it vertically aligned with the center of the text field?

I'm still seeing this No's in the editor and front end as discussed last night. I forgot to add it as a comment here in the PR, so adding it here now.

[lukecarbis]

@RobStino It should be vertically aligned already – screenshot it for me?

Is the "No's" issue a problem with this PR or is it on develop?

[RobStino]

Hey @lukecarbis
It's vertically aligned to the top currently.

Checked and the "No's" issue is only on this PR branch.

[RobStino]

@luke I adjusted that margin further so it's vertically centered.

Check it over and merge when you're ready. I've reviewed/approved.

[RobStino]

Looks good to me