WordPress.org

Make WordPress Core

Opened 12 months ago

Closed 11 months ago

Last modified 7 months ago

#38263 closed enhancement (fixed)

Color picker: add a hue-only mode

Reported by: celloexpressions Owned by: mattwiebe
Milestone: 4.7 Priority: normal
Severity: normal Version: 3.5
Component: Customize Keywords: has-patch has-screenshots needs-dev-note
Focuses: javascript Cc:

Description

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.

Attachments (5)

38263.diff (46.1 KB) - added by mattwiebe 11 months ago.
First pass, no Customizer control yet
38263.2.diff (49.2 KB) - added by mattwiebe 11 months ago.
With WP_Customize_Color_Control integration
38263.3.diff (50.3 KB) - added by celloexpressions 11 months ago.
Add Twenty Seventeen integration with the new hue slider.
38263.4.diff (51.7 KB) - added by mattwiebe 11 months ago.
add 2way binding, focus styles
hue-only mode color control.png (63.5 KB) - added by westonruter 11 months ago.

Download all attachments as: .zip

Change History (28)

This ticket was mentioned in Slack in #core-customize by celloexpressions. View the logs.


11 months ago

This ticket was mentioned in Slack in #core by jeffpaul. View the logs.


11 months ago

#3 @joshcummingsdesign
11 months ago

I'd be interested in working on this.

#4 @celloexpressions
11 months ago

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.

#5 @jorbin
11 months ago

  • Owner set to celloexpressions
  • Status changed from new to assigned

@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?

#6 @celloexpressions
11 months ago

  • Owner changed from celloexpressions to mattwiebe

@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
11 months ago

First pass, no Customizer control yet

#7 @mattwiebe
11 months ago

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
11 months ago

With WP_Customize_Color_Control integration

#8 @mattwiebe
11 months ago

  • Keywords has-patch needs-testing added; needs-patch removed

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

This ticket was mentioned in Slack in #core-customize by mattwiebe. View the logs.


11 months ago

@celloexpressions
11 months ago

Add Twenty Seventeen integration with the new hue slider.

#10 @celloexpressions
11 months ago

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.

#11 @mattwiebe
11 months ago

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.

This ticket was mentioned in Slack in #core-customize by celloexpressions. View the logs.


11 months ago

#13 @celloexpressions
11 months ago

  • Keywords commit added; needs-testing removed
  • Owner changed from mattwiebe to westonruter
  • Status changed from assigned to reviewing

This looks good to me.

This ticket was mentioned in Slack in #core-customize by westonruter. View the logs.


11 months ago

#15 @westonruter
11 months ago

  • Keywords needs-patch added; has-patch commit removed

@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?

#16 @westonruter
11 months ago

  • Owner changed from westonruter to mattwiebe

This ticket was mentioned in Slack in #core by jeffpaul. View the logs.


11 months ago

#18 @mattwiebe
11 months ago

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

@mattwiebe
11 months ago

add 2way binding, focus styles

#19 @mattwiebe
11 months ago

  • Keywords has-patch added; needs-patch removed

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

#20 @westonruter
11 months ago

  • Resolution set to fixed
  • Status changed from reviewing to closed

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.

#21 @westonruter
11 months ago

  • Keywords has-screenshots needs-dev-note added

#22 @celloexpressions
11 months ago

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.

#23 @westonruter
7 months ago

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

Note: See TracTickets for help on using tickets.