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.


git-svn-id: https://develop.svn.wordpress.org/trunk@38931 602fd350-edb4-49c9-b593-d223f7449a82

src/wp-admin/css/color-picker.css

@@ -124,3 +124,13 @@
 	border-color: #c00;
 	color: #000;
 }
+
+.iris-picker .ui-square-handle:focus,
+.iris-picker .iris-strip .ui-slider-handle:focus {
+	-webkit-box-shadow:
+		0 0 0 1px #5b9dd9,
+		0 0 2px 1px rgba(30, 140, 190, .8);
+	box-shadow:
+		0 0 0 1px #5b9dd9,
+		0 0 2px 1px rgba(30, 140, 190, .8);
+}

src/wp-admin/js/color-picker.js

@@ -17,7 +17,33 @@
 			hide: true,
 			palettes: true,
 			width: 255,
-			mode: 'hsv'
+			mode: 'hsv',
+			type: 'full',
+			slider: 'horizontal'
+		},
+		_createHueOnly: function() {
+			var self = this,
+				el = self.element,
+				color;
+
+			// hide input
+			el.hide();
+			// max saturated color for hue to be obvious
+			color = 'hsl(' + el.val() + ', 100, 50)';
+
+			el.iris( {
+				mode: 'hsl',
+				type: 'hue',
+				hide: false,
+				color: color,
+				change: function( event, ui ) {
+					if ( $.isFunction( self.options.change ) ) {
+						self.options.change.call( this, event, ui );
+					}
+				},
+				width: self.options.width,
+				slider: self.options.slider
+			} );
 		},
 		_create: function() {
 			// bail early for unsupported Iris.
@@ -30,6 +56,11 @@
 
 			$.extend( self.options, el.data() );
 
+			// hue-only gets created differently
+			if ( self.options.type === 'hue' ) {
+				return self._createHueOnly();
+			}
+
 			// keep close bound so it can be attached to a body listener
 			self.close = $.proxy( self.close, self );
 
@@ -141,7 +172,6 @@
 			if ( newColor === undef ) {
 				return this.element.iris( 'option', 'color' );
 			}
-
 			this.element.iris( 'option', 'color', newColor );
 		},
 		//$("#input").wpColorPicker('defaultColor') returns the current default color

src/wp-admin/js/customize-controls.js

@@ -2835,21 +2835,43 @@
 	api.ColorControl = api.Control.extend({
 		ready: function() {
 			var control = this,
-				picker = this.container.find('.color-picker-hex');
+				isHueSlider = this.params.mode === 'hue',
+				updating = false,
+				picker;
 
-			picker.val( control.setting() ).wpColorPicker({
-				change: function() {
-					control.setting.set( picker.wpColorPicker('color') );
-				},
-				clear: function() {
-					control.setting.set( '' );
-				}
-			});
+			if ( isHueSlider ) {
+				picker = this.container.find( '.color-picker-hue' );
+				picker.val( control.setting() ).wpColorPicker({
+					change: function( event, ui ) {
+						updating = true;
+						control.setting( ui.color.h() );
+						updating = false;
+					}
+				});
+			} else {
+				picker = this.container.find( '.color-picker-hex' );
+				picker.val( control.setting() ).wpColorPicker({
+					change: function() {
+						updating = true;
+						control.setting.set( picker.wpColorPicker( 'color' ) );
+						updating = false;
+					},
+					clear: function() {
+						updating = true;
+						control.setting.set( '' );
+						updating = false;
+					}
+				});
+			}
 
 			this.setting.bind( function ( value ) {
+				// bail if the update came from the control itself
+				if ( updating ) {
+					return;
+				}
 				picker.val( value );
 				picker.wpColorPicker( 'color', value );
-			});
+			} );
 		}
 	});
 
@@ -4618,7 +4640,7 @@
 			if ( 'themes' === panel.id ) {
 				return; // Don't reflow theme sections, as doing so moves them after the themes container.
 			}
-			
+
 			var sections = panel.sections(),
 				sectionHeadContainers = _.pluck( sections, 'headContainer' );
 			rootNodes.push( panel );

src/wp-content/themes/twentyseventeen/inc/customizer.php

@@ -44,20 +44,11 @@ function twentyseventeen_customize_register( $wp_customize ) {
 		'priority' => 5,
 	) );
 
-	$wp_customize->add_control( 'colorscheme_hue', array(
-		'type'    => 'range',
-		'input_attrs' => array(
-			'min' => 0,
-			'max' => 359,
-			'step' => 1,
-		),
+	$wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'colorscheme_hue', array(
+		'mode' => 'hue',
 		'section'  => 'colors',
 		'priority' => 6,
-		'description' => 'Temporary hue slider will be replaced with a visual hue picker that is only shown when a custom scheme is selected', // temporary, intentionally untranslated.
-		// @todo change this to a visual hue picker control, ideally extending the color control and leveraging iris by adding a `hue` mode in core.
-		// See https://core.trac.wordpress.org/ticket/38263
-		// @todo only show this control when the colorscheme is custom.
-	) );
+	) ) );
 
 	/**
 	 * Add the Theme Options section.

src/wp-includes/customize/class-wp-customize-color-control.php

@@ -27,6 +27,12 @@ class WP_Customize_Color_Control extends WP_Customize_Control {
 	 */
 	public $statuses;
 
+	/**
+	* @access public
+	* @var string
+	*/
+	public $mode = 'full';
+
 	/**
 	 * Constructor.
 	 *
@@ -62,6 +68,7 @@ class WP_Customize_Color_Control extends WP_Customize_Control {
 		parent::to_json();
 		$this->json['statuses'] = $this->statuses;
 		$this->json['defaultValue'] = $this->setting->default;
+		$this->json['mode'] = $this->mode;
 	}
 
 	/**
@@ -78,8 +85,10 @@ class WP_Customize_Color_Control extends WP_Customize_Control {
 	 */
 	public function content_template() {
 		?>
-		<# var defaultValue = '';
-		if ( data.defaultValue ) {
+		<# var defaultValue = '',
+			isHueSlider = data.mode === 'hue';
+
+		if ( data.defaultValue && ! isHueSlider ) {
 			if ( '#' !== data.defaultValue.substring( 0, 1 ) ) {
 				defaultValue = '#' + data.defaultValue;
 			} else {
@@ -95,7 +104,11 @@ class WP_Customize_Color_Control extends WP_Customize_Control {
 				<span class="description customize-control-description">{{{ data.description }}}</span>
 			<# } #>
 			<div class="customize-control-content">
-				<input class="color-picker-hex" type="text" maxlength="7" placeholder="<?php esc_attr_e( 'Hex Value' ); ?>" {{ defaultValue }} />
+				<# if ( isHueSlider ) { #>
+					<input class="color-picker-hue" type="text" data-type="hue" />
+				<# } else { #>
+					<input class="color-picker-hex" type="text" maxlength="7" placeholder="<?php esc_attr_e( 'Hex Value' ); ?>" {{ defaultValue }} />
+				<# } #>
 			</div>
 		</label>
 		<?php