WordPress.org

Make WordPress Core

Ticket #27406: 27406.4.diff

File 27406.4.diff, 15.0 KB (added by celloexpressions, 3 years ago)

"Panel," improved animations, hide close button, details

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

     
    472472        color: $menu-highlight-text; 
    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 */ 
    477482 
  • 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; 
     
    8388        line-height: 20px; 
    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; 
    9393} 
     
    103103        background: white; 
    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, 
    109109#customize-theme-controls .control-section .accordion-section-title:focus { 
     
    118118        background: #f5f5f5; 
    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, 
    124124#customize-theme-controls .control-section .accordion-section-title:focus::after { 
     
    143143        margin: 0; 
    144144} 
    145145 
     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        transition: left ease-in-out .18s; 
     158} 
     159 
     160.accordion-sub-container.control-panel-content.animating { 
     161        display: block; 
     162} 
     163 
     164.current-panel .accordion-sub-container.control-panel-content { 
     165        width: 100%; 
     166} 
     167 
     168.control-panel-back { 
     169        display: block; 
     170        position: fixed; 
     171        top: 0; 
     172        z-index: 99; 
     173        left: -48px; 
     174        width: 45px; 
     175        height: 45px; 
     176        padding-right: 2px; 
     177        background: #eee; 
     178        border-right: 1px solid #ddd; 
     179        cursor: pointer; 
     180        transition: left ease-in-out .18s, color ease-in .1s; 
     181} 
     182 
     183.collapsed .control-panel-back { 
     184        display: none; 
     185} 
     186 
     187.control-panel-back:focus, 
     188.control-panel-back:hover { 
     189        background-color: #0074a2; 
     190        color: #fff; 
     191        outline: none; 
     192} 
     193 
     194.control-panel-back:before { 
     195        font: normal 29px/1 dashicons; 
     196        content: "\f340"; 
     197        position: relative; 
     198        top: 9px; 
     199        left: 9px; 
     200} 
     201 
     202.current-panel .control-panel-back { 
     203        left: 0; 
     204} 
     205 
     206.current-panel > .accordion-section-title { 
     207        height: 22px; 
     208} 
     209 
     210#customize-header-actions a.back { 
     211        position: relative; 
     212        left: 0; 
     213        transition: left ease-in-out .18s; 
     214} 
     215 
     216.in-sub-panel #customize-header-actions a.back { 
     217        left: -120px; 
     218} 
     219 
     220.wp-full-overlay-sidebar .wp-full-overlay-header { 
     221        transition: padding ease-in-out .18s; 
     222} 
     223 
     224.in-sub-panel .wp-full-overlay-sidebar .wp-full-overlay-header { 
     225        padding-left: 62px; 
     226} 
     227 
     228#customize-info, 
     229#customize-theme-controls > ul > .accordion-section { 
     230        position: relative; 
     231        left: 0; 
     232        transition: left ease-in-out .18s; 
     233} 
     234 
     235.in-sub-panel #customize-info, 
     236.in-sub-panel #customize-theme-controls > ul > .accordion-section { 
     237        left: -300px; 
     238        width: 300px; 
     239} 
     240 
     241.in-sub-panel #customize-theme-controls .accordion-section.current-panel { 
     242        width: 100%; 
     243} 
     244 
     245#customize-theme-controls .control-section.current-panel { 
     246        padding: 0; 
     247} 
     248 
     249#customize-theme-controls .control-section > h3.accordion-section-title { 
     250        position: relative; 
     251        left: 0; 
     252} 
     253 
     254#customize-theme-controls .control-section.current-panel > h3.accordion-section-title { 
     255        left: -300px; 
     256        transition: left ease-in-out .18s; 
     257} 
     258 
     259.control-section.control-panel .accordion-section-title .panel-title { 
     260        font-size: 20px; 
     261        font-weight: 200; 
     262        line-height: 24px; 
     263        display: block; 
     264        border: none; 
     265} 
     266 
     267.control-section.control-panel .preview-notice { 
     268        font-size: 13px; 
     269        line-height: 24px; 
     270} 
     271 
    146272.customize-control { 
    147273        width: 100%; 
    148274        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->panels() as $panel ) { 
     146                                        $panel->maybe_render(); 
     147                                } 
     148                                foreach ( $wp_customize->sections() as $section ) { 
    146149                                        $section->maybe_render(); 
     150                                } 
    147151                                ?> 
    148152                        </ul></div> 
    149153                </div> 
  • src/wp-admin/js/accordion.js

     
    1111                        accordionSwitch( $( this ) ); 
    1212                }); 
    1313 
     14                // Back to top level 
     15                $( '.accordion-container' ).on( 'click keydown', '.control-panel-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                        panelSwitch( $( 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-panel' ) ) { 
     49                        panelSwitch( 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 panelSwitch( panel ) { 
     67                var position, 
     68                        section = panel.closest( '.accordion-section' ), 
     69                        container = section.closest( '.wp-full-overlay' ); 
     70                        siblings = container.find( '.accordion-section.open' ); 
     71                        content = section.find( '.control-panel-content' ); 
     72 
     73                if ( section.hasClass( 'current-panel' ) ) { 
     74                        section.toggleClass( 'current-panel' ); 
     75                        container.toggleClass( 'in-sub-panel' ); 
     76                        content.delay(180).hide( 0, function() { 
     77                               content.css( 'margin-top', 'inherit' ); // Reset 
     78                        } ); 
     79                } else { 
     80                        siblings.removeClass( 'open' ); 
     81                        content.show( 0, function() { 
     82                                position = content.offset().top; 
     83                                content.css( 'margin-top', ( 45 - position ) ); 
     84                                section.toggleClass( 'current-panel' ); 
     85                                container.toggleClass( 'in-sub-panel' ); 
     86                        } ); 
     87                } 
     88        } 
     89 
    5290        // Initialize the accordion (currently just corner fixes) 
    5391        accordionInit(); 
    5492 
  • src/wp-includes/class-wp-customize-manager.php

     
    4545        public $widgets; 
    4646 
    4747        protected $settings = array(); 
     48        protected $panels    = array(); 
    4849        protected $sections = array(); 
    4950        protected $controls = array(); 
    5051 
     
    315316        } 
    316317 
    317318        /** 
     319         * Get the registered panels. 
     320         * 
     321         * @since 4.0.0 
     322         * 
     323         * @return array 
     324         */ 
     325        public function panels() { 
     326                return $this->panels; 
     327        } 
     328 
     329        /** 
    318330         * Checks if the current theme is active. 
    319331         * 
    320332         * @since 3.4.0 
     
    648660        } 
    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         * 
    653709         * @since 3.4.0 
     
    749805        } 
    750806 
    751807        /** 
    752          * Prepare settings and sections. 
     808         * Prepare panels, sections, and controls. 
    753809         * 
    754810         * For each, check if required related components exist, 
    755811         * whether the user has the necessary capabilities, 
     
    763819                $controls = array(); 
    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; 
    770827                        $controls[ $id ] = $control; 
     
    778835                $sections = array(); 
    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 
    790873        /** 
  • src/wp-includes/class-wp-customize-section.php

     
    3838        public $priority = 10; 
    3939 
    4040        /** 
     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 = ''; 
     48 
     49        /** 
    4150         * Capability required for the section. 
    4251         * 
    4352         * @since 3.4.0 
     
    162171         * @since 3.4.0 
    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"> 
    169182                                <?php if ( ! empty( $this->description ) ) : ?> 
     
    178191                <?php 
    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 _e( 'You are customizing' ); ?> 
     248                                                        <strong class="panel-title"><?php echo esc_html( $this->title ); ?></strong> 
     249                                                </span> 
     250                                        </div> 
     251                                        <?php if ( ! empty( $this->description ) ) : ?> 
     252                                                <div class="accordion-section-content description"> 
     253                                                        <?php echo $this->description; ?> 
     254                                                </div> 
     255                                        <?php endif; ?> 
     256                                </li> 
     257                                <?php 
     258                                foreach ( $this->sections as $section ) { 
     259                                        $section->maybe_render(); 
     260                                } 
     261                                ?> 
     262                        </ul> 
     263                </li> 
     264                <?php 
     265        } 
     266} 
  • src/wp-includes/class-wp-customize-widgets.php

     
    433433                        $this->manager->add_setting( $setting_id, $setting_args ); 
    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 ) ) { 
    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                                                'panel' => 'widgets', 
    465470                                        ); 
    466471 
    467472                                        /**