WordPress.org
Get WordPress

Make WordPress Core

Changeset 20476


Ignore:
Timestamp:
04/16/2012 02:02:28 PM (14 years ago)
Author:
koopersmith
Message:

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.
Location:
trunk
Files:
13 edited

Legend:

Unmodified
Added
Removed

  • trunk/wp-admin/css/wp-admin.dev.css

    r20459 r20476  
    53145314------------------------------------------------------------------------------*/
    53155315
     5316.hide-if-no-customize,
     5317.customize-support .hide-if-customize {
     5318        display: none !important;
     5319}
     5320
     5321.hide-if-customize,
     5322.customize-support .hide-if-no-customize {
     5323        display: block !important;
     5324}
     5325
    53165326#customize-container {
    53175327        display: none;

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

    r20455 r20476  
    132132                                home_url( '/' ) ) );
    133133
    134                         $customize_attributes = 'title="' . esc_attr( sprintf( __( 'Customize “%s”' ), $title ) ) . '"
    135                                 . data-customize-template="' . esc_attr( $template ) . '" data-customize-stylesheet="' . esc_attr( $stylesheet ) . '"';
    136 
    137134                        $actions = array();
    138135                        $actions[] = '<a href="' . $activate_link . '" class="activatelink" title="'
    139136                                . esc_attr( sprintf( __( 'Activate &#8220;%s&#8221;' ), $title ) ) . '">' . __( 'Activate' ) . '</a>';
    140                         $actions[] = '<a href="' . $preview_link . '" class="hide-if-js" title="'
     137                        $actions[] = '<a href="' . $preview_link . '" class="hide-if-customize" title="'
    141138                                . esc_attr( sprintf( __( 'Preview &#8220;%s&#8221;' ), $title ) ) . '">' . __( 'Preview' ) . '</a>'
    142                                 . '<a href="#" class="load-customize hide-if-no-js" ' . $customize_attributes . '>' . __( 'Customize' ) . '</a>';
     139                                . '<a ' . wp_customize_href( $template, $stylesheet ) . ' class="load-customize hide-if-no-customize">'
     140                                . __( 'Customize' ) . '</a>';
    143141                        if ( ! is_multisite() && current_user_can( 'delete_themes' ) )
    144142                                $actions['delete'] = '<a class="submitdelete deletion" href="' . wp_nonce_url( "themes.php?action=delete&amp;template=$stylesheet", 'delete-theme_' . $stylesheet )
    … …  
    151149
    152150                        ?>
    153                         <a href="<?php echo $preview_link; ?>" class="load-customize screenshot" <?php echo $customize_attributes; ?>>
    154                         <?php if ( $screenshot = $theme->get_screenshot() ) : ?>
    155                                 <img src="<?php echo esc_url( $screenshot ); ?>" alt="" />
    156                         <?php endif; ?>
     151
     152                        <a href="<?php echo $preview_link; ?>" class="screenshot hide-if-customize">
     153                                <?php if ( $screenshot = $theme->get_screenshot() ) : ?>
     154                                        <img src="<?php echo esc_url( $screenshot ); ?>" alt="" />
     155                                <?php endif; ?>
    157156                        </a>
     157                        <a <?php echo wp_customize_href( $template, $stylesheet ); ?> class="screenshot load-customize hide-if-no-customize">
     158                                <?php if ( $screenshot = $theme->get_screenshot() ) : ?>
     159                                        <img src="<?php echo esc_url( $screenshot ); ?>" alt="" />
     160                                <?php endif; ?>
     161                        </a>
     162
    158163                        <h3><?php echo $title; ?></h3>
    159164                        <div class="theme-author"><?php printf( __( 'By %s' ), $author ); ?></div>

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

    r20419 r20476  
    15081508                ), trailingslashit( get_home_url() ) );
    15091509
    1510                 $customize_attributes = 'title="' . esc_attr( sprintf( __( 'Customize &#8220;%s&#8221;' ), $name ) ) . '"
    1511                         . data-customize-template="' . esc_attr( $template ) . '" data-customize-stylesheet="' . esc_attr( $stylesheet ) . '"';
    1512 
    15131510                $activate_link = add_query_arg( array(
    15141511                        'action'     => 'activate',
    … …  
    15191516
    15201517                $install_actions = array();
    1521                 $install_actions['preview']  = '<a href="' . esc_url( $preview_link ) . '" class="hide-if-js" title="' . esc_attr(sprintf(__('Preview &#8220;%s&#8221;'), $name ) ) . '">' . __('Preview') . '</a>';
    1522                 $install_actions['preview'] .= '<a href="#" class="hide-if-no-js load-customize" ' . $customize_attributes . '>' . __('Customize') . '</a>';
     1518                $install_actions['preview']  = '<a href="' . esc_url( $preview_link ) . '" class="hide-if-customize" title="' . esc_attr(sprintf(__('Preview &#8220;%s&#8221;'), $name ) ) . '">' . __('Preview') . '</a>';
     1519                $install_actions['preview'] .= '<a ' . wp_customize_href( $template, $stylesheet ) . ' class="hide-if-no-customize load-customize>' . __('Customize') . '</a>';
    15231520                $install_actions['activate'] = '<a href="' . esc_url( $activate_link ) . '" class="activatelink" title="' . esc_attr( sprintf( __('Activate &#8220;%s&#8221;'), $name ) ) . '">' . __('Activate') . '</a>';
    15241521
    … …  
    15751572                        ), trailingslashit( get_home_url() ) );
    15761573
    1577                         $customize_attributes = 'title="' . esc_attr( sprintf( __( 'Customize &#8220;%s&#8221;' ), $name ) ) . '"
    1578                                 . data-customize-template="' . esc_attr( $template ) . '" data-customize-stylesheet="' . esc_attr( $stylesheet ) . '"';
    1579 
    15801574                        $activate_link = add_query_arg( array(
    15811575                                'action'     => 'activate',
    … …  
    15851579                        $activate_link = wp_nonce_url( $activate_link, 'switch-theme_' . $template );
    15861580
    1587                         $update_actions['preview']  = '<a href="' . esc_url( $preview_link ) . '" class="hide-if-js" title="' . esc_attr(sprintf(__('Preview &#8220;%s&#8221;'), $name ) ) . '">' . __('Preview') . '</a>';
    1588                         $update_actions['preview'] .= '<a href="#" class="hide-if-no-js load-customize" ' . $customize_attributes . '>' . __('Customize') . '</a>';
     1581                        $update_actions['preview']  = '<a href="' . esc_url( $preview_link ) . '" class="hide-if-customize" title="' . esc_attr(sprintf(__('Preview &#8220;%s&#8221;'), $name ) ) . '">' . __('Preview') . '</a>';
     1582                        $update_actions['preview'] .= '<a ' . wp_customize_href( $template, $stylesheet ) . ' class="hide-if-no-customize load-customize">' . __('Customize') . '</a>';
    15891583                        $update_actions['activate'] = '<a href="' . esc_url( $activate_link ) . '" class="activatelink" title="' . esc_attr( sprintf( __('Activate &#8220;%s&#8221;'), $name ) ) . '">' . __('Activate') . '</a>';
    15901584

  • trunk/wp-admin/themes.php

    r20459 r20476  
    6868
    6969wp_enqueue_script( 'theme' );
    70 wp_customize_loader();
     70wp_enqueue_script( 'customize-loader' );
    7171
    7272endif;
    … …  
    123123
    124124<div class="theme-options">
    125         <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>
     125        <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>
    126126        <span><?php _e( 'Options:' )?></span>
    127127        <?php

  • trunk/wp-admin/update.php

    r20419 r20476  
    153153                check_admin_referer('upgrade-theme_' . $theme);
    154154
    155                 wp_customize_loader();
     155                wp_enqueue_script( 'customize-loader' );
    156156
    157157                $title = __('Update Theme');
    … …  
    205205                        wp_die($api);
    206206
    207                 wp_customize_loader();
     207                wp_enqueue_script( 'customize-loader' );
    208208
    209209                $title = __('Install Themes');
    … …  
    231231                $file_upload = new File_Upload_Upgrader('themezip', 'package');
    232232
    233                 wp_customize_loader();
     233                wp_enqueue_script( 'customize-loader' );
    234234
    235235                $title = __('Upload Theme');

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

    r20456 r20476  
    183183}
    184184
    185 #customize-preview {
    186         position: fixed;
    187         left: 300px;
    188         right: 0;
    189         top: 0;
    190         bottom: 0;
    191 }
    192 
    193185#customize-preview iframe {
    194186        width: 100%;

  • trunk/wp-includes/customize-controls.php

    r20404 r20476  
    5151                <input type="hidden" id="customize-stylesheet" name="stylesheet" value="<?php echo esc_attr( $theme['Stylesheet'] ); ?>" />
    5252
    53                 <div id="customize-header-actions" class="customize-section wp-full-overlay-header">&nbsp;</div>
     53                <div id="customize-header-actions" class="customize-section wp-full-overlay-header">
     54                        <a class="back" href="<?php echo esc_url( admin_url( 'themes.php' ) ); ?>">
     55                                <?php printf( __( '&larr; Return to %s' ), __('Manage Themes') ); ?>
     56                        </a>
     57                </div>
    5458
    5559                <div id="customize-info" class="customize-section">
    … …  
    8084                        submit_button( __( 'Save' ), 'primary', 'save', false );
    8185                        ?>
     86                        <a href="#" class="collapse-sidebar button-secondary" title="<?php esc_attr_e('Collapse Sidebar'); ?>">
     87                                <span class="collapse-sidebar-label"><?php _e('Collapse'); ?></span>
     88                                <span class="collapse-sidebar-arrow"></span>
     89                        </a>
    8290                </div>
    8391        </form>
    … …  
    96104                'controls' => array(),
    97105                'prefix'   => WP_Customize_Setting::name_prefix,
     106                'parent'   => esc_url( admin_url() ),
    98107        );
    99108

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

    r20344 r20476  
    458458                        var message;
    459459
     460                        data = data || {};
     461
    460462                        if ( ! this.url() )
    461463                                return;

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

    r20344 r20476  
    217217                 */
    218218                initialize: function( params, options ) {
     219                        var self = this;
     220
    219221                        $.extend( this, options || {} );
    220222
    … …  
    288290                                        e.preventDefault();
    289291                        });
     292
     293                        // Create a potential postMessage connection with the parent frame.
     294                        this.parent = new api.Messenger( api.settings.parent );
     295
     296                        // If we receive a 'back' event, we're inside an iframe.
     297                        // Send any clicks to the 'Return' link to the parent page.
     298                        this.parent.bind( 'back', function( text ) {
     299                                self.form.find('.back').text( text ).click( function( event ) {
     300                                        event.preventDefault();
     301                                        self.parent.send( 'close' );
     302                                });
     303                        });
     304
     305                        // Initialize the connection with the parent frame.
     306                        this.parent.send( 'ready' );
    290307                },
    291308                loader: function() {
    … …  
    338355
    339356                // Initialize Previewer
    340                 var previewer = new api.Previewer({
    341                         iframe: '#customize-preview iframe',
    342                         form:   '#customize-controls',
    343                         url:    api.settings.preview
    344                 });
     357                var body = $( document.body ),
     358                        previewer = new api.Previewer({
     359                                iframe: '#customize-preview iframe',
     360                                form:   '#customize-controls',
     361                                url:    api.settings.preview
     362                        });
    345363
    346364                $.each( api.settings.settings, function( id, data ) {
    … …  
    381399
    382400                // Button bindings.
    383                 $('#save').click( function() {
     401                $('#save').click( function( event ) {
    384402                        previewer.submit();
    385                         return false;
     403                        event.preventDefault();
     404                });
     405
     406                $('.collapse-sidebar').click( function( event ) {
     407                        body.toggleClass( 'collapsed' );
     408                        event.preventDefault();
    386409                });
    387410

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

    r20419 r20476  
    33
    44(function( exports, $ ){
    5         var Loader = {
     5        var api = wp.customize,
     6                Loader;
     7
     8        Loader = {
    69                initialize: function() {
    7                         this.body      = $( document.body );
    8                         this.element   = $( '#customize-container' );
    9                         this.base      = $( '.admin-url', this.element ).val();
     10                        this.body      = $( document.body ).addClass('customize-support');
     11                        this.element   = $( '<div id="customize-container" class="wp-full-overlay" />' ).appendTo( this.body );
    1012
    11                         this.element.on( 'click', '.close-full-overlay', function() {
    12                                 Loader.close();
    13                                 return false;
     13                        $('#wpbody').on( 'click', '.load-customize', function( event ) {
     14                                event.preventDefault();
     15
     16                                // Load the theme.
     17                                Loader.open( $(this).attr('href') );
     18                        });
     19                },
     20                open: function( src ) {
     21                        this.iframe = $( '<iframe />', { src: src }).appendTo( this.element );
     22
     23                        // Create a postMessage connection with the iframe.
     24                        this.messenger = new api.Messenger( src, this.iframe[0].contentWindow );
     25
     26                        // Wait for the connection from the iframe before sending any postMessage events.
     27                        this.messenger.bind( 'ready', function() {
     28                                Loader.messenger.send( 'back', wpCustomizeLoaderL10n.back );
    1429                        });
    1530
    16                         this.element.on( 'click', '.collapse-sidebar', function() {
    17                                 Loader.element.toggleClass('collapsed');
    18                                 return false;
     31                        this.messenger.bind( 'close', function() {
     32                                Loader.close();
    1933                        });
    20                 },
    21                 open: function( params ) {
    22                         params.customize = 'on';
    23 
    24                         this.iframe = $( '<iframe />', {
    25                                 src: this.base + '?' + jQuery.param( params )
    26                         }).appendTo( this.element );
    2734
    2835                        this.element.fadeIn( 200, function() {
    … …  
    3340                        this.element.fadeOut( 200, function() {
    3441                                Loader.iframe.remove();
    35                                 Loader.iframe = null;
     42                                Loader.iframe    = null;
     43                                Loader.messenger = null;
    3644                                Loader.body.removeClass( 'customize-active full-overlay-active' );
    3745                        });
    … …  
    4048
    4149        $( function() {
    42                 Loader.initialize();
    43 
    44                 $('#wpbody').on( 'click', '.load-customize', function( event ) {
    45                         var load = $(this);
    46 
    47                         event.preventDefault();
    48 
    49                         // Load the theme.
    50                         Loader.open({
    51                                 template:   load.data('customizeTemplate'),
    52                                 stylesheet: load.data('customizeStylesheet')
    53                         });
    54                 });
     50                if ( !! window.postMessage )
     51                        Loader.initialize();
    5552        });
    5653
    5754        // Expose the API to the world.
    58         exports.CustomizeLoader = Loader;
     55        api.Loader = Loader;
    5956})( wp, jQuery );

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

    r20259 r20476  
    1414                        var self = this;
    1515
    16                         $.extend( this, options || {} );
    17 
    18                         api.Messenger.prototype.initialize.call( this, url );
     16                        api.Messenger.prototype.initialize.call( this, url, null, options );
    1917
    2018                        this.body = $( document.body );
    … …  
    3028                                event.preventDefault();
    3129                        });
    32 
    33                         this.bind( 'url', function( url ) {
    34                                 this.url( url );
    35                                 this.refresh();
    36                         });
    37                 },
    38                 refresh: function() {
    39                         this.submit({
    40                                 target: this.iframe.prop('name'),
    41                                 action: this.url()
    42                         });
    43                 },
    44                 submit: function( props ) {
    45                         if ( props )
    46                                 this.form.prop( props );
    47                         this.form.submit();
    48                         if ( props )
    49                                 this.form.prop( this._formOriginalProps );
    5030                }
    5131        });

  • trunk/wp-includes/script-loader.php

    r20456 r20476  
    299299        $scripts->add( 'hoverIntent', "/wp-includes/js/hoverIntent$suffix.js", array('jquery'), 'r6', 1 );
    300300
    301         $scripts->add( 'customize-loader', "/wp-includes/js/customize-loader$suffix.js",   array( 'jquery' ), false, 1 );
    302         $scripts->add( 'customize-base', "/wp-includes/js/customize-base$suffix.js",       array( 'jquery-postmessage', 'json2' ), false, 1 );
     301        $scripts->add( 'customize-base',     "/wp-includes/js/customize-base$suffix.js",     array( 'jquery-postmessage', 'json2' ), false, 1 );
     302        $scripts->add( 'customize-loader',   "/wp-includes/js/customize-loader$suffix.js",   array( 'customize-base' ), false, 1 );
    303303        $scripts->add( 'customize-controls', "/wp-includes/js/customize-controls$suffix.js", array( 'customize-base' ), false, 1 );
    304         $scripts->add( 'customize-preview', "/wp-includes/js/customize-preview$suffix.js",  array( 'customize-base' ), false, 1 );
     304        $scripts->add( 'customize-preview',  "/wp-includes/js/customize-preview$suffix.js",  array( 'customize-base' ), false, 1 );
    305305
    306306        if ( is_admin() ) {

  • trunk/wp-includes/theme.php

    r20419 r20476  
    15841584
    15851585/**
    1586  * Includes the loading scripts for the theme customizer and
    1587  * adds the action to print the customize container template.
     1586 * Localizes the customize-loader script.
    15881587 *
    15891588 * @since 3.4.0
    15901589 */
    1591 function wp_customize_loader() {
    1592         wp_enqueue_script( 'customize-loader' );
    1593         add_action( 'admin_footer', '_wp_customize_loader_template' );
    1594 }
    1595 
    1596 /**
    1597  * Print the customize container template.
     1590function _wp_customize_loader_localize() {
     1591        wp_localize_script( 'customize-loader', 'wpCustomizeLoaderL10n', array(
     1592                'back' => sprintf( __( '&larr; Return to %s' ), get_admin_page_title() ),
     1593        ) );
     1594}
     1595add_action( 'admin_enqueue_scripts', '_wp_customize_loader_localize' );
     1596
     1597/**
     1598 * Returns a URL to load the theme customizer.
    15981599 *
    15991600 * @since 3.4.0
    16001601 */
    1601 function _wp_customize_loader_template() {
    1602         ?>
    1603         <div id="customize-container" class="wp-full-overlay">
    1604                 <input type="hidden" class="admin-url" value="<?php echo esc_url( admin_url( 'admin.php' ) ); ?>" />
    1605                 <a href="#" class="close-full-overlay"><?php printf( __( '&larr; Return to %s' ), get_admin_page_title() ); ?></a>
    1606                 <a href="#" class="collapse-sidebar button-secondary" title="<?php esc_attr_e('Collapse Sidebar'); ?>">
    1607                         <span class="collapse-sidebar-label"><?php _e('Collapse'); ?></span>
    1608                         <span class="collapse-sidebar-arrow"></span>
    1609                 </a>
    1610         </div>
    1611         <?php
    1612 }
     1602function wp_customize_url( $template, $stylesheet = null ) {
     1603        $stylesheet = isset( $stylesheet ) ? $stylesheet : $template;
     1604        return admin_url( 'admin.php' ) . '?customize=on&template=' . $template . '&stylesheet=' . $stylesheet;
     1605}
     1606
     1607/**
     1608 * Prints an href attribute to load the theme customizer.
     1609 *
     1610 * @since 3.4.0
     1611 */
     1612function wp_customize_href( $template, $stylesheet = null ) {
     1613        $link = wp_customize_url( $template, $stylesheet );
     1614        return 'href="' . esc_url( $link ) . '"';
     1615}
Note: See TracChangeset for help on using the changeset viewer.