Make WordPress Core


Ignore:
Timestamp:
05/29/2015 01:56:39 PM (9 years ago)
Author:
ocean90
Message:

Customizer: Replace accordion behavior of sections with a slide-in navigation.

This allows users to focus on the contents of the active section more easily and separating the navigation from the content/controls in the Customizer.

props valendesigns, celloexpressions.
see #31336.

File:
1 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-includes/class-wp-customize-section.php

    r32535 r32649  
    306306            <h3 class="accordion-section-title" tabindex="0">
    307307                <?php echo esc_html( $this->title ); ?>
    308                 <span class="screen-reader-text"><?php _e( 'Press return or enter to expand' ); ?></span>
     308                <span class="screen-reader-text"><?php _e( 'Press return or enter to open' ); ?></span>
    309309            </h3>
    310310            <ul class="accordion-section-content">
    311                 <?php if ( ! empty( $this->description ) ) : ?>
    312                     <li class="customize-section-description-container">
     311                <li class="customize-section-description-container">
     312                    <div class="customize-section-title">
     313                        <button class="customize-section-back" tabindex="-1">
     314                            <span class="screen-reader-text"><?php _e( 'Back' ); ?></span>
     315                        </button>
     316                        <h3>
     317                            <span class="customize-action"><?php
     318                                if ( $this->panel ) {
     319                                    /* translators: &#9656; is the unicode right-pointing triangle, and %s is the section title in the Customizer */
     320                                    echo sprintf( __( 'Customizing &#9656; %s' ), esc_html( $this->manager->get_panel( $this->panel )->title ) );
     321                                } else {
     322                                    _e( 'Customizing' );
     323                                }
     324                            ?></span>
     325                            <?php echo esc_html( $this->title ); ?>
     326                        </h3>
     327                    </div>
     328                    <?php if ( ! empty( $this->description ) ) : ?>
    313329                        <p class="description customize-section-description"><?php echo $this->description; ?></p>
    314                     </li>
    315                 <?php endif; ?>
     330                    <?php endif; ?>
     331                </li>
    316332            </ul>
    317333        </li>
     
    354370                if ( $this->manager->is_theme_active() ) {
    355371                    /* translators: %s: theme name */
    356                     printf( __( '<span>Active theme</span> %s' ), $this->title );
     372                    printf( __( '<span class="customize-action">Active theme</span> %s' ), $this->title );
    357373                } else {
    358374                    /* translators: %s: theme name */
    359                     printf( __( '<span>Previewing theme</span> %s' ), $this->title );
     375                    printf( __( '<span class="customize-action">Previewing theme</span> %s' ), $this->title );
    360376                }
    361377                ?>
    362378
    363                 <button type="button" class="button change-theme"><?php _ex( 'Change', 'theme' ); ?></button>
     379                <button type="button" class="button change-theme" tabindex="0"><?php _ex( 'Change', 'theme' ); ?></button>
    364380            </h3>
    365381            <div class="customize-themes-panel control-panel-content themes-php">
    366                 <h2>
     382                <h3 class="accordion-section-title customize-section-title">
     383                    <span class="customize-action"><?php _e( 'Customizing' ); ?></span>
    367384                    <?php _e( 'Themes' ); ?>
    368385                    <span class="title-count theme-count"><?php echo count( $this->controls ) + 1 /* Active theme */; ?></span>
    369                 </h2>
    370 
     386                </h3>
    371387                <h3 class="accordion-section-title customize-section-title">
    372388                    <?php
    373389                    if ( $this->manager->is_theme_active() ) {
    374390                        /* translators: %s: theme name */
    375                         printf( __( '<span>Active theme</span> %s' ), $this->title );
     391                        printf( __( '<span class="customize-action">Active theme</span> %s' ), $this->title );
    376392                    } else {
    377393                        /* translators: %s: theme name */
    378                         printf( __( '<span>Previewing theme</span> %s' ), $this->title );
     394                        printf( __( '<span class="customize-action">Previewing theme</span> %s' ), $this->title );
    379395                    }
    380396                    ?>
Note: See TracChangeset for help on using the changeset viewer.