Theme Customizer: Properly change state when theme is switched. fixes #20610, see #19910.

* Causes the Manage Themes page to refresh if the customizer is closed after the active theme is switched.
* Changes the text of the 'Save and Activate' button once the theme has been activated.
* Improves the naming of the customize control settings.
* Add events to customize.Loader and make callbacks more flexible.
* Makes the customize-loader l10n compatible with non-admin settings.
* Adds WP_Customize->is_current_theme_active().
* Minor style corrections, including jQuery.attr/prop changes.



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

wp-admin/js/theme.dev.js

@@ -18,6 +18,35 @@ jQuery( function($) {
 	});
 });
 
+/**
+ * Theme Customizer
+ *
+ * Ensures the themes page is refreshed if the customizer switches the theme.
+ */
+jQuery( function($) {
+	var Loader, activated;
+
+	if ( typeof wp === 'undefined' || ! wp.customize || ! ( Loader = wp.customize.Loader ) )
+		return;
+
+	// Strip the current URL of its query string and hash, add activated query string.
+	activated = window.location.href.replace(/[#?].*$/, '') + '?activated=true';
+
+	// When an instance of the customizer is loaded...
+	Loader.bind( 'open', function() {
+
+		// If the customizer triggers a theme switched event,
+		// load the activated page when the customizer is closed.
+		Loader.messenger.bind( 'switched', function() {
+
+			Loader.unbind( 'close', Loader.overlay.hide );
+			Loader.bind( 'close', function() {
+				window.location = activated;
+			});
+		});
+	});
+});
+
 /**
  * Theme Install
  *

wp-includes/class-wp-customize.php

@@ -144,6 +144,15 @@ final class WP_Customize {
 		do_action( 'stop_previewing_theme', $this );
 	}
 
+	/**
+	 * Checks if the current theme is active.
+	 *
+	 * @since 3.4.0
+	 */
+	public function is_current_theme_active() {
+		return $this->get_stylesheet() == $this->original_stylesheet;
+	}
+
 	/**
 	 * Register styles/scripts and initialize the preview of each setting
 	 *

wp-includes/customize-controls.php

@@ -76,7 +76,7 @@ do_action( 'customize_controls_print_scripts' );
 
 		<div id="customize-footer-actions" class="wp-full-overlay-footer">
 			<?php
-			$save_text = $this->get_stylesheet() == $this->original_stylesheet ? __('Save') : __('Save and Activate');
+			$save_text = $this->is_current_theme_active() ? __('Save') : __('Save and Activate');
 			submit_button( $save_text, 'primary', 'save', false );
 			?>
 			<img src="<?php echo esc_url( admin_url( 'images/wpspin_light.gif' ) ); ?>" />
@@ -93,12 +93,17 @@ do_action( 'customize_controls_print_scripts' );
 	do_action( 'customize_controls_print_footer_scripts' );
 
 	$settings = array(
-		'theme'    => $this->get_stylesheet(),
+		'theme'    => array(
-		'preview'  => esc_url( home_url( '/' ) ),
+			'stylesheet' => $this->get_stylesheet(),
+			'active'     => $this->is_current_theme_active(),
+		),
+		'url'      => array(
+			'preview'  => esc_url( home_url( '/' ) ),
+			'parent'   => esc_url( admin_url() ),
+			'ajax'     => esc_url( admin_url( 'admin-ajax.php', 'relative' ) ),
+		),
 		'settings' => array(),
 		'controls' => array(),
-		'parent'   => esc_url( admin_url() ),
-		'ajax'     => esc_url( admin_url( 'admin-ajax.php', 'relative' ) ),
 	);
 
 	foreach ( $this->settings as $id => $setting ) {

wp-includes/js/customize-controls.dev.js

@@ -392,6 +392,8 @@
 
 	$( function() {
 		api.settings = window._wpCustomizeSettings;
+		api.l10n = window._wpCustomizeControlsL10n;
+
 		if ( ! api.settings )
 			return;
 
@@ -408,12 +410,12 @@
 		previewer = new api.Previewer({
 			container: '#customize-preview',
 			form:      '#customize-controls',
-			url:       api.settings.preview
+			url:       api.settings.url.preview
 		}, {
 			query: function() {
 				return {
 					customize:  'on',
-					theme:      api.settings.theme,
+					theme:      api.settings.theme.stylesheet,
 					customized: JSON.stringify( api.get() )
 				};
 			},
@@ -425,7 +427,9 @@
 						action: 'customize_save',
 						nonce:  this.nonce
 					}),
-					request = $.post( api.settings.ajax, query );
+					request = $.post( api.settings.url.ajax, query );
+
+				api.trigger( 'save', request );
 
 				body.addClass('saving');
 				request.always( function() {
@@ -472,17 +476,37 @@
 		});
 
 		// Create a potential postMessage connection with the parent frame.
-		parent = new api.Messenger( api.settings.parent );
+		parent = new api.Messenger( api.settings.url.parent );
 
 		// If we receive a 'back' event, we're inside an iframe.
 		// Send any clicks to the 'Return' link to the parent page.
 		parent.bind( 'back', function( text ) {
-			$('.back').text( text ).click( function( event ) {
+			var back = $('.back');
+
+			if ( text )
+				back.text( text );
+
+			back.on( 'click.back', function( event ) {
 				event.preventDefault();
 				parent.send( 'close' );
 			});
 		});
 
+		// If the current theme isn't active, it will be activated on save,
+		// rendering the previous page
+		api.bind( 'save', function( request ) {
+			request.done( function() {
+				parent.send( 'saved' );
+
+				if ( ! api.settings.theme.active ) {
+					parent.send( 'switched' );
+					$('#save').val( api.l10n.save );
+				}
+
+				api.settings.theme.active = true;
+			});
+		} );
+
 		// Initialize the connection with the parent frame.
 		parent.send( 'ready' );
 

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

@@ -5,7 +5,7 @@ if ( typeof wp === 'undefined' )
 	var api = wp.customize,
 		Loader;
 
-	Loader = {
+	Loader = $.extend( {}, api.Events, {
 		supports: {
 			history:  !! ( window.history && history.pushState ),
 			hashchange: ('onhashchange' in window) && (document.documentMode === undefined || document.documentMode > 7)
@@ -16,6 +16,9 @@ if ( typeof wp === 'undefined' )
 			this.window  = $( window );
 			this.element = $( '<div id="customize-container" class="wp-full-overlay" />' ).appendTo( this.body );
 
+			this.bind( 'open', this.overlay.show );
+			this.bind( 'close', this.overlay.hide );
+
 			$('#wpbody').on( 'click', '.load-customize', function( event ) {
 				event.preventDefault();
 
@@ -30,6 +33,7 @@ if ( typeof wp === 'undefined' )
 			if ( this.supports.hashchange )
 				this.window.on( 'hashchange', Loader.hashchange );
 		},
+
 		popstate: function( e ) {
 			var state = e.originalEvent.state;
 			if ( state && state.customize )
@@ -37,6 +41,7 @@ if ( typeof wp === 'undefined' )
 			else if ( Loader.active )
 				Loader.close();
 		},
+
 		hashchange: function( e ) {
 			var hash = window.location.toString().split('#')[1];
 
@@ -46,9 +51,13 @@ if ( typeof wp === 'undefined' )
 			if ( ! hash && ! Loader.supports.history )
 				Loader.close();
 		},
+
 		open: function( src ) {
+			var hash;
+
 			if ( this.active )
 				return;
+
 			this.active = true;
 			this.body.addClass('customize-loading');
 
@@ -60,7 +69,7 @@ if ( typeof wp === 'undefined' )
 
 			// Wait for the connection from the iframe before sending any postMessage events.
 			this.messenger.bind( 'ready', function() {
-				Loader.messenger.send( 'back', wpCustomizeLoaderL10n.back );
+				Loader.messenger.send( 'back', wpCustomizeLoaderL10n.back || '' );
 			});
 
 			this.messenger.bind( 'close', function() {
@@ -72,35 +81,51 @@ if ( typeof wp === 'undefined' )
 					Loader.close();
 			});
 
-			this.element.fadeIn( 200, function() {
+			hash = src.split('?')[1];
-				var hash = src.split('?')[1];
 
-				Loader.body.addClass( 'customize-active full-overlay-active' );
+			// Ensure we don't call pushState if the user hit the forward button.
+			if ( Loader.supports.history && window.location.href !== src )
+				history.pushState( { customize: src }, '', src );
+			else if ( ! Loader.supports.history && Loader.supports.hashchange && hash )
+				window.location.hash = hash;
 
-				// Ensure we don't call pushState if the user hit the forward button.
+			this.trigger( 'open' );
-				if ( Loader.supports.history && window.location.href !== src )
-					history.pushState( { customize: src }, '', src );
-				else if ( ! Loader.supports.history && Loader.supports.hashchange && hash )
-					window.location.hash = hash;
-			});
 		},
+
+		opened: function() {
+			Loader.body.addClass( 'customize-active full-overlay-active' );
+		},
+
 		close: function() {
 			if ( ! this.active )
 				return;
 			this.active = false;
 
-			this.element.fadeOut( 200, function() {
+			this.trigger( 'close' );
-				Loader.iframe.remove();
-				Loader.messenger.destroy();
-				Loader.iframe    = null;
-				Loader.messenger = null;
-				Loader.body.removeClass( 'customize-active full-overlay-active' ).removeClass( 'customize-loading' );
-			});
 		},
+
+		closed: function() {
+			Loader.iframe.remove();
+			Loader.messenger.destroy();
+			Loader.iframe    = null;
+			Loader.messenger = null;
+			Loader.body.removeClass( 'customize-active full-overlay-active' ).removeClass( 'customize-loading' );
+		},
+
 		loaded: function() {
 			Loader.body.removeClass('customize-loading');
+		},
+
+		overlay: {
+			show: function() {
+				this.element.fadeIn( 200, Loader.opened );
+			},
+
+			hide: function() {
+				this.element.fadeOut( 200, Loader.closed );
+			}
 		}
-	};
+	});
 
 	$( function() {
 		if ( window.postMessage )

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

@@ -34,7 +34,7 @@
 			this.body = $( document.body );
 			this.body.on( 'click.preview', 'a', function( event ) {
 				event.preventDefault();
-				self.send( 'url', $(this).attr('href') );
+				self.send( 'url', $(this).prop('href') );
 			});
 
 			// You cannot submit forms.
@@ -71,7 +71,7 @@
 		preview.bind( 'setting', function( args ) {
 			var value = api( args.shift() );
 			if ( value )
-				value.apply( value, args );
+				value.set.apply( value, args );
 		});
 
 		body = $(document.body);

wp-includes/script-loader.php

@@ -299,8 +299,11 @@ function wp_default_scripts( &$scripts ) {
 
 	$scripts->add( 'customize-base',     "/wp-includes/js/customize-base$suffix.js",     array( 'jquery', 'json2' ), false, 1 );
 	$scripts->add( 'customize-loader',   "/wp-includes/js/customize-loader$suffix.js",   array( 'customize-base' ), false, 1 );
-	$scripts->add( 'customize-controls', "/wp-includes/js/customize-controls$suffix.js", array( 'customize-base' ), false, 1 );
 	$scripts->add( 'customize-preview',  "/wp-includes/js/customize-preview$suffix.js",  array( 'customize-base' ), false, 1 );
+	$scripts->add( 'customize-controls', "/wp-includes/js/customize-controls$suffix.js", array( 'customize-base' ), false, 1 );
+	$scripts->localize( 'customize-controls', '_wpCustomizeControlsL10n', array(
+		'save' => __( 'Save' ),
+	) );
 
 	if ( is_admin() ) {
 		$scripts->add( 'ajaxcat', "/wp-admin/js/cat$suffix.js", array( 'wp-lists' ) );

wp-includes/theme.php

@@ -1589,10 +1589,12 @@ add_action( 'plugins_loaded', '_wp_customize_include' );
  * @since 3.4.0
  */
 function _wp_customize_loader_localize() {
-	wp_localize_script( 'customize-loader', 'wpCustomizeLoaderL10n', array(
+	$l10n = array( 'url'  => admin_url( 'admin.php' ) );
-		'back' => sprintf( __( '← Return to %s' ), get_admin_page_title() ),
+
-		'url'  => admin_url( 'admin.php' ),
+	if ( is_admin() )
-	) );
+		$l10n[ 'back' ] = sprintf( __( '← Return to %s' ), get_admin_page_title() );
+
+	wp_localize_script( 'customize-loader', 'wpCustomizeLoaderL10n', $l10n );
 }
 add_action( 'admin_enqueue_scripts', '_wp_customize_loader_localize' );