WordPress.org

Make WordPress Core


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.

File:
1 edited

Legend:

Unmodified
Added
Removed
  • 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: ▸ is the unicode right-pointing triangle, and %s is the section title in the Customizer */
     233            $array['customizeAction'] = sprintf( __( 'Customizing ▸ %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>
Note: See TracChangeset for help on using the changeset viewer.