WordPress.org

Make WordPress Core

Changeset 32658


Ignore:
Timestamp:
05/30/2015 12:02:13 AM (6 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.

Location:
trunk
Files:
2 added
8 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-admin/customize.php

    r32649 r32658  
    176176    <?php
    177177
    178     // Render control templates.
     178    // Render Panel, Section, and Control templates.
     179    $wp_customize->render_panel_templates();
     180    $wp_customize->render_section_templates();
    179181    $wp_customize->render_control_templates();
    180182
     
    260262    // Prepare Customize Setting objects to pass to JavaScript.
    261263    foreach ( $wp_customize->settings() as $id => $setting ) {
    262         $settings['settings'][ $id ] = array(
    263             'value'     => $setting->js_value(),
    264             'transport' => $setting->transport,
    265             'dirty'     => $setting->dirty,
    266         );
     264        if ( $setting->check_capabilities() ) {
     265            $settings['settings'][ $id ] = array(
     266                'value'     => $setting->js_value(),
     267                'transport' => $setting->transport,
     268                'dirty'     => $setting->dirty,
     269            );
     270        }
    267271    }
    268272
    269273    // Prepare Customize Control objects to pass to JavaScript.
    270274    foreach ( $wp_customize->controls() as $id => $control ) {
    271         $settings['controls'][ $id ] = $control->json();
     275        if ( $control->check_capabilities() ) {
     276            $settings['controls'][ $id ] = $control->json();
     277        }
    272278    }
    273279
    274280    // Prepare Customize Section objects to pass to JavaScript.
    275281    foreach ( $wp_customize->sections() as $id => $section ) {
    276         $settings['sections'][ $id ] = $section->json();
     282        if ( $section->check_capabilities() ) {
     283            $settings['sections'][ $id ] = $section->json();
     284        }
    277285    }
    278286
    279287    // Prepare Customize Panel objects to pass to JavaScript.
    280     foreach ( $wp_customize->panels() as $id => $panel ) {
    281         $settings['panels'][ $id ] = $panel->json();
    282         foreach ( $panel->sections as $section_id => $section ) {
    283             $settings['sections'][ $section_id ] = $section->json();
     288    foreach ( $wp_customize->panels() as $panel_id => $panel ) {
     289        if ( $panel->check_capabilities() ) {
     290            $settings['panels'][ $panel_id ] = $panel->json();
     291            foreach ( $panel->sections as $section_id => $section ) {
     292                if ( $section->check_capabilities() ) {
     293                    $settings['sections'][ $section_id ] = $section->json();
     294                }
     295            }
    284296        }
    285297    }
  • trunk/src/wp-admin/js/customize-controls.js

    r32649 r32658  
    157157        defaultActiveArguments: { duration: 'fast', completeCallback: $.noop },
    158158        defaultExpandedArguments: { duration: 'fast', completeCallback: $.noop },
     159        containerType: 'container',
    159160
    160161        /**
     
    169170            container.params = {};
    170171            $.extend( container, options || {} );
     172            container.templateSelector = 'customize-' + container.containerType + '-' + container.params.type;
    171173            container.container = $( container.params.content );
     174            if ( 0 === container.container.length ) {
     175                container.container = $( container.getContainer() );
     176            }
    172177
    173178            container.deferred = {
     
    192197            });
    193198
    194             container.attachEvents();
     199            container.deferred.embedded.done( function () {
     200                container.attachEvents();
     201            });
    195202
    196203            api.utils.bubbleChildValueChanges( container, [ 'priority', 'active' ] );
     
    367374         * @param {Object} [params]
    368375         */
    369         focus: focus
     376        focus: focus,
     377
     378        /**
     379         * Return the container html, generated from its JS template, if it exists.
     380         *
     381         * @since 4.3.0
     382         */
     383        getContainer: function () {
     384            var template,
     385                container = this;
     386
     387            if ( 0 !== $( '#tmpl-' + container.templateSelector ).length ) {
     388                template = wp.template( container.templateSelector );
     389                if ( template && container.container ) {
     390                    return $.trim( template( container.params ) );
     391                }
     392            }
     393
     394            return '<li></li>';
     395        }
    370396    });
    371397
     
    377403     */
    378404    api.Section = Container.extend({
     405        containerType: 'section',
    379406
    380407        /**
     
    9781005     */
    9791006    api.Panel = Container.extend({
     1007        containerType: 'panel',
     1008
    9801009        /**
    9811010         * @since 4.1.0
     
    10041033            if ( ! panel.container.parent().is( parentContainer ) ) {
    10051034                parentContainer.append( panel.container );
     1035                panel.renderContent();
    10061036            }
    10071037            panel.deferred.embedded.resolve();
     
    10461076                event.preventDefault(); // Keep this AFTER the key filter above
    10471077
     1078                meta = panel.container.find( '.panel-meta' );
    10481079                if ( meta.hasClass( 'cannot-expand' ) ) {
    10491080                    return;
     
    11701201                container.scrollTop( 0 );
    11711202            }
     1203        },
     1204
     1205        /**
     1206         * Render the panel from its JS template, if it exists.
     1207         *
     1208         * The panel's container must already exist in the DOM.
     1209         *
     1210         * @since 4.3.0
     1211         */
     1212        renderContent: function () {
     1213            var template,
     1214                panel = this;
     1215
     1216            // Add the content to the container.
     1217            if ( 0 !== $( '#tmpl-' + panel.templateSelector + '-content' ).length ) {
     1218                template = wp.template( panel.templateSelector + '-content' );
     1219                if ( template && panel.container ) {
     1220                    panel.container.find( '.accordion-sub-container' ).html( template( panel.params ) );
     1221                }
     1222            }
    11721223        }
    11731224    });
  • trunk/src/wp-includes/class-wp-customize-manager.php

    r32568 r32658  
    6161
    6262    /**
    63      * Controls that may be rendered from JS templates.
     63     * Panel types that may be rendered from JS templates.
     64     *
     65     * @since 4.3.0
     66     * @access protected
     67     * @var array
     68     */
     69    protected $registered_panel_types = array();
     70
     71    /**
     72     * Section types that may be rendered from JS templates.
     73     *
     74     * @since 4.3.0
     75     * @access protected
     76     * @var array
     77     */
     78    protected $registered_section_types = array();
     79
     80    /**
     81     * Control types that may be rendered from JS templates.
    6482     *
    6583     * @since 4.1.0
     
    613631
    614632        foreach ( $this->settings as $id => $setting ) {
    615             $settings['values'][ $id ] = $setting->js_value();
    616         }
    617         foreach ( $this->panels as $id => $panel ) {
    618             $settings['activePanels'][ $id ] = $panel->active();
    619             foreach ( $panel->sections as $id => $section ) {
     633            if ( $setting->check_capabilities() ) {
     634                $settings['values'][ $id ] = $setting->js_value();
     635            }
     636        }
     637        foreach ( $this->panels as $panel_id => $panel ) {
     638            if ( $panel->check_capabilities() ) {
     639                $settings['activePanels'][ $panel_id ] = $panel->active();
     640                foreach ( $panel->sections as $section_id => $section ) {
     641                    if ( $section->check_capabilities() ) {
     642                        $settings['activeSections'][ $section_id ] = $section->active();
     643                    }
     644                }
     645            }
     646        }
     647        foreach ( $this->sections as $id => $section ) {
     648            if ( $section->check_capabilities() ) {
    620649                $settings['activeSections'][ $id ] = $section->active();
    621650            }
    622651        }
    623         foreach ( $this->sections as $id => $section ) {
    624             $settings['activeSections'][ $id ] = $section->active();
    625         }
    626652        foreach ( $this->controls as $id => $control ) {
    627             $settings['activeControls'][ $id ] = $control->active();
     653            if ( $control->check_capabilities() ) {
     654                $settings['activeControls'][ $id ] = $control->active();
     655            }
    628656        }
    629657
     
    966994
    967995    /**
     996     * Register a customize panel type.
     997     *
     998     * Registered types are eligible to be rendered via JS and created dynamically.
     999     *
     1000     * @since 4.3.0
     1001     * @access public
     1002     *
     1003     * @param string $panel Name of a custom panel which is a subclass of
     1004     *                        {@see WP_Customize_Panel}.
     1005     */
     1006    public function register_panel_type( $panel ) {
     1007        $this->registered_panel_types[] = $panel;
     1008    }
     1009
     1010    /**
     1011     * Render JS templates for all registered panel types.
     1012     *
     1013     * @since 4.3.0
     1014     * @access public
     1015     */
     1016    public function render_panel_templates() {
     1017        foreach ( $this->registered_panel_types as $panel_type ) {
     1018            $panel = new $panel_type( $this, 'temp', array() );
     1019            $panel->print_template();
     1020        }
     1021    }
     1022
     1023    /**
    9681024     * Add a customize section.
    9691025     *
     
    10041060    public function remove_section( $id ) {
    10051061        unset( $this->sections[ $id ] );
     1062    }
     1063
     1064    /**
     1065     * Register a customize section type.
     1066     *
     1067     * Registered types are eligible to be rendered via JS and created dynamically.
     1068     *
     1069     * @since 4.3.0
     1070     * @access public
     1071     *
     1072     * @param string $section Name of a custom section which is a subclass of
     1073     *                        {@see WP_Customize_Section}.
     1074     */
     1075    public function register_section_type( $section ) {
     1076        $this->registered_section_types[] = $section;
     1077    }
     1078
     1079    /**
     1080     * Render JS templates for all registered section types.
     1081     *
     1082     * @since 4.3.0
     1083     * @access public
     1084     */
     1085    public function render_section_templates() {
     1086        foreach ( $this->registered_section_types as $section_type ) {
     1087            $section = new $section_type( $this, 'temp', array() );
     1088            $section->print_template();
     1089        }
    10061090    }
    10071091
     
    11771261    public function register_controls() {
    11781262
    1179         /* Control Types (custom control classes) */
     1263        /* Panel, Section, and Control Types */
     1264        $this->register_panel_type( 'WP_Customize_Panel' );
     1265        $this->register_section_type( 'WP_Customize_Section' );
     1266        $this->register_section_type( 'WP_Customize_Sidebar_Section' );
    11801267        $this->register_control_type( 'WP_Customize_Color_Control' );
    11811268        $this->register_control_type( 'WP_Customize_Media_Control' );
  • trunk/src/wp-includes/class-wp-customize-panel.php

    r32650 r32658  
    215215     */
    216216    public function json() {
    217         $array = wp_array_slice_assoc( (array) $this, array( 'title', 'description', 'priority', 'type' ) );
     217        $array = wp_array_slice_assoc( (array) $this, array( 'id', 'title', 'description', 'priority', 'type' ) );
    218218        $array['content'] = $this->get_content();
    219219        $array['active'] = $this->active();
     
    290290
    291291    /**
    292      * Render the panel container, and then its contents.
     292     * Render the panel container, and then its contents (via `this->render_content()`) in a subclass.
     293     *
     294     * Panel containers are now rendered in JS by default, see {@see WP_Customize_Panel::print_template()}.
    293295     *
    294296     * @since 4.0.0
    295297     * @access protected
    296298     */
    297     protected function render() {
    298         $classes = 'accordion-section control-section control-panel control-panel-' . $this->type;
     299    protected function render() {}
     300
     301    /**
     302     * Render the panel UI in a subclass.
     303     *
     304     * Panel contents are now rendered in JS by default, see {@see WP_Customize_Panel::print_template()}.
     305     *
     306     * @since 4.1.0
     307     * @access protected
     308     */
     309    protected function render_content() {}
     310
     311    /**
     312     * Render the panel's JS templates.
     313     *
     314     * This function is only run for panel types that have been registered with
     315     * {@see WP_Customize_Manager::register_panel_type()}.
     316     *
     317     * @since 4.3.0
     318     */
     319    public function print_template() {
    299320        ?>
    300         <li id="accordion-panel-<?php echo esc_attr( $this->id ); ?>" class="<?php echo esc_attr( $classes ); ?>">
     321        <script type="text/html" id="tmpl-customize-panel-<?php echo esc_attr( $this->type ); ?>-content">
     322            <?php $this->content_template(); ?>
     323        </script>
     324        <script type="text/html" id="tmpl-customize-panel-<?php echo esc_attr( $this->type ); ?>">
     325            <?php $this->render_template(); ?>
     326        </script>
     327        <?php
     328    }
     329
     330    /**
     331     * An Underscore (JS) template for rendering this panel's container.
     332     *
     333     * Class variables for this panel class are available in the `data` JS object;
     334     * export custom variables by overriding {@see WP_Customize_Panel::json()}.
     335     *
     336     * @see WP_Customize_Panel::print_template()
     337     *
     338     * @since 4.3.0
     339     */
     340    protected function render_template() {
     341        ?>
     342        <li id="accordion-panel-{{ data.id }}" class="accordion-section control-section control-panel control-panel-{{ data.type }}">
    301343            <h3 class="accordion-section-title" tabindex="0">
    302                 <?php echo esc_html( $this->title ); ?>
     344                {{ data.title }}
    303345                <span class="screen-reader-text"><?php _e( 'Press return or enter to open this panel' ); ?></span>
    304346            </h3>
    305             <ul class="accordion-sub-container control-panel-content">
    306                 <?php $this->render_content(); ?>
    307             </ul>
     347            <ul class="accordion-sub-container control-panel-content"></ul>
    308348        </li>
    309349        <?php
     
    311351
    312352    /**
    313      * Render the sections that have been added to the panel.
    314      *
    315      * @since 4.1.0
    316      * @access protected
    317      */
    318     protected function render_content() {
     353     * An Underscore (JS) template for this panel's content (but not its container).
     354     *
     355     * Class variables for this panel class are available in the `data` JS object;
     356     * export custom variables by overriding {@see WP_Customize_Panel::json()}.
     357     *
     358     * @see WP_Customize_Panel::print_template()
     359     *
     360     * @since 4.3.0
     361     */
     362    protected function content_template() {
    319363        ?>
    320         <li class="panel-meta customize-info accordion-section<?php if ( empty( $this->description ) ) { echo ' cannot-expand'; } ?>">
     364        <li class="panel-meta customize-info accordion-section <# if ( ! data.description ) { #> cannot-expand<# } #>">
    321365            <button class="customize-panel-back" tabindex="-1"><span class="screen-reader-text"><?php _e( 'Back' ); ?></span></button>
    322366            <div class="accordion-section-title">
    323367                <span class="preview-notice"><?php
    324368                    /* translators: %s is the site/panel title in the Customizer */
    325                     echo sprintf( __( 'You are customizing %s' ), '<strong class="panel-title">' . esc_html( $this->title ) . '</strong>' );
     369                    echo sprintf( __( 'You are customizing %s' ), '<strong class="panel-title">{{ data.title }}</strong>' );
    326370                ?></span>
    327371                <button class="customize-help-toggle dashicons dashicons-editor-help" tabindex="0" aria-expanded="false"><span class="screen-reader-text"><?php _e( 'Help' ); ?></span></button>
    328372            </div>
    329             <?php if ( ! empty( $this->description ) ) : ?>
     373            <# if ( data.description ) { #>
    330374                <div class="description customize-panel-description">
    331                     <?php echo $this->description; ?>
     375                    {{{ data.description }}}
    332376                </div>
    333             <?php endif; ?>
     377            <# } #>
    334378        </li>
    335379        <?php
  • trunk/src/wp-includes/class-wp-customize-section.php

    r32650 r32658  
    224224     */
    225225    public function json() {
    226         $array = wp_array_slice_assoc( (array) $this, array( 'title', 'description', 'priority', 'panel', 'type' ) );
     226        $array = wp_array_slice_assoc( (array) $this, array( 'id', 'title', 'description', 'priority', 'panel', 'type' ) );
    227227        $array['content'] = $this->get_content();
    228228        $array['active'] = $this->active();
    229229        $array['instanceNumber'] = $this->instance_number;
     230
     231        if ( $this->panel ) {
     232            /* translators: &#9656; is the unicode right-pointing triangle, and %s is the section title in the Customizer */
     233            $array['customizeAction'] = sprintf( __( 'Customizing &#9656; %s' ), esc_html( $this->manager->get_panel( $this->panel )->title ) );
     234        } else {
     235            $array['customizeAction'] = __( 'Customizing' );
     236        }
     237
    230238        return $array;
    231239    }
     
    252260
    253261    /**
    254      * Get the section's content template for insertion into the Customizer pane.
     262     * Get the section's content for insertion into the Customizer pane.
    255263     *
    256264     * @since 4.1.0
     
    298306
    299307    /**
    300      * Render the section, and the controls that have been added to it.
    301      *
    302      * @since 3.4.0
    303      */
    304     protected function render() {
    305         $classes = 'accordion-section control-section control-section-' . $this->type;
     308     * Render the section UI in a subclass.
     309     *
     310     * Sections are now rendered in JS by default, see {@see WP_Customize_Section::print_template()}.
     311     *
     312     * @since 3.4.0
     313     */
     314    protected function render() {}
     315
     316    /**
     317     * Render the section's JS template.
     318     *
     319     * This function is only run for section types that have been registered with
     320     * {@see WP_Customize_Manager::register_section_type()}.
     321     *
     322     * @since 4.3.0
     323     */
     324    public function print_template() {
     325        ?>
     326        <script type="text/html" id="tmpl-customize-section-<?php echo $this->type; ?>">
     327            <?php $this->render_template(); ?>
     328        </script>
     329        <?php
     330    }
     331
     332    /**
     333     * An Underscore (JS) template for rendering this section.
     334     *
     335     * Class variables for this section class are available in the `data` JS object;
     336     * export custom variables by overriding {@see WP_Customize_Section::json()}.
     337     *
     338     * @see WP_Customize_Section::print_template()
     339     *
     340     * @since 4.3.0
     341     */
     342    protected function render_template() {
    306343        ?>
    307         <li id="accordion-section-<?php echo esc_attr( $this->id ); ?>" class="<?php echo esc_attr( $classes ); ?>">
     344        <li id="accordion-section-{{ data.id }}" class="accordion-section control-section control-section-{{ data.type }}">
    308345            <h3 class="accordion-section-title" tabindex="0">
    309                 <?php echo esc_html( $this->title ); ?>
     346                {{ data.title }}
    310347                <span class="screen-reader-text"><?php _e( 'Press return or enter to open' ); ?></span>
    311348            </h3>
     
    317354                        </button>
    318355                        <h3>
    319                             <span class="customize-action"><?php
    320                                 if ( $this->panel ) {
    321                                     /* translators: &#9656; is the unicode right-pointing triangle, and %s is the section title in the Customizer */
    322                                     echo sprintf( __( 'Customizing &#9656; %s' ), esc_html( $this->manager->get_panel( $this->panel )->title ) );
    323                                 } else {
    324                                     _e( 'Customizing' );
    325                                 }
    326                             ?></span>
    327                             <?php echo esc_html( $this->title ); ?>
     356                            <span class="customize-action">
     357                                {{{ data.customizeAction }}}
     358                            </span>
     359                            {{ data.title }}
    328360                        </h3>
    329361                    </div>
    330                     <?php if ( ! empty( $this->description ) ) : ?>
    331                         <p class="description customize-section-description"><?php echo $this->description; ?></p>
    332                     <?php endif; ?>
     362                    <# if ( data.description ) { #>
     363                        <p class="description customize-section-description">{{{ data.description }}}</p>
     364                    <# } #>
    333365                </li>
    334366            </ul>
  • trunk/tests/qunit/fixtures/customize-settings.js

    r30919 r32658  
    1616        'fixture-control': {
    1717            'active': true,
    18             '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>',
     18            'content': '<li id="accordion-section-fixture-section" class="accordion-section control-section control-section-default"> <h3 class="accordion-section-title" tabindex="0"> Section Fixture <span class="screen-reader-text">Press return or enter to open</span> </h3> <ul class="accordion-section-content"> <li class="customize-section-description-container"> <div class="customize-section-title"> <button class="customize-section-back" tabindex="-1"> <span class="screen-reader-text">Back</span> </button> <h3> <span class="customize-action">Customizing &#9656; Fixture Panel</span> Section Fixture </h3> </div> </li> </ul> </li>',
    1919            'description': '',
    2020            'instanceNumber': 8,
     
    3636        'fixture-panel': {
    3737            'active': true,
    38             '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>',
     38            'content': '<li id="accordion-panel-fixture-panel" class="accordion-section control-section control-panel control-panel-default"> <h3 class="accordion-section-title" tabindex="0"> Fixture Panel <span class="screen-reader-text">Press return or enter to open this panel</span> </h3> <ul class="accordion-sub-container control-panel-content"> <li class="panel-meta customize-info accordion-section cannot-expand"> <button class="customize-panel-back" tabindex="-1"><span class="screen-reader-text">Back</span></button> <div class="accordion-section-title"> <span class="preview-notice">You are customizing <strong class="panel-title">Fixture Panel</strong></span> <button class="customize-help-toggle dashicons dashicons-editor-help" tabindex="0" aria-expanded="false"><span class="screen-reader-text">Help</span></button> </div> </li> </ul> </li>',
    3939            'description': 'Lorem ipsum',
    4040            'instanceNumber': 1,
    4141            'priority': 110,
    42             'title': 'Lorem Ipsum',
     42            'title': 'Fixture panel with content',
    4343            'type': 'default'
     44        },
     45        'fixture-panel-default-templated': {
     46            'active': true,
     47            'description': 'Lorem ipsum',
     48            'instanceNumber': 2,
     49            'priority': 110,
     50            'title': 'Fixture default panel using template',
     51            'type': 'default'
     52        },
     53        'fixture-panel-titleless-templated': {
     54            'active': true,
     55            'description': 'Lorem ipsum',
     56            'instanceNumber': 3,
     57            'priority': 110,
     58            'title': 'Fixture titleless panel using template',
     59            'type': 'titleless'
    4460        }
    4561    },
     
    4763        'fixture-section': {
    4864            'active': true,
    49             '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>',
     65            'content': '<li id="accordion-section-fixture-section" class="accordion-section control-section control-section-default"> <h3 class="accordion-section-title" tabindex="0"> Section Fixture <span class="screen-reader-text">Press return or enter to open</span> </h3> <ul class="accordion-section-content"> <li class="customize-section-description-container"> <div class="customize-section-title"> <button class="customize-section-back" tabindex="-1"> <span class="screen-reader-text">Back</span> </button> <h3> <span class="customize-action">Customizing &#9656; Fixture Panel</span> Section Fixture </h3> </div> </li> </ul> </li>',
    5066            'description': '',
    5167            'instanceNumber': 2,
     
    5470            'title': 'Fixture Section',
    5571            'type': 'default'
     72        },
     73        'fixture-section-default-templated': {
     74            'active': true,
     75            'description': '',
     76            'instanceNumber': 3,
     77            'panel': 'fixture-panel',
     78            'priority': 20,
     79            'title': 'Fixture default section using template',
     80            'type': 'default'
     81        },
     82        'fixture-section-titleless-templated': {
     83            'active': true,
     84            'description': '',
     85            'instanceNumber': 4,
     86            'panel': 'fixture-panel',
     87            'priority': 20,
     88            'title': 'Fixture titleless section using template',
     89            'type': 'titleless'
    5690        }
    5791    },
  • trunk/tests/qunit/index.html

    r31502 r32658  
    1010        <script src="../../src/wp-includes/js/backbone.min.js"></script>
    1111        <script src="../../src/wp-includes/js/zxcvbn.min.js"></script>
     12        <script src="../../src/wp-includes/js/wp-util.js"></script>
    1213
    1314        <!-- QUnit -->
     
    4041        <script src="wp-admin/js/customize-controls.js"></script>
    4142        <script src="wp-admin/js/customize-controls-utils.js"></script>
     43
     44        <!-- Customizer templates for sections -->
     45        <script type="text/html" id="tmpl-customize-section-default">
     46            <li id="accordion-section-{{ data.id }}" class="accordion-section control-section control-section-{{ data.type }}">
     47                <h3 class="accordion-section-title" tabindex="0">
     48                    {{ data.title }}
     49                    <span class="screen-reader-text">Press return or enter to expand</span>
     50                </h3>
     51                <ul class="accordion-section-content">
     52                    <# if ( data.description ) { #>
     53                        <li class="customize-section-description-container">
     54                            <p class="description customize-section-description">{{{ data.description }}}</p>
     55                        </li>
     56                    <# } #>
     57                </ul>
     58            </li>
     59        </script>
     60        <script type="text/html" id="tmpl-customize-section-titleless">
     61            <li id="accordion-section-{{ data.id }}" class="accordion-section control-section control-section-{{ data.type }}">
     62                <!-- Notice the lack of an h3 with title displayed inside. -->
     63                <ul class="accordion-section-content">
     64                    <# if ( data.description ) { #>
     65                        <li class="customize-section-description-container">
     66                            <p class="description customize-section-description">{{{ data.description }}}</p>
     67                        </li>
     68                    <# } #>
     69                </ul>
     70            </li>
     71        </script>
     72
     73        <!-- Customizer templates for panels -->
     74        <script type="text/html" id="tmpl-customize-panel-default">
     75            <li id="accordion-panel-{{ data.id }}" class="accordion-section control-section control-panel control-panel-{{ data.type }}">
     76                <h3 class="accordion-section-title" tabindex="0">
     77                    {{ data.title }}
     78                    <span class="screen-reader-text">Press return or enter to open this panel</span>
     79                </h3>
     80                <ul class="accordion-sub-container control-panel-content"></ul>
     81            </li>
     82        </script>
     83        <script type="text/html" id="tmpl-customize-panel-default-content">
     84            <li class="panel-meta accordion-section control-section<# if ( ! data.description ) { #> cannot-expand<# } #>">
     85                <div class="accordion-section-title" tabindex="0">
     86                    <span class="preview-notice">You are customizing <strong class="panel-title">{{ data.title }}</strong></span>
     87                </div>
     88                <# if ( data.description ) { #>
     89                    <div class="accordion-section-content description">
     90                        {{{ data.description }}}
     91                    </div>
     92                <# } #>
     93            </li>
     94        </script>
     95        <script type="text/html" id="tmpl-customize-panel-titleless">
     96            <li id="accordion-panel-{{ data.id }}" class="accordion-section control-section control-panel control-panel-{{ data.type }}">
     97                <!-- Notice the lack of an h3 with title displayed inside. -->
     98                <ul class="accordion-sub-container control-panel-content"></ul>
     99            </li>
     100        </script>
     101        <script type="text/html" id="tmpl-customize-panel-titleless-content">
     102            <li class="panel-meta accordion-section control-section<# if ( ! data.description ) { #> cannot-expand<# } #>">
     103                <!-- Notice lack of title containing preview notice -->
     104                <# if ( data.description ) { #>
     105                    <div class="accordion-section-content description">
     106                        {{{ data.description }}}
     107                    </div>
     108                <# } #>
     109            </li>
     110        </script>
    42111    </body>
    43112</html>
  • trunk/tests/qunit/wp-admin/js/customize-controls.js

    r30919 r32658  
    9696    } );
    9797
     98    // Begin sections.
    9899    module( 'Customizer Section in Fixture' );
    99100    test( 'Fixture section exists', function () {
     
    102103    test( 'Fixture section has control among controls()', function () {
    103104        var section = wp.customize.section( 'fixture-section' );
    104         equal( section.controls().length, 1 );
    105         equal( section.controls()[0].id, 'fixture-control' );
    106     } );
    107     test( 'Fixture section has control among controls()', function () {
     105        ok( -1 !== _.pluck( section.controls(), 'id' ).indexOf( 'fixture-control' ) );
     106    } );
     107    test( 'Fixture section has has expected panel', function () {
    108108        var section = wp.customize.section( 'fixture-section' );
    109109        equal( section.panel(), 'fixture-panel' );
    110110    } );
    111111
     112    module( 'Customizer Default Section with Template in Fixture' );
     113    test( 'Fixture section exists', function () {
     114        ok( wp.customize.section.has( 'fixture-section-default-templated' ) );
     115    } );
     116    test( 'Fixture section has expected content', function () {
     117        var id = 'fixture-section-default-templated', section;
     118        section = wp.customize.section( id );
     119        ok( ! section.params.content );
     120        ok( !! section.container );
     121        ok( section.container.is( '.control-section.control-section-default' ) );
     122        ok( 1 === section.container.find( '> .accordion-section-title' ).length );
     123        ok( 1 === section.container.find( '> .accordion-section-content' ).length );
     124    } );
     125
     126    module( 'Customizer Custom Type (titleless) Section with Template in Fixture' );
     127    test( 'Fixture section exists', function () {
     128        ok( wp.customize.section.has( 'fixture-section-titleless-templated' ) );
     129    } );
     130    test( 'Fixture section has expected content', function () {
     131        var id = 'fixture-section-titleless-templated', section;
     132        section = wp.customize.section( id );
     133        ok( ! section.params.content );
     134        ok( !! section.container );
     135        ok( section.container.is( '.control-section.control-section-titleless' ) );
     136        ok( 0 === section.container.find( '> .accordion-section-title' ).length );
     137        ok( 1 === section.container.find( '> .accordion-section-content' ).length );
     138    } );
     139
     140    // Begin panels.
    112141    module( 'Customizer Panel in Fixture' );
    113142    test( 'Fixture panel exists', function () {
    114143        ok( wp.customize.panel.has( 'fixture-panel' ) );
    115144    } );
    116     test( 'Fixture section has control among controls()', function () {
     145    test( 'Fixture panel has content', function () {
    117146        var panel = wp.customize.panel( 'fixture-panel' );
    118         equal( panel.sections().length, 1 );
    119         equal( panel.sections()[0].id, 'fixture-section' );
     147        ok( !! panel.params.content );
     148        ok( !! panel.container );
     149    } );
     150    test( 'Fixture panel has section among its sections()', function () {
     151        var panel = wp.customize.panel( 'fixture-panel' );
     152        ok( -1 !== _.pluck( panel.sections(), 'id' ).indexOf( 'fixture-section' ) );
    120153    } );
    121154    test( 'Panel is not expanded by default', function () {
     
    137170        ok( section.expanded() );
    138171        ok( panel.expanded() );
     172    } );
     173
     174    module( 'Customizer Default Panel with Template in Fixture' );
     175    test( 'Fixture section exists', function () {
     176        ok( wp.customize.panel.has( 'fixture-panel-default-templated' ) );
     177    } );
     178    test( 'Fixture panel has expected content', function () {
     179        var id = 'fixture-panel-default-templated', panel;
     180        panel = wp.customize.panel( id );
     181        ok( ! panel.params.content );
     182        ok( !! panel.container );
     183        ok( panel.container.is( '.control-panel.control-panel-default' ) );
     184        ok( 1 === panel.container.find( '> .accordion-section-title' ).length );
     185        ok( 1 === panel.container.find( '> .control-panel-content' ).length );
     186    } );
     187
     188    module( 'Customizer Custom Type Panel (titleless) with Template in Fixture' );
     189    test( 'Fixture panel exists', function () {
     190        ok( wp.customize.panel.has( 'fixture-panel-titleless-templated' ) );
     191    } );
     192    test( 'Fixture panel has expected content', function () {
     193        var id = 'fixture-panel-titleless-templated', panel;
     194        panel = wp.customize.panel( id );
     195        ok( ! panel.params.content );
     196        ok( !! panel.container );
     197        ok( panel.container.is( '.control-panel.control-panel-titleless' ) );
     198        ok( 0 === panel.container.find( '> .accordion-section-title' ).length );
     199        ok( 1 === panel.container.find( '> .control-panel-content' ).length );
    139200    } );
    140201
     
    161222
    162223    sectionId = 'mock_title_tagline';
    163     sectionContent = '<li id="accordion-section-mock_title_tagline" class="control-section accordion-section"></li>';
     224    sectionContent = '<li id="accordion-section-mock_title_tagline" class="accordion-section control-section control-section-default"> <h3 class="accordion-section-title" tabindex="0"> Section Fixture <span class="screen-reader-text">Press return or enter to open</span> </h3> <ul class="accordion-section-content"> <li class="customize-section-description-container"> <div class="customize-section-title"> <button class="customize-section-back" tabindex="-1"> <span class="screen-reader-text">Back</span> </button> <h3> <span class="customize-action">Customizing &#9656; Fixture Panel</span> Section Fixture </h3> </div> </li> </ul> </li>';
    164225    sectionData = {
    165226        content: sectionContent,
    166         active: true
     227        active: true,
     228        type: 'default'
    167229    };
    168230
     
    278340        title: panelTitle,
    279341        description: panelDescription,
    280         active: true // @todo This should default to true
     342        active: true, // @todo This should default to true
     343        type: 'default'
    281344    };
    282345
Note: See TracChangeset for help on using the changeset viewer.