From a5dacf7da5bb5998fb755de266a2d0c63836bf78 Mon Sep 17 00:00:00 2001 From: koopersmith Date: Mon, 16 Apr 2012 14:02:28 +0000 Subject: [PATCH] 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 | 10 ++++ .../includes/class-wp-themes-list-table.php | 23 +++++--- wp-admin/includes/class-wp-upgrader.php | 14 ++--- wp-admin/themes.php | 4 +- wp-admin/update.php | 6 +- wp-includes/css/customize-controls.dev.css | 8 --- wp-includes/customize-controls.php | 11 +++- wp-includes/js/customize-base.dev.js | 2 + wp-includes/js/customize-controls.dev.js | 37 +++++++++--- wp-includes/js/customize-loader.dev.js | 59 +++++++++---------- wp-includes/js/customize-preview.dev.js | 22 +------ wp-includes/script-loader.php | 6 +- wp-includes/theme.php | 37 ++++++------ 13 files changed, 127 insertions(+), 112 deletions(-) diff --git a/wp-admin/css/wp-admin.dev.css b/wp-admin/css/wp-admin.dev.css index dfe031e11e..f41dd4b243 100644 --- a/wp-admin/css/wp-admin.dev.css +++ b/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; } diff --git a/wp-admin/includes/class-wp-themes-list-table.php b/wp-admin/includes/class-wp-themes-list-table.php index b81461b030..ca29f73749 100644 --- a/wp-admin/includes/class-wp-themes-list-table.php +++ b/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[] = '' . __( 'Activate' ) . ''; - $actions[] = '' . __( 'Preview' ) . '' - . '' . __( 'Customize' ) . ''; + . '' + . __( 'Customize' ) . ''; if ( ! is_multisite() && current_user_can( 'delete_themes' ) ) $actions['delete'] = ' - > - get_screenshot() ) : ?> - - + + + get_screenshot() ) : ?> + + + class="screenshot load-customize hide-if-no-customize"> + get_screenshot() ) : ?> + + + +

diff --git a/wp-admin/includes/class-wp-upgrader.php b/wp-admin/includes/class-wp-upgrader.php index 530c074ee5..88bc933ad7 100644 --- a/wp-admin/includes/class-wp-upgrader.php +++ b/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'] = '' . __('Preview') . ''; - $install_actions['preview'] .= '' . __('Customize') . ''; + $install_actions['preview'] = '' . __('Preview') . ''; + $install_actions['preview'] .= '' . __('Activate') . ''; 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 “%s”' ), $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'] = '' . __('Preview') . ''; - $update_actions['preview'] .= '' . __('Customize') . ''; + $update_actions['preview'] = '' . __('Preview') . ''; + $update_actions['preview'] .= '' . __('Customize') . ''; $update_actions['activate'] = '' . __('Activate') . ''; if ( ( ! $this->result || is_wp_error( $this->result ) ) || $stylesheet == get_stylesheet() ) diff --git a/wp-admin/themes.php b/wp-admin/themes.php index b198b61836..041ddcd919 100644 --- a/wp-admin/themes.php +++ b/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' : '';
- + get_template(), $ct->get_stylesheet() ); ?> class="load-customize hide-if-no-customize" title="get('Name') ) ); ?>"> " /> -
 
+
+ + + +
@@ -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 = $( '