@@ -79,6 +83,10 @@ do_action( 'customize_controls_print_scripts' );
+
@@ -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 ) {
diff --git a/wp-includes/js/customize-base.dev.js b/wp-includes/js/customize-base.dev.js
index 73959e3707..f10003a1cc 100644
--- a/wp-includes/js/customize-base.dev.js
+++ b/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;
diff --git a/wp-includes/js/customize-controls.dev.js b/wp-includes/js/customize-controls.dev.js
index 392573374e..ee8da2fea8 100644
--- a/wp-includes/js/customize-controls.dev.js
+++ b/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
diff --git a/wp-includes/js/customize-loader.dev.js b/wp-includes/js/customize-loader.dev.js
index ec9580781b..1e10327656 100644
--- a/wp-includes/js/customize-loader.dev.js
+++ b/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 = $( '
' ).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 = $( '
', { src: src }).appendTo( this.element );
- this.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 );
diff --git a/wp-includes/js/customize-preview.dev.js b/wp-includes/js/customize-preview.dev.js
index 836d265749..d416d69ef5 100644
--- a/wp-includes/js/customize-preview.dev.js
+++ b/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 );
}
});
diff --git a/wp-includes/script-loader.php b/wp-includes/script-loader.php
index d5b293075d..96225b8063 100644
--- a/wp-includes/script-loader.php
+++ b/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' ) );
diff --git a/wp-includes/theme.php b/wp-includes/theme.php
index 72fa46f33b..a897876a2b 100644
--- a/wp-includes/theme.php
+++ b/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() {
- ?>
-
-