WordPress.org

Make WordPress Core

Ticket #27406: 27406.2.parents.diff

File 27406.2.parents.diff, 11.7 KB (added by celloexpressions, 3 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                                        /**