Changeset 32649 for trunk/src/wp-admin/customize.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-admin/customize.php (modified) (1 diff)

trunk/src/wp-admin/customize.php

@@ -148 +148 @@
         <div id="widgets-right"><!-- For Widget Customizer, many widgets try to look for instances under div#widgets-right, so we have to add that ID to a container div in the Customizer for compat -->
         <div class="wp-full-overlay-sidebar-content" tabindex="-1">
-            <div id="customize-info" class="accordion-section">
-                <div class="accordion-section-title" aria-label="<?php esc_attr_e( 'Customizer Options' ); ?>" tabindex="0">
+            <div id="customize-info" class="accordion-section customize-info">
+                <div class="accordion-section-title" aria-label="<?php esc_attr_e( 'Customizer Options' ); ?>">
                     <span class="preview-notice"><?php
-                        echo sprintf( __( 'You are customizing %s' ), '<strong class="theme-name site-title">' . get_bloginfo( 'name' ) . '</strong>' );
+                        echo sprintf( __( 'You are customizing %s' ), '<strong class="panel-title site-title">' . get_bloginfo( 'name' ) . '</strong>' );
                     ?></span>
+                    <button class="customize-help-toggle dashicons dashicons-editor-help" aria-expanded="false"><span class="screen-reader-text"><?php _e( 'Help' ); ?></span></button>
                 </div>
-                <div class="accordion-section-content"><?php
+                <div class="customize-panel-description"><?php
                     _e( 'The Customizer allows you to preview changes to your site before publishing them. You can also navigate to different pages on your site to preview them.' );
                 ?></div>