Changeset 32649 for trunk/src/wp-includes/class-wp-customize-section.php

Timestamp:

05/29/2015 01:56:39 PM (11 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:

• trunk/src/wp-includes/class-wp-customize-section.php (modified) (2 diffs)

trunk/src/wp-includes/class-wp-customize-section.php

@@ -306 +306 @@
                         <h3 class="accordion-section-title" tabindex="0">
                                 <?php echo esc_html( $this->title ); ?>
-                                <span class="screen-reader-text"><?php _e( 'Press return or enter to expand' ); ?></span>
+                                <span class="screen-reader-text"><?php _e( 'Press return or enter to open' ); ?></span>
                         </h3>
                         <ul class="accordion-section-content">
-                                <?php if ( ! empty( $this->description ) ) : ?>
-                                        <li class="customize-section-description-container">
+                                <li class="customize-section-description-container">
+                                        <div class="customize-section-title">
+                                                <button class="customize-section-back" tabindex="-1">
+                                                        <span class="screen-reader-text"><?php _e( 'Back' ); ?></span>
+                                                </button>
+                                                <h3>
+                                                        <span class="customize-action"><?php
+                                                                if ( $this->panel ) {
+                                                                        /* translators: &#9656; is the unicode right-pointing triangle, and %s is the section title in the Customizer */
+                                                                        echo sprintf( __( 'Customizing &#9656; %s' ), esc_html( $this->manager->get_panel( $this->panel )->title ) );
+                                                                } else {
+                                                                        _e( 'Customizing' );
+                                                                }
+                                                        ?></span>
+                                                        <?php echo esc_html( $this->title ); ?>
+                                                </h3>
+                                        </div>
+                                        <?php if ( ! empty( $this->description ) ) : ?>
                                                 <p class="description customize-section-description"><?php echo $this->description; ?></p>
-                                        </li>
-                                <?php endif; ?>
+                                        <?php endif; ?>
+                                </li>
                         </ul>
                 </li>
@@ -354 +370 @@
                                 if ( $this->manager->is_theme_active() ) {
                                         /* translators: %s: theme name */
-                                        printf( __( '<span>Active theme</span> %s' ), $this->title );
+                                        printf( __( '<span class="customize-action">Active theme</span> %s' ), $this->title );
                                 } else {
                                         /* translators: %s: theme name */
-                                        printf( __( '<span>Previewing theme</span> %s' ), $this->title );
+                                        printf( __( '<span class="customize-action">Previewing theme</span> %s' ), $this->title );
                                 }
                                 ?>
 
-                                <button type="button" class="button change-theme"><?php _ex( 'Change', 'theme' ); ?></button>
+                                <button type="button" class="button change-theme" tabindex="0"><?php _ex( 'Change', 'theme' ); ?></button>
                         </h3>
                         <div class="customize-themes-panel control-panel-content themes-php">
-                                <h2>
+                                <h3 class="accordion-section-title customize-section-title">
+                                        <span class="customize-action"><?php _e( 'Customizing' ); ?></span>
                                         <?php _e( 'Themes' ); ?>
                                         <span class="title-count theme-count"><?php echo count( $this->controls ) + 1 /* Active theme */; ?></span>
-                                </h2>
-
+                                </h3>
                                 <h3 class="accordion-section-title customize-section-title">
                                         <?php
                                         if ( $this->manager->is_theme_active() ) {
                                                 /* translators: %s: theme name */
-                                                printf( __( '<span>Active theme</span> %s' ), $this->title );
+                                                printf( __( '<span class="customize-action">Active theme</span> %s' ), $this->title );
                                         } else {
                                                 /* translators: %s: theme name */
-                                                printf( __( '<span>Previewing theme</span> %s' ), $this->title );
+                                                printf( __( '<span class="customize-action">Previewing theme</span> %s' ), $this->title );
                                         }
                                         ?>