Ticket #31289: 31289.diff

src/wp-admin/css/customize-controls.css

@@ -860 +860 @@
         display: block;
 }
 
+.customize-themes-panel .customize-info {
+        padding: 12px 7px 15px;
+}
+
+.customize-themes-panel .customize-info .preview-action {
+        font-size: 13px;
+        line-height: 24px;
+        display: block;
+}
+
+.customize-themes-panel .customize-info .panel-title {
+        font-size: 20px;
+        font-weight: 200;
+        line-height: 24px;
+}
+
+.customize-themes-panel .customize-info .title-count {
+        top: -1px;
+        padding: 2px 8px;
+}
+
+.customize-themes-panel .customize-info .button {
+        float: right;
+        margin-top: -2px;
+        position: relative;
+}
+
+.customize-themes-panel .customize-section-title {
+        background: #fff;
+        color: #222;
+        padding: 10px 10px 11px 14px;
+        line-height: 21px;
+        cursor: pointer;
+        margin: 0 -8px 12px -8px;
+}
+
+.customize-section-title .action,
+.accordion-section-title .action {
+        float: right;
+        background: #f5f5f5;
+        color: #222;
+        border-left: 1px solid #eee;
+        font-weight: bold;
+        font-size: 12px;
+        line-height: 42px;
+        margin: -10px -10px -11px 0;
+        padding: 0 12px;
+        transition: color .1s ease-in-out,
+                    background .1s ease-in-out;
+}
+
+.customize-section-title .action {
+        background: #fff;
+        color: #0073aa;
+}
+
+.customize-section-title:hover .action,
+.customize-section-title:focus .action,
+.accordion-section-title:hover .action,
+.accordion-section-title:focus .action {
+        background: #ddd;
+        color: #000;
+        border-left-color: #d9d9d9
+}
+
+.customize-section-title:hover .action,
+.customize-section-title:focus .action {
+        background: #0073aa;
+        color: #fff;
+}
+
 #customize-theme-controls .customize-themes-panel .accordion-section-content {
         background: transparent;
         display: block;
@@ -897 +968 @@
 
 /* Panel-like behavior */
 #accordion-section-themes .accordion-section-title:after {
-        content: "\f148";
+        display: none;
 }
 
-.rtl #accordion-section-themes .accordion-section-title:after {
-        -webkit-transform: rotate(180deg);
-        -ms-transform: rotate(180deg);
-        transform: rotate(180deg);
-}
-
 #customize-theme-controls .control-section.current-panel > h3.accordion-section-title {
         left: 0;
 }

src/wp-admin/js/customize-controls.js

@@ -573 +573 @@
                         var section = this;
 
                         // Expand/Collapse section/panel.
-                        section.container.find( '.accordion-section-title' ).on( 'click keydown', function( event ) {
+                        section.container.find( '.accordion-section-title, .customize-section-title' ).on( 'click keydown', function( event ) {
                                 if ( api.utils.isKeydownButNotEnterEvent( event ) ) {
                                         return;
                                 }

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

@@ -343 +343 @@
                 <li id="accordion-section-<?php echo esc_attr( $this->id ); ?>" class="<?php echo esc_attr( $classes ); ?>">
                         <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="action"><?php _e( 'Change' ); ?></span>
+                                <span class="screen-reader-text"><?php _e( 'Press return or enter to change themes' ); ?></span>
                         </h3>
                         <span class="control-panel-back themes-panel-back" tabindex="-1"><span class="screen-reader-text"><?php _e( 'Back' ); ?></span></span>
                         <div class="customize-themes-panel control-panel-content themes-php">
-                                <h2><?php esc_html_e( 'Themes' ); ?>
-                                        <span class="title-count theme-count"><?php echo count( $this->controls ) - 1; ?></span>
-                                <?php if ( ! is_multisite() && current_user_can( 'install_themes' ) ) : ?>
-                                        <a href="<?php echo admin_url( 'theme-install.php' ); ?>" target="_top" class="add-new-h2"><?php echo esc_html_x( 'Add New', 'Add new theme' ); ?></a>
-                                <?php endif; ?>
-                                </h2>
+                                <div class="customize-info">
+                                        <span class="preview-notice"><span class="preview-action"><?php
+                                                echo sprintf( __( 'You are browsing %s' ), '</span><strong class="panel-title">' . __( 'Themes' ) . '</strong>' );
+                                        ?><span class="title-count theme-count"><?php echo count( $this->controls ) - 1; ?></span>
+                                        </span>
+                                        <?php if ( ! is_multisite() && current_user_can( 'install_themes' ) ) : ?>
+                                                <a href="<?php echo admin_url( 'theme-install.php' ); ?>" target="_top" class="button"><?php echo esc_html_x( 'Add New', 'Add new theme' ); ?></a>
+                                        <?php endif; ?>
+                                </div>
+                                <h3 class="customize-section-title" tabindex="0">
+                                        <?php echo sprintf( __( 'Previewing: %s' ), $this->manager->theme()->display('Name') ); ?>
+                                        <span class="action"><?php _e( 'Customize' ); ?></span>
+                                        <span class="screen-reader-text"><?php _e( 'Press return or enter to return to customize' ); ?></span>
+                                </h3>
                                 <div class="theme-overlay" tabindex="0" role="dialog" aria-label="<?php esc_attr_e( 'Theme details' ); ?>"></div>
                                 <div id="customize-container"></div>
                                 <?php if ( 6 < count( $this->controls ) ) : ?>