Customizer: When navigating around the site within the Customizer preview, update the document title.

props westonruter.
fixes #28542.

git-svn-id: https://develop.svn.wordpress.org/trunk@30306 602fd350-edb4-49c9-b593-d223f7449a82

src/wp-admin/customize.php

@@ -76,14 +76,23 @@ endif;
 
 $is_ios = wp_is_mobile() && preg_match( '/iPad|iPod|iPhone/', $_SERVER['HTTP_USER_AGENT'] );
 
-if ( $is_ios )
+if ( $is_ios ) {
 	$body_class .= ' ios';
+}
 
-if ( is_rtl() )
+if ( is_rtl() ) {
 	$body_class .= ' rtl';
+}
 $body_class .= ' locale-' . sanitize_html_class( strtolower( str_replace( '_', '-', get_locale() ) ) );
 
-$admin_title = sprintf( __( '%1$s — WordPress' ), strip_tags( sprintf( __( 'Customize %s' ), $wp_customize->theme()->display('Name') ) ) );
+if ( $wp_customize->is_theme_active() ) {
+	$document_title_tmpl = _x( 'Customize: %s', 'Placeholder is the document title from the preview' );
+} else {
+	$document_title_tmpl = _x( 'Live Preview: %s', 'Placeholder is the document title from the preview' );
+}
+$document_title_tmpl = html_entity_decode( $document_title_tmpl, ENT_QUOTES, 'UTF-8' ); // because exported to JS and assigned to document.title
+$admin_title = sprintf( $document_title_tmpl, __( 'Loading…' ) );
+
 ?><title><?php echo $admin_title; ?></title>
 
 <script type="text/javascript">
@@ -253,6 +262,7 @@ do_action( 'customize_controls_print_scripts' );
 			'preview' => wp_create_nonce( 'preview-customize_' . $wp_customize->get_stylesheet() )
 		),
 		'autofocus' => array(),
+		'documentTitleTmpl' => $document_title_tmpl,
 	);
 
 	// Prepare Customize Setting objects to pass to Javascript.

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

@@ -1499,6 +1499,21 @@
 		};
 	}());
 
+	/**
+	 * Set the document title of the customizer
+	 *
+	 * @param {string} documentTitle
+	 */
+	api.setDocumentTitle = function ( documentTitle ) {
+		var tmpl, title;
+		tmpl = api.settings.documentTitleTmpl;
+		title = tmpl.replace( '%s', documentTitle );
+		document.title = title;
+		if ( window !== window.parent ) {
+			window.parent.document.title = document.title;
+		}
+	};
+
 	/**
 	 * @constructor
 	 * @augments wp.customize.Messenger
@@ -1617,6 +1632,11 @@
 
 			// Update the URL when the iframe sends a URL message.
 			this.bind( 'url', this.previewUrl );
+
+			// Update the document title when the preview changes
+			this.bind( 'documentTitle', function ( title ) {
+				api.setDocumentTitle( title );
+			} );
 		},
 
 		query: function() {},

src/wp-includes/js/customize-loader.js

@@ -78,7 +78,7 @@ window.wp = window.wp || {};
 				Loader.open( Loader.settings.url + '?' + hash );
 			}
 
-			if ( ! hash && ! $.support.history ){
+			if ( ! hash && ! $.support.history ) {
 				Loader.close();
 			}
 		},
@@ -105,6 +105,9 @@ window.wp = window.wp || {};
 				return window.location = src;
 			}
 
+			// Store the document title prior to opening the Live Preview
+			this.originalDocumentTitle = document.title;
+
 			this.active = true;
 			this.body.addClass('customize-loading');
 
@@ -134,7 +137,7 @@ window.wp = window.wp || {};
 				} else {
 					Loader.close();
 				}
-			} );
+			});
 
 			// Prompt AYS dialog when navigating away
 			$( window ).on( 'beforeunload', this.beforeunload );
@@ -158,15 +161,16 @@ window.wp = window.wp || {};
 		},
 
 		pushState: function ( src ) {
-			var hash;
+			var hash = src.split( '?' )[1];
 
 			// Ensure we don't call pushState if the user hit the forward button.
 			if ( $.support.history && window.location.href !== src ) {
 				history.pushState( { customize: src }, '', src );
 			} else if ( ! $.support.history && $.support.hashchange && hash ) {
-				hash = src.split( '?' )[1];
 				window.location.hash = 'wp_customize=on&' + hash;
 			}
+
+			this.trigger( 'open' );
 		},
 
 		/**
@@ -195,6 +199,11 @@ window.wp = window.wp || {};
 
 			this.trigger( 'close' );
 
+			// Restore document title prior to opening the Live Preview
+			if ( this.originalDocumentTitle ) {
+				document.title = this.originalDocumentTitle;
+			}
+
 			// Return focus to link that was originally clicked.
 			if ( this.link ) {
 				this.link.focus();

src/wp-includes/js/customize-preview.js

@@ -102,8 +102,11 @@
 		});
 
 		preview.bind( 'active', function() {
-            if ( api.settings.nonce )
+			if ( api.settings.nonce ) {
 				preview.send( 'nonce', api.settings.nonce );
+			}
+
+			preview.send( 'documentTitle', document.title );
 		});
 
 		preview.send( 'ready', {