Make WordPress Core


Ignore:
Timestamp:
10/29/2014 10:50:21 PM (9 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-includes/class-wp-customize-section.php

    r29508 r30102  
    9393
    9494    /**
     95     * @since 4.1.0
     96     * @access public
     97     * @var string
     98     */
     99    public $type;
     100
     101    /**
     102     * Callback.
     103     *
     104     * @since 4.1.0
     105     * @access public
     106     *
     107     * @see WP_Customize_Section::active()
     108     *
     109     * @var callable Callback is called with one argument, the instance of
     110     *               WP_Customize_Section, and returns bool to indicate whether
     111     *               the section is active (such as it relates to the URL
     112     *               currently being previewed).
     113     */
     114    public $active_callback = '';
     115
     116    /**
    95117     * Constructor.
    96118     *
     
    106128        $keys = array_keys( get_object_vars( $this ) );
    107129        foreach ( $keys as $key ) {
    108             if ( isset( $args[ $key ] ) )
     130            if ( isset( $args[ $key ] ) ) {
    109131                $this->$key = $args[ $key ];
     132            }
    110133        }
    111134
    112135        $this->manager = $manager;
    113136        $this->id = $id;
     137        if ( empty( $this->active_callback ) ) {
     138            $this->active_callback = array( $this, 'active_callback' );
     139        }
    114140
    115141        $this->controls = array(); // Users cannot customize the $controls array.
    116142
    117143        return $this;
     144    }
     145
     146    /**
     147     * Check whether section is active to current Customizer preview.
     148     *
     149     * @since 4.1.0
     150     * @access public
     151     *
     152     * @return bool Whether the section is active to the current preview.
     153     */
     154    public final function active() {
     155        $section = $this;
     156        $active = call_user_func( $this->active_callback, $this );
     157
     158        /**
     159         * Filter response of WP_Customize_Section::active().
     160         *
     161         * @since 4.1.0
     162         *
     163         * @param bool                 $active  Whether the Customizer section is active.
     164         * @param WP_Customize_Section $section WP_Customize_Section instance.
     165         */
     166        $active = apply_filters( 'customize_section_active', $active, $section );
     167
     168        return $active;
     169    }
     170
     171    /**
     172     * Default callback used when invoking WP_Customize_Section::active().
     173     *
     174     * Subclasses can override this with their specific logic, or they may
     175     * provide an 'active_callback' argument to the constructor.
     176     *
     177     * @since 4.1.0
     178     * @access public
     179     *
     180     * @return bool Always true.
     181     */
     182    public function active_callback() {
     183        return true;
     184    }
     185
     186    /**
     187     * Gather the parameters passed to client JavaScript via JSON.
     188     *
     189     * @since 4.1.0
     190     *
     191     * @return array The array to be exported to the client as JSON
     192     */
     193    public function json() {
     194        $array = wp_array_slice_assoc( (array) $this, array( 'title', 'description', 'priority', 'panel', 'type' ) );
     195        $array['content'] = $this->get_content();
     196        $array['active'] = $this->active();
     197        return $array;
    118198    }
    119199
     
    127207     */
    128208    public final function check_capabilities() {
    129         if ( $this->capability && ! call_user_func_array( 'current_user_can', (array) $this->capability ) )
     209        if ( $this->capability && ! call_user_func_array( 'current_user_can', (array) $this->capability ) ) {
    130210            return false;
    131 
    132         if ( $this->theme_supports && ! call_user_func_array( 'current_theme_supports', (array) $this->theme_supports ) )
     211        }
     212
     213        if ( $this->theme_supports && ! call_user_func_array( 'current_theme_supports', (array) $this->theme_supports ) ) {
    133214            return false;
     215        }
    134216
    135217        return true;
     
    137219
    138220    /**
     221     * Get the section's content template for insertion into the Customizer pane.
     222     *
     223     * @since 4.1.0
     224     *
     225     * @return string
     226     */
     227    public final function get_content() {
     228        ob_start();
     229        $this->maybe_render();
     230        $template = trim( ob_get_contents() );
     231        ob_end_clean();
     232        return $template;
     233    }
     234
     235    /**
    139236     * Check capabilities and render the section.
    140237     *
     
    142239     */
    143240    public final function maybe_render() {
    144         if ( ! $this->check_capabilities() )
     241        if ( ! $this->check_capabilities() ) {
    145242            return;
     243        }
    146244
    147245        /**
     
    173271    protected function render() {
    174272        $classes = 'control-section accordion-section';
    175         if ( $this->panel ) {
    176             $classes .= ' control-subsection';
    177         }
    178273        ?>
    179274        <li id="accordion-section-<?php echo esc_attr( $this->id ); ?>" class="<?php echo esc_attr( $classes ); ?>">
     
    184279            <ul class="accordion-section-content">
    185280                <?php if ( ! empty( $this->description ) ) : ?>
    186                 <li><p class="description customize-section-description"><?php echo $this->description; ?></p></li>
     281                    <li class="customize-section-description-container">
     282                        <p class="description customize-section-description"><?php echo $this->description; ?></p>
     283                    </li>
    187284                <?php endif; ?>
    188                 <?php
    189                 foreach ( $this->controls as $control )
    190                     $control->maybe_render();
    191                 ?>
    192285            </ul>
    193286        </li>
Note: See TracChangeset for help on using the changeset viewer.