WordPress.org

Make WordPress Core

Ticket #27406: 27406.diff

File 27406.diff, 10.8 KB (added by celloexpressions, 3 years ago)

Proof-of-concept for customizer "Pages"

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

     
    143143        margin: 0; 
    144144} 
    145145 
     146.control-section.control-page .accordion-section-title:after { 
     147        content: "\f139"; 
     148} 
     149 
     150#customize-theme- controls .control-subsection { 
     151        display: none; 
     152} 
     153 
     154#customize-theme-controls .control-section.current-page { 
     155        background-color: #fff; 
     156        color: #666666; 
     157        border-left: none; 
     158        border-right: none; 
     159        border-bottom: 1px solid #eee; 
     160        padding: 12px 15px 15px; 
     161} 
     162 
     163#customize-theme-controls .control-section.current-page h3.accordion-section-title { 
     164        font-size: 20px; 
     165        font-weight: 200; 
     166        line-height: 24px; 
     167        display: block; 
     168        border: none; 
     169        background: transparent; 
     170        padding: 0; 
     171} 
     172 
     173.control-section.control-page.current-page .accordion-section-title:after { 
     174        content: "\f141"; 
     175        top: -6px; 
     176        right: -5px; 
     177} 
     178 
     179.control-section .preview-notice { 
     180        font-size: 13px; 
     181        line-height: 24px; 
     182        display: none; 
     183} 
     184 
     185.control-section.current-page .preview-notice { 
     186        display: block; 
     187} 
     188 
    146189.customize-control { 
    147190        width: 100%; 
    148191        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->pages() as $page ) { 
     146                                        $page->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

     
    3636                if ( section.hasClass( 'cannot-expand' ) ) 
    3737                        return; 
    3838 
     39                if ( section.hasClass( 'control-page' ) ) { 
     40                        pageSwitch( section ); 
     41                        return; 
     42                } 
     43 
    3944                if ( section.hasClass( 'open' ) ) { 
    4045                        section.toggleClass( 'open' ); 
    4146                        content.toggle( true ).slideToggle( 150 ); 
     
    4954                accordionInit(); 
    5055        } 
    5156 
     57        function pageSwitch( page ) { 
     58                var section = page.closest( '.accordion-section' ), 
     59                        container = section.closest( '.accordion-container' ); 
     60                        pageId = $(page).attr('id').replace( 'accordion-section-', '' ), 
     61                        subsections = container.find( '.control-subsection' ), 
     62                        children = container.find( '.in-page-' + pageId ), 
     63                        siblings = container.find( '.accordion-section' ); 
     64 
     65                if ( section.hasClass( 'current-page' ) ) { 
     66                        // Go back to the top-level. 
     67                        section.toggleClass( 'current-page' ); 
     68                        siblings.show(); 
     69                        subsections.hide(); 
     70                        section.show(); 
     71                } else { 
     72                        // Enter the page. 
     73                        siblings.removeClass( 'open' ); 
     74                        siblings.hide(); 
     75                        section.toggleClass( 'current-page' ); 
     76                        section.show(); 
     77                        children.show(); 
     78                } 
     79                 
     80        } 
     81 
    5282        // Initialize the accordion (currently just corner fixes) 
    5383        accordionInit(); 
    5484 
  • src/wp-admin/js/customize-widgets.js

     
    14251425                        } ); 
    14261426 
    14271427                        // Show the sidebar section when it becomes visible 
    1428                         registeredSidebar.on( 'change:is_rendered', function( ) { 
     1428                        /*registeredSidebar.on( 'change:is_rendered', function( ) { 
    14291429                                var sectionSelector = '#accordion-section-sidebar-widgets-' + this.get( 'id' ), $section; 
    14301430 
    14311431                                $section = $( sectionSelector ); 
     
    14431443 
    14441444                                        $section.stop().slideUp(); 
    14451445                                } 
    1446                         } ); 
     1446                        } );*/ 
    14471447                }, 
    14481448 
    14491449                /** 
  • src/wp-includes/class-wp-customize-manager.php

     
    4545        public $widgets; 
    4646 
    4747        protected $settings = array(); 
     48        protected $pages    = array(); 
    4849        protected $sections = array(); 
    4950        protected $controls = array(); 
    5051 
     
    315316        } 
    316317 
    317318        /** 
     319         * Get the registered pages. 
     320         * 
     321         * @since 4.0.0 
     322         * 
     323         * @return array 
     324         */ 
     325        public function pages() { 
     326                return $this->pages; 
     327        } 
     328 
     329        /** 
    318330         * Checks if the current theme is active. 
    319331         * 
    320332         * @since 3.4.0 
     
    648660        } 
    649661 
    650662        /** 
     663         * Add a customize page. 
     664         * 
     665         * @since 4.0.0 
     666         * 
     667         * @param WP_Customize_Page|string $id   Customize Page object, or Page ID. 
     668         * @param array                    $args Page arguments. 
     669         */ 
     670        public function add_page( $id, $args = array() ) { 
     671                if ( is_a( $id, 'WP_Customize_Page' ) ) { 
     672                        $page = $id; 
     673                } 
     674                else { 
     675                        $page = new WP_Customize_Page( $this, $id, $args ); 
     676                } 
     677 
     678                $this->pages[ $page->id ] = $page; 
     679        } 
     680 
     681        /** 
     682         * Retrieve a customize page. 
     683         * 
     684         * @since 4.0.0 
     685         * 
     686         * @param string $id Page ID. 
     687         * @return WP_Customize_Page 
     688         */ 
     689        public function get_page( $id ) { 
     690                if ( isset( $this->pages[ $id ] ) ) { 
     691                        return $this->pages[ $id ]; 
     692                } 
     693        } 
     694 
     695        /** 
     696         * Remove a customize page. 
     697         * 
     698         * @since 4.0.0 
     699         * 
     700         * @param string $id Page ID. 
     701         */ 
     702        public function remove_page( $id ) { 
     703                unset( $this->pages[ $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 pages, 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->page ) { 
     845                                // Top-level section. 
     846                                $sections[] = $section; 
     847                        } else { 
     848                                // This section belongs to a page. 
     849                                $this->pages[ $section->page ]->sections[] = $section; 
     850                        } 
    786851                } 
    787852                $this->sections = $sections; 
     853                //var_dump($this->pages); 
     854 
     855                // Prepare pages. 
     856                // Reversing makes uasort sort by time added when conflicts occur. 
     857                $this->pages = array_reverse( $this->pages ); 
     858                uasort( $this->pages, array( $this, '_cmp_priority' ) ); 
     859                $pages = array(); 
     860 
     861                foreach ( $this->pages as $page ) { 
     862                        if ( ! $page->check_capabilities() || ! $page->sections ) { 
     863                                continue; 
     864                        } 
     865 
     866                        usort( $page->sections, array( $this, '_cmp_priority' ) ); 
     867                        $pages[] = $page; 
     868                } 
     869                $this->pages = $pages; 
    788870        } 
    789871 
    790872        /** 
  • src/wp-includes/class-wp-customize-section.php

     
    3838        public $priority = 10; 
    3939 
    4040        /** 
     41         * Page 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 $page = ''; 
     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->page ) { 
     176                        $classes .= ' control-subsection in-page-' . $this->page; 
     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 Page 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_Page extends WP_Customize_Section { 
     205 
     206        /** 
     207         * Customizer sections for this page. 
     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 page, and the sections that have been added to it. 
     236         * 
     237         * @since 3.4.0 
     238         */ 
     239        protected function render() { 
     240                ?> 
     241                <li id="accordion-section-<?php echo esc_attr( $this->id ); ?>" class="control-section control-page accordion-section"> 
     242                        <span class="preview-notice"><?php _e( 'You are editing your site&#8217;s' ); ?></span> 
     243                        <h3 class="accordion-section-title" tabindex="0"><?php echo esc_html( $this->title ); ?></h3> 
     244                        <ul class="accordion-section-content"> 
     245                                <?php if ( ! empty( $this->description ) ) : ?> 
     246                                <li><p class="description"><?php echo $this->description; ?></p></li> 
     247                                <?php endif; ?> 
     248                        </ul> 
     249                </li> 
     250                <?php 
     251                foreach ( $this->sections as $section ) { 
     252                        $section->maybe_render(); 
     253                } 
     254        } 
     255} 
  • src/wp-includes/class-wp-customize-widgets.php

     
    433433                        $this->manager->add_setting( $setting_id, $setting_args ); 
    434434                } 
    435435 
     436                $this->manager->add_page( 'widgets', array( 
     437                        'title' => 'Widgets', 
     438                ) ); 
     439 
    436440                foreach ( $sidebars_widgets as $sidebar_id => $sidebar_widget_ids ) { 
    437441                        if ( empty( $sidebar_widget_ids ) ) { 
    438442                                $sidebar_widget_ids = array(); 
     
    462466                                                'title' => sprintf( __( 'Widgets: %s' ), $GLOBALS['wp_registered_sidebars'][$sidebar_id]['name'] ), 
    463467                                                'description' => $GLOBALS['wp_registered_sidebars'][$sidebar_id]['description'], 
    464468                                                'priority' => 1000 + array_search( $sidebar_id, array_keys( $wp_registered_sidebars ) ), 
     469                                                'page' => 'widgets', 
    465470                                        ); 
    466471 
    467472                                        /**