Changeset 32658 for trunk/src/wp-includes/class-wp-customize-section.php

Timestamp:

05/30/2015 12:02:13 AM (10 years ago)

Author:

westonruter

Message:

Add JS templates for Customizer Panels and Sections.

This extends the approach taken for Customizer Controls in #29572.

Props celloexpressions, westonruter, ocean90.
See #30737.

File:

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

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

@@ -224 +224 @@
      */
     public function json() {
-        $array = wp_array_slice_assoc( (array) $this, array( 'title', 'description', 'priority', 'panel', 'type' ) );
+        $array = wp_array_slice_assoc( (array) $this, array( 'id', 'title', 'description', 'priority', 'panel', 'type' ) );
         $array['content'] = $this->get_content();
         $array['active'] = $this->active();
         $array['instanceNumber'] = $this->instance_number;
+
+        if ( $this->panel ) {
+            /* translators: ▸ is the unicode right-pointing triangle, and %s is the section title in the Customizer */
+            $array['customizeAction'] = sprintf( __( 'Customizing ▸ %s' ), esc_html( $this->manager->get_panel( $this->panel )->title ) );
+        } else {
+            $array['customizeAction'] = __( 'Customizing' );
+        }
+
         return $array;
     }
@@ -252 +260 @@
 
     /**
-     * Get the section's content template for insertion into the Customizer pane.
+     * Get the section's content for insertion into the Customizer pane.
      *
      * @since 4.1.0
@@ -298 +306 @@
 
     /**
-     * Render the section, and the controls that have been added to it.
-     *
-     * @since 3.4.0
-     */
-    protected function render() {
-        $classes = 'accordion-section control-section control-section-' . $this->type;
+     * Render the section UI in a subclass.
+     *
+     * Sections are now rendered in JS by default, see {@see WP_Customize_Section::print_template()}.
+     *
+     * @since 3.4.0
+     */
+    protected function render() {}
+
+    /**
+     * Render the section's JS template.
+     *
+     * This function is only run for section types that have been registered with
+     * {@see WP_Customize_Manager::register_section_type()}.
+     *
+     * @since 4.3.0
+     */
+    public function print_template() {
+        ?>
+        <script type="text/html" id="tmpl-customize-section-<?php echo $this->type; ?>">
+            <?php $this->render_template(); ?>
+        </script>
+        <?php
+    }
+
+    /**
+     * An Underscore (JS) template for rendering this section.
+     *
+     * Class variables for this section class are available in the `data` JS object;
+     * export custom variables by overriding {@see WP_Customize_Section::json()}.
+     *
+     * @see WP_Customize_Section::print_template()
+     *
+     * @since 4.3.0
+     */
+    protected function render_template() {
         ?>
-        <li id="accordion-section-<?php echo esc_attr( $this->id ); ?>" class="<?php echo esc_attr( $classes ); ?>">
+        <li id="accordion-section-{{ data.id }}" class="accordion-section control-section control-section-{{ data.type }}">
             <h3 class="accordion-section-title" tabindex="0">
-                <?php echo esc_html( $this->title ); ?>
+                {{ data.title }}
                 <span class="screen-reader-text"><?php _e( 'Press return or enter to open' ); ?></span>
             </h3>
@@ -317 +354 @@
                         </button>
                         <h3>
-                            <span class="customize-action"><?php
-                                if ( $this->panel ) {
-                                    /* translators: &#9656; is the unicode right-pointing triangle, and %s is the section title in the Customizer */
-                                    echo sprintf( __( 'Customizing &#9656; %s' ), esc_html( $this->manager->get_panel( $this->panel )->title ) );
-                                } else {
-                                    _e( 'Customizing' );
-                                }
-                            ?></span>
-                            <?php echo esc_html( $this->title ); ?>
+                            <span class="customize-action">
+                                {{{ data.customizeAction }}}
+                            </span>
+                            {{ data.title }}
                         </h3>
                     </div>
-                    <?php if ( ! empty( $this->description ) ) : ?>
-                        <p class="description customize-section-description"><?php echo $this->description; ?></p>
-                    <?php endif; ?>
+                    <# if ( data.description ) { #>
+                        <p class="description customize-section-description">{{{ data.description }}}</p>
+                    <# } #>
                 </li>
             </ul>