WordPress.org

Make WordPress Core

Opened 3 months ago

Closed 3 months ago

Last modified 3 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 3 months ago.
First pass, no Customizer control yet
38263.2.diff (49.2 KB) - added by mattwiebe 3 months ago.
With WP_Customize_Color_Control integration
38263.3.diff (50.3 KB) - added by celloexpressions 3 months ago.
Add Twenty Seventeen integration with the new hue slider.
38263.4.diff (51.7 KB) - added by mattwiebe 3 months ago.
add 2way binding, focus styles
hue-only mode color control.png (63.5 KB) - added by westonruter 3 months ago.

Download all attachments as: .zip

Change History (27)

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


3 months ago

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


3 months ago

#3 @joshcummingsdesign
3 months ago

I'd be interested in working on this.

#4 @celloexpressions
3 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
3 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
3 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
3 months ago

First pass, no Customizer control yet

#7 @mattwiebe
3 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
3 months ago

With WP_Customize_Color_Control integration

#8 @mattwiebe
3 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.


3 months ago

@celloexpressions
3 months ago

Add Twenty Seventeen integration with the new hue slider.

#10 @celloexpressions
3 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
3 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.


3 months ago

#13 @celloexpressions
3 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.


3 months ago

#15 @westonruter
3 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
3 months ago

  • Owner changed from westonruter to mattwiebe

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


3 months ago

#18 @mattwiebe
3 months ago

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

@mattwiebe
3 months ago

add 2way binding, focus styles

#19 @mattwiebe
3 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
3 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
3 months ago

  • Keywords has-screenshots needs-dev-note added

#22 @celloexpressions
3 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.

Note: See TracTickets for help on using tickets.