c.range[1]?c.range[1]:d),f[a]=d,this._spaceFunc("from",c.space,f))}},_spaceFunc:function(a,b,c){var d=b||this._hSpace,e=a+d.charAt(0).toUpperCase()+d.substr(1);return this[e](c)}};var d={h:{mod:360},s:{range:[0,100]},l:{space:"hsl",range:[0,100]},v:{space:"hsv",range:[0,100]},r:{space:"rgb",range:[0,255]},g:{space:"rgb",range:[0,255]},b:{space:"rgb",range:[0,255]}};for(var e in d)d.hasOwnProperty(e)&&(c.fn[e]=c.fn._partial(e));"object"==typeof exports?module.exports=c:a.Color=c}(this);
\ No newline at end of file
diff --git a/wp-content/themes/twentyseventeen/inc/customizer.php b/wp-content/themes/twentyseventeen/inc/customizer.php
index e2566507a0..77eec7c81a 100644
--- a/wp-content/themes/twentyseventeen/inc/customizer.php
+++ b/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.
diff --git a/wp-includes/customize/class-wp-customize-color-control.php b/wp-includes/customize/class-wp-customize-color-control.php
index fac9a7d5ce..e29b2e4b89 100644
--- a/wp-includes/customize/class-wp-customize-color-control.php
+++ b/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 {
{{{ data.description }}}
<# } #>
-
+ <# if ( isHueSlider ) { #>
+
+ <# } else { #>
+
+ <# } #>