Color picker: add a hue-only mode

[celloexpressions]

Twenty Seventeen will make use of a hue picker for its custom colors. The WP color picker, and the underlying Iris color picker need to be updated to support a hue-only mode, and WP_Customize_Color_Control would be updated to add a mode parameter that can be set to hue. When the hue mode is in use, the picker should return the numerical hue (0-359) instead of a hex color.

See ​https://github.com/WordPress/twentyseventeen/issues/116. @mattwiebe is potentially interested in implementing this.

[joshcummingsdesign]

I'd be interested in working on this.

[celloexpressions]

Awesome @joshcummingsdesign! If you can get a hold of @mattwiebe, he may have insights here, but I'm thinking it's a matter of starting with Iris, then working your way out to wpColorPicker and WP_Customize_Color_Control to add the hue mode option.

[jorbin]

@celloexpressions Do you view this as necessary for 4.7, or just a nice to have? Is this something the CSS editor would take advantage of?

[celloexpressions]

@jorbin this is needed for Twenty Seventeen's custom colors, actually. The current approach is in master, but the UI is a range slider, which isn't very intuitive. This will make it visual.

@mattwiebe let me and Helen know that he's now working on this in Iris, so I'm assigning to him for now.

[mattwiebe]

First pass, no Customizer control yet

[mattwiebe]

The above patch was with help from @joshcummingsdesign

I might not get to WP_Customize_Color_Control today but it should be pretty straightforward.

In wpColorPicker, you just do $(inputEl).wpColorPicker({ type: 'hue' }) to create a hue-only slider.

[mattwiebe]

With WP_Customize_Color_Control integration

[mattwiebe]

Working patch there. Here's a video of it being used in Twenty Seventeen: ​https://cloudup.com/cxDNyN4ORsz

[celloexpressions]

Add Twenty Seventeen integration with the new hue slider.

[celloexpressions]

Nice work!

38263.3.diff​ makes use of the new slider in Twenty Seventeen. Testing, it works well for mouse and touch input, and can be used with a keyboard, although the slider needs a visual focus style. That's likely an issue with the existing color picker and can be addressed separately from this ticket.

See #38426 for making the Twenty Seventeen control contextual to the custom scheme.

[mattwiebe]

the slider needs a visual focus style

Yeah afaik there's a CSS reset in core that nukes focus stuff inherited from jQuery UI here.

[celloexpressions]

This looks good to me.

[westonruter]

@mattwiebe there's one thing missing I see. It's missing the two-way data binding between the hue control and the setting. The non-hue color picker will update the setting value when a different color is chosen, and likewise when the underlying setting is programmatically changed the color picker control selects the new color via this code:

this.setting.bind( function ( value ) {
        picker.val( value );
        picker.wpColorPicker( 'color', value );
});

This part is missing from the hue control. Could you incorporate?

[mattwiebe]

Ah, good catch on the two-way binding. I should have something for this today.

[mattwiebe]

add 2way binding, focus styles

[mattwiebe]

Two way binding and focus styles in that patch. Good to go as far as I can tell.

[westonruter]

In 38931:

Customize: Add hue-only mode to color picker.

The color control in the customizer can use the new mode by supplying the mode param with hue (as opposed to the new default full value). New control replaces the range control in Twenty Seventeen for colorscheme_hue. The wpColorPicker can opt for hue-only mode via supplying hue as the type option. Iris Color Picker is updated from v1.0.7 to v1.1.0-beta.

Props mattwiebe, celloexpressions.
Fixes #38263.

[celloexpressions]

I can cover this in the general 4.7 customizer API dev note, unless we think usage of Iris outside the customizer is wide enough to warrant a standalone post as well.

[westonruter]

Related: #39681 (Add RGBA to Customizer color picker)

[desrosj]

This was detailed in the following dev note: ​https://make.wordpress.org/core/2016/11/30/customizer-improvements-in-4-7/.