WordPress.org
Get WordPress

Make WordPress Core

Ticket #27406: 27406.1.diff

File 27406.1.diff, 11.2 KB (added by celloexpressions, 10 years ago)

Proof-of-concept for customizer "Pages", puts widgets into a page.

  • 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
    5281        // Initialize the accordion (currently just corner fixes)
    5382        accordionInit();
    5483

  • src/wp-admin/js/customize-widgets.js

     
    14231423
    14241424                                registeredSidebar.set( 'is_rendered', isRendered );
    14251425                        } );
    1426 
    1427                         // Show the sidebar section when it becomes visible
    1428                         registeredSidebar.on( 'change:is_rendered', function( ) {
    1429                                 var sectionSelector = '#accordion-section-sidebar-widgets-' + this.get( 'id' ), $section;
    1430 
    1431                                 $section = $( sectionSelector );
    1432                                 if ( this.get( 'is_rendered' ) ) {
    1433                                         $section.stop().slideDown( function() {
    1434                                                 $( this ).css( 'height', 'auto' ); // so that the .accordion-section-content won't overflow
    1435                                         } );
    1436 
    1437                                 } else {
    1438                                         // Make sure that hidden sections get closed first
    1439                                         if ( $section.hasClass( 'open' ) ) {
    1440                                                 // it would be nice if accordionSwitch() in accordion.js was public
    1441                                                 $section.find( '.accordion-section-title' ).trigger( 'click' );
    1442                                         }
    1443 
    1444                                         $section.stop().slideUp();
    1445                                 }
    1446                         } );
    14471426                },
    14481427
    14491428                /**

  • 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                                        /**