Ticket #31289: 31289.patch

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

@@ -862 +862 @@
         animation: customize-reload .75s;
 }
 
+.control-section-themes .accordion-section-title {
+        margin: 15px 0;
+}
+
+.customize-themes-panel .accordion-section-title {
+        margin: 15px -8px;
+}
+
+.control-section-themes .accordion-section-title {
+        padding-right: 100px; /* Space for the button */
+}
+
+.control-section-themes .accordion-section-title span {
+        font-size: small;
+        display: block;
+        font-weight: 400;
+}
+
+.control-section-themes .accordion-section-title .change-theme {
+        position: absolute;
+        right: 10px;
+        top: 50%;
+        margin-top: -14px;
+        font-weight: normal;
+}
+
 .customize-themes-panel {
         display: none;
         padding: 0 8px;
@@ -869 +895 @@
         box-sizing: border-box;
         -webkit-box-sizing: border-box;
         -moz-box-sizing: border-box;
+        box-sizing: border-box;
 }
 
 .control-section.open .customize-themes-panel {
@@ -913 +940 @@
         width: 100%;
 }
 
-
-.wp-customizer .theme-browser .theme.active:hover,
-.wp-customizer .theme-browser .theme.active:focus {
-        cursor: default;
-}
-
-.wp-customizer .theme-browser .theme.active .more-details {
+#accordion-section-themes .accordion-section-title:after {
         display: none;
 }
 
-.wp-customizer .theme-browser .theme.active .theme-name {
-        padding-right: 15px;
-}
-
-.wp-customizer .theme-browser.rendered .theme.active:hover .theme-screenshot img,
-.wp-customizer .theme-browser.rendered .theme.active:focus .theme-screenshot img {
-        opacity: 1;
-}
-
-/* Panel-like behavior */
-#accordion-section-themes .accordion-section-title:after {
-        content: "\f148";
-}
-
-.rtl #accordion-section-themes .accordion-section-title:after {
-        -webkit-transform: rotate(180deg);
-        -ms-transform: rotate(180deg);
-        transform: rotate(180deg);
-}
-
 #customize-theme-controls .control-section-themes.current-panel > h3.accordion-section-title {
         left: 0;
 }
@@ -960 +961 @@
         left: 100%;
 }
 
-.in-themes-panel .control-panel-back:before {
-        content: "\f345";
-        left: 14px;
-}
-
-.in-themes-panel .control-panel-back {
-        left: 0;
-}
-
-.in-themes-panel .control-panel-back:before {
-}
-
 /* Details View */
 .wp-customizer .theme-overlay {
         display: none;
@@ -1019 +1008 @@
         }
 }
 
-
-/** Handle cheaters. */
+/* Handle cheaters. */
 body.cheatin {
         font-size: medium;
         height: auto;

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

@@ -604 +604 @@
                                 }
                         });
 
-
-                        $( '#customize-header-actions' ).on( 'click keydown', '.control-panel-back', function( event ) {
-                                if ( api.utils.isKeydownButNotEnterEvent( event ) ) {
-                                        return;
-                                }
-
-                                event.preventDefault(); // Keep this AFTER the key filter above
-
-                                if ( section.expanded() ) {
-                                        section.collapse();
-                                }
-                        });
-
                         // Theme navigation in details view.
                         section.container.on( 'click keydown', '.left', function( event ) {
                                 if ( api.utils.isKeydownButNotEnterEvent( event ) ) {
@@ -692 +679 @@
                                 container = section.closest( '.wp-full-overlay-sidebar-content' ),
                                 siblings = container.find( '.open' ),
                                 topPanel = overlay.find( '#customize-theme-controls > ul > .accordion-section > .accordion-section-title' ).add( '#customize-info > .accordion-section-title' ),
-                                backBtn = overlay.find( '.control-panel-back' ),
+                                backBtn = section.find( '.customize-section-title' ),
                                 panelTitle = section.find( '.accordion-section-title' ).first(),
                                 content = section.find( '.control-panel-content' );
 
@@ -722 +709 @@
                                         }
                                 } );
                                 topPanel.attr( 'tabindex', '-1' );
-                                backBtn.attr( 'tabindex', '0' );
                                 backBtn.focus();
                         } else {
                                 siblings.removeClass( 'open' );
@@ -735 +721 @@
                                         }
                                 } );
                                 topPanel.attr( 'tabindex', '0' );
-                                backBtn.attr( 'tabindex', '-1' );
                                 panelTitle.focus();
                                 container.scrollTop( 0 );
                         }
@@ -1899 +1884 @@
                                         return;
                                 }
 
-                                if ( $( this ).hasClass( 'active' ) ) {
-                                        return;
-                                }
-
                                 var previewUrl = $( this ).data( 'previewUrl' );
 
                                 $( '.wp-full-overlay' ).addClass( 'customize-loading' );

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

@@ -1148 +1148 @@
                 /* Themes */
 
                 $this->add_section( new WP_Customize_Themes_Section( $this, 'themes', array(
-                        'title' => sprintf( __( 'Theme: %s' ), $this->theme()->display('Name') ),
+                        'title'      => $this->theme()->display( 'Name' ),
                         'capability' => 'switch_themes',
-                        'priority' => 0,
+                        'priority'   => 0,
                 ) ) );
 
                 // Themes Setting (unused - the theme is considerably more fundamental to the Customizer experience).
@@ -1163 +1163 @@
                 // Theme Controls.
                 $themes = wp_prepare_themes_for_js();
                 foreach ( $themes as $theme ) {
+                        if ( $theme['active'] ) {
+                                continue;
+                        }
+
                         $theme_id = 'theme_' . $theme['id'];
                         $this->add_control( new WP_Customize_Theme_Control( $this, $theme_id, array(
-                                'theme' => $theme,
-                                'section' => 'themes',
+                                'theme'    => $theme,
+                                'section'  => 'themes',
                                 'settings' => 'active_theme',
                         ) ) );
                 }

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

@@ -342 +342 @@
                 ?>
                 <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 ); ?>
+                                <?php
+                                if ( $this->manager->is_theme_active() ) {
+                                        /* translators: %s: theme name */
+                                        printf( __( '<span>Active theme</span> %s' ), $this->title );
+                                } else {
+                                        /* translators: %s: theme name */
+                                        printf( __( '<span>Previewing theme</span> %s' ), $this->title );
+                                }
+                                ?>
+
+                                <button type="button" class="button change-theme"><?php _ex( 'Change', 'theme' ); ?></button>
                                 <span class="screen-reader-text"><?php _e( 'Press return or enter to expand' ); ?></span>
                         </h3>
                         <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>
+                                <h2>
+                                        <?php _e( 'Themes' ); ?>
+                                        <span class="title-count theme-count"><?php echo count( $this->controls ); ?></span>
                                 </h2>
+
+                                <h3 class="accordion-section-title customize-section-title" tabindex="0">
+                                        <?php
+                                        if ( $this->manager->is_theme_active() ) {
+                                                /* translators: %s: theme name */
+                                                printf( __( '<span>Active theme</span> %s' ), $this->title );
+                                        } else {
+                                                /* translators: %s: theme name */
+                                                printf( __( '<span>Previewing theme</span> %s' ), $this->title );
+                                        }
+                                        ?>
+                                        <button type="button" class="button change-theme"><?php _e( 'Customize' ); ?></button>
+                                        <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 ) ) : ?>
+                                <?php if ( count( $this->controls ) > 5 ) : ?>
                                         <p><label for="themes-filter">
                                                 <span class="screen-reader-text"><?php _e( 'Search installed themes...' ); ?></span>
                                                 <input type="search" id="themes-filter" placeholder="<?php esc_attr_e( 'Search installed themes...' ); ?>" />