Theme Customizer: Improve activate and publish flow, make customizer states easier to track. fixes #20743, see #19910.

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

wp-admin/customize.php

@@ -130,6 +130,7 @@ do_action( 'customize_controls_print_scripts' );
 		'url'      => array(
 			'preview'       => esc_url( home_url( '/' ) ),
 			'parent'        => esc_url( admin_url() ),
+			'activated'     => esc_url( admin_url( 'themes.php?activated=true' ) ),
 			'ajax'          => esc_url( admin_url( 'admin-ajax.php', 'relative' ) ),
 			'allowed'       => array_map( 'esc_url', $allowed_urls ),
 			'isCrossDomain' => $cross_domain,

wp-admin/js/theme.dev.js

@@ -18,35 +18,6 @@ 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/js/customize-controls.dev.js

@@ -439,13 +439,14 @@
 		api.settings = window._wpCustomizeSettings;
 		api.l10n = window._wpCustomizeControlsL10n;
 
+		// Check if we can run the customizer.
 		if ( ! api.settings )
 			return;
 
+		// Redirect to the fallback preview if any incompatibilities are found.
 		if ( ! $.support.postMessage || ( ! $.support.cors && api.settings.isCrossDomain ) )
 			return window.location = api.settings.url.fallback;
 
-		// Initialize Previewer
 		var body = $( document.body ),
 			query, previewer, parent;
 
@@ -455,6 +456,7 @@
 				e.preventDefault();
 		});
 
+		// Initialize Previewer
 		previewer = new api.Previewer({
 			container:   '#customize-preview',
 			form:        '#customize-controls',
@@ -481,9 +483,14 @@
 				api.trigger( 'save', request );
 
 				body.addClass('saving');
+
 				request.always( function() {
 					body.removeClass('saving');
 				});
+
+				request.done( function() {
+					api.trigger( 'saved' );
+				});
 			}
 		});
 
@@ -507,6 +514,57 @@
 		// Load the preview frame.
 		previewer.refresh();
 
+		// Save and activated states
+		(function() {
+			var state = new api.Values(),
+				saved = state.create('saved'),
+				activated = state.create('activated');
+
+			state.bind( 'change', function() {
+				var save = $('#save'),
+					back = $('.back');
+
+				if ( ! activated() ) {
+					save.val( api.l10n.activate ).prop( 'disabled', false );
+					back.text( api.l10n.cancel );
+
+				} else if ( saved() ) {
+					save.val( api.l10n.saved ).prop( 'disabled', true );
+					back.text( api.l10n.close );
+
+				} else {
+					save.val( api.l10n.save ).prop( 'disabled', false );
+					back.text( api.l10n.cancel );
+				}
+			});
+
+			// Set default states.
+			saved( true );
+			activated( api.settings.theme.active );
+
+			api.bind( 'change', function() {
+				state('saved').set( false );
+			});
+
+			api.bind( 'saved', function() {
+				state('saved').set( true );
+				state('activated').set( true );
+			});
+
+			activated.bind( function( to ) {
+				if ( to )
+					api.trigger( 'activated' );
+			});
+
+			// Expose states to the API.
+			api.state = state;
+		}());
+
+		api.bind( 'activated', function() {
+			if ( api.settings.url.activated )
+				window.location = api.settings.url.activated;
+		});
+
 		// Temporary accordion code.
 		$('.customize-section-title').click( function() {
 			var clicked = $( this ).parents( '.customize-section' );
@@ -538,20 +596,12 @@
 			});
 		});
 
-		// If the current theme isn't active, it will be activated on save,
+		// Pass events through to the parent.
-		// rendering the previous page
+		$.each([ 'saved', 'activated' ], function( i, id ) {
-		api.bind( 'save', function( request ) {
+			api.bind( id, function() {
-			request.done( function() {
+				parent.send( id );
-				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/script-loader.php

@@ -302,7 +302,11 @@ function wp_default_scripts( &$scripts ) {
 	$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 & Publish' ),
+		'activate'  => __( 'Save & Activate' ),
+		'save'      => __( 'Save & Publish' ),
+		'saved'     => __( 'Saved' ),
+		'cancel'    => __( 'Cancel' ),
+		'close'     => __( 'Close' ),
 	) );
 
 	if ( is_admin() ) {