Ticket #31791: 31791.patch

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

@@ -906 +906 @@
         font-size: 32px;
 }
 
-.wp-customizer .theme-browser .theme.active .theme-name {
-        padding-right: 15px;
-}
-
 .wp-customizer #themes-filter {
         font-size: 16px;
         font-weight: 300;
@@ -917 +913 @@
         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 {
+        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";

src/wp-admin/includes/theme.php

@@ -529 +529 @@
                                 </div>
                         </div>
 
-                        <div class="theme-actions">
-                                <# if ( ! data.active ) { #>
+                        <# if ( ! data.active ) { #>
+                                <div class="theme-actions">
                                         <div class="inactive-theme">
                                                 <a href="<?php echo add_query_arg( 'theme', '{{ data.id }}' ); ?>" target="_top" class="button button-primary"><?php _e( 'Live Preview' ); ?></a>
                                         </div>
-                                <# } #>
-                        </div>
+                                </div>
+                        <# } #>
                 </div>
         </script>
         <?php

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

@@ -648 +648 @@
                                 section.closeDetails();
                         });
 
-                        section.container.on( 'click keydown', '.theme-actions .button', function( event ) {
-                                if ( api.utils.isKeydownButNotEnterEvent( event ) ) {
-                                        return;
-                                }
-
-                                $( '.wp-full-overlay' ).addClass( 'customize-loading' );
-                        });
-
                         section.container.on( 'input', '#themes-filter', function( event ) {
                                 var count,
                                         term = event.currentTarget.value.toLowerCase().trim().replace( '-', ' ' ),
@@ -1885 +1877 @@
                                         return;
                                 }
 
-                                api.section( control.section() ).showDetails( control.params.theme );
+                                if ( $( this ).hasClass( 'active' ) ) {
+                                        return;
+                                }
+
+                                var previewUrl = $( this ).data( 'previewUrl' );
+
+                                $( '.wp-full-overlay' ).addClass( 'customize-loading' );
+
+                                window.parent.location = previewUrl;
                         });
 
-                        control.container.on( 'click keydown', '.theme-actions .button', function( event ) {
+                        control.container.on( 'click keydown', '.theme-actions .theme-details', function( event ) {
                                 if ( api.utils.isKeydownButNotEnterEvent( event ) ) {
                                         return;
                                 }
 
-                                $( '.wp-full-overlay' ).addClass( 'customize-loading' );
+                                event.preventDefault(); // Keep this AFTER the key filter above
+
+                                api.section( control.section() ).showDetails( control.params.theme );
                         });
                 },
 

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

@@ -1200 +1200 @@
          * @since 4.2.0
          */
         public function content_template() {
-        ?>
-                <div class="theme<# if ( data.theme.active ) { #> active<# } #>" tabindex="0" aria-describedby="{{ data.theme.id }}-action {{ data.theme.id }}-name">
+                $preview_url = site_url( add_query_arg( 'theme', '{{ data.theme.id }}' ) );
+                ?>
+                <div class="theme<# if ( data.theme.active ) { #> active<# } #>" data-preview-url="<?php echo esc_attr( $preview_url ); ?>" aria-describedby="{{ data.theme.id }}-action {{ data.theme.id }}-name">
                         <# if ( data.theme.screenshot[0] ) { #>
                                 <div class="theme-screenshot">
                                         <img src="{{ data.theme.screenshot[0] }}" alt="" />
@@ -1209 +1210 @@
                         <# } else { #>
                                 <div class="theme-screenshot blank"></div>
                         <# } #>
-                        <span class="more-details" id="{{ data.theme.id }}-action"><?php _e( 'Theme Details' ); ?></span>
+                        <span class="more-details" id="{{ data.theme.id }}-action"><?php _e( 'Live Preview' ); ?></span>
                         <div class="theme-author"><?php printf( __( 'By %s' ), '{{ data.theme.author }}' ); ?></div>
 
                         <# if ( data.theme.active ) { #>
@@ -1225 +1226 @@
 
                         <# if ( ! data.theme.active ) { #>
                                 <div class="theme-actions">
-                                        <a class="button" href="<?php echo add_query_arg( 'theme', '{{ data.theme.id }}' ); ?>" target="_top"><?php _e( 'Live Preview' ); ?></a>
+                                        <button type="button" class="button theme-details"><?php _e( 'Theme Details' ); ?></button>
                                 </div>
                         <# } #>
                 </div>