vhad/wordpress-develop
1
0
Fork 0
mirror of https://github.com/gosticks/wordpress-develop.git synced 2026-10-04 06:37:06 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Customize: Add hue-only mode to color picker.

Browse Source 
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
This commit is contained in:
Weston Ruter
2016-10-25 22:32:55 +00:00
parent 4cfb962850
commit 5de6c7927d
6 changed files with 97 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/wp-includes/customize/class-wp-customize-color-control.php
+16 -3
View File
@@ -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