WordPress.org
Get WordPress

Make WordPress Core

Changeset 28861


Ignore:
Timestamp:
06/26/2014 08:16:21 PM (10 years ago)
Author:
ocean90
Message:

Customizer: Introduce a "panel" API to organize multiple sections into a one section.

Create a panel via $GLOBALS['wp_customize']->add_panel( $panel_id, $args ) and use $panel_id for the panel argument in $GLOBALS['wp_customize']->add_section( $section_id, $args ). That's it.
As an example all widget area sections are now summarized into one panel. Feedback appreciated.

props celloexpressions.
see #27406.

Location:
trunk/src
Files:
8 edited

Legend:

Unmodified
Added
Removed

  • trunk/src

    • Property svn:ignore

      •  

        old new  
        11.wp-tests-version
        22.htaccess
         3web-store-experiences

  • trunk/src/wp-admin/css/colors/_admin.scss

    r28127 r28861  
    473473}
    474474
     475.control-panel-back:focus,
     476.control-panel-back:hover {
     477    background-color: $menu-highlight-background;
     478    color: $menu-highlight-text;
     479}
    475480
    476481/* jQuery UI Slider */

  • trunk/src/wp-admin/css/customize-controls.css

    r28086 r28861  
    3131.saving #customize-header-actions .spinner {
    3232    display: block;
     33}
     34
     35#customize-controls .wp-full-overlay-sidebar-content {
     36    overflow-y: auto;
     37    overflow-x: hidden;
    3338}
    3439
    … …  
    8489}
    8590
    86 #customize-theme-controls {
    87     -webkit-box-shadow: 0 1px 1px -1px rgba(0, 0, 0, 0.1);
    88     box-shadow: 0 1px 1px -1px rgba(0, 0, 0, 0.1);
    89 }
    90 
    9191#customize-theme-controls .control-section {
    9292    border: none;
    … …  
    104104}
    105105
    106 #customize-theme-controls .control-section:hover .accordion-section-title,
     106#customize-theme-controls .control-section:hover > .accordion-section-title,
    107107#customize-theme-controls .control-section .accordion-section-title:hover,
    108108#customize-theme-controls .control-section.open .accordion-section-title,
    … …  
    119119}
    120120
    121 #customize-theme-controls .control-section:hover .accordion-section-title::after,
     121#customize-theme-controls .control-section:hover > .accordion-section-title::after,
    122122#customize-theme-controls .control-section .accordion-section-title:hover::after,
    123123#customize-theme-controls .control-section.open .accordion-section-title::after,
    … …  
    142142#customize-theme-controls .accordion-section-content {
    143143    margin: 0;
     144}
     145
     146.control-section.control-panel > .accordion-section-title:after {
     147    content: "\f139";
     148}
     149
     150.accordion-sub-container.control-panel-content {
     151    display: none;
     152    position: absolute;
     153    left: 300px;
     154    top: 0;
     155    width: 300px;
     156    border-top: 1px solid #ddd;
     157    -webkit-transition: left ease-in-out .18s;
     158    transition: left ease-in-out .18s;
     159}
     160
     161.accordion-sub-container.control-panel-content.animating {
     162    display: block;
     163}
     164
     165.current-panel .accordion-sub-container.control-panel-content {
     166    width: 100%;
     167}
     168
     169.control-panel-back {
     170    display: block;
     171    position: fixed;
     172    top: 0;
     173    z-index: 99;
     174    left: -48px;
     175    width: 45px;
     176    height: 45px;
     177    padding-right: 2px;
     178    background: #eee;
     179    border-right: 1px solid #ddd;
     180    cursor: pointer;
     181    -webkit-transition: left ease-in-out .18s, color ease-in .1s;
     182    transition: left ease-in-out .18s, color ease-in .1s;
     183}
     184
     185.collapsed .control-panel-back {
     186    display: none;
     187}
     188
     189.control-panel-back:focus,
     190.control-panel-back:hover {
     191    background-color: #0074a2;
     192    color: #fff;
     193    outline: none;
     194}
     195
     196.control-panel-back:before {
     197    font: normal 29px/1 dashicons;
     198    content: "\f340";
     199    position: relative;
     200    top: 9px;
     201    left: 9px;
     202}
     203
     204.current-panel .control-panel-back {
     205    left: 0;
     206}
     207
     208.current-panel > .accordion-section-title {
     209    height: 22px;
     210}
     211
     212#customize-header-actions a.back {
     213    position: relative;
     214    left: 0;
     215    -webkit-transition: left ease-in-out .18s;
     216    transition: left ease-in-out .18s;
     217}
     218
     219.in-sub-panel #customize-header-actions a.back {
     220    left: -120px;
     221}
     222
     223.wp-full-overlay-sidebar .wp-full-overlay-header {
     224    -webkit-transition: padding ease-in-out .18s;
     225    transition: padding ease-in-out .18s;
     226}
     227
     228.in-sub-panel .wp-full-overlay-sidebar .wp-full-overlay-header {
     229    padding-left: 62px;
     230}
     231
     232#customize-info,
     233#customize-theme-controls > ul > .accordion-section {
     234    position: relative;
     235    left: 0;
     236    -webkit-transition: left ease-in-out .18s;
     237    transition: left ease-in-out .18s;
     238}
     239
     240.in-sub-panel #customize-info,
     241.in-sub-panel #customize-theme-controls > ul > .accordion-section {
     242    left: -300px;
     243    width: 300px;
     244}
     245
     246.in-sub-panel #customize-theme-controls .accordion-section.current-panel {
     247    width: 100%;
     248}
     249
     250#customize-theme-controls .control-section.current-panel {
     251    padding: 0;
     252}
     253
     254#customize-theme-controls .control-section > h3.accordion-section-title {
     255    position: relative;
     256    left: 0;
     257}
     258
     259#customize-theme-controls .control-section.current-panel > h3.accordion-section-title {
     260    left: -300px;
     261    -webkit-transition: left ease-in-out .18s;
     262    transition: left ease-in-out .18s;
     263}
     264
     265.control-section.control-panel .accordion-section-title .panel-title {
     266    font-size: 20px;
     267    font-weight: 200;
     268    line-height: 24px;
     269    display: block;
     270    border: none;
     271}
     272
     273.control-section.control-panel .preview-notice {
     274    font-size: 13px;
     275    line-height: 24px;
    144276}
    145277

  • trunk/src/wp-admin/customize.php

    r28482 r28861  
    143143            <div id="customize-theme-controls"><ul>
    144144                <?php
    145                 foreach ( $wp_customize->sections() as $section )
     145                foreach ( $wp_customize->panels() as $panel ) {
     146                    $panel->maybe_render();
     147                }
     148                foreach ( $wp_customize->sections() as $section ) {
    146149                    $section->maybe_render();
     150                }
    147151                ?>
    148152            </ul></div>

  • trunk/src/wp-admin/js/accordion.js

    r24734 r28861  
    55        // Expand/Collapse on click
    66        $( '.accordion-container' ).on( 'click keydown', '.accordion-section-title', function( e ) {
    7             if ( e.type === 'keydown' && 13 !== e.which ) // "return" key
    8                     return;
     7            if ( e.type === 'keydown' && 13 !== e.which ) { // "return" key
     8                return;
     9            }
     10
    911            e.preventDefault(); // Keep this AFTER the key filter above
    1012
    1113            accordionSwitch( $( this ) );
     14        });
     15
     16        // Back to top level
     17        $( '.accordion-container' ).on( 'click keydown', '.control-panel-back', function( e ) {
     18            if ( e.type === 'keydown' && 13 !== e.which ) { // "return" key
     19                return;
     20            }
     21
     22            e.preventDefault(); // Keep this AFTER the key filter above
     23
     24            panelSwitch( $( this ) );
    1225        });
    1326
    … …  
    3447            content = section.find( sectionContent );
    3548
    36         if ( section.hasClass( 'cannot-expand' ) )
     49        if ( section.hasClass( 'cannot-expand' ) ) {
    3750            return;
     51        }
     52
     53        if ( section.hasClass( 'control-panel' ) ) {
     54            panelSwitch( section );
     55            return;
     56        }
    3857
    3958        if ( section.hasClass( 'open' ) ) {
    … …  
    5069    }
    5170
     71    function panelSwitch( panel ) {
     72        var position,
     73            section = panel.closest( '.accordion-section' ),
     74            container = section.closest( '.wp-full-overlay' ),
     75            siblings = container.find( '.accordion-section.open' ),
     76            content = section.find( '.control-panel-content' );
     77
     78        if ( section.hasClass( 'current-panel' ) ) {
     79            section.toggleClass( 'current-panel' );
     80            container.toggleClass( 'in-sub-panel' );
     81            content.delay( 180 ).hide( 0, function() {
     82                content.css( 'margin-top', 'inherit' ); // Reset
     83            } );
     84        } else {
     85            siblings.removeClass( 'open' );
     86            content.show( 0, function() {
     87                position = content.offset().top;
     88                content.css( 'margin-top', ( 45 - position ) );
     89                section.toggleClass( 'current-panel' );
     90                container.toggleClass( 'in-sub-panel' );
     91            } );
     92        }
     93    }
     94
    5295    // Initialize the accordion (currently just corner fixes)
    5396    accordionInit();

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

    r28546 r28861  
    4646
    4747    protected $settings = array();
     48    protected $panels   = array();
    4849    protected $sections = array();
    4950    protected $controls = array();
    … …  
    313314    public function sections() {
    314315        return $this->sections;
     316    }
     317
     318    /**
     319     * Get the registered panels.
     320     *
     321     * @since 4.0.0
     322     *
     323     * @return array
     324     */
     325    public function panels() {
     326        return $this->panels;
    315327    }
    316328
    … …  
    649661
    650662    /**
     663     * Add a customize panel.
     664     *
     665     * @since 4.0.0
     666     *
     667     * @param WP_Customize_Panel|string $id   Customize Panel object, or Panel ID.
     668     * @param array                     $args Panel arguments.
     669     */
     670    public function add_panel( $id, $args = array() ) {
     671        if ( is_a( $id, 'WP_Customize_Panel' ) ) {
     672            $panel = $id;
     673        }
     674        else {
     675            $panel = new WP_Customize_Panel( $this, $id, $args );
     676        }
     677
     678        $this->panels[ $panel->id ] = $panel;
     679    }
     680
     681    /**
     682     * Retrieve a customize panel.
     683     *
     684     * @since 4.0.0
     685     *
     686     * @param string $id Panel ID.
     687     * @return WP_Customize_Panel
     688     */
     689    public function get_panel( $id ) {
     690        if ( isset( $this->panels[ $id ] ) ) {
     691            return $this->panels[ $id ];
     692        }
     693    }
     694
     695    /**
     696     * Remove a customize panel.
     697     *
     698     * @since 4.0.0
     699     *
     700     * @param string $id Panel ID.
     701     */
     702    public function remove_panel( $id ) {
     703        unset( $this->panels[ $id ] );
     704    }
     705
     706    /**
    651707     * Add a customize section.
    652708     *
    … …  
    750806
    751807    /**
    752      * Prepare settings and sections.
     808     * Prepare panels, sections, and controls.
    753809     *
    754810     * For each, check if required related components exist,
    … …  
    764820
    765821        foreach ( $this->controls as $id => $control ) {
    766             if ( ! isset( $this->sections[ $control->section ] ) || ! $control->check_capabilities() )
     822            if ( ! isset( $this->sections[ $control->section ] ) || ! $control->check_capabilities() ) {
    767823                continue;
     824            }
    768825
    769826            $this->sections[ $control->section ]->controls[] = $control;
    … …  
    779836
    780837        foreach ( $this->sections as $section ) {
    781             if ( ! $section->check_capabilities() || ! $section->controls )
     838            if ( ! $section->check_capabilities() || ! $section->controls ) {
    782839                continue;
     840            }
    783841
    784842            usort( $section->controls, array( $this, '_cmp_priority' ) );
    785             $sections[] = $section;
     843
     844            if ( ! $section->panel ) {
     845                // Top-level section.
     846                $sections[] = $section;
     847            } else {
     848                // This section belongs to a panel.
     849                if ( isset( $this->panels [ $section->panel ] ) ) {
     850                    $this->panels[ $section->panel ]->sections[] = $section;
     851                }
     852            }
    786853        }
    787854        $this->sections = $sections;
     855
     856        // Prepare panels.
     857        // Reversing makes uasort sort by time added when conflicts occur.
     858        $this->panels = array_reverse( $this->panels );
     859        uasort( $this->panels, array( $this, '_cmp_priority' ) );
     860        $panels = array();
     861
     862        foreach ( $this->panels as $panel ) {
     863            if ( ! $panel->check_capabilities() || ! $panel->sections ) {
     864                continue;
     865            }
     866
     867            usort( $panel->sections, array( $this, '_cmp_priority' ) );
     868            $panels[] = $panel;
     869        }
     870        $this->panels = $panels;
    788871    }
    789872

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

    r28827 r28861  
    3737     */
    3838    public $priority = 10;
     39
     40    /**
     41     * Panel in which to show the section, making it a sub-section.
     42     *
     43     * @since 4.0.0
     44     * @access public
     45     * @var string
     46     */
     47    public $panel = '';
    3948
    4049    /**
    … …  
    163172     */
    164173    protected function render() {
     174        $classes = 'control-section accordion-section';
     175        if ( $this->panel ) {
     176            $classes .= ' control-subsection';
     177        }
    165178        ?>
    166         <li id="accordion-section-<?php echo esc_attr( $this->id ); ?>" class="control-section accordion-section">
     179        <li id="accordion-section-<?php echo esc_attr( $this->id ); ?>" class="<?php echo esc_attr( $classes ); ?>">
    167180            <h3 class="accordion-section-title" tabindex="0"><?php echo esc_html( $this->title ); ?></h3>
    168181            <ul class="accordion-section-content">
    … …  
    179192    }
    180193}
     194
     195/**
     196 * Customize Panel Class.
     197 *
     198 * A UI container for sections, managed by the WP_Customize_Manager.
     199 *
     200 * @package WordPress
     201 * @subpackage Customize
     202 * @since 4.0.0
     203 */
     204class WP_Customize_Panel extends WP_Customize_Section {
     205
     206    /**
     207     * Customizer sections for this panel.
     208     *
     209     * @since 4.0.0
     210     * @access public
     211     * @var array
     212     */
     213    public $sections;
     214
     215    /**
     216     * Constructor.
     217     *
     218     * Any supplied $args override class property defaults.
     219     *
     220     * @since 4.0.0
     221     *
     222     * @param WP_Customize_Manager $manager Customizer bootstrap instance.
     223     * @param string               $id      An specific ID of the section.
     224     * @param array                $args    Section arguments.
     225     */
     226    public function __construct( $manager, $id, $args = array() ) {
     227        parent::__construct( $manager, $id, $args );
     228
     229        $this->sections = array(); // Users cannot customize the $sections array.
     230
     231        return $this;
     232    }
     233
     234    /**
     235     * Render the panel, and the sections that have been added to it.
     236     *
     237     * @since 4.0.0
     238     */
     239    protected function render() {
     240        ?>
     241        <li id="accordion-section-<?php echo esc_attr( $this->id ); ?>" class="control-section control-panel accordion-section">
     242            <h3 class="accordion-section-title" tabindex="0"><?php echo esc_html( $this->title ); ?></h3>
     243            <span class="control-panel-back" tabindex="0"><span class="screen-reader-text">Back to Customize</span></span>
     244            <ul class="accordion-sub-container control-panel-content">
     245                <li class="accordion-section control-section<?php if ( empty( $this->description ) ) echo ' cannot-expand'; ?>">
     246                    <div class="accordion-section-title" tabindex="0">
     247                        <span class="preview-notice"><?php
     248                            /* translators: %s is the panel title in the Customize/Live Preview pane */
     249                            echo sprintf( 'You are customizing %s', '<strong class="panel-title">' . esc_html( $this->title ) . '</strong>' );
     250                        ?></span>
     251                    </div>
     252                    <?php if ( ! empty( $this->description ) ) : ?>
     253                        <div class="accordion-section-content description">
     254                            <?php echo $this->description; ?>
     255                        </div>
     256                    <?php endif; ?>
     257                </li>
     258                <?php
     259                foreach ( $this->sections as $section ) {
     260                    $section->maybe_render();
     261                }
     262                ?>
     263            </ul>
     264        </li>
     265        <?php
     266    }
     267}

  • trunk/src/wp-includes/class-wp-customize-widgets.php

    r28143 r28861  
    434434        }
    435435
     436        $this->manager->add_panel( 'widgets', array(
     437            'title' => __( 'Widgets' ),
     438            'description' => __( 'Widgets are independent sections of content that can be placed into widgetized areas provided by your theme (commonly called sidebars).' ),
     439        ) );
     440
    436441        foreach ( $sidebars_widgets as $sidebar_id => $sidebar_widget_ids ) {
    437442            if ( empty( $sidebar_widget_ids ) ) {
    … …  
    459464
    460465                    $section_args = array(
    461                         /* translators: %s: sidebar name */
    462                         'title' => sprintf( __( 'Widgets: %s' ), $GLOBALS['wp_registered_sidebars'][$sidebar_id]['name'] ),
    463                         'description' => $GLOBALS['wp_registered_sidebars'][$sidebar_id]['description'],
    464                         'priority' => 1000 + array_search( $sidebar_id, array_keys( $wp_registered_sidebars ) ),
     466                        'title' => $GLOBALS['wp_registered_sidebars'][ $sidebar_id ]['name'],
     467                        'description' => $GLOBALS['wp_registered_sidebars'][ $sidebar_id ]['description'],
     468                        'priority' => array_search( $sidebar_id, array_keys( $wp_registered_sidebars ) ),
     469                        'panel' => 'widgets',
    465470                    );
    466471
Note: See TracChangeset for help on using the changeset viewer.