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-admin/css/wp-admin.dev.css

@@ -5313,6 +5313,16 @@ body.full-overlay-active {
   24.0 - Customize Loader
 ------------------------------------------------------------------------------*/
 
+.hide-if-no-customize,
+.customize-support .hide-if-customize {
+	display: none !important;
+}
+
+.hide-if-customize,
+.customize-support .hide-if-no-customize {
+	display: block !important;
+}
+
 #customize-container {
 	display: none;
 }

wp-admin/includes/class-wp-themes-list-table.php

@@ -131,15 +131,13 @@ class WP_Themes_List_Table extends WP_List_Table {
 				array( 'preview' => 1, 'template' => $template, 'stylesheet' => $stylesheet, 'preview_iframe' => true, 'TB_iframe' => 'true' ),
 				home_url( '/' ) ) );
 
-			$customize_attributes = 'title="' . esc_attr( sprintf( __( 'Customize “%s”' ), $title ) ) . '"
-				. data-customize-template="' . esc_attr( $template ) . '" data-customize-stylesheet="' . esc_attr( $stylesheet ) . '"';
-
 			$actions = array();
 			$actions[] = '<a href="' . $activate_link . '" class="activatelink" title="'
 				. esc_attr( sprintf( __( 'Activate &#8220;%s&#8221;' ), $title ) ) . '">' . __( 'Activate' ) . '</a>';
-			$actions[] = '<a href="' . $preview_link . '" class="hide-if-js" title="'
+			$actions[] = '<a href="' . $preview_link . '" class="hide-if-customize" title="'
 				. esc_attr( sprintf( __( 'Preview &#8220;%s&#8221;' ), $title ) ) . '">' . __( 'Preview' ) . '</a>'
-				. '<a href="#" class="load-customize hide-if-no-js" ' . $customize_attributes . '>' . __( 'Customize' ) . '</a>';
+				. '<a ' . wp_customize_href( $template, $stylesheet ) . ' class="load-customize hide-if-no-customize">'
+				. __( 'Customize' ) . '</a>';
 			if ( ! is_multisite() && current_user_can( 'delete_themes' ) )
 				$actions['delete'] = '<a class="submitdelete deletion" href="' . wp_nonce_url( "themes.php?action=delete&amp;template=$stylesheet", 'delete-theme_' . $stylesheet )
 					. '" onclick="' . "return confirm( '" . esc_js( sprintf( __( "You are about to delete this theme '%s'\n  'Cancel' to stop, 'OK' to delete." ), $title ) )
@@ -150,11 +148,18 @@ class WP_Themes_List_Table extends WP_List_Table {
 			unset( $actions['delete'] );
 
 			?>
-			<a href="<?php echo $preview_link; ?>" class="load-customize screenshot" <?php echo $customize_attributes; ?>>
+
-			<?php if ( $screenshot = $theme->get_screenshot() ) : ?>
+			<a href="<?php echo $preview_link; ?>" class="screenshot hide-if-customize">
-				<img src="<?php echo esc_url( $screenshot ); ?>" alt="" />
+				<?php if ( $screenshot = $theme->get_screenshot() ) : ?>
-			<?php endif; ?>
+					<img src="<?php echo esc_url( $screenshot ); ?>" alt="" />
+				<?php endif; ?>
 			</a>
+			<a <?php echo wp_customize_href( $template, $stylesheet ); ?> class="screenshot load-customize hide-if-no-customize">
+				<?php if ( $screenshot = $theme->get_screenshot() ) : ?>
+					<img src="<?php echo esc_url( $screenshot ); ?>" alt="" />
+				<?php endif; ?>
+			</a>
+
 			<h3><?php echo $title; ?></h3>
 			<div class="theme-author"><?php printf( __( 'By %s' ), $author ); ?></div>
 			<div class="action-links">

wp-admin/includes/class-wp-upgrader.php

@@ -1507,9 +1507,6 @@ class Theme_Installer_Skin extends WP_Upgrader_Skin {
 			'stylesheet' => $stylesheet,
 		), trailingslashit( get_home_url() ) );
 
-		$customize_attributes = 'title="' . esc_attr( sprintf( __( 'Customize “%s”' ), $name ) ) . '"
-			. data-customize-template="' . esc_attr( $template ) . '" data-customize-stylesheet="' . esc_attr( $stylesheet ) . '"';
-
 		$activate_link = add_query_arg( array(
 			'action'     => 'activate',
 			'template'   => $template,
@@ -1518,8 +1515,8 @@ class Theme_Installer_Skin extends WP_Upgrader_Skin {
 		$activate_link = wp_nonce_url( $activate_link, 'switch-theme_' . $template );
 
 		$install_actions = array();
-		$install_actions['preview']  = '<a href="' . esc_url( $preview_link ) . '" class="hide-if-js" title="' . esc_attr(sprintf(__('Preview &#8220;%s&#8221;'), $name ) ) . '">' . __('Preview') . '</a>';
+		$install_actions['preview']  = '<a href="' . esc_url( $preview_link ) . '" class="hide-if-customize" title="' . esc_attr(sprintf(__('Preview &#8220;%s&#8221;'), $name ) ) . '">' . __('Preview') . '</a>';
-		$install_actions['preview'] .= '<a href="#" class="hide-if-no-js load-customize" ' . $customize_attributes . '>' . __('Customize') . '</a>';
+		$install_actions['preview'] .= '<a ' . wp_customize_href( $template, $stylesheet ) . ' class="hide-if-no-customize load-customize>' . __('Customize') . '</a>';
 		$install_actions['activate'] = '<a href="' . esc_url( $activate_link ) . '" class="activatelink" title="' . esc_attr( sprintf( __('Activate &#8220;%s&#8221;'), $name ) ) . '">' . __('Activate') . '</a>';
 
 		if ( is_network_admin() && current_user_can( 'manage_network_themes' ) )
@@ -1574,9 +1571,6 @@ class Theme_Upgrader_Skin extends WP_Upgrader_Skin {
 				'stylesheet' => $stylesheet,
 			), trailingslashit( get_home_url() ) );
 
-			$customize_attributes = 'title="' . esc_attr( sprintf( __( 'Customize &#8220;%s&#8221;' ), $name ) ) . '"
-				. data-customize-template="' . esc_attr( $template ) . '" data-customize-stylesheet="' . esc_attr( $stylesheet ) . '"';
-
 			$activate_link = add_query_arg( array(
 				'action'     => 'activate',
 				'template'   => $template,
@@ -1584,8 +1578,8 @@ class Theme_Upgrader_Skin extends WP_Upgrader_Skin {
 			), admin_url('themes.php') );
 			$activate_link = wp_nonce_url( $activate_link, 'switch-theme_' . $template );
 
-			$update_actions['preview']  = '<a href="' . esc_url( $preview_link ) . '" class="hide-if-js" title="' . esc_attr(sprintf(__('Preview &#8220;%s&#8221;'), $name ) ) . '">' . __('Preview') . '</a>';
+			$update_actions['preview']  = '<a href="' . esc_url( $preview_link ) . '" class="hide-if-customize" title="' . esc_attr(sprintf(__('Preview &#8220;%s&#8221;'), $name ) ) . '">' . __('Preview') . '</a>';
-			$update_actions['preview'] .= '<a href="#" class="hide-if-no-js load-customize" ' . $customize_attributes . '>' . __('Customize') . '</a>';
+			$update_actions['preview'] .= '<a ' . wp_customize_href( $template, $stylesheet ) . ' class="hide-if-no-customize load-customize">' . __('Customize') . '</a>';
 			$update_actions['activate'] = '<a href="' . esc_url( $activate_link ) . '" class="activatelink" title="' . esc_attr( sprintf( __('Activate &#8220;%s&#8221;'), $name ) ) . '">' . __('Activate') . '</a>';
 
 			if ( ( ! $this->result || is_wp_error( $this->result ) ) || $stylesheet == get_stylesheet() )

wp-admin/themes.php

@@ -67,7 +67,7 @@ get_current_screen()->set_help_sidebar(
 );
 
 wp_enqueue_script( 'theme' );
-wp_customize_loader();
+wp_enqueue_script( 'customize-loader' );
 
 endif;
 
@@ -122,7 +122,7 @@ $class = $screenshot ? 'has-screenshot' : '';
 	</div>
 
 <div class="theme-options">
-	<a href="#" class="load-customize hide-if-no-js" data-customize-template="<?php echo esc_attr( $ct->get_template() ); ?>" data-customize-stylesheet="<?php echo esc_attr( $ct->get_stylesheet() ); ?>" title="<?php echo esc_attr( sprintf( __( 'Customize &#8220;%s&#8221;' ), $ct->get('Name') ) ); ?>"><?php _e( 'Customize' )?></a>
+	<a <?php echo wp_customize_href( $ct->get_template(), $ct->get_stylesheet() ); ?> class="load-customize hide-if-no-customize" title="<?php echo esc_attr( sprintf( __( 'Customize &#8220;%s&#8221;' ), $ct->get('Name') ) ); ?>"><?php _e( 'Customize' )?></a>
 	<span><?php _e( 'Options:' )?></span>
 	<?php
 	// Pretend you didn't see this.

wp-admin/update.php

@@ -152,7 +152,7 @@ if ( isset($_GET['action']) ) {
 
 		check_admin_referer('upgrade-theme_' . $theme);
 
-		wp_customize_loader();
+		wp_enqueue_script( 'customize-loader' );
 
 		$title = __('Update Theme');
 		$parent_file = 'themes.php';
@@ -204,7 +204,7 @@ if ( isset($_GET['action']) ) {
 		if ( is_wp_error($api) )
 	 		wp_die($api);
 
-	 	wp_customize_loader();
+		wp_enqueue_script( 'customize-loader' );
 
 		$title = __('Install Themes');
 		$parent_file = 'themes.php';
@@ -230,7 +230,7 @@ if ( isset($_GET['action']) ) {
 
 		$file_upload = new File_Upload_Upgrader('themezip', 'package');
 
-		wp_customize_loader();
+		wp_enqueue_script( 'customize-loader' );
 
 		$title = __('Upload Theme');
 		$parent_file = 'themes.php';

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({
+		var body = $( document.body ),
-			iframe: '#customize-preview iframe',
+			previewer = new api.Previewer({
-			form:   '#customize-controls',
+				iframe: '#customize-preview iframe',
-			url:    api.settings.preview
+				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.body      = $( document.body ).addClass('customize-support');
-			this.element   = $( '#customize-container' );
+			this.element   = $( '<div id="customize-container" class="wp-full-overlay" />' ).appendTo( this.body );
-			this.base      = $( '.admin-url', this.element ).val();
 
-			this.element.on( 'click', '.close-full-overlay', function() {
+			$('#wpbody').on( 'click', '.load-customize', function( event ) {
-				Loader.close();
+				event.preventDefault();
-				return false;
-			});
 
-			this.element.on( 'click', '.collapse-sidebar', function() {
+				// Load the theme.
-				Loader.element.toggleClass('collapsed');
+				Loader.open( $(this).attr('href') );
-				return false;
 			});
 		},
-		open: function( params ) {
+		open: function( src ) {
-			params.customize = 'on';
+			this.iframe = $( '<iframe />', { src: src }).appendTo( this.element );
 
-			this.iframe = $( '<iframe />', {
+			// Create a postMessage connection with the iframe.
-				src: this.base + '?' + jQuery.param( params )
+			this.messenger = new api.Messenger( src, this.iframe[0].contentWindow );
-			}).appendTo( this.element );
+
+			// 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();
+		if ( !! window.postMessage )
-
+			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')
-			});
-		});
 	});
 
 	// 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, null, options );
-
-			api.Messenger.prototype.initialize.call( this, url );
 
 			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
+ * Localizes the customize-loader script.
- * adds the action to print the customize container template.
  *
  * @since 3.4.0
  */
-function wp_customize_loader() {
+function _wp_customize_loader_localize() {
-	wp_enqueue_script( 'customize-loader' );
+	wp_localize_script( 'customize-loader', 'wpCustomizeLoaderL10n', array(
-	add_action( 'admin_footer', '_wp_customize_loader_template' );
+		'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() {
+function wp_customize_href( $template, $stylesheet = null ) {
-	?>
+	$link = wp_customize_url( $template, $stylesheet );
-	<div id="customize-container" class="wp-full-overlay">
+	return 'href="' . esc_url( $link ) . '"';
-		<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
 }