Theme Customizer: Allow the customize iframe to be accessed directly (with full feature support). see #19910.

* Move the 'Return to Manage Themes' and 'Collapse Sidebar' actions from themes.php to customize-controls.php.
* Create a postMessage connection between themes.php and customize-controls.php.
* Allow the theme customizer to be accessed directly (independent of themes.php and the customize loader).
* Add wp_customize_href() and wp_customize_url().
* Remove wp_customize_loader(). To include the loader, use wp_enqueue_script( 'customize-loader' ).
* The theme customizer now requires postMessage browser support.
* Add .hide-if-customize and .hide-if-no-customize CSS classes.
* Clean up customize-preview.js.

git-svn-id: http://svn.automattic.com/wordpress/trunk@20476 1a063a9b-81f0-0310-95a4-ce76da25c4cd

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

@@ -182,14 +182,6 @@ body {
 	margin-right: 5px;
 }
 
-#customize-preview {
-	position: fixed;
-	left: 300px;
-	right: 0;
-	top: 0;
-	bottom: 0;
-}
-
 #customize-preview iframe {
 	width: 100%;
 	height: 100%;

wp-includes/customize-controls.php

@@ -50,7 +50,11 @@ do_action( 'customize_controls_print_scripts' );
 		<input type="hidden" id="customize-template" name="template" value="<?php echo esc_attr( $theme['Template'] ); ?>" />
 		<input type="hidden" id="customize-stylesheet" name="stylesheet" value="<?php echo esc_attr( $theme['Stylesheet'] ); ?>" />
 
-		<div id="customize-header-actions" class="customize-section wp-full-overlay-header">&nbsp;</div>
+		<div id="customize-header-actions" class="customize-section wp-full-overlay-header">
+			<a class="back" href="<?php echo esc_url( admin_url( 'themes.php' ) ); ?>">
+				<?php printf( __( '&larr; Return to %s' ), __('Manage Themes') ); ?>
+			</a>
+		</div>
 
 		<div id="customize-info" class="customize-section">
 			<div class="customize-section-title">
@@ -79,6 +83,10 @@ do_action( 'customize_controls_print_scripts' );
 			<?php
 			submit_button( __( 'Save' ), 'primary', 'save', false );
 			?>
+			<a href="#" class="collapse-sidebar button-secondary" title="<?php esc_attr_e('Collapse Sidebar'); ?>">
+				<span class="collapse-sidebar-label"><?php _e('Collapse'); ?></span>
+				<span class="collapse-sidebar-arrow"></span>
+			</a>
 		</div>
 	</form>
 	<div id="customize-preview" class="wp-full-overlay-main">
@@ -95,6 +103,7 @@ do_action( 'customize_controls_print_scripts' );
 		'settings' => array(),
 		'controls' => array(),
 		'prefix'   => WP_Customize_Setting::name_prefix,
+		'parent'   => esc_url( admin_url() ),
 	);
 
 	foreach ( $this->settings as $id => $setting ) {

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

@@ -457,6 +457,8 @@ if ( typeof wp === 'undefined' )
 		send: function( id, data ) {
 			var message;
 
+			data = data || {};
+
 			if ( ! this.url() )
 				return;
 

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

@@ -216,6 +216,8 @@
 		 *  - url    - the URL of preview frame
 		 */
 		initialize: function( params, options ) {
+			var self = this;
+
 			$.extend( this, options || {} );
 
 			this.loaded = $.proxy( this.loaded, this );
@@ -287,6 +289,21 @@
 				if ( 13 === e.which ) // Enter
 					e.preventDefault();
 			});
+
+			// Create a potential postMessage connection with the parent frame.
+			this.parent = new api.Messenger( api.settings.parent );
+
+			// If we receive a 'back' event, we're inside an iframe.
+			// Send any clicks to the 'Return' link to the parent page.
+			this.parent.bind( 'back', function( text ) {
+				self.form.find('.back').text( text ).click( function( event ) {
+					event.preventDefault();
+					self.parent.send( 'close' );
+				});
+			});
+
+			// Initialize the connection with the parent frame.
+			this.parent.send( 'ready' );
 		},
 		loader: function() {
 			if ( this.loading )
@@ -337,11 +354,12 @@
 			return;
 
 		// Initialize Previewer
-		var previewer = new api.Previewer({
-			iframe: '#customize-preview iframe',
-			form:   '#customize-controls',
-			url:    api.settings.preview
-		});
+		var body = $( document.body ),
+			previewer = new api.Previewer({
+				iframe: '#customize-preview iframe',
+				form:   '#customize-controls',
+				url:    api.settings.preview
+			});
 
 		$.each( api.settings.settings, function( id, data ) {
 			api.set( id, id, data.value, {
@@ -380,9 +398,14 @@
 		});
 
 		// Button bindings.
-		$('#save').click( function() {
+		$('#save').click( function( event ) {
 			previewer.submit();
-			return false;
+			event.preventDefault();
+		});
+
+		$('.collapse-sidebar').click( function( event ) {
+			body.toggleClass( 'collapsed' );
+			event.preventDefault();
 		});
 
 		// Background color uses postMessage by default

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

@@ -2,28 +2,35 @@ if ( typeof wp === 'undefined' )
 	var wp = {};
 
 (function( exports, $ ){
-	var Loader = {
+	var api = wp.customize,
+		Loader;
+
+	Loader = {
 		initialize: function() {
-			this.body      = $( document.body );
-			this.element   = $( '#customize-container' );
-			this.base      = $( '.admin-url', this.element ).val();
+			this.body      = $( document.body ).addClass('customize-support');
+			this.element   = $( '<div id="customize-container" class="wp-full-overlay" />' ).appendTo( this.body );
 
-			this.element.on( 'click', '.close-full-overlay', function() {
-				Loader.close();
-				return false;
-			});
+			$('#wpbody').on( 'click', '.load-customize', function( event ) {
+				event.preventDefault();
 
-			this.element.on( 'click', '.collapse-sidebar', function() {
-				Loader.element.toggleClass('collapsed');
-				return false;
+				// Load the theme.
+				Loader.open( $(this).attr('href') );
 			});
 		},
-		open: function( params ) {
-			params.customize = 'on';
+		open: function( src ) {
+			this.iframe = $( '<iframe />', { src: src }).appendTo( this.element );
 
-			this.iframe = $( '<iframe />', {
-				src: this.base + '?' + jQuery.param( params )
-			}).appendTo( this.element );
+			// Create a postMessage connection with the iframe.
+			this.messenger = new api.Messenger( src, this.iframe[0].contentWindow );
+
+			// Wait for the connection from the iframe before sending any postMessage events.
+			this.messenger.bind( 'ready', function() {
+				Loader.messenger.send( 'back', wpCustomizeLoaderL10n.back );
+			});
+
+			this.messenger.bind( 'close', function() {
+				Loader.close();
+			});
 
 			this.element.fadeIn( 200, function() {
 				Loader.body.addClass( 'customize-active full-overlay-active' );
@@ -32,28 +39,18 @@ if ( typeof wp === 'undefined' )
 		close: function() {
 			this.element.fadeOut( 200, function() {
 				Loader.iframe.remove();
-				Loader.iframe = null;
+				Loader.iframe    = null;
+				Loader.messenger = null;
 				Loader.body.removeClass( 'customize-active full-overlay-active' );
 			});
 		}
 	};
 
 	$( function() {
-		Loader.initialize();
-
-		$('#wpbody').on( 'click', '.load-customize', function( event ) {
-			var load = $(this);
-
-			event.preventDefault();
-
-			// Load the theme.
-			Loader.open({
-				template:   load.data('customizeTemplate'),
-				stylesheet: load.data('customizeStylesheet')
-			});
-		});
+		if ( !! window.postMessage )
+			Loader.initialize();
 	});
 
 	// Expose the API to the world.
-	exports.CustomizeLoader = Loader;
+	api.Loader = Loader;
 })( wp, jQuery );

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

@@ -13,9 +13,7 @@
 		initialize: function( url, options ) {
 			var self = this;
 
-			$.extend( this, options || {} );
-
-			api.Messenger.prototype.initialize.call( this, url );
+			api.Messenger.prototype.initialize.call( this, url, null, options );
 
 			this.body = $( document.body );
 			this.body.on( 'click.preview', 'a', function( event ) {
@@ -29,24 +27,6 @@
 			this.body.on( 'submit.preview', 'form', function( event ) {
 				event.preventDefault();
 			});
-
-			this.bind( 'url', function( url ) {
-				this.url( url );
-				this.refresh();
-			});
-		},
-		refresh: function() {
-			this.submit({
-				target: this.iframe.prop('name'),
-				action: this.url()
-			});
-		},
-		submit: function( props ) {
-			if ( props )
-				this.form.prop( props );
-			this.form.submit();
-			if ( props )
-				this.form.prop( this._formOriginalProps );
 		}
 	});
 

wp-includes/script-loader.php

@@ -298,10 +298,10 @@ function wp_default_scripts( &$scripts ) {
 
 	$scripts->add( 'hoverIntent', "/wp-includes/js/hoverIntent$suffix.js", array('jquery'), 'r6', 1 );
 
-	$scripts->add( 'customize-loader', "/wp-includes/js/customize-loader$suffix.js",   array( 'jquery' ), false, 1 );
-	$scripts->add( 'customize-base', "/wp-includes/js/customize-base$suffix.js",       array( 'jquery-postmessage', 'json2' ), false, 1 );
+	$scripts->add( 'customize-base',     "/wp-includes/js/customize-base$suffix.js",     array( 'jquery-postmessage', '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-preview',  "/wp-includes/js/customize-preview$suffix.js",  array( 'customize-base' ), false, 1 );
 
 	if ( is_admin() ) {
 		$scripts->add( 'ajaxcat', "/wp-admin/js/cat$suffix.js", array( 'wp-lists' ) );

wp-includes/theme.php

@@ -1583,30 +1583,33 @@ function _wp_customize_include() {
 add_action( 'plugins_loaded', '_wp_customize_include' );
 
 /**
- * Includes the loading scripts for the theme customizer and
- * adds the action to print the customize container template.
+ * Localizes the customize-loader script.
  *
  * @since 3.4.0
  */
-function wp_customize_loader() {
-	wp_enqueue_script( 'customize-loader' );
-	add_action( 'admin_footer', '_wp_customize_loader_template' );
+function _wp_customize_loader_localize() {
+	wp_localize_script( 'customize-loader', 'wpCustomizeLoaderL10n', array(
+		'back' => sprintf( __( '← Return to %s' ), get_admin_page_title() ),
+	) );
+}
+add_action( 'admin_enqueue_scripts', '_wp_customize_loader_localize' );
+
+/**
+ * Returns a URL to load the theme customizer.
+ *
+ * @since 3.4.0
+ */
+function wp_customize_url( $template, $stylesheet = null ) {
+	$stylesheet = isset( $stylesheet ) ? $stylesheet : $template;
+	return admin_url( 'admin.php' ) . '?customize=on&template=' . $template . '&stylesheet=' . $stylesheet;
 }
 
 /**
- * Print the customize container template.
+ * Prints an href attribute to load the theme customizer.
  *
  * @since 3.4.0
  */
-function _wp_customize_loader_template() {
-	?>
-	<div id="customize-container" class="wp-full-overlay">
-		<input type="hidden" class="admin-url" value="<?php echo esc_url( admin_url( 'admin.php' ) ); ?>" />
-		<a href="#" class="close-full-overlay"><?php printf( __( '&larr; Return to %s' ), get_admin_page_title() ); ?></a>
-		<a href="#" class="collapse-sidebar button-secondary" title="<?php esc_attr_e('Collapse Sidebar'); ?>">
-			<span class="collapse-sidebar-label"><?php _e('Collapse'); ?></span>
-			<span class="collapse-sidebar-arrow"></span>
-		</a>
-	</div>
-	<?php
+function wp_customize_href( $template, $stylesheet = null ) {
+	$link = wp_customize_url( $template, $stylesheet );
+	return 'href="' . esc_url( $link ) . '"';
 }