Customizer Theme Switcher: Navigation streamlining.

* Detach Themes section from other controls
* Move to buttons to navigate back and forth
* Change titles based on current theme status, active/previewing
* Hide the active/previewing theme from the list of available themes

props folletto for the design concepts.
props designsimply, celloexpressions for initial patches.
props Team Gandalf.
see #31289.
Built from https://develop.svn.wordpress.org/trunk@31975


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

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

@@ -882,6 +882,43 @@ p.customize-section-description {
 	animation: customize-reload .75s;
 }
 
+.control-section-themes .accordion-section-title {
+	cursor: default;
+}
+
+#customize-theme-controls .control-section-themes .accordion-section-title:hover,
+#customize-theme-controls .control-section-themes .accordion-section-title:focus {
+	color: #555555;
+	background-color: #fff;
+}
+
+.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-left: 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,
+.control-section-themes .accordion-section-title .customize-theme {
+	position: absolute;
+	left: 10px;
+	top: 50%;
+	margin-top: -14px;
+	font-weight: normal;
+}
+
 .customize-themes-panel {
 	display: none;
 	padding: 0 8px;
@@ -889,6 +926,12 @@ p.customize-section-description {
 	box-sizing: border-box;
 	-webkit-box-sizing: border-box;
 	-moz-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+
+.customize-themes-panel > h2 {
+	padding: 15px 8px 0 8px;
 }
 
 .control-section.open .customize-themes-panel {
@@ -933,34 +976,8 @@ 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";
-}
-
-.rtl #accordion-section-themes .accordion-section-title:after {
-	-webkit-transform: rotate(-180deg);
-	-ms-transform: rotate(-180deg);
-	transform: rotate(-180deg);
+	display: none;
 }
 
 #customize-theme-controls .control-section-themes.current-panel > h3.accordion-section-title {
@@ -980,18 +997,6 @@ p.customize-section-description {
 	right: 100%;
 }
 
-.in-themes-panel .control-panel-back:before {
-	content: "\f341";
-	right: 14px;
-}
-
-.in-themes-panel .control-panel-back {
-	right: 0;
-}
-
-.in-themes-panel .control-panel-back:before {
-}
-
 /* Details View */
 .wp-customizer .theme-overlay {
 	display: none;
@@ -1039,8 +1044,7 @@ p.customize-section-description {
 	}
 }
 
-
-/** Handle cheaters. */
+/* Handle cheaters. */
 body.cheatin {
 	font-size: medium;
 	height: auto;

wp-admin/css/customize-controls.css

@@ -882,6 +882,43 @@ p.customize-section-description {
 	animation: customize-reload .75s;
 }
 
+.control-section-themes .accordion-section-title {
+	cursor: default;
+}
+
+#customize-theme-controls .control-section-themes .accordion-section-title:hover,
+#customize-theme-controls .control-section-themes .accordion-section-title:focus {
+	color: #555555;
+	background-color: #fff;
+}
+
+.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,
+.control-section-themes .accordion-section-title .customize-theme {
+	position: absolute;
+	right: 10px;
+	top: 50%;
+	margin-top: -14px;
+	font-weight: normal;
+}
+
 .customize-themes-panel {
 	display: none;
 	padding: 0 8px;
@@ -889,6 +926,12 @@ p.customize-section-description {
 	box-sizing: border-box;
 	-webkit-box-sizing: border-box;
 	-moz-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+
+.customize-themes-panel > h2 {
+	padding: 15px 8px 0 8px;
 }
 
 .control-section.open .customize-themes-panel {
@@ -933,34 +976,8 @@ 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";
-}
-
-.rtl #accordion-section-themes .accordion-section-title:after {
-	-webkit-transform: rotate(180deg);
-	-ms-transform: rotate(180deg);
-	transform: rotate(180deg);
+	display: none;
 }
 
 #customize-theme-controls .control-section-themes.current-panel > h3.accordion-section-title {
@@ -980,18 +997,6 @@ p.customize-section-description {
 	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;
@@ -1039,8 +1044,7 @@ p.customize-section-description {
 	}
 }
 
-
-/** Handle cheaters. */
+/* Handle cheaters. */
 body.cheatin {
 	font-size: medium;
 	height: auto;

wp-admin/js/customize-controls.js

@@ -591,7 +591,7 @@
 			var section = this;
 
 			// Expand/Collapse section/panel.
-			section.container.find( '.accordion-section-title' ).on( 'click keydown', function( event ) {
+			section.container.find( '.change-theme, .customize-theme' ).on( 'click keydown', function( event ) {
 				if ( api.utils.isKeydownButNotEnterEvent( event ) ) {
 					return;
 				}
@@ -604,19 +604,6 @@
 				}
 			});
 
-
-			$( '#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,8 +679,8 @@
 				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' ),
-				panelTitle = section.find( '.accordion-section-title' ).first(),
+				customizeBtn = section.find( '.customize-theme' ),
+				changeBtn = section.find( '.change-theme' ),
 				content = section.find( '.control-panel-content' );
 
 			if ( expanded ) {
@@ -722,8 +709,7 @@
 					}
 				} );
 				topPanel.attr( 'tabindex', '-1' );
-				backBtn.attr( 'tabindex', '0' );
-				backBtn.focus();
+				customizeBtn.focus();
 			} else {
 				siblings.removeClass( 'open' );
 				section.removeClass( 'current-panel' );
@@ -735,8 +721,7 @@
 					}
 				} );
 				topPanel.attr( 'tabindex', '0' );
-				backBtn.attr( 'tabindex', '-1' );
-				panelTitle.focus();
+				changeBtn.focus();
 				container.scrollTop( 0 );
 			}
 		},
@@ -1899,10 +1884,6 @@
 					return;
 				}
 
-				if ( $( this ).hasClass( 'active' ) ) {
-					return;
-				}
-
 				var previewUrl = $( this ).data( 'previewUrl' );
 
 				$( '.wp-full-overlay' ).addClass( 'customize-loading' );

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

@@ -1148,9 +1148,9 @@ final class WP_Customize_Manager {
 		/* 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,10 +1163,14 @@ final class WP_Customize_Manager {
 		// 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',
 			) ) );
 		}

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

@@ -341,17 +341,42 @@ class WP_Customize_Themes_Section extends WP_Customize_Section {
 		$classes = 'accordion-section control-section control-section-' . $this->type;
 		?>
 		<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>
+			<h3 class="accordion-section-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>
 			</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 ) + 1 /* Active theme */; ?></span>
 				</h2>
+
+				<h3 class="accordion-section-title customize-section-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 customize-theme"><?php _e( 'Customize' ); ?></button>
+				</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 ) > 4 ) : ?>
 					<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...' ); ?>" />

wp-includes/version.php

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