WordPress.org
Get WordPress

Make WordPress Core

Ticket #27406: 27406.2.diff

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

Pages are sub-accordions, UI improvements, code cleanup from @westonruter.

  • 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
    146263.customize-control {
    147264        width: 100%;
    148265        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

     
    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

     
    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 4.0.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                        <h3 class="accordion-section-title" tabindex="0"><?php echo esc_html( $this->title ); ?></h3>
     243                        <span class="control-page-back" tabindex="0"><span class="screen-reader-text">Back to Customize</span></span>
     244                        <ul class="accordion-sub-container control-page-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 editing your site&#8217;s' ); ?>
     248                                                        <strong class="page-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_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();
    … …  
    458462                                if ( $is_active_sidebar ) {
    459463
    460464                                        $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'],
     465                                                'title' => $GLOBALS['wp_registered_sidebars'][ $sidebar_id ]['name'],
     466                                                'description' => $GLOBALS['wp_registered_sidebars'][ $sidebar_id ]['description'],
    464467                                                'priority' => 1000 + array_search( $sidebar_id, array_keys( $wp_registered_sidebars ) ),
     468                                                'page' => 'widgets',
    465469                                        );
    466470
    467471                                        /**