diff --git a/src/wp-admin/css/color-picker.css b/src/wp-admin/css/color-picker.css
index d0a41d632d..477562308f 100644
--- a/src/wp-admin/css/color-picker.css
+++ b/src/wp-admin/css/color-picker.css
@@ -6,40 +6,23 @@
display: none;
}
-.wp-color-result {
- background-color: #f7f7f7;
- border: 1px solid #ccc;
- border-radius: 3px;
- cursor: pointer;
- display: inline-block;
- height: 22px;
+/* Needs higher specificiity. */
+.wp-picker-container .wp-color-result.button {
+ height: 24px;
margin: 0 6px 6px 0px;
- position: relative;
- top: 1px;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- vertical-align: bottom;
- display: inline-block;
- padding-left: 30px;
- box-shadow: 0 1px 0 #ccc;
+ padding: 0 0 0 30px;
+ font-size: 11px;
}
-.wp-color-result:after {
+.wp-color-result-text {
background: #f7f7f7;
border-radius: 0 2px 2px 0;
border-left: 1px solid #ccc;
color: #555;
- content: attr( title );
display: block;
- font-size: 11px;
line-height: 22px;
padding: 0 6px;
- position: relative;
- right: 0;
text-align: center;
- top: 0;
}
.wp-color-result:hover,
@@ -56,17 +39,8 @@
border-left: 1px solid #999;
}
-.wp-color-result {
- top: 0;
-}
-
-.wp-color-result.wp-picker-open:after {
- content: attr( data-current );
-}
-
-.wp-picker-container, .wp-picker-container:active {
+.wp-picker-containers {
display: inline-block;
- outline: 0;
}
.wp-color-result:focus {
@@ -74,13 +48,29 @@
box-shadow: 0 0 3px rgba( 0, 115, 170, .8 );
}
+.wp-color-result:active {
+ /* See Trac ticket #39662 */
+ transform: none !important;
+}
+
.wp-picker-open + .wp-picker-input-wrap {
display: inline-block;
vertical-align: top;
}
-.wp-picker-container .button {
- margin-left: 6px;
+.wp-picker-input-wrap label {
+ display: inline-block;
+ vertical-align: top;
+}
+
+/* For the old `custom-background` page, to override the inline-block and margins from `.form-table td fieldset label`. */
+.form-table .wp-picker-input-wrap label {
+ margin: 0 !important;
+}
+
+.wp-picker-input-wrap .button,
+.wp-customizer .wp-picker-input-wrap .button {
+ margin-left: 6px;
}
.wp-picker-container .iris-square-slider .ui-slider-handle:focus {
@@ -99,6 +89,7 @@
font-family: monospace;
line-height: 16px;
margin: 0;
+ vertical-align: top;
}
.wp-color-picker::-webkit-input-placeholder {
@@ -127,9 +118,55 @@
0 0 2px 1px rgba(30, 140, 190, .8);
}
+.iris-picker .iris-palette:focus {
+ box-shadow:
+ inset 0 0 5px rgba(0,0,0,.4),
+ 0 0 0 1px #5b9dd9,
+ 0 0 2px 1px rgba(30, 140, 190, .8);
+}
+
@media screen and ( max-width: 782px ) {
.wp-picker-container input[type="text"].wp-color-picker {
- margin-right: 6px;
- padding: 3px 5px;
+ width: 80px;
+ padding: 6px 5px 5px;
+ font-size: 16px;
+ line-height: 18px;
+ }
+
+ .wp-customizer .wp-picker-container input[type="text"].wp-color-picker {
+ padding: 5px 5px 4px;
+ }
+
+ .wp-picker-container .wp-color-result.button {
+ height: auto;
+ padding: 0 0 0 40px;
+ font-size: 14px;
+ line-height: 29px;
+ }
+
+ .wp-customizer .wp-picker-container .wp-color-result.button {
+ font-size: 13px;
+ line-height: 26px;
+ }
+
+ .wp-picker-container .wp-color-result-text {
+ padding: 0 14px;
+ font-size: inherit;
+ line-height: inherit;
+ }
+
+ .wp-customizer .wp-picker-container .wp-color-result-text {
+ padding: 0 10px;
+ }
+}
+
+@media screen and ( max-width: 640px ) {
+ .wp-customizer .wp-picker-container .wp-color-result.button {
+ font-size: 14px;
+ line-height: 29px;
+ }
+
+ .wp-customizer .wp-picker-container input[type="text"].wp-color-picker {
+ padding: 6px 5px;
}
}
diff --git a/src/wp-admin/css/common.css b/src/wp-admin/css/common.css
index 9821accd52..2659e5e64a 100644
--- a/src/wp-admin/css/common.css
+++ b/src/wp-admin/css/common.css
@@ -3578,17 +3578,6 @@ img {
white-space: nowrap;
}
- .wp-color-result {
- height: auto;
- padding-left: 45px;
- }
-
- .wp-color-result:after {
- font-size: 14px;
- height: auto;
- padding: 6px 14px;
- }
-
/* Feedback Messages */
.notice,
.wrap div.updated,
diff --git a/src/wp-admin/css/customize-controls.css b/src/wp-admin/css/customize-controls.css
index 998ee632f0..3ec8f2f9d3 100644
--- a/src/wp-admin/css/customize-controls.css
+++ b/src/wp-admin/css/customize-controls.css
@@ -858,15 +858,6 @@ p.customize-section-description {
max-width: 112px;
}
-/* Color Picker */
-.customize-control-color .color-picker-hex {
- display: none;
-}
-
-.customize-control-color.open .color-picker-hex {
- display: block;
-}
-
.customize-control-color .dropdown {
margin-right: 5px;
margin-bottom: 5px;
diff --git a/src/wp-admin/js/color-picker.js b/src/wp-admin/js/color-picker.js
index 0080491a0d..7574820c68 100644
--- a/src/wp-admin/js/color-picker.js
+++ b/src/wp-admin/js/color-picker.js
@@ -1,11 +1,13 @@
/* global wpColorPickerL10n */
-( function( $, undef ){
+( function( $, undef ) {
var ColorPicker,
- _before = '',
+ _before = '',
_after = '',
_wrap = '',
- _button = '';
+ _button = '',
+ _wrappingLabel = '',
+ _wrappingLabelText = '';
/**
* @summary Creates a jQuery UI color picker.
@@ -101,20 +103,67 @@
self.initialValue = el.val();
- // Set up HTML structure and hide the color picker.
- el.addClass( 'wp-color-picker' ).hide().wrap( _wrap );
- self.wrap = el.parent();
- self.toggler = $( _before ).insertBefore( el ).css( { backgroundColor: self.initialValue } ).attr( 'title', wpColorPickerL10n.pick ).attr( 'data-current', wpColorPickerL10n.current );
- self.pickerContainer = $( _after ).insertAfter( el );
- self.button = $( _button );
+ // Add a CSS class to the input field.
+ el.addClass( 'wp-color-picker' );
- if ( self.options.defaultColor ) {
- self.button.addClass( 'wp-picker-default' ).val( wpColorPickerL10n.defaultString );
- } else {
- self.button.addClass( 'wp-picker-clear' ).val( wpColorPickerL10n.clear );
+ /*
+ * Check if there's already a wrapping label, e.g. in the Customizer.
+ * If there's no label, add a default one to match the Customizer template.
+ */
+ if ( ! el.parent( 'label' ).length ) {
+ // Wrap the input field in the default label.
+ el.wrap( _wrappingLabel );
+ // Insert the default label text.
+ self.wrappingLabelText = $( _wrappingLabelText )
+ .insertBefore( el )
+ .text( wpColorPickerL10n.defaultLabel );
}
- el.wrap( '' ).after( self.button );
+ /*
+ * At this point, either it's the standalone version or the Customizer
+ * one, we have a wrapping label to use as hook in the DOM, let's store it.
+ */
+ self.wrappingLabel = el.parent();
+
+ // Wrap the label in the main wrapper.
+ self.wrappingLabel.wrap( _wrap );
+ // Store a reference to the main wrapper.
+ self.wrap = self.wrappingLabel.parent();
+ // Set up the toggle button and insert it before the wrapping label.
+ self.toggler = $( _before )
+ .insertBefore( self.wrappingLabel )
+ .css( { backgroundColor: self.initialValue } );
+ // Set the toggle button span element text.
+ self.toggler.find( '.wp-color-result-text' ).text( wpColorPickerL10n.pick );
+ // Set up the Iris container and insert it after the wrapping label.
+ self.pickerContainer = $( _after ).insertAfter( self.wrappingLabel );
+ // Store a reference to the Clear/Default button.
+ self.button = $( _button );
+
+ // Set up the Clear/Default button.
+ if ( self.options.defaultColor ) {
+ self.button
+ .addClass( 'wp-picker-default' )
+ .val( wpColorPickerL10n.defaultString )
+ .attr( 'aria-label', wpColorPickerL10n.defaultAriaLabel );
+ } else {
+ self.button
+ .addClass( 'wp-picker-clear' )
+ .val( wpColorPickerL10n.clear )
+ .attr( 'aria-label', wpColorPickerL10n.clearAriaLabel );
+ }
+
+ // Wrap the wrapping label in its wrapper and append the Clear/Default button.
+ self.wrappingLabel
+ .wrap( '' )
+ .after( self.button );
+
+ /*
+ * The input wrapper now contains the label+input+Clear/Default button.
+ * Store a reference to the input wrapper: we'll use this to toggle
+ * the controls visibility.
+ */
+ self.inputWrapper = el.closest( '.wp-picker-input-wrap' );
el.iris( {
target: self.pickerContainer,
@@ -215,25 +264,6 @@
}
});
- /**
- * @summary Enables the user to open the color picker with their keyboard.
- *
- * Enables the user to open the color picker with their keyboard.
- * This is possible by using the space or enter key.
- *
- * @since 3.5.0
- *
- * @param {Event} event The event that's being called.
- *
- * @returns {void}
- */
- self.toggler.on( 'keyup', function( event ) {
- if ( event.keyCode === 13 || event.keyCode === 32 ) {
- event.preventDefault();
- self.toggler.trigger( 'click' ).next().focus();
- }
- });
-
/**
* @summary Enables the user to clear or revert the color in the color picker.
*
@@ -266,10 +296,12 @@
* @returns {void}
*/
open: function() {
- this.element.show().iris( 'toggle' ).focus();
- this.button.removeClass( 'hidden' );
+ this.element.iris( 'toggle' );
+ this.inputWrapper.removeClass( 'hidden' );
this.wrap.addClass( 'wp-picker-active' );
- this.toggler.addClass( 'wp-picker-open' );
+ this.toggler
+ .addClass( 'wp-picker-open' )
+ .attr( 'aria-expanded', 'true' );
$( 'body' ).trigger( 'click.wpcolorpicker' ).on( 'click.wpcolorpicker', this.close );
},
/**
@@ -280,10 +312,12 @@
* @returns {void}
*/
close: function() {
- this.element.hide().iris( 'toggle' );
- this.button.addClass( 'hidden' );
+ this.element.iris( 'toggle' );
+ this.inputWrapper.addClass( 'hidden' );
this.wrap.removeClass( 'wp-picker-active' );
- this.toggler.removeClass( 'wp-picker-open' );
+ this.toggler
+ .removeClass( 'wp-picker-open' )
+ .attr( 'aria-expanded', 'false' );
$( 'body' ).off( 'click.wpcolorpicker', this.close );
},
/**
diff --git a/src/wp-includes/customize/class-wp-customize-color-control.php b/src/wp-includes/customize/class-wp-customize-color-control.php
index 8d9827351a..f8538e18d1 100644
--- a/src/wp-includes/customize/class-wp-customize-color-control.php
+++ b/src/wp-includes/customize/class-wp-customize-color-control.php
@@ -99,21 +99,21 @@ class WP_Customize_Color_Control extends WP_Customize_Control {
}
defaultValueAttr = ' data-default-color=' + defaultValue; // Quotes added automatically.
} #>
-
+ <# if ( data.label ) { #>
+ {{{ data.label }}}
+ <# } #>
+ <# if ( data.description ) { #>
+ {{{ data.description }}}
+ <# } #>
+
+
+
add( 'iris', '/wp-admin/js/iris.min.js', array( 'jquery-ui-draggable', 'jquery-ui-slider', 'jquery-touch-punch' ), '1.0.7', 1 );
$scripts->add( 'wp-color-picker', "/wp-admin/js/color-picker$suffix.js", array( 'iris' ), false, 1 );
did_action( 'init' ) && $scripts->localize( 'wp-color-picker', 'wpColorPickerL10n', array(
- 'clear' => __( 'Clear' ),
- 'defaultString' => __( 'Default' ),
- 'pick' => __( 'Select Color' ),
- 'current' => __( 'Current Color' ),
+ 'clear' => __( 'Clear' ),
+ 'clearAriaLabel' => __( 'Clear color' ),
+ 'defaultString' => __( 'Default' ),
+ 'defaultAriaLabel' => __( 'Select default color' ),
+ 'pick' => __( 'Select Color' ),
+ 'defaultLabel' => __( 'Color value' ),
) );
$scripts->add( 'dashboard', "/wp-admin/js/dashboard$suffix.js", array( 'jquery', 'admin-comments', 'postbox', 'wp-util', 'wp-a11y' ), false, 1 );