From d1c4c6fd6e0a19a2fc02a53c3c482d42967259da Mon Sep 17 00:00:00 2001
From: Helen Hou-Sandi <helen@git.wordpress.org>
Date: Tue, 8 Jul 2014 19:52:17 +0000
Subject: [PATCH] Customizer info section:

* Only show the theme info when doing a live preview of another theme.
* Replace with helper text about what you are customizing and what the Customizer is for.
* Fix focus styling.

props celloexpressions, westonruter. fixes #28550.


git-svn-id: https://develop.svn.wordpress.org/trunk@29034 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/wp-admin/css/customize-controls.css | 14 ++++---------
 src/wp-admin/customize.php              | 27 ++++++++++++++++---------
 src/wp-admin/js/customize-controls.js   |  8 ++++++++
 3 files changed, 30 insertions(+), 19 deletions(-)

diff --git a/src/wp-admin/css/customize-controls.css b/src/wp-admin/css/customize-controls.css
index a753d2ef5b..a6625b5bfd 100644
--- a/src/wp-admin/css/customize-controls.css
+++ b/src/wp-admin/css/customize-controls.css
@@ -50,22 +50,12 @@ body {
 	border-bottom: 1px solid #eeeeee;
 }
 
-#customize-info.open .accordion-section-title,
-#customize-info .accordion-section-title:hover,
-#customize-info .accordion-section-title:focus {
-	color: #555555;
-}
-
 #customize-info.open .accordion-section-title:after,
 #customize-info .accordion-section-title:hover:after,
 #customize-info .accordion-section-title:focus:after {
 	color: #555555;
 }
 
-#customize-info.open .accordion-section-title {
-	border-color: transparent;
-}
-
 #customize-info .preview-notice {
 	font-size: 13px;
 	line-height: 24px;
@@ -103,6 +93,9 @@ body {
 	background: white;
 }
 
+#customize-info.open .accordion-section-title,
+#customize-info .accordion-section-title:hover,
+#customize-info .accordion-section-title:focus,
 #customize-theme-controls .control-section:hover > .accordion-section-title,
 #customize-theme-controls .control-section .accordion-section-title:hover,
 #customize-theme-controls .control-section.open .accordion-section-title,
@@ -125,6 +118,7 @@ body {
 	color: #555555;
 }
 
+#customize-info.open,
 #customize-theme-controls .control-section.open {
 	border-bottom: 1px solid #eeeeee;
 }
diff --git a/src/wp-admin/customize.php b/src/wp-admin/customize.php
index 7d1aa47b58..50119cd12b 100644
--- a/src/wp-admin/customize.php
+++ b/src/wp-admin/customize.php
@@ -119,7 +119,7 @@ do_action( 'customize_controls_print_scripts' );
 
 		<?php
 			$screenshot = $wp_customize->theme()->get_screenshot();
-			$cannot_expand = ! ( $screenshot || $wp_customize->theme()->get('Description') );
+			$cannot_expand = ! ( $wp_customize->is_theme_active() || $screenshot || $wp_customize->theme()->get('Description') );
 		?>
 
 		<div id="widgets-right"><!-- For Widget Customizer, many widgets try to look for instances under div#widgets-right, so we have to add that ID to a container div in the customizer for compat -->
@@ -127,19 +127,28 @@ do_action( 'customize_controls_print_scripts' );
 			<div id="customize-info" class="accordion-section <?php if ( $cannot_expand ) echo ' cannot-expand'; ?>">
 				<div class="accordion-section-title" aria-label="<?php esc_attr_e( 'Theme Customizer Options' ); ?>" tabindex="0">
 					<span class="preview-notice"><?php
-						/* translators: %s is the theme name in the Customize/Live Preview pane */
-						echo sprintf( __( 'You are previewing %s' ), '<strong class="theme-name">' . $wp_customize->theme()->display('Name') . '</strong>' );
+						if ( ! $wp_customize->is_theme_active() ) {
+							/* translators: %s is the theme name in the Customize/Live Preview pane */
+							echo sprintf( __( 'You are previewing %s' ), '<strong class="theme-name">' . $wp_customize->theme()->display('Name') . '</strong>' );
+						} else {
+							/* translators: %s is the site title in the Customize pane */
+							echo sprintf( __( 'You are customizing %s' ), '<strong class="theme-name site-title">' . get_bloginfo( 'name' ) . '</strong>' );
+						}
 					?></span>
 				</div>
 				<?php if ( ! $cannot_expand ) : ?>
 				<div class="accordion-section-content">
-					<?php if ( $screenshot ) : ?>
-						<img class="theme-screenshot" src="<?php echo esc_url( $screenshot ); ?>" />
-					<?php endif; ?>
+					<?php if ( ! $wp_customize->is_theme_active() ) :
+						if ( $screenshot ) : ?>
+							<img class="theme-screenshot" src="<?php echo esc_url( $screenshot ); ?>" />
+						<?php endif; ?>
 
-					<?php if ( $wp_customize->theme()->get('Description') ): ?>
-						<div class="theme-description"><?php echo $wp_customize->theme()->display('Description'); ?></div>
-					<?php endif; ?>
+						<?php if ( $wp_customize->theme()->get('Description') ): ?>
+							<div class="theme-description"><?php echo $wp_customize->theme()->display('Description'); ?></div>
+						<?php endif;
+					else:
+						echo __( 'The Customizer allows you to preview changes to your site before publishing them. You can also navigate to different pages on your site to preview them.' );
+					endif; ?>
 				</div>
 				<?php endif; ?>
 			</div>
diff --git a/src/wp-admin/js/customize-controls.js b/src/wp-admin/js/customize-controls.js
index 53a11678a6..a93d4fbee8 100644
--- a/src/wp-admin/js/customize-controls.js
+++ b/src/wp-admin/js/customize-controls.js
@@ -916,6 +916,7 @@
 		var previewer, parent, topFocus,
 			body = $( document.body ),
 			overlay = body.children( '.wp-full-overlay' ),
+			title = $( '#customize-info .theme-name.site-title' ),
 			closeBtn = $( '.customize-controls-close' ),
 			saveBtn = $( '#save' );
 
@@ -1112,6 +1113,13 @@
 			event.preventDefault();
 		});
 
+		// Bind site title display to the corresponding field.
+		if ( title.length ) {
+			$( '#customize-control-blogname input' ).on( 'input', function() {
+				title.text(  this.value );
+			} );
+		}
+
 		// Create a potential postMessage connection with the parent frame.
 		parent = new api.Messenger({
 			url: api.settings.url.parent,