WordPress.org
Get WordPress

Make WordPress Core

Changeset 20476


Ignore:
Timestamp:
04/16/2012 02:02:28 PM (13 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.