Changeset 30014

Timestamp:

10/24/2014 04:31:54 PM (10 years ago)

Author:

johnbillion

Message:

Add the ability for a customizer control to render its controls via a JavaScript template. Switches the default color picker control to a JavaScript template. See #29572. Props celloexpressions

Location:

trunk/src

Files:

• wp-admin/customize.php (modified) (1 diff)
• wp-admin/js/customize-controls.js (modified) (2 diffs)
• wp-includes/class-wp-customize-control.php (modified) (4 diffs)
• wp-includes/class-wp-customize-manager.php (modified) (3 diffs)

trunk/src/wp-admin/customize.php

@@ -181 +181 @@
     <?php
 
+    // Render control templates.
+    $wp_customize->render_control_templates();
+
     /**
      * Print Customizer control scripts in the footer.

trunk/src/wp-admin/js/customize-controls.js

@@ -61 +61 @@
 
                 control.setting = control.settings['default'] || null;
-                control.ready();
+                control.renderContent( function() {
+                    // Don't call ready() until the content has rendered.
+                    control.ready();
+                } );
             }) );
 
@@ -150 +153 @@
             this.setting.bind( update );
             update( this.setting() );
+        },
+
+        /**
+         * Render the control from its JS template, if it exists.
+         *
+         * The control's container must alreasy exist in the DOM.
+         */
+        renderContent: function( callback ) {
+            var template,
+                selector = 'customize-control-' + this.params.type + '-content',
+                callback = callback || function(){};
+            if ( 0 !== $( '#tmpl-' + selector ).length ) {
+                template = wp.template( selector );
+                if ( template && this.container ) {
+                    this.container.append( template( this.params ) );
+                }
+            }
+            callback();
         }
     });

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

@@ -218 +218 @@
         }
 
-        $this->json['type'] = $this->type;
-        $this->json['active'] = $this->active();
+        $this->json['type']        = $this->type;
+        $this->json['label']       = $this->label;
+        $this->json['description'] = $this->description;
+        $this->json['active']      = $this->active();
     }
 
@@ -336 +338 @@
      * Supports basic input types `text`, `checkbox`, `textarea`, `radio`, `select` and `dropdown-pages`.
      * Additional input types such as `email`, `url`, `number`, `hidden` and `date` are supported implicitly.
+     *
+     * Control content can alternately be rendered in JS. See {@see WP_Customize_Control::print_template()}.
      *
      * @since 3.4.0
@@ -444 +448 @@
         }
     }
+
+    /**
+     * Render the control's JS template.
+     *
+     * This function is only run for control types that have been registered with {@see WP_Customize_Manager::register_control_type()}.
+     *
+     * In the future, this will also print the template for the control's container element and be overridable.
+     *
+     * @since 4.1.0
+     */
+    final public function print_template() {
+            ?>
+            <script type="text/html" id="tmpl-customize-control-<?php echo $this->type; ?>-content">
+                    <?php $this->content_template(); ?>
+            </script>
+            <?php
+    }
+
+    /**
+     * An Underscore (JS) template for this control's content (but not its container).
+     *
+     * Class variables for this control class are available in the `data` JS object;
+     * export custom variables by overriding {@see WP_Customize_Control::to_json()}.
+     *
+     * @see WP_Customize_Control::print_template()
+     *
+     * @since 4.1.0
+     */
+    protected function content_template() {}
+
 }
 
@@ -500 +534 @@
         parent::to_json();
         $this->json['statuses'] = $this->statuses;
-    }
-
-    /**
-     * Render the control's content.
-     *
-     * @since 3.4.0
-     */
-    public function render_content() {
-        $this_default = $this->setting->default;
-        $default_attr = '';
-        if ( $this_default ) {
-            if ( false === strpos( $this_default, '#' ) )
-                $this_default = '#' . $this_default;
-            $default_attr = ' data-default-color="' . esc_attr( $this_default ) . '"';
-        }
-        // The input's value gets set by JS. Don't fill it.
+        $this->json['defaultValue'] = $this->setting->default;
+    }
+
+    /**
+     * Don't render the control content from PHP, as it's rendered via JS on load.
+     *
+     * @since 3.4.0
+     */
+    public function render_content() {}
+
+    /**
+     * Render a JS template for the content of the color picker control.
+     *
+     * @since 4.1.0
+     */
+    public function content_template() {
         ?>
+        <# var defaultValue = '';
+        if ( data.defaultValue ) {
+            if ( '#' !== data.defaultValue.substring( 0, 1 ) ) {
+                defaultValue = '#' + data.defaultValue;
+            }
+            defaultValue = ' data-default-color=' + defaultValue; // Quotes added automatically.
+        } #>
         <label>
-            <?php if ( ! empty( $this->label ) ) : ?>
-                <span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
-            <?php endif;
-            if ( ! empty( $this->description ) ) : ?>
-                <span class="description customize-control-description"><?php echo $this->description; ?></span>
-            <?php endif; ?>
-
+            <# if ( data.label ) { #>
+                <span class="customize-control-title">{{ data.label }}</span>
+            <# } #>
+            <# if ( data.description ) { #>
+                <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' ); ?>"<?php echo $default_attr; ?> />
+                <input class="color-picker-hex" type="text" maxlength="7" placeholder="<?php esc_attr_e( 'Hex Value' ); ?>" {{ defaultValue }} />
             </div>
         </label>

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

@@ -55 +55 @@
 
     /**
+     * Controls that may be rendered from JS templates.
+     *
+     * @since 4.1.0
+     */
+    protected $registered_control_types = array();
+
+    /** 
      * $_POST values for Customize Settings.
      *
@@ -823 +830 @@
 
     /**
+     * Register a customize control type.
+     *
+     * Registered types are eligible to be rendered
+     * via JS and created dynamically.
+     *
+     * @since 4.1.0
+     *
+     * @param string $control Name of a custom control which is a subclass of {@see WP_Customize_Control}.
+     */
+    public function register_control_type( $control ) {
+        $this->registered_control_types[] = $control;
+    }
+
+    /**
+     * Render JS templates for all registered control types.
+     *
+     * @since 4.1.0
+     */
+    public function render_control_templates() {
+        foreach( $this->registered_control_types as $control_type ) {
+            $control = new $control_type( $this, 'temp', array() );
+            $control->print_template();
+        }
+    }
+
+    /** 
      * Helper function to compare two objects by priority.
      *
@@ -927 +960 @@
      */
     public function register_controls() {
+
+        /* Control Types (custom control classes) */
+        $this->register_control_type( 'WP_Customize_Color_Control' );
 
         /* Site Title & Tagline */