Customizer Theme Switcher: Switch the details/live preview buttons.

props celloexpressions, ocean90.
fixes #31791.
Built from https://develop.svn.wordpress.org/trunk@31954


git-svn-id: http://core.svn.wordpress.org/trunk@31933 1a063a9b-81f0-0310-95a4-ce76da25c4cd

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

@@ -906,10 +906,6 @@ p.customize-section-description {
 	font-size: 32px;
 }
 
-.wp-customizer .theme-browser .theme.active .theme-name {
-	padding-left: 15px;
-}
-
 .wp-customizer #themes-filter {
 	font-size: 16px;
 	font-weight: 300;
@@ -917,6 +913,25 @@ p.customize-section-description {
 	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-left: 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";

wp-admin/css/customize-controls.css

@@ -906,10 +906,6 @@ p.customize-section-description {
 	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,6 +913,25 @@ p.customize-section-description {
 	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";

wp-admin/includes/theme.php

@@ -547,13 +547,13 @@ function customize_themes_print_templates() {
 				</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

wp-admin/js/customize-controls.js

@@ -648,14 +648,6 @@
 				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( '-', ' ' ),
@@ -1907,15 +1899,25 @@
 					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 );
 			});
 		},
 

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

@@ -1200,8 +1200,9 @@ class WP_Customize_Theme_Control extends WP_Customize_Control {
 	 * @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<# } #>"<# if ( ! data.theme.active ) { #> tabindex="0"<# } #> 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,7 +1210,7 @@ class WP_Customize_Theme_Control extends WP_Customize_Control {
 			<# } 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,7 +1226,7 @@ class WP_Customize_Theme_Control extends WP_Customize_Control {
 
 			<# 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>

wp-includes/version.php

@@ -4,7 +4,7 @@
  *
  * @global string $wp_version
  */
-$wp_version = '4.2-beta3-31953';
+$wp_version = '4.2-beta3-31954';
 
 /**
  * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.