Changeset 20936

Timestamp:

05/26/2012 06:44:31 PM (13 years ago)

Author:

koopersmith

Message:

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.

Location:

trunk

Files:

• wp-content/themes/twentyeleven/inc/theme-options.php (modified) (2 diffs)
• wp-includes/class-wp-customize-control.php (modified) (1 diff)
• wp-includes/class-wp-customize-manager.php (modified) (3 diffs)
• wp-includes/class-wp-customize-setting.php (modified) (4 diffs)
• wp-includes/css/customize-controls.dev.css (modified) (1 diff)
• wp-includes/js/customize-controls.dev.js (modified) (1 diff)
• wp-includes/js/customize-preview.dev.js (modified) (1 diff)

trunk/wp-content/themes/twentyeleven/inc/theme-options.php

@@ -484 +484 @@
         'default'           => twentyeleven_get_default_link_color( $options['color_scheme'] ),
         'type'              => 'option',
-        'sanitize_callback' => 'twentyeleven_sanitize_hexcolor',
+        'sanitize_callback' => 'sanitize_hex_color',
         'capability'        => 'edit_theme_options',
     ) );
@@ -521 +521 @@
 
 /**
- * Sanitize user input hex color value
- *
- * @uses sanitize_hexcolor()
- * @param $color string
- * @return string sanitized with prefixed # character
- */
-function twentyeleven_sanitize_hexcolor( $color ) {
-    return '#' . sanitize_hexcolor( $color );
-}
-
-/**
  * Bind JS handlers to make Theme Customizer preview reload changes asynchronously.
  * Used with blogname and blogdescription.

trunk/wp-includes/class-wp-customize-control.php

@@ -266 +266 @@
                     <div class="dropdown-arrow"></div>
                 </div>
-                <div class="color-picker-hex">
-                    <span>#</span>
-                    <input type="text" <?php $this->link(); ?> />
-                </div>
+                <input class="color-picker-hex" type="text" maxlength="7" placeholder="<?php esc_attr_e('Hex Value'); ?>" />
             </div>
             <div class="farbtastic-placeholder"></div>

trunk/wp-includes/class-wp-customize-manager.php

@@ -668 +668 @@
 
         $this->add_setting( 'header_textcolor', array(
-            'sanitize_callback' => 'sanitize_header_textcolor',
             'theme_supports' => array( 'custom-header', 'header-text' ),
             'default'        => get_theme_support( 'custom-header', 'default-text-color' ),
+
+            'sanitize_callback'    => array( $this, '_sanitize_header_textcolor' ),
+            'sanitize_js_callback' => 'maybe_hash_hex_color',
         ) );
 
@@ -690 +692 @@
         // With sanitize_callback
         $this->add_setting( 'background_color', array(
-            'default'           => get_theme_support( 'custom-background', 'default-color' ),
-            'sanitize_callback' => 'sanitize_hexcolor',
-            'theme_supports'    => 'custom-background',
+            'default'        => get_theme_support( 'custom-background', 'default-color' ),
+            'theme_supports' => 'custom-background',
+
+            'sanitize_callback'    => 'sanitize_hex_color_no_hash',
+            'sanitize_js_callback' => 'maybe_hash_hex_color',
         ) );
 
@@ -877 +881 @@
         ) );
     }
+
+    /**
+     * Callback for validating the header_textcolor value.
+     *
+     * Accepts 'blank', and otherwise uses sanitize_hex_color_no_hash().
+     *
+     * @since 3.4.0
+     */
+    public function _sanitize_header_textcolor( $color ) {
+        return ( 'blank' === $color ) ? 'blank' : sanitize_hex_color_no_hash( $color );
+    }
 };
 
-// Callback function for sanitizing the header textcolor setting.
-function sanitize_header_textcolor( $color ) {
-    if ( $color == 'blank' )
-        return 'blank';
-
-    return sanitize_hexcolor( $color );
-}
-
-// Callback function for sanitizing a hex color
-function sanitize_hexcolor( $color ) {
-    $color = preg_replace( '/[^0-9a-fA-F]/', '', $color );
+/**
+ * Validates a hex color.
+ *
+ * Returns either '', a 3 or 6 digit hex color (with #), or null.
+ * For validating values without a #, see sanitize_hex_color_no_hash().
+ *
+ * @since 3.4.0
+ */
+function sanitize_hex_color( $color ) {
+    if ( '' === $color )
+        return '';
 
     // 3 or 6 hex digits, or the empty string.
-    if ( preg_match('|^([A-Fa-f0-9]{3}){0,2}$|', $color ) )
+    if ( preg_match('|^#([A-Fa-f0-9]{3}){1,2}$|', $color ) )
         return $color;
 
     return null;
 }
+
+/**
+ * Sanitizes a hex color without a hash. Use sanitize_hex_color() when possible.
+ *
+ * Saving hex colors without a hash puts the burden of adding the hash on the
+ * UI, which makes it difficult to use or upgrade to other color types such as
+ * rgba, hsl, rgb, and html color names.
+ *
+ * Returns either '', a 3 or 6 digit hex color (without a #), or null.
+ *
+ * @since 3.4.0
+ */
+function sanitize_hex_color_no_hash( $color ) {
+    $color = ltrim( $color, '#' );
+
+    if ( '' === $color )
+        return '';
+
+    return sanitize_hex_color( '#' . $color ) ? $color : null;
+}
+
+/**
+ * Ensures that any hex color is properly hashed.
+ * Otherwise, returns value untouched.
+ *
+ * This method should only be necessary if using sanitize_hex_color_no_hash().
+ *
+ * @since 3.4.0
+ */
+function maybe_hash_hex_color( $color ) {
+    if ( $unhashed = sanitize_hex_color_no_hash( $color ) )
+        return '#' . $unhashed;
+
+    return $color;
+}

trunk/wp-includes/class-wp-customize-setting.php

@@ -12 +12 @@
     public $id;
 
-    public $type              = 'theme_mod';
-    public $capability        = 'edit_theme_options';
-    public $theme_supports    = '';
-    public $default           = '';
-    public $sanitize_callback = '';
-    public $transport         = 'refresh';
+    public $type            = 'theme_mod';
+    public $capability      = 'edit_theme_options';
+    public $theme_supports  = '';
+    public $default         = '';
+    public $transport       = 'refresh';
+
+    public $sanitize_callback    = '';
+    public $sanitize_js_callback = '';
 
     protected $id_data = array();
@@ -50 +52 @@
             $this->id .= '[' . implode( '][', $this->id_data[ 'keys' ] ) . ']';
 
-        if ( $this->sanitize_callback != '' )
-            add_filter( "customize_sanitize_{$this->id}", $this->sanitize_callback );
+        if ( $this->sanitize_callback )
+            add_filter( "customize_sanitize_{$this->id}", $this->sanitize_callback, 10, 2 );
+
+        if ( $this->sanitize_js_callback )
+            add_filter( "customize_sanitize_js_{$this->id}", $this->sanitize_js_callback, 10, 2 );
 
         return $this;
@@ -139 +144 @@
     public function sanitize( $value ) {
         $value = stripslashes_deep( $value );
-        return apply_filters( "customize_sanitize_{$this->id}", $value );
+        return apply_filters( "customize_sanitize_{$this->id}", $value, $this );
     }
 
@@ -239 +244 @@
      */
     public function js_value() {
-        $value = $this->value();
+        $value = apply_filters( "customize_sanitize_js_{$this->id}", $this->value(), $this );
 
         if ( is_string( $value ) )

trunk/wp-includes/css/customize-controls.dev.css

@@ -320 +320 @@
 }
 
-.customize-section .color-picker-hex {
-    float: left;
-    width: 70px;
+.customize-section input[type="text"].color-picker-hex {
+    float: left;
+    width: 85px;
     font-family: monospace;
-    background-color: #fff;
-    color: #777;
-    border: 1px solid #ccc;
-    -webkit-border-radius: 3px;
-    border-radius: 3px;
-}
-
-.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;
-}
-
-.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;
+    text-align: center;
+}
+
+/* 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 input[type="text"].color-picker-hex:-moz-placeholder {
+    color: #999;
 }
 

trunk/wp-includes/js/customize-controls.dev.js

@@ -110 +110 @@
         ready: function() {
             var control = this,
-                spot, text, update;
-
+                rhex, spot, input, text, update;
+
+            rhex   = /^#([A-Fa-f0-9]{3}){0,2}$/;
             spot   = this.container.find('.dropdown-content');
+            input  = new api.Element( this.container.find('.color-picker-hex') );
             update = function( color ) {
-                color = color ? '#' + color : '';
                 spot.css( 'background', color );
                 control.farbtastic.setColor( color );
             };
 
-            this.farbtastic = $.farbtastic( this.container.find('.farbtastic-placeholder'), function( color ) {
-                control.setting.set( color.replace( '#', '' ) );
-            });
+            this.farbtastic = $.farbtastic( this.container.find('.farbtastic-placeholder'), control.setting.set );
+
+            // Only pass through values that are valid hexes/empty.
+            input.link( this.setting ).validate = function( to ) {
+                return rhex.test( to ) ? to : null;
+            };
 
             this.setting.bind( update );

trunk/wp-includes/js/customize-preview.dev.js

@@ -102 +102 @@
 
                 if ( color() )
-                    css += 'background-color: #' + color() + ';';
+                    css += 'background-color: ' + color() + ';';
 
                 if ( image() ) {