WordPress.org

Make WordPress Core


Ignore:
Timestamp:
10/29/2014 10:50:21 PM (5 years ago)
Author:
ocean90
Message:

Improve/introduce Customizer JavaScript models for Controls, Sections, and Panels.

  • Introduce models for panels and sections.
  • Introduce API to expand and focus a control, section or panel.
  • Allow deep-linking to panels, sections, and controls inside of the Customizer.
  • Clean up accordion.js, removing all Customizer-specific logic.
  • Add initial unit tests for wp.customize.Class in customize-base.js.

https://make.wordpress.org/core/2014/10/27/toward-a-complete-javascript-api-for-the-customizer/ provides an overview of how to use the JavaScript API.

props westonruter, celloexpressions, ryankienstra.
see #28032, #28579, #28580, #28650, #28709, #29758.
fixes #29529.

File:
1 edited

Legend:

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

    r30055 r30102  
    5454wp_enqueue_style( 'customize-controls' );
    5555
    56 wp_enqueue_script( 'accordion' );
    57 
    5856/**
    5957 * Enqueue Customizer control scripts.
     
    131129
    132130        <div id="widgets-right"><!-- For Widget Customizer, many widgets try to look for instances under div#widgets-right, so we have to add that ID to a container div in the Customizer for compat -->
    133         <div class="wp-full-overlay-sidebar-content accordion-container" tabindex="-1">
     131        <div class="wp-full-overlay-sidebar-content" tabindex="-1">
    134132            <div id="customize-info" class="accordion-section <?php if ( $cannot_expand ) echo ' cannot-expand'; ?>">
    135133                <div class="accordion-section-title" aria-label="<?php esc_attr_e( 'Customizer Options' ); ?>" tabindex="0">
     
    161159            </div>
    162160
    163             <div id="customize-theme-controls"><ul>
    164                 <?php
    165                 foreach ( $wp_customize->containers() as $container ) {
    166                     $container->maybe_render();
    167                 }
    168                 ?>
    169             </ul></div>
     161            <div id="customize-theme-controls">
     162                <ul><?php // Panels and sections are managed here via JavaScript ?></ul>
     163            </div>
    170164        </div>
    171165        </div>
     
    253247        'settings' => array(),
    254248        'controls' => array(),
     249        'panels'   => array(),
     250        'sections' => array(),
    255251        'nonce'    => array(
    256252            'save'    => wp_create_nonce( 'save-customize_' . $wp_customize->get_stylesheet() ),
    257253            'preview' => wp_create_nonce( 'preview-customize_' . $wp_customize->get_stylesheet() )
    258254        ),
     255        'autofocus' => array(),
    259256    );
    260257
     
    267264    }
    268265
    269     // Prepare Customize Control objects to pass to Javascript.
     266    // Prepare Customize Control objects to pass to JavaScript.
    270267    foreach ( $wp_customize->controls() as $id => $control ) {
    271         $control->to_json();
    272         $settings['controls'][ $id ] = $control->json;
     268        $settings['controls'][ $id ] = $control->json();
     269    }
     270
     271    // Prepare Customize Section objects to pass to JavaScript.
     272    foreach ( $wp_customize->sections() as $id => $section ) {
     273        $settings['sections'][ $id ] = $section->json();
     274    }
     275
     276    // Prepare Customize Panel objects to pass to JavaScript.
     277    foreach ( $wp_customize->panels() as $id => $panel ) {
     278        $settings['panels'][ $id ] = $panel->json();
     279        foreach ( $panel->sections as $section_id => $section ) {
     280            $settings['sections'][ $section_id ] = $section->json();
     281        }
     282    }
     283
     284    // Pass to frontend the Customizer construct being deeplinked
     285    if ( isset( $_GET['autofocus'] ) && is_array( $_GET['autofocus'] ) ) {
     286        $autofocus = wp_unslash( $_GET['autofocus'] );
     287        foreach ( $autofocus as $type => $id ) {
     288            if ( isset( $settings[ $type . 's' ][ $id ] ) ) {
     289                $settings['autofocus'][ $type ] = $id;
     290            }
     291        }
    273292    }
    274293
Note: See TracChangeset for help on using the changeset viewer.