WordPress.org
Get WordPress

Make WordPress Core

Changeset 20645


Ignore:
Timestamp:
04/30/2012 03:46:17 PM (13 years ago)
Author:
koopersmith
Message:

Theme Customizer: Migrate to an ajax-based solution for refreshing the preview and saving. see #20507, #19910.

  • Use ajax-based saving, add saving indicator.
  • Use ajax-based refreshing instead of form targets.
  • Instead of using hidden inputs with prefixed names to track the canonical data, use the values stored in wp.customize. Encode the values as JSON before sending to avoid bugs with ids that contain square brackets (PHP mangles POST values with nested brackets).
  • Use wp.customize.Previewer solely for the purpose of previewing; move the postMessage connection with the parent frame and other unrelated code snippets into the 'ready' handler.
Location:
trunk/wp-includes
Files:
6 edited

Legend:

Unmodified
Added
Removed

  • trunk/wp-includes/class-wp-customize-setting.php

    r20585 r20645  
    2222    private $_post_value; // Cached, sanitized $_POST value.
    2323
    24     // Prefix for $_POST values to prevent naming conflicts.
    25     const name_prefix = 'customize_';
    26 
    2724    /**
    2825     * Constructor.
    … …  
    122119            return $this->_post_value;
    123120
    124         $base = self::name_prefix . $this->id_data[ 'base' ];
    125 
    126         if ( ! isset( $_POST[ $base ] ) )
    127             return $default;
    128 
    129         $result = $this->multidimensional_get( $_POST[ $base ], $this->id_data[ 'keys' ] );
    130         if ( ! isset( $result ) )
    131             return $default;
    132 
    133         $result = $this->sanitize( $result );
     121        $result = $this->manager->post_value( $this );
     122
    134123        if ( isset( $result ) )
    135124            return $this->_post_value = $result;

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

    r20598 r20645  
    1818    protected $controls = array();
    1919
     20    protected $customized;
     21
     22    private $_post_values;
     23
    2024    /**
    2125     * Constructor.
    … …  
    3135        add_action( 'admin_init',   array( $this, 'admin_init' ) );
    3236        add_action( 'wp_loaded',    array( $this, 'wp_loaded' ) );
     37
     38        add_action( 'wp_ajax_customize_save', array( $this, 'save' ) );
    3339
    3440        add_action( 'customize_register',                 array( $this, 'register_controls' ) );
    … …  
    150156
    151157    /**
     158     * Decode the $_POST attribute used to override the WP_Customize_Setting values.
     159     *
     160     * @since 3.4.0
     161     */
     162    public function post_value( $setting ) {
     163        if ( ! isset( $this->_post_values ) ) {
     164            if ( isset( $_POST['customized'] ) )
     165                $this->_post_values = json_decode( stripslashes( $_POST['customized'] ), true );
     166            else
     167                $this->_post_values = false;
     168        }
     169
     170        if ( isset( $this->_post_values[ $setting->id ] ) )
     171            return $setting->sanitize( $this->_post_values[ $setting->id ] );
     172    }
     173
     174
     175    /**
    152176     * Print javascript settings.
    153177     *
    … …  
    268292     */
    269293    public function admin_init() {
    270         if ( isset( $_REQUEST['save_customize_controls'] ) )
    271             $this->save();
    272 
    273294        if ( ( defined( 'DOING_AJAX' ) && DOING_AJAX ) )
    274295            return;
    … …  
    298319    public function save() {
    299320        if ( ! $this->is_preview() )
    300             return;
    301 
    302         check_admin_referer( 'customize_controls' );
     321            die;
     322
     323        check_ajax_referer( 'customize_controls', 'nonce' );
    303324
    304325        // Do we have to switch themes?
    305326        if ( $this->get_stylesheet() != $this->original_stylesheet ) {
    306327            if ( ! current_user_can( 'switch_themes' ) )
    307                 return;
     328                die;
    308329
    309330            // Temporarily stop previewing the theme to allow switch_themes()
    … …  
    321342
    322343        add_action( 'admin_notices', array( $this, '_save_feedback' ) );
     344
     345        die;
    323346    }
    324347

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

    r20598 r20645  
    127127#customize-theme-controls .customize-section-content {
    128128    margin: 0;
     129}
     130
     131#customize-footer-actions img {
     132    display: none;
     133    position: absolute;
     134    top: 18px;
     135    margin-left: 4px;
     136}
     137.saving #customize-footer-actions img {
     138    display: inline;
    129139}
    130140

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

    r20585 r20645  
    4242</head>
    4343<body class="wp-full-overlay">
    44     <form id="customize-controls" method="post" class="wrap wp-full-overlay-sidebar" target="_parent" action="<?php echo esc_url( add_query_arg( 'save_customize_controls', '1', admin_url( 'themes.php' ) ) ); ?>">
     44    <form id="customize-controls" class="wrap wp-full-overlay-sidebar">
    4545        <?php wp_nonce_field( 'customize_controls' ); ?>
    46         <input type="hidden" name="customize" value="on" />
    47         <input type="hidden" name="theme" value="<?php echo esc_attr( $this->get_stylesheet() ); ?>" />
    4846        <div id="customize-header-actions" class="customize-section wp-full-overlay-header">
    4947            <a class="back" href="<?php echo esc_url( admin_url( 'themes.php' ) ); ?>">
    … …  
    8078            submit_button( $save_text, 'primary', 'save', false );
    8179            ?>
     80            <img src="<?php echo esc_url( admin_url( 'images/wpspin_light.gif' ) ); ?>" />
     81
    8282            <a href="#" class="collapse-sidebar button-secondary" title="<?php esc_attr_e('Collapse Sidebar'); ?>">
    8383                <span class="collapse-sidebar-label"><?php _e('Collapse'); ?></span>
    … …  
    8686        </div>
    8787    </form>
    88     <div id="customize-preview" class="wp-full-overlay-main">
    89         <iframe name="customize-target"></iframe>
    90     </div>
     88    <div id="customize-preview" class="wp-full-overlay-main"></div>
    9189    <?php
    9290
    … …  
    9694    $scheme = is_ssl() ? 'https' : 'http';
    9795    $settings = array(
     96        'theme'    => $this->get_stylesheet(),
    9897        'preview'  => esc_url( home_url( '/', $scheme ) ),
    9998        'settings' => array(),
    10099        'controls' => array(),
    101         'prefix'   => WP_Customize_Setting::name_prefix,
    102100        'parent'   => esc_url( admin_url() ),
     101        'ajax'     => esc_url( admin_url( 'admin-ajax.php', 'relative' ) ),
    103102    );
    104103

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

    r20517 r20645  
    266266        },
    267267
     268        get: function() {
     269            var result = {};
     270
     271            if ( arguments.length )
     272                return this.pass( 'get', arguments );
     273
     274            $.each( this._value, function( key, obj ) {
     275                result[ key ] = obj.get();
     276            } );
     277            return result;
     278        },
     279
    268280        set: function( id ) {
    269281            if ( this.has( id ) )
    … …  
    327339    });
    328340
    329     $.each( [ 'get', 'bind', 'unbind', 'link', 'unlink', 'sync', 'unsync', 'setter', 'resetSetter' ], function( i, method ) {
     341    $.each( [ 'bind', 'unbind', 'link', 'unlink', 'sync', 'unsync', 'setter', 'resetSetter' ], function( i, method ) {
    330342        api.Values.prototype[ method ] = function() {
    331343            return this.pass( method, arguments );

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

    r20598 r20645  
    1616            this.transport = this.transport || 'refresh';
    1717
    18             element = $( '<input />', {
    19                 type:  'hidden',
    20                 value: this.get(),
    21                 name:  api.settings.prefix + id
    22             });
    23 
    24             element.appendTo( this.previewer.form );
    25             this.element = new api.Element( element );
    26 
    27             this.sync( this.element );
    2818            this.bind( this.preview );
    2919        },
    … …  
    272262        /**
    273263         * Requires params:
    274          *  - iframe - a selector or jQuery element
    275          *  - form   - a selector or jQuery element
    276          *  - url    - the URL of preview frame
     264         *  - container - a selector or jQuery element
     265         *  - url       - the URL of preview frame
    277266         */
    278267        initialize: function( params, options ) {
    … …  
    282271
    283272            this.loaded = $.proxy( this.loaded, this );
    284 
    285             this.loaderUuid = 0;
    286273
    287274            /*
    … …  
    321308            })( this );
    322309
    323             this.iframe = api.ensure( params.iframe );
    324             this.form   = api.ensure( params.form );
    325             this.name   = this.iframe.prop('name');
    326 
    327             this.container = this.iframe.parent();
    328 
    329             api.Messenger.prototype.initialize.call( this, params.url, this.iframe[0].contentWindow );
    330 
    331             this._formOriginalProps = {
    332                 target: this.form.prop('target'),
    333                 action: this.form.prop('action')
    334             };
     310            this.container = api.ensure( params.container );
     311
     312            api.Messenger.prototype.initialize.call( this, params.url );
    335313
    336314            this.bind( 'url', function( url ) {
    337315                // Bail if we're navigating to the current url, to a different origin, or wp-admin.
    338                 if ( this.url() == url || 0 !== url.indexOf( this.origin() + '/' ) || -1 !== url.indexOf( 'wp-admin' )  )
     316                if ( this.url() == url || 0 !== url.indexOf( this.origin() + '/' ) || -1 !== url.indexOf( 'wp-admin' ) )
    339317                    return;
    340318
    … …  
    342320                this.refresh();
    343321            });
    344 
    345             this.refresh();
    346 
    347             // Prevent the form from saving when enter is pressed.
    348             this.form.on( 'keydown', function( e ) {
    349                 if ( 13 === e.which ) // Enter
    350                     e.preventDefault();
    351             });
    352 
    353             // Create a potential postMessage connection with the parent frame.
    354             this.parent = new api.Messenger( api.settings.parent );
    355 
    356             // If we receive a 'back' event, we're inside an iframe.
    357             // Send any clicks to the 'Return' link to the parent page.
    358             this.parent.bind( 'back', function( text ) {
    359                 self.form.find('.back').text( text ).click( function( event ) {
    360                     event.preventDefault();
    361                     self.parent.send( 'close' );
    362                 });
    363             });
    364 
    365             // Initialize the connection with the parent frame.
    366             this.parent.send( 'ready' );
    367322        },
    368323        loader: function() {
    … …  
    370325                return this.loading;
    371326
    372             this.loading = $('<iframe />', {
    373                 name: this.name + '-loading-' + this.loaderUuid++
    374             }).appendTo( this.container );
     327            this.loading = $('<iframe />').appendTo( this.container );
    375328
    376329            return this.loading;
    377330        },
    378331        loaded: function() {
    379             this.iframe.remove();
     332            if ( this.iframe )
     333                this.iframe.remove();
    380334            this.iframe = this.loading;
    381335            delete this.loading;
    382             this.iframe.prop( 'name', this.name );
     336
    383337            this.targetWindow( this.iframe[0].contentWindow );
    384338        },
     339        query: function() {},
    385340        refresh: function() {
    386             this.loader().one( 'load', this.loaded );
    387 
    388             this.submit({
    389                 target: this.loader().prop('name'),
    390                 action: this.url()
    391             });
    392         },
    393         submit: function( props ) {
    394             if ( props )
    395                 this.form.prop( props );
    396             this.form.submit();
    397             if ( props )
    398                 this.form.prop( this._formOriginalProps );
     341            var self = this;
     342
     343            if ( this.request )
     344                this.request.abort();
     345
     346            this.request = $.post( this.url(), this.query() || {}, function( response ) {
     347                var iframe = self.loader()[0].contentWindow;
     348
     349                self.loader().one( 'load', self.loaded );
     350
     351                iframe.document.open();
     352                iframe.document.write( response );
     353                iframe.document.close();
     354            });
    399355        }
    400356    });
    … …  
    416372        // Initialize Previewer
    417373        var body = $( document.body ),
    418             previewer = new api.Previewer({
    419                 iframe: '#customize-preview iframe',
    420                 form:   '#customize-controls',
    421                 url:    api.settings.preview
    422             });
     374            query, previewer, parent;
     375
     376        // Prevent the form from saving when enter is pressed.
     377        $('#customize-controls').on( 'keydown', function( e ) {
     378            if ( 13 === e.which ) // Enter
     379                e.preventDefault();
     380        });
     381
     382        previewer = new api.Previewer({
     383            container: '#customize-preview',
     384            form:      '#customize-controls',
     385            url:       api.settings.preview
     386        }, {
     387            query: function() {
     388                return {
     389                    customize:  'on',
     390                    theme:      api.settings.theme,
     391                    customized: JSON.stringify( api.get() )
     392                };
     393            },
     394
     395            nonce: $('#_wpnonce').val(),
     396
     397            save: function() {
     398                var query = $.extend( this.query(), {
     399                        action: 'customize_save',
     400                        nonce:  this.nonce
     401                    }),
     402                    request = $.post( api.settings.ajax, query );
     403
     404                body.addClass('saving');
     405                request.always( function() {
     406                    body.removeClass('saving');
     407                });
     408            }
     409        });
    423410
    424411        $.each( api.settings.settings, function( id, data ) {
    … …  
    439426        });
    440427
     428        // Load the preview frame.
     429        previewer.refresh();
     430
    441431        // Temporary accordion code.
    442432        $('.customize-section-title').click( function() {
    … …  
    447437        // Button bindings.
    448438        $('#save').click( function( event ) {
    449             previewer.submit();
     439            previewer.save();
    450440            event.preventDefault();
    451441        });
    … …  
    455445            event.preventDefault();
    456446        });
     447
     448        // Create a potential postMessage connection with the parent frame.
     449        parent = new api.Messenger( api.settings.parent );
     450
     451        // If we receive a 'back' event, we're inside an iframe.
     452        // Send any clicks to the 'Return' link to the parent page.
     453        parent.bind( 'back', function( text ) {
     454            $('.back').text( text ).click( function( event ) {
     455                event.preventDefault();
     456                parent.send( 'close' );
     457            });
     458        });
     459
     460        // Initialize the connection with the parent frame.
     461        parent.send( 'ready' );
    457462
    458463        // Control visibility for default controls
Note: See TracChangeset for help on using the changeset viewer.