Ticket #30737: 30737.14.diff

src/wp-admin/customize.php

@@ -175 +175 @@
         <div id="customize-preview" class="wp-full-overlay-main"></div>
         <?php
 
-        // Render control templates.
+        // Render Panel, Section, and Control templates.
+        $wp_customize->render_panel_templates();
+        $wp_customize->render_section_templates();
         $wp_customize->render_control_templates();
 
         /**
@@ -259 +261 @@
 
         // Prepare Customize Setting objects to pass to JavaScript.
         foreach ( $wp_customize->settings() as $id => $setting ) {
-                $settings['settings'][ $id ] = array(
-                        'value'     => $setting->js_value(),
-                        'transport' => $setting->transport,
-                        'dirty'     => $setting->dirty,
-                );
+                if ( $setting->check_capabilities() ) {
+                        $settings['settings'][ $id ] = array(
+                                'value'     => $setting->js_value(),
+                                'transport' => $setting->transport,
+                                'dirty'     => $setting->dirty,
+                        );
+                }
         }
 
         // Prepare Customize Control objects to pass to JavaScript.
         foreach ( $wp_customize->controls() as $id => $control ) {
-                $settings['controls'][ $id ] = $control->json();
+                if ( $control->check_capabilities() ) {
+                        $settings['controls'][ $id ] = $control->json();
+                }
         }
 
         // Prepare Customize Section objects to pass to JavaScript.
         foreach ( $wp_customize->sections() as $id => $section ) {
-                $settings['sections'][ $id ] = $section->json();
+                if ( $section->check_capabilities() ) {
+                        $settings['sections'][ $id ] = $section->json();
+                }
         }
 
         // Prepare Customize Panel objects to pass to JavaScript.
-        foreach ( $wp_customize->panels() as $id => $panel ) {
-                $settings['panels'][ $id ] = $panel->json();
-                foreach ( $panel->sections as $section_id => $section ) {
-                        $settings['sections'][ $section_id ] = $section->json();
+        foreach ( $wp_customize->panels() as $panel_id => $panel ) {
+                if ( $panel->check_capabilities() ) {
+                        $settings['panels'][ $panel_id ] = $panel->json();
+                        foreach ( $panel->sections as $section_id => $section ) {
+                                if ( $section->check_capabilities() ) {
+                                        $settings['sections'][ $section_id ] = $section->json();
+                                }
+                        }
                 }
         }
 

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

@@ -156 +156 @@
         Container = api.Class.extend({
                 defaultActiveArguments: { duration: 'fast', completeCallback: $.noop },
                 defaultExpandedArguments: { duration: 'fast', completeCallback: $.noop },
+                containerType: 'container',
 
                 /**
                  * @since 4.1.0
@@ -168 +169 @@
                         container.id = id;
                         container.params = {};
                         $.extend( container, options || {} );
+                        container.templateSelector = 'customize-' + container.containerType + '-' + container.params.type;
                         container.container = $( container.params.content );
+                        if ( 0 === container.container.length ) {
+                                container.container = $( container.getContainer() );
+                        }
 
                         container.deferred = {
                                 embedded: new $.Deferred()
@@ -191 +196 @@
                                 container.onChangeExpanded( expanded, args );
                         });
 
-                        container.attachEvents();
+                        container.deferred.embedded.done( function () {
+                                container.attachEvents();
+                        });
 
                         api.utils.bubbleChildValueChanges( container, [ 'priority', 'active' ] );
 
@@ -366 +373 @@
                  * Bring the container into view and then expand this and bring it into view
                  * @param {Object} [params]
                  */
-                focus: focus
+                focus: focus,
+
+                /**
+                 * Return the container html, generated from its JS template, if it exists.
+                 *
+                 * @since 4.3.0
+                 */
+                getContainer: function () {
+                        var template,
+                                container = this;
+
+                        if ( 0 !== $( '#tmpl-' + container.templateSelector ).length ) {
+                                template = wp.template( container.templateSelector );
+                                if ( template && container.container ) {
+                                        return $.trim( template( container.params ) );
+                                }
+                        }
+
+                        return '<li></li>';
+                }
         });
 
         /**
@@ -376 +402 @@
          * @augments wp.customize.Class
          */
         api.Section = Container.extend({
+                containerType: 'section',
 
                 /**
                  * @since 4.1.0
@@ -977 +1004 @@
          * @augments wp.customize.Class
          */
         api.Panel = Container.extend({
+                containerType: 'panel',
+
                 /**
                  * @since 4.1.0
                  *
@@ -1003 +1032 @@
 
                         if ( ! panel.container.parent().is( parentContainer ) ) {
                                 parentContainer.append( panel.container );
+                                panel.renderContent();
                         }
                         panel.deferred.embedded.resolve();
                 },
@@ -1045 +1075 @@
                                 }
                                 event.preventDefault(); // Keep this AFTER the key filter above
 
+                                meta = panel.container.find( '.panel-meta' );
                                 if ( meta.hasClass( 'cannot-expand' ) ) {
                                         return;
                                 }
@@ -1169 +1200 @@
                                 panelTitle.focus();
                                 container.scrollTop( 0 );
                         }
+                },
+
+                /**
+                 * Render the panel from its JS template, if it exists.
+                 *
+                 * The panel's container must already exist in the DOM.
+                 *
+                 * @since 4.3.0
+                 */
+                renderContent: function () {
+                        var template,
+                                panel = this;
+
+                        // Add the content to the container.
+                        if ( 0 !== $( '#tmpl-' + panel.templateSelector + '-content' ).length ) {
+                                template = wp.template( panel.templateSelector + '-content' );
+                                if ( template && panel.container ) {
+                                        panel.container.find( '.accordion-sub-container' ).html( template( panel.params ) );
+                                }
+                        }
                 }
         });
 

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

@@ -60 +60 @@
         protected $customized;
 
         /**
-         * Controls that may be rendered from JS templates.
+         * Panel types that may be rendered from JS templates.
+         *
+         * @since 4.3.0
+         * @access protected
+         * @var array
+         */
+        protected $registered_panel_types = array();
+
+        /**
+         * Section types that may be rendered from JS templates.
+         *
+         * @since 4.3.0
+         * @access protected
+         * @var array
+         */
+        protected $registered_section_types = array();
+
+        /**
+         * Control types that may be rendered from JS templates.
          *
          * @since 4.1.0
          * @access protected
@@ -612 +630 @@
                 }
 
                 foreach ( $this->settings as $id => $setting ) {
-                        $settings['values'][ $id ] = $setting->js_value();
+                        if ( $setting->check_capabilities() ) {
+                                $settings['values'][ $id ] = $setting->js_value();
+                        }
                 }
-                foreach ( $this->panels as $id => $panel ) {
-                        $settings['activePanels'][ $id ] = $panel->active();
-                        foreach ( $panel->sections as $id => $section ) {
-                                $settings['activeSections'][ $id ] = $section->active();
+                foreach ( $this->panels as $panel_id => $panel ) {
+                        if ( $panel->check_capabilities() ) {
+                                $settings['activePanels'][ $panel_id ] = $panel->active();
+                                foreach ( $panel->sections as $section_id => $section ) {
+                                        if ( $section->check_capabilities() ) {
+                                                $settings['activeSections'][ $section_id ] = $section->active();
+                                        }
+                                }
                         }
                 }
                 foreach ( $this->sections as $id => $section ) {
-                        $settings['activeSections'][ $id ] = $section->active();
+                        if ( $section->check_capabilities() ) {
+                                $settings['activeSections'][ $id ] = $section->active();
+                        }
                 }
                 foreach ( $this->controls as $id => $control ) {
-                        $settings['activeControls'][ $id ] = $control->active();
+                        if ( $control->check_capabilities() ) {
+                                $settings['activeControls'][ $id ] = $control->active();
+                        }
                 }
 
                 ?>
@@ -965 +993 @@
         }
 
         /**
+         * Register a customize panel type.
+         *
+         * Registered types are eligible to be rendered via JS and created dynamically.
+         *
+         * @since 4.3.0
+         * @access public
+         *
+         * @param string $panel Name of a custom panel which is a subclass of
+         *                        {@see WP_Customize_Panel}.
+         */
+        public function register_panel_type( $panel ) {
+                $this->registered_panel_types[] = $panel;
+        }
+
+        /**
+         * Render JS templates for all registered panel types.
+         *
+         * @since 4.3.0
+         * @access public
+         */
+        public function render_panel_templates() {
+                foreach ( $this->registered_panel_types as $panel_type ) {
+                        $panel = new $panel_type( $this, 'temp', array() );
+                        $panel->print_template();
+                }
+        }
+
+        /**
          * Add a customize section.
          *
          * @since 3.4.0
@@ -1006 +1062 @@
         }
 
         /**
+         * Register a customize section type.
+         *
+         * Registered types are eligible to be rendered via JS and created dynamically.
+         *
+         * @since 4.3.0
+         * @access public
+         *
+         * @param string $section Name of a custom section which is a subclass of
+         *                        {@see WP_Customize_Section}.
+         */
+        public function register_section_type( $section ) {
+                $this->registered_section_types[] = $section;
+        }
+
+        /**
+         * Render JS templates for all registered section types.
+         *
+         * @since 4.3.0
+         * @access public
+         */
+        public function render_section_templates() {
+                foreach ( $this->registered_section_types as $section_type ) {
+                        $section = new $section_type( $this, 'temp', array() );
+                        $section->print_template();
+                }
+        }
+
+        /**
          * Add a customize control.
          *
          * @since 3.4.0
@@ -1176 +1260 @@
          */
         public function register_controls() {
 
-                /* Control Types (custom control classes) */
+                /* Panel, Section, and Control Types */
+                $this->register_panel_type( 'WP_Customize_Panel' );
+                $this->register_section_type( 'WP_Customize_Section' );
+                $this->register_section_type( 'WP_Customize_Sidebar_Section' );
                 $this->register_control_type( 'WP_Customize_Color_Control' );
                 $this->register_control_type( 'WP_Customize_Media_Control' );
                 $this->register_control_type( 'WP_Customize_Upload_Control' );

src/wp-includes/class-wp-customize-panel.php

@@ -214 +214 @@
          * @return array The array to be exported to the client as JSON.
          */
         public function json() {
-                $array = wp_array_slice_assoc( (array) $this, array( 'title', 'description', 'priority', 'type' ) );
+                $array = wp_array_slice_assoc( (array) $this, array( 'id', 'title', 'description', 'priority', 'type' ) );
                 $array['content'] = $this->get_content();
                 $array['active'] = $this->active();
                 $array['instanceNumber'] = $this->instance_number;
@@ -289 +289 @@
         }
 
         /**
-         * Render the panel container, and then its contents.
+         * Render the panel container, and then its contents (via `this->render_content()`) in a subclass.
+         *
+         * Panel containers are now rendered in JS by default, see {@see WP_Customize_Panel::print_template()}.
          *
          * @since 4.0.0
          * @access protected
          */
-        protected function render() {
-                $classes = 'accordion-section control-section control-panel control-panel-' . $this->type;
+        protected function render() {}
+
+        /**
+         * Render the panel UI in a subclass.
+         *
+         * Panel contents are now rendered in JS by default, see {@see WP_Customize_Panel::print_template()}.
+         *
+         * @since 4.1.0
+         * @access protected
+         */
+        protected function render_content() {}
+
+        /**
+         * Render the panel's JS templates.
+         *
+         * This function is only run for panel types that have been registered with
+         * {@see WP_Customize_Manager::register_panel_type()}.
+         *
+         * @since 4.3.0
+         */
+        public function print_template() {
                 ?>
-                <li id="accordion-panel-<?php echo esc_attr( $this->id ); ?>" class="<?php echo esc_attr( $classes ); ?>">
+                <script type="text/html" id="tmpl-customize-panel-<?php echo esc_attr( $this->type ); ?>-content">
+                        <?php $this->content_template(); ?>
+                </script>
+                <script type="text/html" id="tmpl-customize-panel-<?php echo esc_attr( $this->type ); ?>">
+                        <?php $this->render_template(); ?>
+                </script>
+        <?php
+        }
+
+        /**
+         * An Underscore (JS) template for rendering this panel's container.
+         *
+         * Class variables for this panel class are available in the `data` JS object;
+         * export custom variables by overriding {@see WP_Customize_Panel::json()}.
+         *
+         * @see WP_Customize_Panel::print_template()
+         *
+         * @since 4.3.0
+         */
+        protected function render_template() {
+                ?>
+                <li id="accordion-panel-{{ data.id }}" class="accordion-section control-section control-panel control-panel-{{ 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 this panel' ); ?></span>
                         </h3>
-                        <ul class="accordion-sub-container control-panel-content">
-                                <?php $this->render_content(); ?>
-                        </ul>
+                        <ul class="accordion-sub-container control-panel-content"></ul>
                 </li>
                 <?php
         }
 
         /**
-         * Render the sections that have been added to the panel.
+         * An Underscore (JS) template for this panel's content (but not its container).
          *
-         * @since 4.1.0
-         * @access protected
+         * Class variables for this panel class are available in the `data` JS object;
+         * export custom variables by overriding {@see WP_Customize_Panel::json()}.
+         *
+         * @see WP_Customize_Panel::print_template()
+         *
+         * @since 4.3.0
          */
-        protected function render_content() {
+        protected function content_template() {
                 ?>
-                <li class="panel-meta customize-info accordion-section<?php if ( empty( $this->description ) ) { echo ' cannot-expand'; } ?>">
+                <li class="panel-meta customize-info accordion-section <# if ( ! data.description ) { #> cannot-expand<# } #>">
                         <button class="customize-panel-back" tabindex="-1"><span class="screen-reader-text"><?php _e( 'Back' ); ?></span></button>
                         <div class="accordion-section-title">
                                 <span class="preview-notice"><?php
                                         /* translators: %s is the site/panel title in the Customizer */
-                                        echo sprintf( __( 'You are customizing %s' ), '<strong class="panel-title">' . esc_html( $this->title ) . '</strong>' );
+                                        echo sprintf( __( 'You are customizing %s' ), '<strong class="panel-title">{{ data.title }}</strong>' );
                                 ?></span>
                                 <button class="customize-help-toggle dashicons dashicons-editor-help" tabindex="0" aria-expanded="false"><span class="screen-reader-text"><?php _e( 'Help' ); ?></span></button>
                         </div>
-                        <?php if ( ! empty( $this->description ) ) : ?>
+                        <# if ( data.description ) { #>
                                 <div class="description customize-panel-description">
-                                        <?php echo $this->description; ?>
+                                        {{{ data.description }}}
                                 </div>
-                        <?php endif; ?>
+                        <# } #>
                 </li>
                 <?php
         }

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

@@ -223 +223 @@
          * @return array The array to be exported to the client as JSON.
          */
         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;
         }
 
@@ -251 +259 @@
         }
 
         /**
-         * 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
          *
@@ -297 +305 @@
         }
 
         /**
-         * Render the section, and the controls that have been added to it.
+         * 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() {
-                $classes = 'accordion-section control-section control-section-' . $this->type;
+        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>
                         <ul class="accordion-section-content">
@@ -316 +353 @@
                                                         <span class="screen-reader-text"><?php _e( 'Back' ); ?></span>
                                                 </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>
                 </li>

new file tests/phpunit/tests/customize/panel.php

@@ +1 @@
+<?php
+
+/**
+ * Tests for the WP_Customize_Panel class.
+ *
+ * @group customize
+ */
+class Tests_WP_Customize_Panel extends WP_UnitTestCase {
+
+        /**
+         * @var WP_Customize_Manager
+         */
+        protected $manager;
+
+        function setUp() {
+                parent::setUp();
+                require_once( ABSPATH . WPINC . '/class-wp-customize-manager.php' );
+                $GLOBALS['wp_customize'] = new WP_Customize_Manager();
+                $this->manager = $GLOBALS['wp_customize'];
+                $this->undefined = new stdClass();
+        }
+
+        function tearDown() {
+                $this->manager = null;
+                unset( $GLOBALS['wp_customize'] );
+                parent::tearDown();
+        }
+
+        /**
+         * @see WP_Customize_Panel::__construct()
+         */
+        function test_construct_default_args() {
+                $panel = new WP_Customize_Panel( $this->manager, 'foo' );
+                $this->assertInternalType( 'int', $panel->instance_number );
+                $this->assertEquals( $this->manager, $panel->manager );
+                $this->assertEquals( 'foo', $panel->id );
+                $this->assertEquals( 160, $panel->priority );
+                $this->assertEquals( 'edit_theme_options', $panel->capability );
+                $this->assertEquals( '', $panel->theme_supports );
+                $this->assertEquals( '', $panel->title );
+                $this->assertEquals( '', $panel->description );
+                $this->assertEmpty( $panel->sections );
+                $this->assertEquals( 'default', $panel->type );
+                $this->assertEquals( array( $panel, 'active_callback' ), $panel->active_callback );
+        }
+
+        /**
+         * @see WP_Customize_Panel::__construct()
+         */
+        function test_construct_custom_args() {
+                $args = array(
+                        'priority' => 200,
+                        'capability' => 'edit_posts',
+                        'theme_supports' => 'html5',
+                        'title' => 'Hello World',
+                        'description' => 'Lorem Ipsum',
+                        'type' => 'horizontal',
+                        'active_callback' => '__return_true',
+                );
+
+                $panel = new WP_Customize_Panel( $this->manager, 'foo', $args );
+                foreach ( $args as $key => $value ) {
+                        $this->assertEquals( $value, $panel->$key );
+                }
+        }
+
+        /**
+         * @see WP_Customize_Panel::__construct()
+         */
+        function test_construct_custom_type() {
+                $panel = new Custom_Panel_Test( $this->manager, 'foo' );
+                $this->assertEquals( 'titleless', $panel->type );
+        }
+
+        /**
+         * @see WP_Customize_Panel::active()
+         * @see WP_Customize_Panel::active_callback()
+         */
+        function test_active() {
+                $panel = new WP_Customize_Panel( $this->manager, 'foo' );
+                $this->assertTrue( $panel->active() );
+
+                $panel = new WP_Customize_Panel( $this->manager, 'foo', array(
+                        'active_callback' => '__return_false',
+                ) );
+                $this->assertFalse( $panel->active() );
+                add_filter( 'customize_panel_active', array( $this, 'filter_active_test' ), 10, 2 );
+                $this->assertTrue( $panel->active() );
+        }
+
+        /**
+         * @param bool $active
+         * @param WP_Customize_Panel $panel
+         * @return bool
+         */
+        function filter_active_test( $active, $panel ) {
+                $this->assertFalse( $active );
+                $this->assertInstanceOf( 'WP_Customize_Panel', $panel );
+                $active = true;
+                return $active;
+        }
+
+        /**
+         * @see WP_Customize_Panel::json()
+         */
+        function test_json() {
+                $args = array(
+                        'priority' => 200,
+                        'capability' => 'edit_posts',
+                        'theme_supports' => 'html5',
+                        'title' => 'Hello World',
+                        'description' => 'Lorem Ipsum',
+                        'type' => 'horizontal',
+                        'active_callback' => '__return_true',
+                );
+                $panel = new WP_Customize_Panel( $this->manager, 'foo', $args );
+                $data = $panel->json();
+                $this->assertEquals( 'foo', $data['id'] );
+                foreach ( array( 'title', 'description', 'priority', 'type' ) as $key ) {
+                        $this->assertEquals( $args[ $key ], $data[ $key ] );
+                }
+                $this->assertEmpty( $data['content'] );
+                $this->assertTrue( $data['active'] );
+                $this->assertInternalType( 'int', $data['instanceNumber'] );
+        }
+
+        /**
+         * @see WP_Customize_Panel::check_capabilities()
+         */
+        function test_check_capabilities() {
+                $user_id = $this->factory->user->create( array( 'role' => 'administrator' ) );
+                wp_set_current_user( $user_id );
+
+                $panel = new WP_Customize_Panel( $this->manager, 'foo' );
+                $this->assertTrue( $panel->check_capabilities() );
+                $old_cap = $panel->capability;
+                $panel->capability = 'do_not_allow';
+                $this->assertFalse( $panel->check_capabilities() );
+                $panel->capability = $old_cap;
+                $this->assertTrue( $panel->check_capabilities() );
+                $panel->theme_supports = 'impossible_feature';
+                $this->assertFalse( $panel->check_capabilities() );
+        }
+
+        /**
+         * @see WP_Customize_Panel::get_content()
+         */
+        function test_get_content() {
+                $panel = new WP_Customize_Panel( $this->manager, 'foo' );
+                $this->assertEmpty( $panel->get_content() );
+        }
+
+        /**
+         * @see WP_Customize_Panel::maybe_render()
+         */
+        function test_maybe_render() {
+                wp_set_current_user( $this->factory->user->create( array( 'role' => 'administrator' ) ) );
+                $panel = new WP_Customize_Panel( $this->manager, 'bar' );
+                $customize_render_panel_count = did_action( 'customize_render_panel' );
+                add_action( 'customize_render_panel', array( $this, 'action_customize_render_panel_test' ) );
+                ob_start();
+                $panel->maybe_render();
+                $content = ob_get_clean();
+                $this->assertTrue( $panel->check_capabilities() );
+                $this->assertEmpty( $content );
+                $this->assertEquals( $customize_render_panel_count + 1, did_action( 'customize_render_panel' ), 'Unexpected did_action count for customize_render_panel' );
+                $this->assertEquals( 1, did_action( "customize_render_panel_{$panel->id}" ), "Unexpected did_action count for customize_render_panel_{$panel->id}" );
+        }
+
+        /**
+         * @see WP_Customize_Panel::maybe_render()
+         * @param WP_Customize_Panel $panel
+         */
+        function action_customize_render_panel_test( $panel ) {
+                $this->assertInstanceOf( 'WP_Customize_Panel', $panel );
+        }
+
+        /**
+         * @see WP_Customize_Panel::print_template()
+         */
+        function test_print_templates_standard() {
+                wp_set_current_user( $this->factory->user->create( array( 'role' => 'administrator' ) ) );
+
+                $panel = new WP_Customize_Panel( $this->manager, 'baz' );
+                ob_start();
+                $panel->print_template();
+                $content = ob_get_clean();
+                $this->assertContains( '<script type="text/html" id="tmpl-customize-panel-default-content">', $content );
+                $this->assertContains( 'accordion-section-title', $content );
+                $this->assertContains( 'control-panel-content', $content );
+                $this->assertContains( '<script type="text/html" id="tmpl-customize-panel-default">', $content );
+                $this->assertContains( 'customize-panel-description', $content );
+                $this->assertContains( 'preview-notice', $content );
+        }
+
+        /**
+         * @see WP_Customize_Panel::print_template()
+         */
+        function test_print_templates_custom() {
+                wp_set_current_user( $this->factory->user->create( array( 'role' => 'administrator' ) ) );
+
+                $panel = new Custom_Panel_Test( $this->manager, 'baz' );
+                ob_start();
+                $panel->print_template();
+                $content = ob_get_clean();
+                $this->assertContains( '<script type="text/html" id="tmpl-customize-panel-titleless-content">', $content );
+                $this->assertNotContains( 'accordion-section-title', $content );
+
+                $this->assertContains( '<script type="text/html" id="tmpl-customize-panel-titleless">', $content );
+                $this->assertNotContains( 'preview-notice', $content );
+        }
+}
+
+require_once ABSPATH . WPINC . '/class-wp-customize-panel.php';
+class Custom_Panel_Test extends WP_Customize_Panel {
+        public $type = 'titleless';
+
+        protected function render_template() {
+                ?>
+                <li id="accordion-panel-{{ data.id }}" class="accordion-section control-section control-panel control-panel-{{ data.type }}">
+                        <ul class="accordion-sub-container control-panel-content"></ul>
+                </li>
+                <?php
+        }
+
+        protected function content_template() {
+                ?>
+                <li class="panel-meta accordion-section control-section<# if ( ! data.description ) { #> cannot-expand<# } #>">
+                        <# if ( data.description ) { #>
+                                <div class="accordion-section-content description">
+                                        {{{ data.description }}}
+                                </div>
+                        <# } #>
+                </li>
+                <?php
+        }
+
+}

new file tests/phpunit/tests/customize/section.php

@@ +1 @@
+<?php
+
+/**
+ * Tests for the WP_Customize_Section class.
+ *
+ * @group customize
+ */
+class Tests_WP_Customize_Section extends WP_UnitTestCase {
+
+        /**
+         * @var WP_Customize_Manager
+         */
+        protected $manager;
+
+        function setUp() {
+                parent::setUp();
+                require_once( ABSPATH . WPINC . '/class-wp-customize-manager.php' );
+                $GLOBALS['wp_customize'] = new WP_Customize_Manager();
+                $this->manager = $GLOBALS['wp_customize'];
+                $this->undefined = new stdClass();
+        }
+
+        function tearDown() {
+                $this->manager = null;
+                unset( $GLOBALS['wp_customize'] );
+                parent::tearDown();
+        }
+
+        /**
+         * @see WP_Customize_Section::__construct()
+         */
+        function test_construct_default_args() {
+                $section = new WP_Customize_Section( $this->manager, 'foo' );
+                $this->assertInternalType( 'int', $section->instance_number );
+                $this->assertEquals( $this->manager, $section->manager );
+                $this->assertEquals( 'foo', $section->id );
+                $this->assertEquals( 160, $section->priority );
+                $this->assertEquals( 'edit_theme_options', $section->capability );
+                $this->assertEquals( '', $section->theme_supports );
+                $this->assertEquals( '', $section->title );
+                $this->assertEquals( '', $section->description );
+                $this->assertEmpty( $section->panel );
+                $this->assertEquals( 'default', $section->type );
+                $this->assertEquals( array( $section, 'active_callback' ), $section->active_callback );
+        }
+
+        /**
+         * @see WP_Customize_Section::__construct()
+         */
+        function test_construct_custom_args() {
+                $args = array(
+                        'priority' => 200,
+                        'capability' => 'edit_posts',
+                        'theme_supports' => 'html5',
+                        'title' => 'Hello World',
+                        'description' => 'Lorem Ipsum',
+                        'type' => 'horizontal',
+                        'active_callback' => '__return_true',
+                        'panel' => 'bar',
+                );
+
+                $this->manager->add_panel( 'bar' );
+
+                $section = new WP_Customize_Section( $this->manager, 'foo', $args );
+                foreach ( $args as $key => $value ) {
+                        $this->assertEquals( $value, $section->$key );
+                }
+        }
+
+        /**
+         * @see WP_Customize_Section::__construct()
+         */
+        function test_construct_custom_type() {
+                $section = new Custom_Section_Test( $this->manager, 'foo' );
+                $this->assertEquals( 'titleless', $section->type );
+        }
+
+        /**
+         * @see WP_Customize_Section::active()
+         * @see WP_Customize_Section::active_callback()
+         */
+        function test_active() {
+                $section = new WP_Customize_Section( $this->manager, 'foo' );
+                $this->assertTrue( $section->active() );
+
+                $section = new WP_Customize_Section( $this->manager, 'foo', array(
+                        'active_callback' => '__return_false',
+                ) );
+                $this->assertFalse( $section->active() );
+                add_filter( 'customize_section_active', array( $this, 'filter_active_test' ), 10, 2 );
+                $this->assertTrue( $section->active() );
+        }
+
+        /**
+         * @param bool $active
+         * @param WP_Customize_Section $section
+         * @return bool
+         */
+        function filter_active_test( $active, $section ) {
+                $this->assertFalse( $active );
+                $this->assertInstanceOf( 'WP_Customize_Section', $section );
+                $active = true;
+                return $active;
+        }
+
+        /**
+         * @see WP_Customize_Section::json()
+         */
+        function test_json() {
+                $args = array(
+                        'priority' => 200,
+                        'capability' => 'edit_posts',
+                        'theme_supports' => 'html5',
+                        'title' => 'Hello World',
+                        'description' => 'Lorem Ipsum',
+                        'type' => 'horizontal',
+                        'panel' => 'bar',
+                        'active_callback' => '__return_true',
+                );
+
+                $this->manager->add_panel( 'bar' );
+
+                $section = new WP_Customize_Section( $this->manager, 'foo', $args );
+                $data = $section->json();
+                $this->assertEquals( 'foo', $data['id'] );
+                foreach ( array( 'title', 'description', 'priority', 'panel', 'type' ) as $key ) {
+                        $this->assertEquals( $args[ $key ], $data[ $key ] );
+                }
+                $this->assertEmpty( $data['content'] );
+                $this->assertTrue( $data['active'] );
+                $this->assertInternalType( 'int', $data['instanceNumber'] );
+        }
+
+        /**
+         * @see WP_Customize_Section::check_capabilities()
+         */
+        function test_check_capabilities() {
+                $user_id = $this->factory->user->create( array( 'role' => 'administrator' ) );
+                wp_set_current_user( $user_id );
+
+                $section = new WP_Customize_Section( $this->manager, 'foo' );
+                $this->assertTrue( $section->check_capabilities() );
+                $old_cap = $section->capability;
+                $section->capability = 'do_not_allow';
+                $this->assertFalse( $section->check_capabilities() );
+                $section->capability = $old_cap;
+                $this->assertTrue( $section->check_capabilities() );
+                $section->theme_supports = 'impossible_feature';
+                $this->assertFalse( $section->check_capabilities() );
+        }
+
+        /**
+         * @see WP_Customize_Section::get_content()
+         */
+        function test_get_content() {
+                $section = new WP_Customize_Section( $this->manager, 'foo' );
+                $this->assertEmpty( $section->get_content() );
+        }
+
+        /**
+         * @see WP_Customize_Section::maybe_render()
+         */
+        function test_maybe_render() {
+                wp_set_current_user( $this->factory->user->create( array( 'role' => 'administrator' ) ) );
+                $section = new WP_Customize_Section( $this->manager, 'bar' );
+                $customize_render_section_count = did_action( 'customize_render_section' );
+                add_action( 'customize_render_section', array( $this, 'action_customize_render_section_test' ) );
+                ob_start();
+                $section->maybe_render();
+                $content = ob_get_clean();
+                $this->assertTrue( $section->check_capabilities() );
+                $this->assertEmpty( $content );
+                $this->assertEquals( $customize_render_section_count + 1, did_action( 'customize_render_section' ), 'Unexpected did_action count for customize_render_section' );
+                $this->assertEquals( 1, did_action( "customize_render_section_{$section->id}" ), "Unexpected did_action count for customize_render_section_{$section->id}" );
+        }
+
+        /**
+         * @see WP_Customize_Section::maybe_render()
+         * @param WP_Customize_Section $section
+         */
+        function action_customize_render_section_test( $section ) {
+                $this->assertInstanceOf( 'WP_Customize_Section', $section );
+        }
+
+        /**
+         * @see WP_Customize_Section::print_template()
+         */
+        function test_print_templates_standard() {
+                wp_set_current_user( $this->factory->user->create( array( 'role' => 'administrator' ) ) );
+
+                $section = new WP_Customize_Section( $this->manager, 'baz' );
+                ob_start();
+                $section->print_template();
+                $content = ob_get_clean();
+                $this->assertContains( '<script type="text/html" id="tmpl-customize-section-default">', $content );
+                $this->assertContains( 'accordion-section-title', $content );
+                $this->assertContains( 'accordion-section-content', $content );
+        }
+
+        /**
+         * @see WP_Customize_Section::print_template()
+         */
+        function test_print_templates_custom() {
+                wp_set_current_user( $this->factory->user->create( array( 'role' => 'administrator' ) ) );
+
+                $section = new Custom_Section_Test( $this->manager, 'baz' );
+                ob_start();
+                $section->print_template();
+                $content = ob_get_clean();
+                $this->assertContains( '<script type="text/html" id="tmpl-customize-section-titleless">', $content );
+                $this->assertNotContains( 'accordion-section-title', $content );
+                $this->assertContains( 'accordion-section-content', $content );
+        }
+}
+
+require_once ABSPATH . WPINC . '/class-wp-customize-section.php';
+class Custom_Section_Test extends WP_Customize_Section {
+        public $type = 'titleless';
+
+        protected function render_template() {
+                ?>
+                <li id="accordion-section-{{ data.id }}" class="accordion-section control-section control-section-{{ data.type }}">
+                        <ul class="accordion-section-content">
+                                <# if ( data.description ) { #>
+                                        <li class="customize-section-description-container">
+                                                <p class="description customize-section-description">{{{ data.description }}}</p>
+                                        </li>
+                                <# } #>
+                        </ul>
+                </li>
+                <?php
+        }
+
+}

tests/qunit/fixtures/customize-settings.js

@@ -15 +15 @@
         'controls': {
                 'fixture-control': {
                         'active': true,
-                        'content': '<li id="customize-control-fixture-control" class="customize-control customize-control-text">\n\t\t\t\t\t\t\t<label>\n\t\t\t\t\t\t\t\t\t\t\t<span class="customize-control-title">Site Title</span>\n\t\t\t\t\t\t\t\t\t\t<input type="text"  value="sWordPress Developssa!" data-customize-setting-link="blogname" />\n\t\t\t\t</label>\n\t\t\t\t\t\t</li>',
+                        'content': "<li id=\"accordion-section-fixture-section\" class=\"accordion-section control-section control-section-default\">\n\t\t\t<h3 class=\"accordion-section-title\" tabindex=\"0\">\n\t\t\t\tSection Fixture\t\t\t\t<span class=\"screen-reader-text\">Press return or enter to open</span>\n\t\t\t</h3>\n\t\t\t<ul class=\"accordion-section-content\">\n\t\t\t\t<li class=\"customize-section-description-container\">\n\t\t\t\t\t<div class=\"customize-section-title\">\n\t\t\t\t\t\t<button class=\"customize-section-back\" tabindex=\"-1\">\n\t\t\t\t\t\t\t<span class=\"screen-reader-text\">Back</span>\n\t\t\t\t\t\t</button>\n\t\t\t\t\t\t<h3>\n\t\t\t\t\t\t\t<span class=\"customize-action\">Customizing &#9656; Fixture Panel</span>\n\t\t\t\t\t\t\tSection Fixture\t\t\t\t\t\t</h3>\n\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t</li>\n\t\t\t</ul>\n\t\t</li>",
                         'description': '',
                         'instanceNumber': 8,
                         'label': 'Fixture Control',
@@ -35 +35 @@
         'panels': {
                 'fixture-panel': {
                         'active': true,
-                        'content': '<li id="accordion-panel-fixture-panel" class="accordion-section control-section control-panel control-panel-default">\n\t\t\t<h3 class="accordion-section-title" tabindex="0">\n\t\t\t\tLipsum\t\t\t\t<span class="screen-reader-text">Press return or enter to open this panel</span>\n\t\t\t</h3>\n\t\t\t<ul class="accordion-sub-container control-panel-content">\n\t\t\t\t\t\t<li class="panel-meta accordion-section control-section">\n\t\t\t<div class="accordion-section-title" tabindex="0">\n\t\t\t\t<span class="preview-notice">You are customizing <strong class="panel-title">Lipsum</strong></span>\n\t\t\t</div>\n\t\t\t\t\t\t\t<div class="accordion-section-content description">\n\t\t\t\t\tLorem Ipsum\t\t\t\t</div>\n\t\t\t\t\t</li>\n\t\t\t\t\t</ul>\n\t\t</li>',
+                        'content': "<li id=\"accordion-panel-fixture-panel\" class=\"accordion-section control-section control-panel control-panel-default\">\n\t\t\t<h3 class=\"accordion-section-title\" tabindex=\"0\">\n\t\t\t\tFixture Panel\t\t\t\t<span class=\"screen-reader-text\">Press return or enter to open this panel</span>\n\t\t\t</h3>\n\t\t\t<ul class=\"accordion-sub-container control-panel-content\">\n\t\t\t\t\t\t<li class=\"panel-meta customize-info accordion-section cannot-expand\">\n\t\t\t<button class=\"customize-panel-back\" tabindex=\"-1\"><span class=\"screen-reader-text\">Back</span></button>\n\t\t\t<div class=\"accordion-section-title\">\n\t\t\t\t<span class=\"preview-notice\">You are customizing <strong class=\"panel-title\">Fixture Panel</strong></span>\n\t\t\t\t<button class=\"customize-help-toggle dashicons dashicons-editor-help\" tabindex=\"0\" aria-expanded=\"false\"><span class=\"screen-reader-text\">Help</span></button>\n\t\t\t</div>\n\t\t\t\t\t</li>\n\t\t\t\t\t</ul>\n\t\t</li>",
                         'description': 'Lorem ipsum',
                         'instanceNumber': 1,
                         'priority': 110,
-                        'title': 'Lorem Ipsum',
+                        'title': 'Fixture panel with content',
                         'type': 'default'
+                },
+                'fixture-panel-default-templated': {
+                        'active': true,
+                        'description': 'Lorem ipsum',
+                        'instanceNumber': 2,
+                        'priority': 110,
+                        'title': 'Fixture default panel using template',
+                        'type': 'default'
+                },
+                'fixture-panel-titleless-templated': {
+                        'active': true,
+                        'description': 'Lorem ipsum',
+                        'instanceNumber': 3,
+                        'priority': 110,
+                        'title': 'Fixture titleless panel using template',
+                        'type': 'titleless'
                 }
         },
         'sections': {
                 'fixture-section': {
                         'active': true,
-                        'content': '<li id="accordion-section-fixture-section" class="accordion-section control-section control-section-default">\n\t\t\t<h3 class="accordion-section-title" tabindex="0">\n\t\t\t\tSite Title &amp; Tagline\t\t\t\t<span class="screen-reader-text">Press return or enter to expand</span>\n\t\t\t</h3>\n\t\t\t<ul class="accordion-section-content">\n\t\t\t\t\t\t\t</ul>\n\t\t</li>',
+                        'content': "<li id=\"accordion-section-fixture-section\" class=\"accordion-section control-section control-section-default\">\n\t\t\t<h3 class=\"accordion-section-title\" tabindex=\"0\">\n\t\t\t\tSection Fixture\t\t\t\t<span class=\"screen-reader-text\">Press return or enter to open</span>\n\t\t\t</h3>\n\t\t\t<ul class=\"accordion-section-content\">\n\t\t\t\t<li class=\"customize-section-description-container\">\n\t\t\t\t\t<div class=\"customize-section-title\">\n\t\t\t\t\t\t<button class=\"customize-section-back\" tabindex=\"-1\">\n\t\t\t\t\t\t\t<span class=\"screen-reader-text\">Back</span>\n\t\t\t\t\t\t</button>\n\t\t\t\t\t\t<h3>\n\t\t\t\t\t\t\t<span class=\"customize-action\">Customizing &#9656; Fixture Panel</span>\n\t\t\t\t\t\t\tSection Fixture\t\t\t\t\t\t</h3>\n\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t</li>\n\t\t\t</ul>\n\t\t</li>",
                         'description': '',
                         'instanceNumber': 2,
                         'panel': 'fixture-panel',
                         'priority': 20,
                         'title': 'Fixture Section',
                         'type': 'default'
+                },
+                'fixture-section-default-templated': {
+                        'active': true,
+                        'description': '',
+                        'instanceNumber': 3,
+                        'panel': 'fixture-panel',
+                        'priority': 20,
+                        'title': 'Fixture default section using template',
+                        'type': 'default'
+                },
+                'fixture-section-titleless-templated': {
+                        'active': true,
+                        'description': '',
+                        'instanceNumber': 4,
+                        'panel': 'fixture-panel',
+                        'priority': 20,
+                        'title': 'Fixture titleless section using template',
+                        'type': 'titleless'
                 }
         },
         'settings': {

tests/qunit/index.html

@@ -9 +9 @@
                 <script src="../../src/wp-includes/js/underscore.min.js"></script>
                 <script src="../../src/wp-includes/js/backbone.min.js"></script>
                 <script src="../../src/wp-includes/js/zxcvbn.min.js"></script>
+                <script src="../../src/wp-includes/js/wp-util.js"></script>
 
                 <!-- QUnit -->
                 <link rel="stylesheet" href="vendor/qunit.css" type="text/css" media="screen" />
@@ -39 +40 @@
                 <script src="wp-includes/js/shortcode.js"></script>
                 <script src="wp-admin/js/customize-controls.js"></script>
                 <script src="wp-admin/js/customize-controls-utils.js"></script>
+
+                <!-- Customizer templates for sections -->
+                <script type="text/html" id="tmpl-customize-section-default">
+                        <li id="accordion-section-{{ data.id }}" class="accordion-section control-section control-section-{{ data.type }}">
+                                <h3 class="accordion-section-title" tabindex="0">
+                                        {{ data.title }}
+                                        <span class="screen-reader-text">Press return or enter to expand</span>
+                                </h3>
+                                <ul class="accordion-section-content">
+                                        <# if ( data.description ) { #>
+                                                <li class="customize-section-description-container">
+                                                        <p class="description customize-section-description">{{{ data.description }}}</p>
+                                                </li>
+                                        <# } #>
+                                </ul>
+                        </li>
+                </script>
+                <script type="text/html" id="tmpl-customize-section-titleless">
+                        <li id="accordion-section-{{ data.id }}" class="accordion-section control-section control-section-{{ data.type }}">
+                                <!-- Notice the lack of an h3 with title displayed inside. -->
+                                <ul class="accordion-section-content">
+                                        <# if ( data.description ) { #>
+                                                <li class="customize-section-description-container">
+                                                        <p class="description customize-section-description">{{{ data.description }}}</p>
+                                                </li>
+                                        <# } #>
+                                </ul>
+                        </li>
+                </script>
+
+                <!-- Customizer templates for panels -->
+                <script type="text/html" id="tmpl-customize-panel-default">
+                        <li id="accordion-panel-{{ data.id }}" class="accordion-section control-section control-panel control-panel-{{ data.type }}">
+                                <h3 class="accordion-section-title" tabindex="0">
+                                        {{ data.title }}
+                                        <span class="screen-reader-text">Press return or enter to open this panel</span>
+                                </h3>
+                                <ul class="accordion-sub-container control-panel-content"></ul>
+                        </li>
+                </script>
+                <script type="text/html" id="tmpl-customize-panel-default-content">
+                        <li class="panel-meta accordion-section control-section<# if ( ! data.description ) { #> cannot-expand<# } #>">
+                                <div class="accordion-section-title" tabindex="0">
+                                        <span class="preview-notice">You are customizing <strong class="panel-title">{{ data.title }}</strong></span>
+                                </div>
+                                <# if ( data.description ) { #>
+                                        <div class="accordion-section-content description">
+                                                {{{ data.description }}}
+                                        </div>
+                                <# } #>
+                        </li>
+                </script>
+                <script type="text/html" id="tmpl-customize-panel-titleless">
+                        <li id="accordion-panel-{{ data.id }}" class="accordion-section control-section control-panel control-panel-{{ data.type }}">
+                                <!-- Notice the lack of an h3 with title displayed inside. -->
+                                <ul class="accordion-sub-container control-panel-content"></ul>
+                        </li>
+                </script>
+                <script type="text/html" id="tmpl-customize-panel-titleless-content">
+                        <li class="panel-meta accordion-section control-section<# if ( ! data.description ) { #> cannot-expand<# } #>">
+                                <!-- Notice lack of title containing preview notice -->
+                                <# if ( data.description ) { #>
+                                        <div class="accordion-section-content description">
+                                                {{{ data.description }}}
+                                        </div>
+                                <# } #>
+                        </li>
+                </script>
         </body>
 </html>

tests/qunit/wp-admin/js/customize-controls.js

@@ -95 +95 @@
                 equal( control.section(), 'fixture-section' );
         } );
 
+        // Begin sections.
         module( 'Customizer Section in Fixture' );
         test( 'Fixture section exists', function () {
                 ok( wp.customize.section.has( 'fixture-section' ) );
         } );
         test( 'Fixture section has control among controls()', function () {
                 var section = wp.customize.section( 'fixture-section' );
-                equal( section.controls().length, 1 );
-                equal( section.controls()[0].id, 'fixture-control' );
+                ok( -1 !== _.pluck( section.controls(), 'id' ).indexOf( 'fixture-control' ) );
         } );
-        test( 'Fixture section has control among controls()', function () {
+        test( 'Fixture section has has expected panel', function () {
                 var section = wp.customize.section( 'fixture-section' );
                 equal( section.panel(), 'fixture-panel' );
         } );
 
+        module( 'Customizer Default Section with Template in Fixture' );
+        test( 'Fixture section exists', function () {
+                ok( wp.customize.section.has( 'fixture-section-default-templated' ) );
+        } );
+        test( 'Fixture section has expected content', function () {
+                var id = 'fixture-section-default-templated', section;
+                section = wp.customize.section( id );
+                ok( ! section.params.content );
+                ok( !! section.container );
+                ok( section.container.is( '.control-section.control-section-default' ) );
+                ok( 1 === section.container.find( '> .accordion-section-title' ).length );
+                ok( 1 === section.container.find( '> .accordion-section-content' ).length );
+        } );
+
+        module( 'Customizer Custom Type (titleless) Section with Template in Fixture' );
+        test( 'Fixture section exists', function () {
+                ok( wp.customize.section.has( 'fixture-section-titleless-templated' ) );
+        } );
+        test( 'Fixture section has expected content', function () {
+                var id = 'fixture-section-titleless-templated', section;
+                section = wp.customize.section( id );
+                ok( ! section.params.content );
+                ok( !! section.container );
+                ok( section.container.is( '.control-section.control-section-titleless' ) );
+                ok( 0 === section.container.find( '> .accordion-section-title' ).length );
+                ok( 1 === section.container.find( '> .accordion-section-content' ).length );
+        } );
+
+        // Begin panels.
         module( 'Customizer Panel in Fixture' );
         test( 'Fixture panel exists', function () {
                 ok( wp.customize.panel.has( 'fixture-panel' ) );
         } );
-        test( 'Fixture section has control among controls()', function () {
+        test( 'Fixture panel has content', function () {
+                var panel = wp.customize.panel( 'fixture-panel' );
+                ok( !! panel.params.content );
+                ok( !! panel.container );
+        } );
+        test( 'Fixture panel has section among its sections()', function () {
                 var panel = wp.customize.panel( 'fixture-panel' );
-                equal( panel.sections().length, 1 );
-                equal( panel.sections()[0].id, 'fixture-section' );
+                ok( -1 !== _.pluck( panel.sections(), 'id' ).indexOf( 'fixture-section' ) );
         } );
         test( 'Panel is not expanded by default', function () {
                 var panel = wp.customize.panel( 'fixture-panel' );
@@ -138 +171 @@
                 ok( panel.expanded() );
         } );
 
+        module( 'Customizer Default Panel with Template in Fixture' );
+        test( 'Fixture section exists', function () {
+                ok( wp.customize.panel.has( 'fixture-panel-default-templated' ) );
+        } );
+        test( 'Fixture panel has expected content', function () {
+                var id = 'fixture-panel-default-templated', panel;
+                panel = wp.customize.panel( id );
+                ok( ! panel.params.content );
+                ok( !! panel.container );
+                ok( panel.container.is( '.control-panel.control-panel-default' ) );
+                ok( 1 === panel.container.find( '> .accordion-section-title' ).length );
+                ok( 1 === panel.container.find( '> .control-panel-content' ).length );
+        } );
+
+        module( 'Customizer Custom Type Panel (titleless) with Template in Fixture' );
+        test( 'Fixture panel exists', function () {
+                ok( wp.customize.panel.has( 'fixture-panel-titleless-templated' ) );
+        } );
+        test( 'Fixture panel has expected content', function () {
+                var id = 'fixture-panel-titleless-templated', panel;
+                panel = wp.customize.panel( id );
+                ok( ! panel.params.content );
+                ok( !! panel.container );
+                ok( panel.container.is( '.control-panel.control-panel-titleless' ) );
+                ok( 0 === panel.container.find( '> .accordion-section-title' ).length );
+                ok( 1 === panel.container.find( '> .control-panel-content' ).length );
+        } );
+
 
         module( 'Dynamically-created Customizer Setting Model' );
         settingId = 'new_blogname';
@@ -160 +221 @@
         module( 'Dynamically-created Customizer Section Model' );
 
         sectionId = 'mock_title_tagline';
-        sectionContent = '<li id="accordion-section-mock_title_tagline" class="control-section accordion-section"></li>';
+        sectionContent = "<li id=\"accordion-section-mock_title_tagline\" class=\"accordion-section control-section control-section-default\">\n\t\t\t<h3 class=\"accordion-section-title\" tabindex=\"0\">\n\t\t\t\tSection Fixture\t\t\t\t<span class=\"screen-reader-text\">Press return or enter to open</span>\n\t\t\t</h3>\n\t\t\t<ul class=\"accordion-section-content\">\n\t\t\t\t<li class=\"customize-section-description-container\">\n\t\t\t\t\t<div class=\"customize-section-title\">\n\t\t\t\t\t\t<button class=\"customize-section-back\" tabindex=\"-1\">\n\t\t\t\t\t\t\t<span class=\"screen-reader-text\">Back</span>\n\t\t\t\t\t\t</button>\n\t\t\t\t\t\t<h3>\n\t\t\t\t\t\t\t<span class=\"customize-action\">Customizing &#9656; Fixture Panel</span>\n\t\t\t\t\t\t\tSection Fixture\t\t\t\t\t\t</h3>\n\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t</li>\n\t\t\t</ul>\n\t\t</li>";
         sectionData = {
                 content: sectionContent,
-                active: true
+                active: true,
+                type: 'default'
         };
 
         mockSection = new wp.customize.Section( sectionId, { params: sectionData } );
@@ -277 +339 @@
                 content: panelContent,
                 title: panelTitle,
                 description: panelDescription,
-                active: true // @todo This should default to true
+                active: true, // @todo This should default to true
+                type: 'default'
         };
 
         mockPanel = new wp.customize.Panel( panelId, { params: panelData } );