Theme Customizer: Ensure that JS color controls always use real color values, even if the server-side value is a hex value without a hash. fixes #20448, see #19910.

Adds WP_Customize_Setting->sanitize_js_callback and 'customize_sanitize_js_$settingID' filter, to filter values before they're passed to JS using WP_Customize_Setting->js_value().

Adds support for regular hex colors to the color picker.

Changes color methods:
* sanitize_hex_color() accepts 3 and 6 digit hex colors (with hashes) and the empty string.
* sanitize_hex_color_no_hash() accepts 3 and 6 digit hex colors (without hashes) and the empty string.
* maybe_hash_hex_color() ensures that a hex color has a hash, and otherwise leaves the value untouched.


git-svn-id: https://develop.svn.wordpress.org/trunk@20936 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Daryl Koopersmith
2012-05-26 18:44:31 +00:00
parent da056976ea
commit 771ca21787
7 changed files with 101 additions and 74 deletions

View File

@@ -319,37 +319,19 @@ body {
border-color: rgba( 0, 0, 0, 0.25 );
}
.customize-section .color-picker-hex {
.customize-section input[type="text"].color-picker-hex {
float: left;
width: 70px;
width: 85px;
font-family: monospace;
background-color: #fff;
color: #777;
border: 1px solid #ccc;
-webkit-border-radius: 3px;
border-radius: 3px;
text-align: center;
}
.customize-section .color-picker-hex span {
float: left;
display: block;
margin: 1px -2px 0 0;
line-height: 16px;
padding: 3px 0 3px 8px;
text-align: right;
-webkit-border-radius: 3px 0 0 3px;
border-radius: 3px 0 0 3px;
/* The centered cursor overlaps the placeholder in webkit. Hide it when selected. */
.customize-section input[type="text"].color-picker-hex:focus::-webkit-input-placeholder {
color: transparent;
}
.customize-section .color-picker-hex input[type="text"] {
width: 50px;
height: 22px;
line-height: 16px;
color: #777;
background: transparent;
border: 0;
-webkit-border-radius: 0 3px 3px 0;
border-radius: 0 3px 3px 0;
.customize-section input[type="text"].color-picker-hex:-moz-placeholder {
color: #999;
}
.customize-control-color .farbtastic-placeholder {