WordPress.org
Get WordPress

Make WordPress Core

Ticket #27406: 27406.2.parents.diff

File 27406.2.parents.diff, 11.7 KB (added by celloexpressions, 10 years ago)

Alternate API approach, using sections with children instead of a separate WP_Customize_Page object.

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

     
    3232        display: block;
    3333}
    3434
     35#customize-controls .wp-full-overlay-sidebar-content {
     36        overflow-y: auto;
     37        overflow-x: hidden;
     38}
     39
    3540#customize-info {
    3641        border: none;
    3742        border-top: 1px solid #ddd;
    … …  
    103108        background: white;
    104109}
    105110
    106 #customize-theme-controls .control-section:hover .accordion-section-title,
     111#customize-theme-controls .control-section:hover > .accordion-section-title,
    107112#customize-theme-controls .control-section .accordion-section-title:hover,
    108113#customize-theme-controls .control-section.open .accordion-section-title,
    109114#customize-theme-controls .control-section .accordion-section-title:focus {
    … …  
    143148        margin: 0;
    144149}
    145150
     151.control-section.control-page > .accordion-section-title:after {
     152        content: "\f139";
     153}
     154
     155.current-page > .accordion-section-title {
     156        display: none;
     157}
     158
     159.accordion-sub-container.control-page-content {
     160        display: none;
     161        position: relative;
     162        left: 300px;
     163        top: 0;
     164        width: 300px;
     165        border-top: 1px solid #ddd;
     166        transition: left ease-in-out .18s;
     167}
     168
     169.current-page .accordion-sub-container.control-page-content {
     170        width: 100%;
     171        left: 0;
     172}
     173
     174.control-page-back {
     175        display: block;
     176        position: fixed;
     177        top: 0;
     178        z-index: 99;
     179        left: -48px;
     180        width: 45px;
     181        height: 45px;
     182        padding-right: 2px;
     183        background: #eee;
     184        border-right: 1px solid #ddd;
     185        cursor: pointer;
     186        transition: left ease-in-out .18s, color ease-in .1s;
     187}
     188
     189.control-page-back:focus,
     190.control-page-back:hover {
     191        background: #0074a2;
     192        color: #fff;
     193        outline: none;
     194}
     195
     196.control-page-back:before {
     197        font: normal 29px/1 dashicons;
     198        content: "\f340";
     199        position: relative;
     200        top: 9px;
     201        left: 9px;
     202}
     203
     204.current-page .control-page-back {
     205        left: 0;
     206}
     207
     208.wp-full-overlay-sidebar .wp-full-overlay-header {
     209        transition: padding ease-in-out .18s;
     210}
     211
     212.in-page .wp-full-overlay-sidebar .wp-full-overlay-header {
     213        padding-left: 62px;
     214}
     215
     216#customize-info,
     217#customize-theme-controls > ul > .accordion-section {
     218        position: relative;
     219        left: 0;
     220        transition: left ease-in-out .18s;
     221}
     222
     223.in-page #customize-info,
     224.in-page #customize-theme-controls > ul > .accordion-section {
     225        left: -300px;
     226        width: 300px;
     227}
     228
     229.in-page .accordion-section.current-page {
     230        left: 0;
     231}
     232
     233.in-page #customize-theme-controls .accordion-section.current-page {
     234        position: absolute;
     235        left: 0;
     236        top: 0;
     237        width: 100%;
     238}
     239
     240#customize-theme-controls .control-section.current-page {
     241        padding: 0;
     242}
     243
     244#customize-theme-controls .control-section.current-page > h3.accordion-section-title {
     245        position: relative;
     246        left: -300px;
     247        width: 300px;
     248}
     249
     250.control-section.current-page .accordion-section-title .page-title {
     251        font-size: 20px;
     252        font-weight: 200;
     253        line-height: 24px;
     254        display: block;
     255        border: none;
     256}
     257
     258.control-section.control-page.current-page .preview-notice {
     259        font-size: 13px;
     260        line-height: 24px;
     261}
     262
     263.control-page-content > .customize-control {
     264        padding: 0 20px;
     265        max-width: -webkit-calc(100% - 40px);
     266        max-width:         calc(100% - 40px);
     267}
     268
    146269.customize-control {
    147270        width: 100%;
    148271        float: left;

  • src/wp-admin/customize.php

     
    142142
    143143                        <div id="customize-theme-controls"><ul>
    144144                                <?php
    145                                 foreach ( $wp_customize->sections() as $section )
     145                                foreach ( $wp_customize->sections() as $section ) {
    146146                                        $section->maybe_render();
     147                                }
    147148                                ?>
    148149                        </ul></div>
    149150                </div>

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

     
    1111                        accordionSwitch( $( this ) );
    1212                });
    1313
     14                // Back to top-level of pages
     15                $( '.accordion-container' ).on( 'click keydown', '.control-page-back', function( e ) {
     16                        if ( e.type === 'keydown' && 13 !== e.which ) // "return" key
     17                                        return;
     18                        e.preventDefault(); // Keep this AFTER the key filter above
     19
     20                        pageSwitch( $( this ) );
     21                });
     22
    1423                // Re-initialize accordion when screen options are toggled
    1524                $( '.hide-postbox-tog' ).click( function () {
    1625                        accordionInit();
    … …  
    3645                if ( section.hasClass( 'cannot-expand' ) )
    3746                        return;
    3847
     48                if ( section.hasClass( 'control-page' ) ) {
     49                        pageSwitch( section );
     50                        return;
     51                }
     52
    3953                if ( section.hasClass( 'open' ) ) {
    4054                        section.toggleClass( 'open' );
    4155                        content.toggle( true ).slideToggle( 150 );
    … …  
    4963                accordionInit();
    5064        }
    5165
     66        function pageSwitch( page ) {
     67                var section = page.closest( '.accordion-section' ),
     68                        container = section.closest( '.wp-full-overlay' );
     69                        siblings = container.find( '.accordion-section.open' );
     70                        content = section.find( '.control-page-content' );
     71
     72                if ( section.hasClass( 'current-page' ) ) {
     73                        section.toggleClass( 'current-page' );
     74                        container.toggleClass( 'in-page' );
     75                        content.hide();
     76                } else {
     77                        siblings.removeClass( 'open' );
     78                        content.show( 0, function() {
     79                                section.toggleClass( 'current-page' );
     80                                container.toggleClass( 'in-page' );
     81                        } );
     82                }
     83        }
     84
    5285        // Initialize the accordion (currently just corner fixes)
    5386        accordionInit();
    5487

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

     
    749749        }
    750750
    751751        /**
    752          * Prepare settings and sections.
     752         * Prepare sections and controls.
    753753         *
    754754         * For each, check if required related components exist,
    755755         * whether the user has the necessary capabilities,
    … …  
    763763                $controls = array();
    764764
    765765                foreach ( $this->controls as $id => $control ) {
    766                         if ( ! isset( $this->sections[ $control->section ] ) || ! $control->check_capabilities() )
     766                        if ( ! isset( $this->sections[ $control->section ] ) || ! $control->check_capabilities() ) {
    767767                                continue;
     768                        }
    768769
    769770                        $this->sections[ $control->section ]->controls[] = $control;
    770771                        $controls[ $id ] = $control;
    … …  
    778779                $sections = array();
    779780
    780781                foreach ( $this->sections as $section ) {
    781                         if ( ! $section->check_capabilities() || ! $section->controls )
     782                        if ( ! $section->check_capabilities() ) {
    782783                                continue;
     784                        }
    783785
    784786                        usort( $section->controls, array( $this, '_cmp_priority' ) );
    785                         $sections[] = $section;
     787
     788                        if ( ! $section->parent ) {
     789                                // Top-level section.
     790                                $sections[] = $section;
     791                        } else {
     792                                // This section is a sub-section.
     793                                $this->sections[ $section->parent ]->subsections[] = $section;
     794                        }
    786795                }
    787796                $this->sections = $sections;
     797
     798                // Prepare sub-sections.
     799                foreach ( $this->sections as $section ) {
     800                        if ( ! $section->controls && ! $section->subsections ) {
     801                                unset( $this->sections[$section->id] );
     802                        }
     803
     804                        if ( ! $section->subsections ) {
     805                                continue;
     806                        }
     807
     808                        usort( $section->subsections, array( $this, '_cmp_priority' ) );
     809                }
    788810        }
    789811
    790812        /**

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

     
    3838        public $priority = 10;
    3939
    4040        /**
     41         * Parent section 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 $parent = '';
     48
     49        /**
    4150         * Capability required for the section.
    4251         *
    4352         * @since 3.4.0
    … …  
    8392        public $controls;
    8493
    8594        /**
     95         * Customizer sub-sections for this section.
     96         *
     97         * @since 4.0.0
     98         * @access public
     99         * @var array
     100         */
     101        public $subsections;
     102
     103        /**
    86104         * Constructor.
    87105         *
    88106         * Any supplied $args override class property defaults.
    … …  
    104122                $this->id = $id;
    105123
    106124                $this->controls = array(); // Users cannot customize the $controls array.
     125                $this->subsections = array(); // Users cannot customize the $subsections array.
    107126
    108127                return $this;
    109128        }
    … …  
    162181         * @since 3.4.0
    163182         */
    164183        protected function render() {
     184                $classes = 'control-section accordion-section';
     185                if ( $this->parent ) {
     186                        $classes .= ' control-subsection in-page-' . $this->parent;
     187                } elseif ( ! empty ( $this->subsections ) ) {
     188                        $classes .= ' control-page';
     189                }
    165190                ?>
    166                 <li id="accordion-section-<?php echo esc_attr( $this->id ); ?>" class="control-section accordion-section">
     191                <li id="accordion-section-<?php echo esc_attr( $this->id ); ?>" class="<?php echo esc_attr( $classes ); ?>">
    167192                        <h3 class="accordion-section-title" tabindex="0"><?php echo esc_html( $this->title ); ?></h3>
    168                         <ul class="accordion-section-content">
    169                                 <?php if ( ! empty( $this->description ) ) : ?>
    170                                 <li><p class="description"><?php echo $this->description; ?></p></li>
    171                                 <?php endif; ?>
    172                                 <?php
    173                                 foreach ( $this->controls as $control )
    174                                         $control->maybe_render();
    175                                 ?>
    176                         </ul>
     193                        <?php if ( ! empty( $this->subsections ) ) : ?>
     194                                <span class="control-page-back" tabindex="0"><span class="screen-reader-text">Back to Customize</span></span>
     195                                <ul class="accordion-sub-container control-page-content">
     196                                        <li class="accordion-section control-section<?php if ( empty( $this->description ) ) echo ' cannot-expand'; ?>">
     197                                                <div class="accordion-section-title" tabindex="0">
     198                                                        <span class="preview-notice"><?php _e( 'You are editing your site&#8217;s' ); ?>
     199                                                                <strong class="page-title"><?php echo esc_html( $this->title ); ?></strong>
     200                                                        </span>
     201                                                </div>
     202                                                <?php if ( ! empty( $this->description ) ) : ?>
     203                                                        <div class="accordion-section-content description">
     204                                                                <?php echo $this->description; ?>
     205                                                        </div>
     206                                                <?php endif; ?>
     207                                        </li>
     208                                        <?php
     209                                        foreach ( $this->subsections as $section ) {
     210                                                $section->maybe_render();
     211                                        }
     212                                        foreach ( $this->controls as $control ) {
     213                                                $control->maybe_render();
     214                                        }
     215                                        ?>
     216                                </ul>
     217                        <?php else: ?>
     218                                <ul class="accordion-section-content">
     219                                        <?php if ( ! empty( $this->description ) ) : ?>
     220                                        <li><p class="description"><?php echo $this->description; ?></p></li>
     221                                        <?php endif; ?>
     222                                        <?php
     223                                        foreach ( $this->controls as $control )
     224                                                $control->maybe_render();
     225                                        ?>
     226                                </ul>
     227                        <?php endif; ?>
    177228                </li>
    178229                <?php
    179230        }

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

     
    433433                        $this->manager->add_setting( $setting_id, $setting_args );
    434434                }
    435435
     436                $this->manager->add_section( 'widgets', array(
     437                        'title' => __( 'Widgets' ),
     438                        'priority' => 105,
     439                ) );
     440
    436441                foreach ( $sidebars_widgets as $sidebar_id => $sidebar_widget_ids ) {
    437442                        if ( empty( $sidebar_widget_ids ) ) {
    438443                                $sidebar_widget_ids = array();
    … …  
    458463                                if ( $is_active_sidebar ) {
    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'],
     466                                                'title' => $GLOBALS['wp_registered_sidebars'][ $sidebar_id ]['name'],
     467                                                'description' => $GLOBALS['wp_registered_sidebars'][ $sidebar_id ]['description'],
    464468                                                'priority' => 1000 + array_search( $sidebar_id, array_keys( $wp_registered_sidebars ) ),
     469                                                'parent' => 'widgets',
    465470                                        );
    466471
    467472                                        /**