Changeset 30014 for trunk/src/wp-includes/class-wp-customize-control.php

Timestamp:

10/24/2014 04:31:54 PM (12 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

File:

• trunk/src/wp-includes/class-wp-customize-control.php (modified) (4 diffs)

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>