Changeset 38810

Timestamp:

10/18/2016 08:04:36 PM (8 years ago)

Author:

westonruter

Message:

Customize: Implement customized state persistence with changesets.

Includes infrastructure developed in the Customize Snapshots feature plugin.

See ​https://make.wordpress.org/core/2016/10/12/customize-changesets-technical-design-decisions/

Props westonruter, valendesigns, utkarshpatel, stubgo, lgedeon, ocean90, ryankienstra, mihai2u, dlh, aaroncampbell, jonathanbardo, jorbin.
See #28721.
See #31089.
Fixes #30937.
Fixes #31517.
Fixes #30028.
Fixes #23225.
Fixes #34142.
Fixes #36485.

Location:

trunk

Files:

• src/wp-admin/customize.php (modified) (3 diffs)
• src/wp-admin/js/customize-controls.js (modified) (41 diffs)
• src/wp-admin/js/customize-widgets.js (modified) (1 diff)
• src/wp-includes/admin-bar.php (modified) (2 diffs)
• src/wp-includes/class-wp-customize-manager.php (modified) (35 diffs)
• src/wp-includes/class-wp-customize-nav-menus.php (modified) (3 diffs)
• src/wp-includes/class-wp-customize-widgets.php (modified) (2 diffs)
• src/wp-includes/customize/class-wp-customize-selective-refresh.php (modified) (1 diff)
• src/wp-includes/customize/class-wp-customize-theme-control.php (modified) (1 diff)
• src/wp-includes/default-filters.php (modified) (2 diffs)
• src/wp-includes/functions.php (modified) (1 diff)
• src/wp-includes/functions.wp-scripts.php (modified) (1 diff)
• src/wp-includes/js/customize-base.js (modified) (3 diffs)
• src/wp-includes/js/customize-loader.js (modified) (1 diff)
• src/wp-includes/js/customize-preview-nav-menus.js (modified) (3 diffs)
• src/wp-includes/js/customize-preview-widgets.js (modified) (1 diff)
• src/wp-includes/js/customize-preview.js (modified) (9 diffs)
• src/wp-includes/js/customize-selective-refresh.js (modified) (3 diffs)
• src/wp-includes/post.php (modified) (1 diff)
• src/wp-includes/script-loader.php (modified) (1 diff)
• src/wp-includes/theme.php (modified) (2 diffs)
• tests/phpunit/tests/adminbar.php (modified) (1 diff)
• tests/phpunit/tests/ajax/CustomizeManager.php (added)
• tests/phpunit/tests/customize/manager.php (modified) (24 diffs)
• tests/phpunit/tests/customize/selective-refresh-ajax.php (modified) (1 diff)
• tests/phpunit/tests/customize/setting.php (modified) (6 diffs)
• tests/phpunit/tests/functions.php (modified) (1 diff)
• tests/phpunit/tests/post.php (modified) (1 diff)
• tests/qunit/fixtures/customize-settings.js (modified) (1 diff)
• tests/qunit/index.html (modified) (1 diff)
• tests/qunit/wp-admin/js/customize-base.js (modified) (1 diff)
• tests/qunit/wp-admin/js/customize-controls.js (modified) (2 diffs)

trunk/src/wp-admin/customize.php

@@ -21 +21 @@
 }
 
+/**
+ * @global WP_Scripts           $wp_scripts
+ * @global WP_Customize_Manager $wp_customize
+ */
+global $wp_scripts, $wp_customize;
+
+if ( $wp_customize->changeset_post_id() ) {
+    if ( ! current_user_can( get_post_type_object( 'customize_changeset' )->cap->edit_post, $wp_customize->changeset_post_id() ) ) {
+        wp_die(
+            '<h1>' . __( 'Cheatin&#8217; uh?' ) . '</h1>' .
+            '<p>' . __( 'Sorry, you are not allowed to edit this changeset.' ) . '</p>',
+            403
+        );
+    }
+    if ( in_array( get_post_status( $wp_customize->changeset_post_id() ), array( 'publish', 'trash' ), true ) ) {
+        wp_die(
+            '<h1>' . __( 'Cheatin&#8217; uh?' ) . '</h1>' .
+            '<p>' . __( 'This changeset has already been published and cannot be further modified.' ) . '</p>' .
+            '<p><a href="' . esc_url( remove_query_arg( 'changeset_uuid' ) ) . '">' . __( 'Customize New Changes' ) . '</a></p>',
+            403
+        );
+    }
+}
+
+
 wp_reset_vars( array( 'url', 'return', 'autofocus' ) );
 if ( ! empty( $url ) ) {
@@ -31 +56 @@
     $wp_customize->set_autofocus( wp_unslash( $autofocus ) );
 }
-
-/**
- * @global WP_Scripts           $wp_scripts
- * @global WP_Customize_Manager $wp_customize
- */
-global $wp_scripts, $wp_customize;
 
 $registered = $wp_scripts->registered;
@@ -116 +135 @@
             <?php
             $save_text = $wp_customize->is_theme_active() ? __( 'Save &amp; Publish' ) : __( 'Save &amp; Activate' );
-            submit_button( $save_text, 'primary save', 'save', false );
+            $save_attrs = array();
+            if ( ! current_user_can( get_post_type_object( 'customize_changeset' )->cap->publish_posts ) ) {
+                $save_attrs['style'] = 'display: none';
+            }
+            submit_button( $save_text, 'primary save', 'save', false, $save_attrs );
             ?>
             <span class="spinner"></span>

trunk/src/wp-admin/js/customize-controls.js

@@ -23 +23 @@
     api.Setting = api.Value.extend({
         initialize: function( id, value, options ) {
-            api.Value.prototype.initialize.call( this, value, options );
-
-            this.id = id;
-            this.transport = this.transport || 'refresh';
-            this._dirty = options.dirty || false;
-            this.notifications = new api.Values({ defaultConstructor: api.Notification });
+            var setting = this;
+            api.Value.prototype.initialize.call( setting, value, options );
+
+            setting.id = id;
+            setting.transport = setting.transport || 'refresh';
+            setting._dirty = options.dirty || false;
+            setting.notifications = new api.Values({ defaultConstructor: api.Notification });
 
             // Whenever the setting's value changes, refresh the preview.
-            this.bind( this.preview );
+            setting.bind( setting.preview );
         },
 
         /**
          * Refresh the preview, respective of the setting's refresh policy.
+         *
+         * If the preview hasn't sent a keep-alive message and is likely
+         * disconnected by having navigated to a non-allowed URL, then the
+         * refresh transport will be forced when postMessage is the transport.
+         * Note that postMessage does not throw an error when the recipient window
+         * fails to match the origin window, so using try/catch around the
+         * previewer.send() call to then fallback to refresh will not work.
+         *
+         * @since 3.4.0
          */
         preview: function() {
-            switch ( this.transport ) {
-                case 'refresh':
-                    return this.previewer.refresh();
-                case 'postMessage':
-                    return this.previewer.send( 'setting', [ this.id, this() ] );
+            var setting = this, transport;
+            transport = setting.transport;
+
+            if ( 'postMessage' === transport && ! api.state( 'previewerAlive' ).get() ) {
+                transport = 'refresh';
+            }
+
+            if ( 'postMessage' === transport ) {
+                return setting.previewer.send( 'setting', [ setting.id, setting() ] );
+            } else if ( 'refresh' === transport ) {
+                return setting.previewer.refresh();
             }
         },
@@ -66 +82 @@
 
     /**
-     * Utility function namespace
+     * Current change count.
+     *
+     * @since 4.7.0
+     * @type {number}
+     * @protected
      */
-    api.utils = {};
+    api._latestRevision = 0;
+
+    /**
+     * Last revision that was saved.
+     *
+     * @since 4.7.0
+     * @type {number}
+     * @protected
+     */
+    api._lastSavedRevision = 0;
+
+    /**
+     * Latest revisions associated with the updated setting.
+     *
+     * @since 4.7.0
+     * @type {object}
+     * @protected
+     */
+    api._latestSettingRevisions = {};
+
+    /*
+     * Keep track of the revision associated with each updated setting so that
+     * requestChangesetUpdate knows which dirty settings to include. Also, once
+     * ready is triggered and all initial settings have been added, increment
+     * revision for each newly-created initially-dirty setting so that it will
+     * also be included in changeset update requests.
+     */
+    api.bind( 'change', function incrementChangedSettingRevision( setting ) {
+        api._latestRevision += 1;
+        api._latestSettingRevisions[ setting.id ] = api._latestRevision;
+    } );
+    api.bind( 'ready', function() {
+        api.bind( 'add', function incrementCreatedSettingRevision( setting ) {
+            if ( setting._dirty ) {
+                api._latestRevision += 1;
+                api._latestSettingRevisions[ setting.id ] = api._latestRevision;
+            }
+        } );
+    } );
+
+    /**
+     * Get the dirty setting values.
+     *
+     * @param {object} [options] Options.
+     * @param {boolean} [options.unsaved=false] Whether only values not saved yet into a changeset will be returned (differential changes).
+     * @returns {object} Dirty setting values.
+     */
+    api.dirtyValues = function dirtyValues( options ) {
+        var values = {};
+        api.each( function( setting ) {
+            var settingRevision;
+
+            if ( ! setting._dirty ) {
+                return;
+            }
+
+            settingRevision = api._latestSettingRevisions[ setting.id ];
+
+            // Skip including settings that have already been included in the changeset, if only requesting unsaved.
+            if ( ( options && options.unsaved ) && ( _.isUndefined( settingRevision ) || settingRevision <= api._lastSavedRevision ) ) {
+                return;
+            }
+
+            values[ setting.id ] = setting.get();
+        } );
+        return values;
+    };
+
+    /**
+     * Request updates to the changeset.
+     *
+     * @param {object} [changes] Mapping of setting IDs to setting params each normally including a value property, or mapping to null.
+     *                           If not provided, then the changes will still be obtained from unsaved dirty settings.
+     * @returns {jQuery.Promise}
+     */
+    api.requestChangesetUpdate = function requestChangesetUpdate( changes ) {
+        var deferred, request, submittedChanges = {}, data;
+        deferred = new $.Deferred();
+
+        if ( changes ) {
+            _.extend( submittedChanges, changes );
+        }
+
+        // Ensure all revised settings (changes pending save) are also included, but not if marked for deletion in changes.
+        _.each( api.dirtyValues( { unsaved: true } ), function( dirtyValue, settingId ) {
+            if ( ! changes || null !== changes[ settingId ] ) {
+                submittedChanges[ settingId ] = _.extend(
+                    {},
+                    submittedChanges[ settingId ] || {},
+                    { value: dirtyValue }
+                );
+            }
+        } );
+
+        // Short-circuit when there are no pending changes.
+        if ( _.isEmpty( submittedChanges ) ) {
+            deferred.resolve( {} );
+            return deferred.promise();
+        }
+
+        // Make sure that publishing a changeset waits for all changeset update requests to complete.
+        api.state( 'processing' ).set( api.state( 'processing' ).get() + 1 );
+        deferred.always( function() {
+            api.state( 'processing' ).set( api.state( 'processing' ).get() - 1 );
+        } );
+
+        // Allow plugins to attach additional params to the settings.
+        api.trigger( 'changeset-save', submittedChanges );
+
+        // Ensure that if any plugins add data to save requests by extending query() that they get included here.
+        data = api.previewer.query( { excludeCustomizedSaved: true } );
+        delete data.customized; // Being sent in customize_changeset_data instead.
+        _.extend( data, {
+            nonce: api.settings.nonce.save,
+            customize_theme: api.settings.theme.stylesheet,
+            customize_changeset_data: JSON.stringify( submittedChanges )
+        } );
+
+        request = wp.ajax.post( 'customize_save', data );
+
+        request.done( function requestChangesetUpdateDone( data ) {
+            var savedChangesetValues = {};
+
+            // Ensure that all settings updated subsequently will be included in the next changeset update request.
+            api._lastSavedRevision = Math.max( api._latestRevision, api._lastSavedRevision );
+
+            api.state( 'changesetStatus' ).set( data.changeset_status );
+            deferred.resolve( data );
+            api.trigger( 'changeset-saved', data );
+
+            if ( data.setting_validities ) {
+                _.each( data.setting_validities, function( validity, settingId ) {
+                    if ( true === validity && _.isObject( submittedChanges[ settingId ] ) && ! _.isUndefined( submittedChanges[ settingId ].value ) ) {
+                        savedChangesetValues[ settingId ] = submittedChanges[ settingId ].value;
+                    }
+                } );
+            }
+
+            api.previewer.send( 'changeset-saved', _.extend( {}, data, { saved_changeset_values: savedChangesetValues } ) );
+        } );
+        request.fail( function requestChangesetUpdateFail( data ) {
+            deferred.reject( data );
+            api.trigger( 'changeset-error', data );
+        } );
+        request.always( function( data ) {
+            if ( data.setting_validities ) {
+                api._handleSettingValidities( {
+                    settingValidities: data.setting_validities
+                } );
+            }
+        } );
+
+        return deferred.promise();
+    };
 
     /**
@@ -1217 +1390 @@
 
         /**
+         * Load theme preview.
+         *
+         * @since 4.7.0
+         *
+         * @param {string} themeId Theme ID.
+         * @returns {jQuery.promise} Promise.
+         */
+        loadThemePreview: function( themeId ) {
+            var deferred = $.Deferred(), onceProcessingComplete, overlay, urlParser;
+
+            urlParser = document.createElement( 'a' );
+            urlParser.href = location.href;
+            urlParser.search = $.param( _.extend(
+                api.utils.parseQueryString( urlParser.search.substr( 1 ) ),
+                {
+                    theme: themeId,
+                    changeset_uuid: api.settings.changeset.uuid
+                }
+            ) );
+
+            overlay = $( '.wp-full-overlay' );
+            overlay.addClass( 'customize-loading' );
+
+            onceProcessingComplete = function() {
+                var request;
+                if ( api.state( 'processing' ).get() > 0 ) {
+                    return;
+                }
+
+                api.state( 'processing' ).unbind( onceProcessingComplete );
+
+                request = api.requestChangesetUpdate();
+                request.done( function() {
+                    $( window ).off( 'beforeunload.customize-confirm' );
+                    window.location.href = urlParser.href;
+                } );
+                request.fail( function() {
+                    overlay.removeClass( 'customize-loading' );
+                } );
+            };
+
+            if ( 0 === api.state( 'processing' ).get() ) {
+                onceProcessingComplete();
+            } else {
+                api.state( 'processing' ).bind( onceProcessingComplete );
+            }
+
+            return deferred.promise();
+        },
+
+        /**
          * Render & show the theme details for a given theme model.
          *
@@ -1224 +1448 @@
          */
         showDetails: function ( theme, callback ) {
-            var section = this;
+            var section = this, link;
             callback = callback || function(){};
             section.currentTheme = theme.id;
@@ -1233 +1457 @@
             section.containFocus( section.overlay );
             section.updateLimits();
+
+            link = section.overlay.find( '.inactive-theme > a' );
+
+            link.on( 'click', function( event ) {
+                event.preventDefault();
+
+                // Short-circuit if request is currently being made.
+                if ( link.hasClass( 'disabled' ) ) {
+                    return;
+                }
+                link.addClass( 'disabled' );
+
+                section.loadThemePreview( theme.id ).fail( function() {
+                    link.removeClass( 'disabled' );
+                } );
+            } );
             callback();
         },
@@ -2228 +2468 @@
                 nonce: _wpCustomizeBackground.nonces.add,
                 wp_customize: 'on',
-                theme: api.settings.theme.stylesheet,
+                customize_theme: api.settings.theme.stylesheet,
                 attachment_id: this.params.attachment.id
             } );
@@ -2593 +2833 @@
             // Ensure custom-header-crop Ajax requests bootstrap the Customizer to activate the previewed theme.
             wp.media.controller.Cropper.prototype.defaults.doCropArgs.wp_customize = 'on';
-            wp.media.controller.Cropper.prototype.defaults.doCropArgs.theme = api.settings.theme.stylesheet;
+            wp.media.controller.Cropper.prototype.defaults.doCropArgs.customize_theme = api.settings.theme.stylesheet;
         },
 
@@ -2884 +3124 @@
                 }
 
-                var previewUrl = $( this ).data( 'previewUrl' );
-
-                $( '.wp-full-overlay' ).addClass( 'customize-loading' );
-
-                window.parent.location = previewUrl;
+                api.section( control.section() ).loadThemePreview( control.params.theme.id );
             });
 
@@ -2949 +3185 @@
      */
     api.PreviewFrame = api.Messenger.extend({
-        sensitivity: 2000,
+        sensitivity: null, // Will get set to api.settings.timeouts.previewFrameSensitivity.
 
         /**
@@ -2955 +3191 @@
          *
          * @param {object} params.container
-         * @param {object} params.signature
          * @param {object} params.previewUrl
          * @param {object} params.query
@@ -2970 +3205 @@
 
             this.container = params.container;
-            this.signature = params.signature;
 
             $.extend( params, { channel: api.PreviewFrame.uuid() });
@@ -2990 +3224 @@
          */
         run: function( deferred ) {
-            var self   = this,
+            var previewFrame = this,
                 loaded = false,
-                ready  = false;
-
-            if ( this._ready ) {
-                this.unbind( 'ready', this._ready );
-            }
-
-            this._ready = function() {
+                ready = false,
+                readyData = null,
+                hasPendingChangesetUpdate = '{}' !== previewFrame.query.customized,
+                urlParser,
+                params,
+                form;
+
+            if ( previewFrame._ready ) {
+                previewFrame.unbind( 'ready', previewFrame._ready );
+            }
+
+            previewFrame._ready = function( data ) {
                 ready = true;
-
-                if ( loaded ) {
-                    deferred.resolveWith( self );
-                }
-            };
-
-            this.bind( 'ready', this._ready );
-
-            this.bind( 'ready', function ( data ) {
-
-                this.container.addClass( 'iframe-ready' );
-
+                readyData = data;
+                previewFrame.container.addClass( 'iframe-ready' );
                 if ( ! data ) {
                     return;
                 }
 
-                /*
-                 * Walk over all panels, sections, and controls and set their
-                 * respective active states to true if the preview explicitly
-                 * indicates as such.
-                 */
-                var constructs = {
-                    panel: data.activePanels,
-                    section: data.activeSections,
-                    control: data.activeControls
-                };
-                _( constructs ).each( function ( activeConstructs, type ) {
-                    api[ type ].each( function ( construct, id ) {
-                        var isDynamicallyCreated = _.isUndefined( api.settings[ type + 's' ][ id ] );
-
-                        /*
-                         * If the construct was created statically in PHP (not dynamically in JS)
-                         * then consider a missing (undefined) value in the activeConstructs to
-                         * mean it should be deactivated (since it is gone). But if it is
-                         * dynamically created then only toggle activation if the value is defined,
-                         * as this means that the construct was also then correspondingly
-                         * created statically in PHP and the active callback is available.
-                         * Otherwise, dynamically-created constructs should normally have
-                         * their active states toggled in JS rather than from PHP.
-                         */
-                        if ( ! isDynamicallyCreated || ! _.isUndefined( activeConstructs[ id ] ) ) {
-                            if ( activeConstructs[ id ] ) {
-                                construct.activate();
-                            } else {
-                                construct.deactivate();
-                            }
-                        }
-                    } );
+                if ( loaded ) {
+                    deferred.resolveWith( previewFrame, [ data ] );
+                }
+            };
+
+            previewFrame.bind( 'ready', previewFrame._ready );
+
+            urlParser = document.createElement( 'a' );
+            urlParser.href = previewFrame.previewUrl();
+
+            params = _.extend(
+                api.utils.parseQueryString( urlParser.search.substr( 1 ) ),
+                {
+                    customize_changeset_uuid: previewFrame.query.customize_changeset_uuid,
+                    customize_theme: previewFrame.query.customize_theme,
+                    customize_messenger_channel: previewFrame.query.customize_messenger_channel
+                }
+            );
+
+            urlParser.search = $.param( params );
+            previewFrame.iframe = $( '<iframe />', {
+                title: api.l10n.previewIframeTitle,
+                name: 'customize-' + previewFrame.channel()
+            } );
+            previewFrame.iframe.attr( 'onmousewheel', '' ); // Workaround for Safari bug. See WP Trac #38149.
+
+            if ( ! hasPendingChangesetUpdate ) {
+                previewFrame.iframe.attr( 'src', urlParser.href );
+            } else {
+                previewFrame.iframe.attr( 'data-src', urlParser.href ); // For debugging purposes.
+            }
+
+            previewFrame.iframe.appendTo( previewFrame.container );
+            previewFrame.targetWindow( previewFrame.iframe[0].contentWindow );
+
+            /*
+             * Submit customized data in POST request to preview frame window since
+             * there are setting value changes not yet written to changeset.
+             */
+            if ( hasPendingChangesetUpdate ) {
+                form = $( '<form>', {
+                    action: urlParser.href,
+                    target: previewFrame.iframe.attr( 'name' ),
+                    method: 'post',
+                    hidden: 'hidden'
                 } );
-
-                if ( data.settingValidities ) {
-                    api._handleSettingValidities( {
-                        settingValidities: data.settingValidities,
-                        focusInvalidControl: false
-                    } );
-                }
+                form.append( $( '<input>', {
+                    type: 'hidden',
+                    name: '_method',
+                    value: 'GET'
+                } ) );
+                _.each( previewFrame.query, function( value, key ) {
+                    form.append( $( '<input>', {
+                        type: 'hidden',
+                        name: key,
+                        value: value
+                    } ) );
+                } );
+                previewFrame.container.append( form );
+                form.submit();
+                form.remove(); // No need to keep the form around after submitted.
+            }
+
+            previewFrame.bind( 'iframe-loading-error', function( error ) {
+                previewFrame.iframe.remove();
+
+                // Check if the user is not logged in.
+                if ( 0 === error ) {
+                    previewFrame.login( deferred );
+                    return;
+                }
+
+                // Check for cheaters.
+                if ( -1 === error ) {
+                    deferred.rejectWith( previewFrame, [ 'cheatin' ] );
+                    return;
+                }
+
+                deferred.rejectWith( previewFrame, [ 'request failure' ] );
             } );
 
-            this.request = $.ajax( this.previewUrl(), {
-                type: 'POST',
-                data: this.query,
-                xhrFields: {
-                    withCredentials: true
-                }
-            } );
-
-            this.request.fail( function() {
-                deferred.rejectWith( self, [ 'request failure' ] );
-            });
-
-            this.request.done( function( response ) {
-                var location = self.request.getResponseHeader('Location'),
-                    signature = self.signature,
-                    index;
-
-                // Check if the location response header differs from the current URL.
-                // If so, the request was redirected; try loading the requested page.
-                if ( location && location !== self.previewUrl() ) {
-                    deferred.rejectWith( self, [ 'redirect', location ] );
-                    return;
-                }
-
-                // Check if the user is not logged in.
-                if ( '0' === response ) {
-                    self.login( deferred );
-                    return;
-                }
-
-                // Check for cheaters.
-                if ( '-1' === response ) {
-                    deferred.rejectWith( self, [ 'cheatin' ] );
-                    return;
-                }
-
-                // Check for a signature in the request.
-                index = response.lastIndexOf( signature );
-                if ( -1 === index || index < response.lastIndexOf('</html>') ) {
-                    deferred.rejectWith( self, [ 'unsigned' ] );
-                    return;
-                }
-
-                // Strip the signature from the request.
-                response = response.slice( 0, index ) + response.slice( index + signature.length );
-
-                // Create the iframe and inject the html content.
-                self.iframe = $( '<iframe />', { 'title': api.l10n.previewIframeTitle } ).appendTo( self.container );
-                self.iframe.attr( 'onmousewheel', '' ); // Workaround for Safari bug. See WP Trac #38149.
-
-                // Bind load event after the iframe has been added to the page;
-                // otherwise it will fire when injected into the DOM.
-                self.iframe.one( 'load', function() {
-                    loaded = true;
-
-                    if ( ready ) {
-                        deferred.resolveWith( self );
-                    } else {
-                        setTimeout( function() {
-                            deferred.rejectWith( self, [ 'ready timeout' ] );
-                        }, self.sensitivity );
-                    }
-                });
-
-                self.targetWindow( self.iframe[0].contentWindow );
-
-                self.targetWindow().document.open();
-                self.targetWindow().document.write( response );
-                self.targetWindow().document.close();
+            previewFrame.iframe.one( 'load', function() {
+                loaded = true;
+
+                if ( ready ) {
+                    deferred.resolveWith( previewFrame, [ readyData ] );
+                } else {
+                    setTimeout( function() {
+                        deferred.rejectWith( previewFrame, [ 'ready timeout' ] );
+                    }, previewFrame.sensitivity );
+                }
             });
         },
@@ -3165 +3374 @@
         destroy: function() {
             api.Messenger.prototype.destroy.call( this );
-            this.request.abort();
-
-            if ( this.iframe )
+
+            if ( this.iframe ) {
                 this.iframe.remove();
-
-            delete this.request;
+            }
+
             delete this.iframe;
             delete this.targetWindow;
@@ -3177 +3385 @@
 
     (function(){
-        var uuid = 0;
-        /**
-         * Create a universally unique identifier.
-         *
-         * @return {int}
+        var id = 0;
+        /**
+         * Return an incremented ID for a preview messenger channel.
+         *
+         * This function is named "uuid" for historical reasons, but it is a
+         * misnomer as it is not an actual UUID, and it is not universally unique.
+         * This is not to be confused with `api.settings.changeset.uuid`.
+         *
+         * @return {string}
          */
         api.PreviewFrame.uuid = function() {
-            return 'preview-' + uuid++;
+            return 'preview-' + String( id++ );
         };
     }());
@@ -3210 +3422 @@
      */
     api.Previewer = api.Messenger.extend({
-        refreshBuffer: 250,
+        refreshBuffer: null, // Will get set to api.settings.timeouts.windowRefresh.
 
         /**
@@ -3218 +3430 @@
          * @param {string} params.form
          * @param {string} params.previewUrl  The URL to preview.
-         * @param {string} params.signature
          * @param {object} options
          */
         initialize: function( params, options ) {
-            var self = this,
-                rscheme = /^https?/;
-
-            $.extend( this, options || {} );
-            this.deferred = {
+            var previewer = this,
+                urlParser = document.createElement( 'a' );
+
+            $.extend( previewer, options || {} );
+            previewer.deferred = {
                 active: $.Deferred()
             };
 
-            /*
-             * Wrap this.refresh to prevent it from hammering the servers:
-             *
-             * If refresh is called once and no other refresh requests are
-             * loading, trigger the request immediately.
-             *
-             * If refresh is called while another refresh request is loading,
-             * debounce the refresh requests:
-             * 1. Stop the loading request (as it is instantly outdated).
-             * 2. Trigger the new request once refresh hasn't been called for
-             *    self.refreshBuffer milliseconds.
-             */
-            this.refresh = (function( self ) {
-                var refresh  = self.refresh,
-                    callback = function() {
-                        timeout = null;
-                        refresh.call( self );
-                    },
-                    timeout;
-
-                return function() {
-                    if ( typeof timeout !== 'number' ) {
-                        if ( self.loading ) {
-                            self.abort();
+            // Debounce to prevent hammering server and then wait for any pending update requests.
+            previewer.refresh = _.debounce(
+                ( function( originalRefresh ) {
+                    return function() {
+                        var isProcessingComplete, refreshOnceProcessingComplete;
+                        isProcessingComplete = function() {
+                            return 0 === api.state( 'processing' ).get();
+                        };
+                        if ( isProcessingComplete() ) {
+                            originalRefresh.call( previewer );
                         } else {
-                            return callback();
+                            refreshOnceProcessingComplete = function() {
+                                if ( isProcessingComplete() ) {
+                                    originalRefresh.call( previewer );
+                                    api.state( 'processing' ).unbind( refreshOnceProcessingComplete );
+                                }
+                            };
+                            api.state( 'processing' ).bind( refreshOnceProcessingComplete );
                         }
-                    }
-
-                    clearTimeout( timeout );
-                    timeout = setTimeout( callback, self.refreshBuffer );
-                };
-            })( this );
-
-            this.container   = api.ensure( params.container );
-            this.allowedUrls = params.allowedUrls;
-            this.signature   = params.signature;
+                    };
+                }( previewer.refresh ) ),
+                previewer.refreshBuffer
+            );
+
+            previewer.container   = api.ensure( params.container );
+            previewer.allowedUrls = params.allowedUrls;
 
             params.url = window.location.href;
 
-            api.Messenger.prototype.initialize.call( this, params );
-
-            this.add( 'scheme', this.origin() ).link( this.origin ).setter( function( to ) {
-                var match = to.match( rscheme );
-                return match ? match[0] : '';
-            });
+            api.Messenger.prototype.initialize.call( previewer, params );
+
+            urlParser.href = previewer.origin();
+            previewer.add( 'scheme', urlParser.protocol.replace( /:$/, '' ) );
 
             // Limit the URL to internal, front-end links.
@@ -3285 +3483 @@
             // ssl certs.
 
-            this.add( 'previewUrl', params.previewUrl ).setter( function( to ) {
-                var result, urlParser;
+            previewer.add( 'previewUrl', params.previewUrl ).setter( function( to ) {
+                var result, urlParser, newPreviewUrl, schemeMatchingPreviewUrl, queryParams;
                 urlParser = document.createElement( 'a' );
                 urlParser.href = to;
@@ -3295 +3493 @@
                 }
 
+                // Remove state query params.
+                if ( urlParser.search.length > 1 ) {
+                    queryParams = api.utils.parseQueryString( urlParser.search.substr( 1 ) );
+                    delete queryParams.customize_changeset_uuid;
+                    delete queryParams.customize_theme;
+                    delete queryParams.customize_messenger_channel;
+                    if ( _.isEmpty( queryParams ) ) {
+                        urlParser.search = '';
+                    } else {
+                        urlParser.search = $.param( queryParams );
+                    }
+                }
+
+                newPreviewUrl = urlParser.href;
+                urlParser.protocol = previewer.scheme.get() + ':';
+                schemeMatchingPreviewUrl = urlParser.href;
+
                 // Attempt to match the URL to the control frame's scheme
                 // and check if it's allowed. If not, try the original URL.
-                $.each([ to.replace( rscheme, self.scheme() ), to ], function( i, url ) {
-                    $.each( self.allowedUrls, function( i, allowed ) {
+                $.each( [ schemeMatchingPreviewUrl, newPreviewUrl ], function( i, url ) {
+                    $.each( previewer.allowedUrls, function( i, allowed ) {
                         var path;
 
@@ -3309 +3524 @@
                         }
                     });
-                    if ( result )
+                    if ( result ) {
                         return false;
+                    }
                 });
 
@@ -3317 +3533 @@
             });
 
+            previewer.bind( 'ready', previewer.ready );
+
+            // Start listening for keep-alive messages when iframe first loads.
+            previewer.deferred.active.done( _.bind( previewer.keepPreviewAlive, previewer ) );
+
+            previewer.bind( 'synced', function() {
+                previewer.send( 'active' );
+            } );
+
             // Refresh the preview when the URL is changed (but not yet).
-            this.previewUrl.bind( this.refresh );
-
-            this.scroll = 0;
-            this.bind( 'scroll', function( distance ) {
-                this.scroll = distance;
-            });
-
-            // Update the URL when the iframe sends a URL message.
-            this.bind( 'url', this.previewUrl );
+            previewer.previewUrl.bind( previewer.refresh );
+
+            previewer.scroll = 0;
+            previewer.bind( 'scroll', function( distance ) {
+                previewer.scroll = distance;
+            });
+
+            // Update the URL when the iframe sends a URL message, resetting scroll position. If URL is unchanged, then refresh.
+            previewer.bind( 'url', function( url ) {
+                var onUrlChange, urlChanged = false;
+                previewer.scroll = 0;
+                onUrlChange = function() {
+                    urlChanged = true;
+                };
+                previewer.previewUrl.bind( onUrlChange );
+                previewer.previewUrl.set( url );
+                previewer.previewUrl.unbind( onUrlChange );
+                if ( ! urlChanged ) {
+                    previewer.refresh();
+                }
+            } );
 
             // Update the document title when the preview changes.
-            this.bind( 'documentTitle', function ( title ) {
+            previewer.bind( 'documentTitle', function ( title ) {
                 api.setDocumentTitle( title );
             } );
+        },
+
+        /**
+         * Handle the preview receiving the ready message.
+         *
+         * @since 4.7.0
+         *
+         * @param {object} data - Data from preview.
+         * @param {string} data.currentUrl - Current URL.
+         * @param {object} data.activePanels - Active panels.
+         * @param {object} data.activeSections Active sections.
+         * @param {object} data.activeControls Active controls.
+         * @returns {void}
+         */
+        ready: function( data ) {
+            var previewer = this, synced = {}, constructs;
+
+            synced.settings = api.get();
+            if ( 'resolved' !== previewer.deferred.active.state() || previewer.loading ) {
+                synced.scroll = previewer.scroll;
+            }
+            previewer.send( 'sync', synced );
+
+            // Set the previewUrl without causing the url to set the iframe.
+            if ( data.currentUrl ) {
+                previewer.previewUrl.unbind( previewer.refresh );
+                previewer.previewUrl.set( data.currentUrl );
+                previewer.previewUrl.bind( previewer.refresh );
+            }
+
+            /*
+             * Walk over all panels, sections, and controls and set their
+             * respective active states to true if the preview explicitly
+             * indicates as such.
+             */
+            constructs = {
+                panel: data.activePanels,
+                section: data.activeSections,
+                control: data.activeControls
+            };
+            _( constructs ).each( function ( activeConstructs, type ) {
+                api[ type ].each( function ( construct, id ) {
+                    var isDynamicallyCreated = _.isUndefined( api.settings[ type + 's' ][ id ] );
+
+                    /*
+                     * If the construct was created statically in PHP (not dynamically in JS)
+                     * then consider a missing (undefined) value in the activeConstructs to
+                     * mean it should be deactivated (since it is gone). But if it is
+                     * dynamically created then only toggle activation if the value is defined,
+                     * as this means that the construct was also then correspondingly
+                     * created statically in PHP and the active callback is available.
+                     * Otherwise, dynamically-created constructs should normally have
+                     * their active states toggled in JS rather than from PHP.
+                     */
+                    if ( ! isDynamicallyCreated || ! _.isUndefined( activeConstructs[ id ] ) ) {
+                        if ( activeConstructs[ id ] ) {
+                            construct.activate();
+                        } else {
+                            construct.deactivate();
+                        }
+                    }
+                } );
+            } );
+
+            if ( data.settingValidities ) {
+                api._handleSettingValidities( {
+                    settingValidities: data.settingValidities,
+                    focusInvalidControl: false
+                } );
+            }
+        },
+
+        /**
+         * Keep the preview alive by listening for ready and keep-alive messages.
+         *
+         * If a message is not received in the allotted time then the iframe will be set back to the last known valid URL.
+         *
+         * @since 4.7.0
+         *
+         * @returns {void}
+         */
+        keepPreviewAlive: function keepPreviewAlive() {
+            var previewer = this, keepAliveTick, timeoutId, handleMissingKeepAlive, scheduleKeepAliveCheck;
+
+            /**
+             * Schedule a preview keep-alive check.
+             *
+             * Note that if a page load takes longer than keepAliveCheck milliseconds,
+             * the keep-alive messages will still be getting sent from the previous
+             * URL.
+             */
+            scheduleKeepAliveCheck = function() {
+                timeoutId = setTimeout( handleMissingKeepAlive, api.settings.timeouts.keepAliveCheck );
+            };
+
+            /**
+             * Set the previewerAlive state to true when receiving a message from the preview.
+             */
+            keepAliveTick = function() {
+                api.state( 'previewerAlive' ).set( true );
+                clearTimeout( timeoutId );
+                scheduleKeepAliveCheck();
+            };
+
+            /**
+             * Set the previewerAlive state to false if keepAliveCheck milliseconds have transpired without a message.
+             *
+             * This is most likely to happen in the case of a connectivity error, or if the theme causes the browser
+             * to navigate to a non-allowed URL. Setting this state to false will force settings with a postMessage
+             * transport to use refresh instead, causing the preview frame also to be replaced with the current
+             * allowed preview URL.
+             */
+            handleMissingKeepAlive = function() {
+                api.state( 'previewerAlive' ).set( false );
+            };
+            scheduleKeepAliveCheck();
+
+            previewer.bind( 'ready', keepAliveTick );
+            previewer.bind( 'keep-alive', keepAliveTick );
         },
 
@@ -3349 +3705 @@
 
         /**
-         * Refresh the preview.
+         * Refresh the preview seamlessly.
          */
         refresh: function() {
-            var self = this;
+            var previewer = this;
 
             // Display loading indicator
-            this.send( 'loading-initiated' );
-
-            this.abort();
-
-            this.loading = new api.PreviewFrame({
-                url:        this.url(),
-                previewUrl: this.previewUrl(),
-                query:      this.query() || {},
-                container:  this.container,
-                signature:  this.signature
-            });
-
-            this.loading.done( function() {
-                // 'this' is the loading frame
-                this.bind( 'synced', function() {
-                    if ( self.preview )
-                        self.preview.destroy();
-                    self.preview = this;
-                    delete self.loading;
-
-                    self.targetWindow( this.targetWindow() );
-                    self.channel( this.channel() );
-
-                    self.deferred.active.resolve();
-                    self.send( 'active' );
-                });
-
-                this.send( 'sync', {
-                    scroll:   self.scroll,
-                    settings: api.get()
-                });
-            });
-
-            this.loading.fail( function( reason, location ) {
-                self.send( 'loading-failed' );
-                if ( 'redirect' === reason && location ) {
-                    self.previewUrl( location );
-                }
+            previewer.send( 'loading-initiated' );
+
+            previewer.abort();
+
+            previewer.loading = new api.PreviewFrame({
+                url:        previewer.url(),
+                previewUrl: previewer.previewUrl(),
+                query:      previewer.query( { excludeCustomizedSaved: true } ) || {},
+                container:  previewer.container
+            });
+
+            previewer.loading.done( function( readyData ) {
+                var loadingFrame = this, previousPreview, onceSynced;
+
+                previousPreview = previewer.preview;
+                previewer.preview = loadingFrame;
+                previewer.targetWindow( loadingFrame.targetWindow() );
+                previewer.channel( loadingFrame.channel() );
+
+                onceSynced = function() {
+                    loadingFrame.unbind( 'synced', onceSynced );
+                    if ( previousPreview ) {
+                        previousPreview.destroy();
+                    }
+                    previewer.deferred.active.resolve();
+                    delete previewer.loading;
+                };
+                loadingFrame.bind( 'synced', onceSynced );
+
+                // This event will be received directly by the previewer in normal navigation; this is only needed for seamless refresh.
+                previewer.trigger( 'ready', readyData );
+            });
+
+            previewer.loading.fail( function( reason ) {
+                previewer.send( 'loading-failed' );
 
                 if ( 'logged out' === reason ) {
-                    if ( self.preview ) {
-                        self.preview.destroy();
-                        delete self.preview;
+                    if ( previewer.preview ) {
+                        previewer.preview.destroy();
+                        delete previewer.preview;
                     }
 
-                    self.login().done( self.refresh );
+                    previewer.login().done( previewer.refresh );
                 }
 
                 if ( 'cheatin' === reason ) {
-                    self.cheatin();
+                    previewer.cheatin();
                 }
             });
@@ -3464 +3817 @@
             request = wp.ajax.post( 'customize_refresh_nonces', {
                 wp_customize: 'on',
-                theme: api.settings.theme.stylesheet
+                customize_theme: api.settings.theme.stylesheet
             });
 
@@ -3680 +4033 @@
         }
 
+        if ( null === api.PreviewFrame.prototype.sensitivity ) {
+            api.PreviewFrame.prototype.sensitivity = api.settings.timeouts.previewFrameSensitivity;
+        }
+        if ( null === api.Previewer.prototype.refreshBuffer ) {
+            api.Previewer.prototype.refreshBuffer = api.settings.timeouts.windowRefresh;
+        }
+
         var parent,
             body = $( document.body ),
@@ -3723 +4083 @@
             form:        '#customize-controls',
             previewUrl:  api.settings.url.preview,
-            allowedUrls: api.settings.url.allowed,
-            signature:   'WP_CUSTOMIZER_SIGNATURE'
+            allowedUrls: api.settings.url.allowed
         }, {
 
@@ -3732 +4091 @@
              * Build the query to send along with the Preview request.
              *
-             * @return {object}
+             * @since 4.7.0 Added options param.
+             *
+             * @param {object}  [options] Options.
+             * @param {boolean} [options.excludeCustomizedSaved=false] Exclude saved settings in customized response (values pending writing to changeset).
+             * @return {object} Query vars.
              */
-            query: function() {
-                var dirtyCustomized = {};
-                api.each( function ( value, key ) {
-                    if ( value._dirty ) {
-                        dirtyCustomized[ key ] = value();
-                    }
-                } );
-
-                return {
+            query: function( options ) {
+                var queryVars = {
                     wp_customize: 'on',
-                    theme:      api.settings.theme.stylesheet,
-                    customized: JSON.stringify( dirtyCustomized ),
-                    nonce:      this.nonce.preview
+                    customize_theme: api.settings.theme.stylesheet,
+                    nonce: this.nonce.preview,
+                    customize_changeset_uuid: api.settings.changeset.uuid
                 };
+
+                /*
+                 * Exclude customized data if requested especially for calls to requestChangesetUpdate.
+                 * Changeset updates are differential and so it is a performance waste to send all of
+                 * the dirty settings with each update.
+                 */
+                queryVars.customized = JSON.stringify( api.dirtyValues( {
+                    unsaved: options && options.excludeCustomizedSaved
+                } ) );
+
+                return queryVars;
             },
 
-            save: function() {
-                var self = this,
+            /**
+             * Save (and publish) the customizer changeset.
+             *
+             * Updates to the changeset are transactional. If any of the settings
+             * are invalid then none of them will be written into the changeset.
+             * A revision will be made for the changeset post if revisions support
+             * has been added to the post type.
+             *
+             * @param {object} [args] Args.
+             * @param {string} [args.status=publish] Status.
+             * @param {string} [args.date] Date, in local time in MySQL format.
+             * @param {string} [args.title] Title
+             *
+             * @returns {jQuery.promise}
+             */
+            save: function( args ) {
+                var previewer = this,
+                    deferred = $.Deferred(),
+                    changesetStatus = 'publish',
                     processing = api.state( 'processing' ),
                     submitWhenDoneProcessing,
@@ -3759 +4143 @@
                     invalidControls;
 
-                body.addClass( 'saving' );
+                if ( args && args.status ) {
+                    changesetStatus = args.status;
+                }
+
+                if ( api.state( 'saving' ).get() ) {
+                    deferred.reject( 'already_saving' );
+                    deferred.promise();
+                }
+
+                api.state( 'saving' ).set( true );
 
                 function captureSettingModifiedDuringSave( setting ) {
@@ -3767 +4160 @@
 
                 submit = function () {
-                    var request, query;
+                    var request, query, settingInvalidities = {};
 
                     /*
@@ -3778 +4171 @@
                             if ( 'error' === notification.type && ! notification.fromServer ) {
                                 invalidSettings.push( setting.id );
+                                if ( ! settingInvalidities[ setting.id ] ) {
+                                    settingInvalidities[ setting.id ] = {};
+                                }
+                                settingInvalidities[ setting.id ][ notification.code ] = notification;
                             }
                         } );
@@ -3784 +4181 @@
                     if ( ! _.isEmpty( invalidControls ) ) {
                         _.values( invalidControls )[0][0].focus();
-                        body.removeClass( 'saving' );
                         api.unbind( 'change', captureSettingModifiedDuringSave );
-                        return;
+                        deferred.rejectWith( previewer, [
+                            { setting_invalidities: settingInvalidities }
+                        ] );
+                        api.state( 'saving' ).set( false );
+                        return deferred.promise();
                     }
 
-                    query = $.extend( self.query(), {
-                        nonce:  self.nonce.save
+                    /*
+                     * Note that excludeCustomizedSaved is intentionally false so that the entire
+                     * set of customized data will be included if bypassed changeset update.
+                     */
+                    query = $.extend( previewer.query( { excludeCustomizedSaved: false } ), {
+                        nonce: previewer.nonce.save,
+                        customize_changeset_status: changesetStatus
                     } );
+                    if ( args && args.date ) {
+                        query.customize_changeset_date = args.date;
+                    }
+                    if ( args && args.title ) {
+                        query.customize_changeset_title = args.title;
+                    }
+
+                    /*
+                     * Note that the dirty customized values will have already been set in the
+                     * changeset and so technically query.customized could be deleted. However,
+                     * it is remaining here to make sure that any settings that got updated
+                     * quietly which may have not triggered an update request will also get
+                     * included in the values that get saved to the changeset. This will ensure
+                     * that values that get injected via the saved event will be included in
+                     * the changeset. This also ensures that setting values that were invalid
+                     * will get re-validated, perhaps in the case of settings that are invalid
+                     * due to dependencies on other settings.
+                     */
                     request = wp.ajax.post( 'customize_save', query );
 
@@ -3800 +4223 @@
 
                     request.always( function () {
-                        body.removeClass( 'saving' );
+                        api.state( 'saving' ).set( false );
                         saveBtn.prop( 'disabled', false );
                         api.unbind( 'change', captureSettingModifiedDuringSave );
@@ -3806 +4229 @@
 
                     request.fail( function ( response ) {
+
                         if ( '0' === response ) {
                             response = 'not_logged_in';
@@ -3814 +4238 @@
 
                         if ( 'invalid_nonce' === response ) {
-                            self.cheatin();
+                            previewer.cheatin();
                         } else if ( 'not_logged_in' === response ) {
-                            self.preview.iframe.hide();
-                            self.login().done( function() {
-                                self.save();
-                                self.preview.iframe.show();
+                            previewer.preview.iframe.hide();
+                            previewer.login().done( function() {
+                                previewer.save();
+                                previewer.preview.iframe.show();
                             } );
                         }
@@ -3830 +4254 @@
                         }
 
+                        deferred.rejectWith( previewer, [ response ] );
                         api.trigger( 'error', response );
                     } );
@@ -3835 +4260 @@
                     request.done( function( response ) {
 
-                        // Clear setting dirty states, if setting wasn't modified while saving.
-                        api.each( function( setting ) {
-                            if ( ! modifiedWhileSaving[ setting.id ] ) {
-                                setting._dirty = false;
-                            }
-                        } );
-
-                        api.previewer.send( 'saved', response );
+                        previewer.send( 'saved', response );
+
+                        api.state( 'changesetStatus' ).set( response.changeset_status );
+                        if ( 'publish' === response.changeset_status ) {
+                            api.state( 'changesetStatus' ).set( '' );
+                            api.settings.changeset.uuid = response.next_changeset_uuid;
+                            parent.send( 'changeset-uuid', api.settings.changeset.uuid );
+                        }
 
                         if ( response.setting_validities ) {
@@ -3851 +4276 @@
                         }
 
+                        deferred.resolveWith( previewer, [ response ] );
                         api.trigger( 'saved', response );
 
@@ -3872 +4298 @@
                 }
 
+                return deferred.promise();
             }
         });
@@ -3958 +4385 @@
         api.bind( 'ready', api.reflowPaneContents );
         $( [ api.panel, api.section, api.control ] ).each( function ( i, values ) {
-            var debouncedReflowPaneContents = _.debounce( api.reflowPaneContents, 100 );
+            var debouncedReflowPaneContents = _.debounce( api.reflowPaneContents, api.settings.timeouts.reflowPaneContents );
             values.bind( 'add', debouncedReflowPaneContents );
             values.bind( 'change', debouncedReflowPaneContents );
             values.bind( 'remove', debouncedReflowPaneContents );
         } );
+
+        // Save and activated states
+        (function() {
+            var state = new api.Values(),
+                saved = state.create( 'saved' ),
+                saving = state.create( 'saving' ),
+                activated = state.create( 'activated' ),
+                processing = state.create( 'processing' ),
+                paneVisible = state.create( 'paneVisible' ),
+                changesetStatus = state.create( 'changesetStatus' ),
+                previewerAlive = state.create( 'previewerAlive' ),
+                populateChangesetUuidParam;
+
+            state.bind( 'change', function() {
+                var canSave;
+
+                if ( ! activated() ) {
+                    saveBtn.val( api.l10n.activate );
+                    closeBtn.find( '.screen-reader-text' ).text( api.l10n.cancel );
+
+                } else if ( '' === changesetStatus.get() && saved() ) {
+                    saveBtn.val( api.l10n.saved );
+                    closeBtn.find( '.screen-reader-text' ).text( api.l10n.close );
+
+                } else {
+                    saveBtn.val( api.l10n.save );
+                    closeBtn.find( '.screen-reader-text' ).text( api.l10n.cancel );
+                }
+
+                /*
+                 * Save (publish) button should be enabled if saving is not currently happening,
+                 * and if the theme is not active or the changeset exists but is not published.
+                 */
+                canSave = ! saving() && ( ! activated() || ! saved() || ( '' !== changesetStatus() && 'publish' !== changesetStatus() ) );
+
+                saveBtn.prop( 'disabled', ! canSave );
+            });
+
+            // Set default states.
+            saved( true );
+            saving( false );
+            activated( api.settings.theme.active );
+            processing( 0 );
+            paneVisible( true );
+            previewerAlive( true );
+            changesetStatus( api.settings.changeset.status );
+
+            api.bind( 'change', function() {
+                state('saved').set( false );
+            });
+
+            saving.bind( function( isSaving ) {
+                body.toggleClass( 'saving', isSaving );
+            } );
+
+            api.bind( 'saved', function( response ) {
+                state('saved').set( true );
+                if ( 'publish' === response.changeset_status ) {
+                    state( 'activated' ).set( true );
+                }
+            });
+
+            activated.bind( function( to ) {
+                if ( to ) {
+                    api.trigger( 'activated' );
+                }
+            });
+
+            populateChangesetUuidParam = function( isIncluded ) {
+                var urlParser, queryParams;
+                urlParser = document.createElement( 'a' );
+                urlParser.href = location.href;
+                queryParams = api.utils.parseQueryString( urlParser.search.substr( 1 ) );
+                if ( isIncluded ) {
+                    if ( queryParams.changeset_uuid === api.settings.changeset.uuid ) {
+                        return;
+                    }
+                    queryParams.changeset_uuid = api.settings.changeset.uuid;
+                } else {
+                    if ( ! queryParams.changeset_uuid ) {
+                        return;
+                    }
+                    delete queryParams.changeset_uuid;
+                }
+                urlParser.search = $.param( queryParams );
+                history.replaceState( {}, document.title, urlParser.href );
+            };
+
+            if ( history.replaceState ) {
+                saved.bind( function( isSaved ) {
+                    if ( ! isSaved ) {
+                        populateChangesetUuidParam( true );
+                    }
+                } );
+                changesetStatus.bind( function( newStatus ) {
+                    populateChangesetUuidParam( '' !== newStatus );
+                } );
+            }
+
+            // Expose states to the API.
+            api.state = state;
+        }());
 
         // Check if preview url is valid and load the preview frame.
@@ -3970 +4499 @@
             api.previewer.previewUrl( api.settings.url.home );
         }
-
-        // Save and activated states
-        (function() {
-            var state = new api.Values(),
-                saved = state.create( 'saved' ),
-                activated = state.create( 'activated' ),
-                processing = state.create( 'processing' ),
-                paneVisible = state.create( 'paneVisible' );
-
-            state.bind( 'change', function() {
-                if ( ! activated() ) {
-                    saveBtn.val( api.l10n.activate ).prop( 'disabled', false );
-                    closeBtn.find( '.screen-reader-text' ).text( api.l10n.cancel );
-
-                } else if ( saved() ) {
-                    saveBtn.val( api.l10n.saved ).prop( 'disabled', true );
-                    closeBtn.find( '.screen-reader-text' ).text( api.l10n.close );
-
-                } else {
-                    saveBtn.val( api.l10n.save ).prop( 'disabled', false );
-                    closeBtn.find( '.screen-reader-text' ).text( api.l10n.cancel );
-                }
-            });
-
-            // Set default states.
-            saved( true );
-            activated( api.settings.theme.active );
-            processing( 0 );
-            paneVisible( true );
-
-            api.bind( 'change', function() {
-                state('saved').set( false );
-            });
-
-            api.bind( 'saved', function() {
-                state('saved').set( true );
-                state('activated').set( true );
-            });
-
-            activated.bind( function( to ) {
-                if ( to ) {
-                    api.trigger( 'activated' );
-                }
-            });
-
-            // Expose states to the API.
-            api.state = state;
-        }());
 
         // Button bindings.
@@ -4170 +4651 @@
 
         // Prompt user with AYS dialog if leaving the Customizer with unsaved changes
-        $( window ).on( 'beforeunload', function () {
+        $( window ).on( 'beforeunload.customize-confirm', function () {
             if ( ! api.state( 'saved' )() ) {
                 setTimeout( function() {
@@ -4190 +4671 @@
             parent.send( 'title', newTitle );
         });
+
+        parent.send( 'changeset-uuid', api.settings.changeset.uuid );
 
         // Initialize the connection with the parent frame.
@@ -4293 +4776 @@
         });
 
+        // Autosave changeset.
+        ( function() {
+            var timeoutId, updateChangesetWithReschedule, scheduleChangesetUpdate, updatePending = false;
+
+            /**
+             * Request changeset update and then re-schedule the next changeset update time.
+             *
+             * @private
+             */
+            updateChangesetWithReschedule = function() {
+                if ( ! updatePending ) {
+                    updatePending = true;
+                    api.requestChangesetUpdate().always( function() {
+                        updatePending = false;
+                    } );
+                }
+                scheduleChangesetUpdate();
+            };
+
+            /**
+             * Schedule changeset update.
+             *
+             * @private
+             */
+            scheduleChangesetUpdate = function() {
+                clearTimeout( timeoutId );
+                timeoutId = setTimeout( function() {
+                    updateChangesetWithReschedule();
+                }, api.settings.timeouts.changesetAutoSave );
+            };
+
+            // Start auto-save interval for updating changeset.
+            scheduleChangesetUpdate();
+
+            // Save changeset when focus removed from window.
+            $( window ).on( 'blur.wp-customize-changeset-update', function() {
+                updateChangesetWithReschedule();
+            } );
+
+            // Save changeset before unloading window.
+            $( window ).on( 'beforeunload.wp-customize-changeset-update', function() {
+                updateChangesetWithReschedule();
+            } );
+        } ());
+
         api.trigger( 'ready' );
     });

trunk/src/wp-admin/js/customize-widgets.js

@@ -1155 +1155 @@
             params.wp_customize = 'on';
             params.nonce = api.settings.nonce['update-widget'];
-            params.theme = api.settings.theme.stylesheet;
+            params.customize_theme = api.settings.theme.stylesheet;
             params.customized = wp.customize.previewer.query().customized;
 

trunk/src/wp-includes/admin-bar.php

@@ -367 +367 @@
  *
  * @param WP_Admin_Bar $wp_admin_bar WP_Admin_Bar instance.
+ * @global WP_Customize_Manager $wp_customize
  */
 function wp_admin_bar_customize_menu( $wp_admin_bar ) {
+    global $wp_customize;
+
     // Don't show for users who can't access the customizer or when in the admin.
     if ( ! current_user_can( 'customize' ) || is_admin() ) {
@@ -374 +377 @@
     }
 
+    // Don't show if the user cannot edit a given customize_changeset post currently being previewed.
+    if ( is_customize_preview() && $wp_customize->changeset_post_id() && ! current_user_can( get_post_type_object( 'customize_changeset' )->cap->edit_post, $wp_customize->changeset_post_id() ) ) {
+        return;
+    }
+
     $current_url = ( is_ssl() ? 'https://' : 'http://' ) . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'];
+    if ( is_customize_preview() && $wp_customize->changeset_uuid() ) {
+        $current_url = remove_query_arg( 'customize_changeset_uuid', $current_url );
+    }
+
     $customize_url = add_query_arg( 'url', urlencode( $current_url ), wp_customize_url() );
+    if ( is_customize_preview() ) {
+        $customize_url = add_query_arg( array( 'changeset_uuid' => $wp_customize->changeset_uuid() ), $customize_url );
+    }
 
     $wp_admin_bar->add_menu( array(

trunk/src/wp-includes/class-wp-customize-manager.php

@@ -131 +131 @@
 
     /**
-     * Return value of check_ajax_referer() in customize_preview_init() method.
-     *
-     * @since 3.5.0
-     * @access protected
-     * @var false|int
-     */
-    protected $nonce_tick;
-
-    /**
      * Panel types that may be rendered from JS templates.
      *
@@ -194 +185 @@
 
     /**
+     * Messenger channel.
+     *
+     * @since 4.7.0
+     * @access protected
+     * @var string
+     */
+    protected $messenger_channel;
+
+    /**
      * Unsanitized values for Customize Settings parsed from $_POST['customized'].
      *
@@ -201 +201 @@
 
     /**
+     * Changeset UUID.
+     *
+     * @since 4.7.0
+     * @access private
+     * @var string
+     */
+    private $_changeset_uuid;
+
+    /**
+     * Changeset post ID.
+     *
+     * @since 4.7.0
+     * @access private
+     * @var int|false
+     */
+    private $_changeset_post_id;
+
+    /**
+     * Changeset data loaded from a customize_changeset post.
+     *
+     * @since 4.7.0
+     * @access private
+     * @var array
+     */
+    private $_changeset_data;
+
+    /**
      * Constructor.
      *
      * @since 3.4.0
-     */
-    public function __construct() {
+     * @since 4.7.0 Added $args param.
+     *
+     * @param array $args {
+     *     Args.
+     *
+     *     @type string $changeset_uuid    Changeset UUID, the post_name for the customize_changeset post containing the customized state. Defaults to new UUID.
+     *     @type string $theme             Theme to be previewed (for theme switch). Defaults to customize_theme or theme query params.
+     *     @type string $messenger_channel Messenger channel. Defaults to customize_messenger_channel query param.
+     * }
+     */
+    public function __construct( $args = array() ) {
+
+        $args = array_merge(
+            array_fill_keys( array( 'changeset_uuid', 'theme', 'messenger_channel' ), null ),
+            $args
+        );
+
+        // Note that the UUID format will be validated in the setup_theme() method.
+        if ( ! isset( $args['changeset_uuid'] ) ) {
+            $args['changeset_uuid'] = wp_generate_uuid4();
+        }
+
+        // The theme and messenger_channel should be supplied via $args, but they are also looked at in the $_REQUEST global here for back-compat.
+        if ( ! isset( $args['theme'] ) ) {
+            if ( isset( $_REQUEST['customize_theme'] ) ) {
+                $args['theme'] = wp_unslash( $_REQUEST['customize_theme'] );
+            } elseif ( isset( $_REQUEST['theme'] ) ) { // Deprecated.
+                $args['theme'] = wp_unslash( $_REQUEST['theme'] );
+            }
+        }
+        if ( ! isset( $args['messenger_channel'] ) && isset( $_REQUEST['customize_messenger_channel'] ) ) {
+            $args['messenger_channel'] = sanitize_key( wp_unslash( $_REQUEST['customize_messenger_channel'] ) );
+        }
+
+        $this->original_stylesheet = get_stylesheet();
+        $this->theme = wp_get_theme( $args['theme'] );
+        $this->messenger_channel = $args['messenger_channel'];
+        $this->_changeset_uuid = $args['changeset_uuid'];
+
         require_once( ABSPATH . WPINC . '/class-wp-customize-setting.php' );
         require_once( ABSPATH . WPINC . '/class-wp-customize-panel.php' );
@@ -272 +336 @@
         }
 
-        add_filter( 'wp_die_handler', array( $this, 'wp_die_handler' ) );
-
         add_action( 'setup_theme', array( $this, 'setup_theme' ) );
         add_action( 'wp_loaded',   array( $this, 'wp_loaded' ) );
-
-        // Run wp_redirect_status late to make sure we override the status last.
-        add_action( 'wp_redirect_status', array( $this, 'wp_redirect_status' ), 1000 );
 
         // Do not spawn cron (especially the alternate cron) while running the Customizer.
@@ -341 +400 @@
      */
     protected function wp_die( $ajax_message, $message = null ) {
-        if ( $this->doing_ajax() || isset( $_POST['customized'] ) ) {
+        if ( $this->doing_ajax() ) {
             wp_die( $ajax_message );
         }
@@ -349 +408 @@
         }
 
+        if ( $this->messenger_channel ) {
+            ob_start();
+            wp_enqueue_scripts();
+            wp_print_scripts( array( 'customize-base' ) );
+
+            $settings = array(
+                'messengerArgs' => array(
+                    'channel' => $this->messenger_channel,
+                    'url' => wp_customize_url(),
+                ),
+                'error' => $ajax_message,
+            );
+            ?>
+            <script>
+            ( function( api, settings ) {
+                var preview = new api.Messenger( settings.messengerArgs );
+                preview.send( 'iframe-loading-error', settings.error );
+            } )( wp.customize, <?php echo wp_json_encode( $settings ) ?> );
+            </script>
+            <?php
+            $message .= ob_get_clean();
+        }
+
         wp_die( $message );
     }
@@ -356 +438 @@
      *
      * @since 3.4.0
-     *
-     * @return string
+     * @deprecated 4.7.0
+     *
+     * @return callable Die handler.
      */
     public function wp_die_handler() {
+        _deprecated_function( __METHOD__, '4.7.0' );
+
         if ( $this->doing_ajax() || isset( $_POST['customized'] ) ) {
             return '_ajax_wp_die_handler';
@@ -375 +460 @@
      */
     public function setup_theme() {
-        send_origin_headers();
-
-        $doing_ajax_or_is_customized = ( $this->doing_ajax() || isset( $_POST['customized'] ) );
-        if ( is_admin() && ! $doing_ajax_or_is_customized ) {
-            auth_redirect();
-        } elseif ( $doing_ajax_or_is_customized && ! is_user_logged_in() ) {
-            $this->wp_die( 0, __( 'You must be logged in to complete this action.' ) );
-        }
-
-        show_admin_bar( false );
-
-        if ( ! current_user_can( 'customize' ) ) {
-            $this->wp_die( -1, __( 'Sorry, you are not allowed to customize this site.' ) );
-        }
-
-        $this->original_stylesheet = get_stylesheet();
-
-        $this->theme = wp_get_theme( isset( $_REQUEST['theme'] ) ? $_REQUEST['theme'] : null );
+        global $pagenow;
+
+        // Check permissions for customize.php access since this method is called before customize.php can run any code,
+        if ( 'customize.php' === $pagenow && ! current_user_can( 'customize' ) ) {
+            if ( ! is_user_logged_in() ) {
+                auth_redirect();
+            } else {
+                wp_die(
+                    '<h1>' . __( 'Cheatin&#8217; uh?' ) . '</h1>' .
+                    '<p>' . __( 'Sorry, you are not allowed to customize this site.' ) . '</p>',
+                    403
+                );
+            }
+            return;
+        }
+
+        if ( ! preg_match( '/^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/', $this->_changeset_uuid ) ) {
+            $this->wp_die( -1, __( 'Invalid changeset UUID' ) );
+        }
+
+        /*
+         * If unauthenticated then require a valid changeset UUID to load the preview.
+         * In this way, the UUID serves as a secret key. If the messenger channel is present,
+         * then send unauthenticated code to prompt re-auth.
+         */
+        if ( ! current_user_can( 'customize' ) && ! $this->changeset_post_id() ) {
+            $this->wp_die( $this->messenger_channel ? 0 : -1, __( 'Non-existent changeset UUID.' ) );
+        }
+
+        if ( ! headers_sent() ) {
+            send_origin_headers();
+        }
+
+        // Hide the admin bar if we're embedded in the customizer iframe.
+        if ( $this->messenger_channel ) {
+            show_admin_bar( false );
+        }
 
         if ( $this->is_theme_active() ) {
@@ -508 +612 @@
 
     /**
+     * Get the changeset UUID.
+     *
+     * @since 4.7.0
+     * @access public
+     *
+     * @return string UUID.
+     */
+    public function changeset_uuid() {
+        return $this->_changeset_uuid;
+    }
+
+    /**
      * Get the theme being customized.
      *
@@ -604 +720 @@
         do_action( 'customize_register', $this );
 
-        if ( $this->is_preview() && ! is_admin() )
+        /*
+         * Note that settings must be previewed here even outside the customizer preview
+         * and also in the customizer pane itself. This is to enable loading an existing
+         * changeset into the customizer. Previewing the settings only has to be prevented
+         * in the case of a customize_save action because then update_option()
+         * may short-circuit because it will detect that there are no changes to
+         * make.
+         */
+        if ( ! $this->doing_ajax( 'customize_save' ) ) {
+            foreach ( $this->settings as $setting ) {
+                $setting->preview();
+            }
+        }
+
+        if ( $this->is_preview() && ! is_admin() ) {
             $this->customize_preview_init();
+        }
     }
 
@@ -615 +746 @@
      *
      * @since 3.4.0
-     *
-     * @param $status
+     * @deprecated 4.7.0
+     *
+     * @param int $status Status.
      * @return int
      */
     public function wp_redirect_status( $status ) {
-        if ( $this->is_preview() && ! is_admin() )
+        _deprecated_function( __FUNCTION__, '4.7.0' );
+
+        if ( $this->is_preview() && ! is_admin() ) {
             return 200;
+        }
 
         return $status;
@@ -627 +762 @@
 
     /**
-     * Parse the incoming $_POST['customized'] JSON data and store the unsanitized
-     * settings for subsequent post_value() lookups.
+     * Find the changeset post ID for a given changeset UUID.
+     *
+     * @since 4.7.0
+     * @access public
+     *
+     * @param string $uuid Changeset UUID.
+     * @return int|null Returns post ID on success and null on failure.
+     */
+    public function find_changeset_post_id( $uuid ) {
+        $cache_group = 'customize_changeset_post';
+        $changeset_post_id = wp_cache_get( $uuid, $cache_group );
+        if ( $changeset_post_id && 'customize_changeset' === get_post_type( $changeset_post_id ) ) {
+            return $changeset_post_id;
+        }
+
+        $changeset_post_query = new WP_Query( array(
+            'post_type' => 'customize_changeset',
+            'post_status' => get_post_stati(),
+            'name' => $uuid,
+            'number' => 1,
+            'no_found_rows' => true,
+            'cache_results' => true,
+            'update_post_meta_cache' => false,
+            'update_term_meta_cache' => false,
+        ) );
+        if ( ! empty( $changeset_post_query->posts ) ) {
+            // Note: 'fields'=>'ids' is not being used in order to cache the post object as it will be needed.
+            $changeset_post_id = $changeset_post_query->posts[0]->ID;
+            wp_cache_set( $this->_changeset_uuid, $changeset_post_id, $cache_group );
+            return $changeset_post_id;
+        }
+
+        return null;
+    }
+
+    /**
+     * Get the changeset post id for the loaded changeset.
+     *
+     * @since 4.7.0
+     * @access public
+     *
+     * @return int|null Post ID on success or null if there is no post yet saved.
+     */
+    public function changeset_post_id() {
+        if ( ! isset( $this->_changeset_post_id ) ) {
+            $post_id = $this->find_changeset_post_id( $this->_changeset_uuid );
+            if ( ! $post_id ) {
+                $post_id = false;
+            }
+            $this->_changeset_post_id = $post_id;
+        }
+        if ( false === $this->_changeset_post_id ) {
+            return null;
+        }
+        return $this->_changeset_post_id;
+    }
+
+    /**
+     * Get the data stored in a changeset post.
+     *
+     * @since 4.7.0
+     * @access protected
+     *
+     * @param int $post_id Changeset post ID.
+     * @return array|WP_Error Changeset data or WP_Error on error.
+     */
+    protected function get_changeset_post_data( $post_id ) {
+        if ( ! $post_id ) {
+            return new WP_Error( 'empty_post_id' );
+        }
+        $changeset_post = get_post( $post_id );
+        if ( ! $changeset_post ) {
+            return new WP_Error( 'missing_post' );
+        }
+        if ( 'customize_changeset' !== $changeset_post->post_type ) {
+            return new WP_Error( 'wrong_post_type' );
+        }
+        $changeset_data = json_decode( $changeset_post->post_content, true );
+        if ( function_exists( 'json_last_error' ) && json_last_error() ) {
+            return new WP_Error( 'json_parse_error', '', json_last_error() );
+        }
+        if ( ! is_array( $changeset_data ) ) {
+            return new WP_Error( 'expected_array' );
+        }
+        return $changeset_data;
+    }
+
+    /**
+     * Get changeset data.
+     *
+     * @since 4.7.0
+     * @access public
+     *
+     * @return array Changeset data.
+     */
+    public function changeset_data() {
+        if ( isset( $this->_changeset_data ) ) {
+            return $this->_changeset_data;
+        }
+        $changeset_post_id = $this->changeset_post_id();
+        if ( ! $changeset_post_id ) {
+            $this->_changeset_data = array();
+        } else {
+            $data = $this->get_changeset_post_data( $changeset_post_id );
+            if ( ! is_wp_error( $data ) ) {
+                $this->_changeset_data = $data;
+            } else {
+                $this->_changeset_data = array();
+            }
+        }
+        return $this->_changeset_data;
+    }
+
+    /**
+     * Get dirty pre-sanitized setting values in the current customized state.
+     *
+     * The returned array consists of a merge of three sources:
+     * 1. If the theme is not currently active, then the base array is any stashed
+     *    theme mods that were modified previously but never published.
+     * 2. The values from the current changeset, if it exists.
+     * 3. If the user can customize, the values parsed from the incoming
+     *    `$_POST['customized']` JSON data.
+     * 4. Any programmatically-set post values via `WP_Customize_Manager::set_post_value()`.
+     *
+     * The name "unsanitized_post_values" is a carry-over from when the customized
+     * state was exclusively sourced from `$_POST['customized']`. Nevertheless,
+     * the value returned will come from the current changeset post and from the
+     * incoming post data.
      *
      * @since 4.1.1
-     *
+     * @since 4.7.0 Added $args param and merging with changeset values and stashed theme mods.
+     *
+     * @param array $args {
+     *     Args.
+     *
+     *     @type bool $exclude_changeset Whether the changeset values should also be excluded. Defaults to false.
+     *     @type bool $exclude_post_data Whether the post input values should also be excluded. Defaults to false when lacking the customize capability.
+     * }
      * @return array
      */
-    public function unsanitized_post_values() {
-        if ( ! isset( $this->_post_values ) ) {
-            if ( isset( $_POST['customized'] ) ) {
-                $this->_post_values = json_decode( wp_unslash( $_POST['customized'] ), true );
-            }
-            if ( empty( $this->_post_values ) ) { // if not isset or if JSON error
-                $this->_post_values = array();
-            }
-        }
-        if ( empty( $this->_post_values ) ) {
-            return array();
-        } else {
-            return $this->_post_values;
-        }
-    }
-
-    /**
-     * Returns the sanitized value for a given setting from the request's POST data.
+    public function unsanitized_post_values( $args = array() ) {
+        $args = array_merge(
+            array(
+                'exclude_changeset' => false,
+                'exclude_post_data' => ! current_user_can( 'customize' ),
+            ),
+            $args
+        );
+
+        $values = array();
+
+        // Let default values be from the stashed theme mods if doing a theme switch and if no changeset is present.
+        if ( ! $this->is_theme_active() ) {
+            $stashed_theme_mods = get_option( 'customize_stashed_theme_mods' );
+            $stylesheet = $this->get_stylesheet();
+            if ( isset( $stashed_theme_mods[ $stylesheet ] ) ) {
+                $values = array_merge( $values, wp_list_pluck( $stashed_theme_mods[ $stylesheet ], 'value' ) );
+            }
+        }
+
+        if ( ! $args['exclude_changeset'] ) {
+            foreach ( $this->changeset_data() as $setting_id => $setting_params ) {
+                if ( ! array_key_exists( 'value', $setting_params ) ) {
+                    continue;
+                }
+                if ( isset( $setting_params['type'] ) && 'theme_mod' === $setting_params['type'] ) {
+
+                    // Ensure that theme mods values are only used if they were saved under the current theme.
+                    $namespace_pattern = '/^(?P<stylesheet>.+?)::(?P<setting_id>.+)$/';
+                    if ( preg_match( $namespace_pattern, $setting_id, $matches ) && $this->get_stylesheet() === $matches['stylesheet'] ) {
+                        $values[ $matches['setting_id'] ] = $setting_params['value'];
+                    }
+                } else {
+                    $values[ $setting_id ] = $setting_params['value'];
+                }
+            }
+        }
+
+        if ( ! $args['exclude_post_data'] ) {
+            if ( ! isset( $this->_post_values ) ) {
+                if ( isset( $_POST['customized'] ) ) {
+                    $post_values = json_decode( wp_unslash( $_POST['customized'] ), true );
+                } else {
+                    $post_values = array();
+                }
+                if ( is_array( $post_values ) ) {
+                    $this->_post_values = $post_values;
+                } else {
+                    $this->_post_values = array();
+                }
+            }
+            $values = array_merge( $values, $this->_post_values );
+        }
+        return $values;
+    }
+
+    /**
+     * Returns the sanitized value for a given setting from the current customized state.
+     *
+     * The name "post_value" is a carry-over from when the customized state was exclusively
+     * sourced from `$_POST['customized']`. Nevertheless, the value returned will come
+     * from the current changeset post and from the incoming post data.
      *
      * @since 3.4.0
@@ -685 +997 @@
 
     /**
-     * Override a setting's (unsanitized) value as found in any incoming $_POST['customized'].
+     * Override a setting's value in the current customized state.
+     *
+     * The name "post_value" is a carry-over from when the customized state was
+     * exclusively sourced from `$_POST['customized']`.
      *
      * @since 4.2.0
@@ -694 +1009 @@
      */
     public function set_post_value( $setting_id, $value ) {
-        $this->unsanitized_post_values();
+        $this->unsanitized_post_values(); // Populate _post_values from $_POST['customized'].
         $this->_post_values[ $setting_id ] = $value;
 
@@ -734 +1049 @@
      */
     public function customize_preview_init() {
-        $this->nonce_tick = check_ajax_referer( 'preview-customize_' . $this->get_stylesheet(), 'nonce' );
+
+        /*
+         * Now that Customizer previews are loaded into iframes via GET requests
+         * and natural URLs with transaction UUIDs added, we need to ensure that
+         * the responses are never cached by proxies. In practice, this will not
+         * be needed if the user is logged-in anyway. But if anonymous access is
+         * allowed then the auth cookies would not be sent and WordPress would
+         * not send no-cache headers by default.
+         */
+        if ( ! headers_sent() ) {
+            nocache_headers();
+            header( 'X-Robots: noindex, nofollow, noarchive' );
+        }
+        add_action( 'wp_head', 'wp_no_robots' );
+        add_filter( 'wp_headers', array( $this, 'filter_iframe_security_headers' ) );
+
+        /*
+         * If preview is being served inside the customizer preview iframe, and
+         * if the user doesn't have customize capability, then it is assumed
+         * that the user's session has expired and they need to re-authenticate.
+         */
+        if ( $this->messenger_channel && ! current_user_can( 'customize' ) ) {
+            $this->wp_die( -1, __( 'Unauthorized. You may remove the customize_messenger_channel param to preview as frontend.' ) );
+            return;
+        }
 
         $this->prepare_controls();
 
+        add_filter( 'wp_redirect', array( $this, 'add_state_query_params' ) );
+
         wp_enqueue_script( 'customize-preview' );
-        add_action( 'wp', array( $this, 'customize_preview_override_404_status' ) );
-        add_action( 'wp_head', array( $this, 'customize_preview_base' ) );
         add_action( 'wp_head', array( $this, 'customize_preview_loading_style' ) );
         add_action( 'wp_footer', array( $this, 'customize_preview_settings' ), 20 );
-        add_action( 'shutdown', array( $this, 'customize_preview_signature' ), 1000 );
-        add_filter( 'wp_die_handler', array( $this, 'remove_preview_signature' ) );
-
-        foreach ( $this->settings as $setting ) {
-            $setting->preview();
-        }
 
         /**
@@ -762 +1095 @@
 
     /**
+     * Filter the X-Frame-Options and Content-Security-Policy headers to ensure frontend can load in customizer.
+     *
+     * @since 4.7.0
+     * @access public
+     *
+     * @param array $headers Headers.
+     * @return array Headers.
+     */
+    public function filter_iframe_security_headers( $headers ) {
+        $customize_url = admin_url( 'customize.php' );
+        $headers['X-Frame-Options'] = 'ALLOW-FROM ' . $customize_url;
+        $headers['Content-Security-Policy'] = 'frame-ancestors ' . preg_replace( '#^(\w+://[^/]+).+?$#', '$1', $customize_url );
+        return $headers;
+    }
+
+    /**
+     * Add customize state query params to a given URL if preview is allowed.
+     *
+     * @since 4.7.0
+     * @access public
+     * @see wp_redirect()
+     * @see WP_Customize_Manager::get_allowed_url()
+     *
+     * @param string $url URL.
+     * @return string URL.
+     */
+    public function add_state_query_params( $url ) {
+        $parsed_original_url = wp_parse_url( $url );
+        $is_allowed = false;
+        foreach ( $this->get_allowed_urls() as $allowed_url ) {
+            $parsed_allowed_url = wp_parse_url( $allowed_url );
+            $is_allowed = (
+                $parsed_allowed_url['scheme'] === $parsed_original_url['scheme']
+                &&
+                $parsed_allowed_url['host'] === $parsed_original_url['host']
+                &&
+                0 === strpos( $parsed_original_url['path'], $parsed_allowed_url['path'] )
+            );
+            if ( $is_allowed ) {
+                break;
+            }
+        }
+
+        if ( $is_allowed ) {
+            $query_params = array(
+                'customize_changeset_uuid' => $this->changeset_uuid(),
+            );
+            if ( ! $this->is_theme_active() ) {
+                $query_params['customize_theme'] = $this->get_stylesheet();
+            }
+            if ( $this->messenger_channel ) {
+                $query_params['customize_messenger_channel'] = $this->messenger_channel;
+            }
+            $url = add_query_arg( $query_params, $url );
+        }
+
+        return $url;
+    }
+
+    /**
      * Prevent sending a 404 status when returning the response for the customize
      * preview, since it causes the jQuery Ajax to fail. Send 200 instead.
      *
      * @since 4.0.0
+     * @deprecated 4.7.0
      * @access public
      */
     public function customize_preview_override_404_status() {
-        if ( is_404() ) {
-            status_header( 200 );
-        }
+        _deprecated_function( __METHOD__, '4.7.0' );
     }
 
@@ -778 +1170 @@
      *
      * @since 3.4.0
+     * @deprecated 4.7.0
      */
     public function customize_preview_base() {
-        ?><base href="<?php echo home_url( '/' ); ?>" /><?php
+        _deprecated_function( __METHOD__, '4.7.0' );
     }
 
@@ -810 +1203 @@
                 pointer-events: none !important;
             }
+            form.customize-unpreviewable,
+            form.customize-unpreviewable input,
+            form.customize-unpreviewable select,
+            form.customize-unpreviewable button,
+            a.customize-unpreviewable,
+            area.customize-unpreviewable {
+                cursor: not-allowed !important;
+            }
         </style><?php
     }
@@ -819 +1220 @@
      */
     public function customize_preview_settings() {
-        $setting_validities = $this->validate_setting_values( $this->unsanitized_post_values() );
+        $post_values = $this->unsanitized_post_values( array( 'exclude_changeset' => true ) );
+        $setting_validities = $this->validate_setting_values( $post_values );
         $exported_setting_validities = array_map( array( $this, 'prepare_setting_validity_for_js' ), $setting_validities );
 
+        // Note that the REQUEST_URI is not passed into home_url() since this breaks subdirectory installs.
+        $self_url = empty( $_SERVER['REQUEST_URI'] ) ? home_url( '/' ) : esc_url_raw( wp_unslash( $_SERVER['REQUEST_URI'] ) );
+        $state_query_params = array(
+            'customize_theme',
+            'customize_changeset_uuid',
+            'customize_messenger_channel',
+        );
+        $self_url = remove_query_arg( $state_query_params, $self_url );
+
+        $allowed_urls = $this->get_allowed_urls();
+        $allowed_hosts = array();
+        foreach ( $allowed_urls as $allowed_url ) {
+            $parsed = wp_parse_url( $allowed_url );
+            if ( empty( $parsed['host'] ) ) {
+                continue;
+            }
+            $host = $parsed['host'];
+            if ( ! empty( $parsed['port'] ) ) {
+                $host .= ':' . $parsed['port'];
+            }
+            $allowed_hosts[] = $host;
+        }
         $settings = array(
+            'changeset' => array(
+                'uuid' => $this->_changeset_uuid,
+            ),
+            'timeouts' => array(
+                'selectiveRefresh' => 250,
+                'keepAliveSend' => 1000,
+            ),
             'theme' => array(
                 'stylesheet' => $this->get_stylesheet(),
@@ -828 +1259 @@
             ),
             'url' => array(
-                'self' => empty( $_SERVER['REQUEST_URI'] ) ? home_url( '/' ) : esc_url_raw( wp_unslash( $_SERVER['REQUEST_URI'] ) ),
+                'self' => $self_url,
+                'allowed' => array_map( 'esc_url_raw', $this->get_allowed_urls() ),
+                'allowedHosts' => array_unique( $allowed_hosts ),
+                'isCrossDomain' => $this->is_cross_domain(),
             ),
-            'channel' => wp_unslash( $_POST['customize_messenger_channel'] ),
+            'channel' => $this->messenger_channel,
             'activePanels' => array(),
             'activeSections' => array(),
             'activeControls' => array(),
             'settingValidities' => $exported_setting_validities,
-            'nonce' => $this->get_nonces(),
+            'nonce' => current_user_can( 'customize' ) ? $this->get_nonces() : array(),
             'l10n' => array(
                 'shiftClickToEdit' => __( 'Shift-click to edit this element.' ),
+                'linkUnpreviewable' => __( 'This link is not live-previewable.' ),
+                'formUnpreviewable' => __( 'This form is not live-previewable.' ),
             ),
-            '_dirty' => array_keys( $this->unsanitized_post_values() ),
+            '_dirty' => array_keys( $post_values ),
         );
 
@@ -893 +1329 @@
      *
      * @since 3.4.0
+     * @deprecated 4.7.0
      */
     public function customize_preview_signature() {
-        echo 'WP_CUSTOMIZER_SIGNATURE';
+        _deprecated_function( __METHOD__, '4.7.0' );
     }
 
@@ -902 +1339 @@
      *
      * @since 3.4.0
+     * @deprecated 4.7.0
      *
      * @param mixed $return Value passed through for {@see 'wp_die_handler'} filter.
@@ -907 +1345 @@
      */
     public function remove_preview_signature( $return = null ) {
-        remove_action( 'shutdown', array( $this, 'customize_preview_signature' ), 1000 );
+        _deprecated_function( __METHOD__, '4.7.0' );
 
         return $return;
@@ -994 +1432 @@
      *
      * @param array $setting_values Mapping of setting IDs to values to validate and sanitize.
+     * @param array $options {
+     *     Options.
+     *
+     *     @type bool $validate_existence  Whether a setting's existence will be checked.
+     *     @type bool $validate_capability Whether the setting capability will be checked.
+     * }
      * @return array Mapping of setting IDs to return value of validate method calls, either `true` or `WP_Error`.
      */
-    public function validate_setting_values( $setting_values ) {
+    public function validate_setting_values( $setting_values, $options = array() ) {
+        $options = wp_parse_args( $options, array(
+            'validate_capability' => false,
+            'validate_existence' => false,
+        ) );
+
         $validities = array();
         foreach ( $setting_values as $setting_id => $unsanitized_value ) {
             $setting = $this->get_setting( $setting_id );
-            if ( ! $setting || is_null( $unsanitized_value ) ) {
+            if ( ! $setting ) {
+                if ( $options['validate_existence'] ) {
+                    $validities[ $setting_id ] = new WP_Error( 'unrecognized', __( 'Setting does not exist or is unrecognized.' ) );
+                }
                 continue;
             }
-            $validity = $setting->validate( $unsanitized_value );
+            if ( is_null( $unsanitized_value ) ) {
+                continue;
+            }
+            if ( $options['validate_capability'] && ! current_user_can( $setting->capability ) ) {
+                $validity = new WP_Error( 'unauthorized', __( 'Unauthorized to modify setting due to capability.' ) );
+            } else {
+                $validity = $setting->validate( $unsanitized_value );
+            }
             if ( ! is_wp_error( $validity ) ) {
                 /** This filter is documented in wp-includes/class-wp-customize-setting.php */
@@ -1057 +1516 @@
 
     /**
-     * Switch the theme and trigger the save() method on each setting.
-     *
-     * @since 3.4.0
+     * Handle customize_save WP Ajax request to save/update a changeset.
+     *
+     * @since 3.4.0
+     * @since 4.7.0 The semantics of this method have changed to update a changeset, optionally to also change the status and other attributes.
      */
     public function save() {
+        if ( ! is_user_logged_in() ) {
+            wp_send_json_error( 'unauthenticated' );
+        }
+
         if ( ! $this->is_preview() ) {
             wp_send_json_error( 'not_preview' );
@@ -1071 +1535 @@
         }
 
+        $changeset_post_id = $this->changeset_post_id();
+        if ( $changeset_post_id && in_array( get_post_status( $changeset_post_id ), array( 'publish', 'trash' ) ) ) {
+            wp_send_json_error( 'changeset_already_published' );
+        }
+
+        if ( empty( $changeset_post_id ) ) {
+            if ( ! current_user_can( get_post_type_object( 'customize_changeset' )->cap->create_posts ) ) {
+                wp_send_json_error( 'cannot_create_changeset_post' );
+            }
+        } else {
+            if ( ! current_user_can( get_post_type_object( 'customize_changeset' )->cap->edit_post, $changeset_post_id ) ) {
+                wp_send_json_error( 'cannot_edit_changeset_post' );
+            }
+        }
+
+        if ( ! empty( $_POST['customize_changeset_data'] ) ) {
+            $input_changeset_data = json_decode( wp_unslash( $_POST['customize_changeset_data'] ), true );
+            if ( ! is_array( $input_changeset_data ) ) {
+                wp_send_json_error( 'invalid_customize_changeset_data' );
+            }
+        } else {
+            $input_changeset_data = array();
+        }
+
+        // Validate title.
+        $changeset_title = null;
+        if ( isset( $_POST['customize_changeset_title'] ) ) {
+            $changeset_title = sanitize_text_field( wp_unslash( $_POST['customize_changeset_title'] ) );
+        }
+
+        // Validate changeset status param.
+        $is_publish = null;
+        $changeset_status = null;
+        if ( isset( $_POST['customize_changeset_status'] ) ) {
+            $changeset_status = wp_unslash( $_POST['customize_changeset_status'] );
+            if ( ! get_post_status_object( $changeset_status ) || ! in_array( $changeset_status, array( 'draft', 'pending', 'publish', 'future' ), true ) ) {
+                wp_send_json_error( 'bad_customize_changeset_status', 400 );
+            }
+            $is_publish = ( 'publish' === $changeset_status || 'future' === $changeset_status );
+            if ( $is_publish ) {
+                if ( ! current_user_can( get_post_type_object( 'customize_changeset' )->cap->publish_posts ) ) {
+                    wp_send_json_error( 'changeset_publish_unauthorized', 403 );
+                }
+                if ( false === has_action( 'transition_post_status', '_wp_customize_publish_changeset' ) ) {
+                    wp_send_json_error( 'missing_publish_callback', 500 );
+                }
+            }
+        }
+
+        /*
+         * Validate changeset date param. Date is assumed to be in local time for
+         * the WP if in MySQL format (YYYY-MM-DD HH:MM:SS). Otherwise, the date
+         * is parsed with strtotime() so that ISO date format may be supplied
+         * or a string like "+10 minutes".
+         */
+        $changeset_date_gmt = null;
+        if ( isset( $_POST['customize_changeset_date'] ) ) {
+            $changeset_date = wp_unslash( $_POST['customize_changeset_date'] );
+            if ( preg_match( '/^\d\d\d\d-\d\d-\d\d \d\d:\d\d:\d\d$/', $changeset_date ) ) {
+                $mm = substr( $changeset_date, 5, 2 );
+                $jj = substr( $changeset_date, 8, 2 );
+                $aa = substr( $changeset_date, 0, 4 );
+                $valid_date = wp_checkdate( $mm, $jj, $aa, $changeset_date );
+                if ( ! $valid_date ) {
+                    wp_send_json_error( 'bad_customize_changeset_date', 400 );
+                }
+                $changeset_date_gmt = get_gmt_from_date( $changeset_date );
+            } else {
+                $timestamp = strtotime( $changeset_date );
+                if ( ! $timestamp ) {
+                    wp_send_json_error( 'bad_customize_changeset_date', 400 );
+                }
+                $changeset_date_gmt = gmdate( 'Y-m-d H:i:s', $timestamp );
+            }
+            $now = gmdate( 'Y-m-d H:i:59' );
+
+            $is_future_dated = ( mysql2date( 'U', $changeset_date_gmt, false ) > mysql2date( 'U', $now, false ) );
+            if ( ! $is_future_dated ) {
+                wp_send_json_error( 'not_future_date', 400 ); // Only future dates are allowed.
+            }
+
+            if ( ! $this->is_theme_active() && ( 'future' === $changeset_status || $is_future_dated ) ) {
+                wp_send_json_error( 'cannot_schedule_theme_switches', 400 ); // This should be allowed in the future, when theme is a regular setting.
+            }
+            $will_remain_auto_draft = ( ! $changeset_status && ( ! $changeset_post_id || 'auto-draft' === get_post_status( $changeset_post_id ) ) );
+            if ( $changeset_date && $will_remain_auto_draft ) {
+                wp_send_json_error( 'cannot_supply_date_for_auto_draft_changeset', 400 );
+            }
+        }
+
+        $r = $this->save_changeset_post( array(
+            'status' => $changeset_status,
+            'title' => $changeset_title,
+            'date_gmt' => $changeset_date_gmt,
+            'data' => $input_changeset_data,
+        ) );
+        if ( is_wp_error( $r ) ) {
+            $response = $r->get_error_data();
+        } else {
+            $response = $r;
+
+            // Note that if the changeset status was publish, then it will get set to trash if revisions are not supported.
+            $response['changeset_status'] = get_post_status( $this->changeset_post_id() );
+            if ( $is_publish && 'trash' === $response['changeset_status'] ) {
+                $response['changeset_status'] = 'publish';
+            }
+
+            if ( 'publish' === $response['changeset_status'] ) {
+                $response['next_changeset_uuid'] = wp_generate_uuid4();
+            }
+        }
+
+        if ( isset( $response['setting_validities'] ) ) {
+            $response['setting_validities'] = array_map( array( $this, 'prepare_setting_validity_for_js' ), $response['setting_validities'] );
+        }
+
+        /**
+         * Filters response data for a successful customize_save Ajax request.
+         *
+         * This filter does not apply if there was a nonce or authentication failure.
+         *
+         * @since 4.2.0
+         *
+         * @param array                $response Additional information passed back to the 'saved'
+         *                                       event on `wp.customize`.
+         * @param WP_Customize_Manager $this     WP_Customize_Manager instance.
+         */
+        $response = apply_filters( 'customize_save_response', $response, $this );
+
+        if ( is_wp_error( $r ) ) {
+            wp_send_json_error( $response );
+        } else {
+            wp_send_json_success( $response );
+        }
+    }
+
+    /**
+     * Save the post for the loaded changeset.
+     *
+     * @since 4.7.0
+     * @access public
+     *
+     * @param array $args {
+     *     Args for changeset post.
+     *
+     *     @type array  $data     Optional additional changeset data. Values will be merged on top of any existing post values.
+     *     @type string $status   Post status. Optional. If supplied, the save will be transactional and a post revision will be allowed.
+     *     @type string $title    Post title. Optional.
+     *     @type string $date_gmt Date in GMT. Optional.
+     * }
+     *
+     * @return array|WP_Error Returns array on success and WP_Error with array data on error.
+     */
+    function save_changeset_post( $args = array() ) {
+
+        $args = array_merge(
+            array(
+                'status' => null,
+                'title' => null,
+                'data' => array(),
+                'date_gmt' => null,
+            ),
+            $args
+        );
+
+        $changeset_post_id = $this->changeset_post_id();
+
+        // The request was made via wp.customize.previewer.save().
+        $update_transactionally = (bool) $args['status'];
+        $allow_revision = (bool) $args['status'];
+
+        // Amend post values with any supplied data.
+        foreach ( $args['data'] as $setting_id => $setting_params ) {
+            if ( array_key_exists( 'value', $setting_params ) ) {
+                $this->set_post_value( $setting_id, $setting_params['value'] ); // Add to post values so that they can be validated and sanitized.
+            }
+        }
+
+        // Note that in addition to post data, this will include any stashed theme mods.
+        $post_values = $this->unsanitized_post_values( array(
+            'exclude_changeset' => true,
+            'exclude_post_data' => false,
+        ) );
+        $this->add_dynamic_settings( array_keys( $post_values ) ); // Ensure settings get created even if they lack an input value.
+
         /**
          * Fires before save validation happens.
@@ -1085 +1734 @@
 
         // Validate settings.
-        $setting_validities = $this->validate_setting_values( $this->unsanitized_post_values() );
+        $setting_validities = $this->validate_setting_values( $post_values, array(
+            'validate_capability' => true,
+            'validate_existence' => true,
+        ) );
         $invalid_setting_count = count( array_filter( $setting_validities, 'is_wp_error' ) );
-        $exported_setting_validities = array_map( array( $this, 'prepare_setting_validity_for_js' ), $setting_validities );
-        if ( $invalid_setting_count > 0 ) {
+
+        /*
+         * Short-circuit if there are invalid settings the update is transactional.
+         * A changeset update is transactional when a status is supplied in the request.
+         */
+        if ( $update_transactionally && $invalid_setting_count > 0 ) {
             $response = array(
-                'setting_validities' => $exported_setting_validities,
+                'setting_validities' => $setting_validities,
                 'message' => sprintf( _n( 'There is %s invalid setting.', 'There are %s invalid settings.', $invalid_setting_count ), number_format_i18n( $invalid_setting_count ) ),
             );
-
-            /** This filter is documented in wp-includes/class-wp-customize-manager.php */
-            $response = apply_filters( 'customize_save_response', $response, $this );
-            wp_send_json_error( $response );
-        }
-
-        // Do we have to switch themes?
-        if ( ! $this->is_theme_active() ) {
-            // Temporarily stop previewing the theme to allow switch_themes()
-            // to operate properly.
+            return new WP_Error( 'transaction_fail', '', $response );
+        }
+
+        $response = array(
+            'setting_validities' => $setting_validities,
+        );
+
+        // Obtain/merge data for changeset.
+        $original_changeset_data = $this->get_changeset_post_data( $changeset_post_id );
+        $data = $original_changeset_data;
+        if ( is_wp_error( $data ) ) {
+            $data = array();
+        }
+
+        // Ensure that all post values are included in the changeset data.
+        foreach ( $post_values as $setting_id => $post_value ) {
+            if ( ! isset( $args['data'][ $setting_id ] ) ) {
+                $args['data'][ $setting_id ] = array();
+            }
+            if ( ! isset( $args['data'][ $setting_id ]['value'] ) ) {
+                $args['data'][ $setting_id ]['value'] = $post_value;
+            }
+        }
+
+        foreach ( $args['data'] as $setting_id => $setting_params ) {
+            $setting = $this->get_setting( $setting_id );
+            if ( ! $setting || ! $setting->check_capabilities() ) {
+                continue;
+            }
+
+            // Skip updating changeset for invalid setting values.
+            if ( isset( $setting_validities[ $setting_id ] ) && is_wp_error( $setting_validities[ $setting_id ] ) ) {
+                continue;
+            }
+
+            $changeset_setting_id = $setting_id;
+            if ( 'theme_mod' === $setting->type ) {
+                $changeset_setting_id = sprintf( '%s::%s', $this->get_stylesheet(), $setting_id );
+            }
+
+            if ( null === $setting_params ) {
+                // Remove setting from changeset entirely.
+                unset( $data[ $changeset_setting_id ] );
+            } else {
+                // Merge any additional setting params that have been supplied with the existing params.
+                if ( ! isset( $data[ $changeset_setting_id ] ) ) {
+                    $data[ $changeset_setting_id ] = array();
+                }
+                $data[ $changeset_setting_id ] = array_merge(
+                    $data[ $changeset_setting_id ],
+                    $setting_params,
+                    array( 'type' => $setting->type )
+                );
+            }
+        }
+
+        $filter_context = array(
+            'uuid' => $this->changeset_uuid(),
+            'title' => $args['title'],
+            'status' => $args['status'],
+            'date_gmt' => $args['date_gmt'],
+            'post_id' => $changeset_post_id,
+            'previous_data' => is_wp_error( $original_changeset_data ) ? array() : $original_changeset_data,
+            'manager' => $this,
+        );
+
+        /**
+         * Filters the settings' data that will be persisted into the changeset.
+         *
+         * Plugins may amend additional data (such as additional meta for settings) into the changeset with this filter.
+         *
+         * @since 4.7.0
+         *
+         * @param array $data Updated changeset data, mapping setting IDs to arrays containing a $value item and optionally other metadata.
+         * @param array $context {
+         *     Filter context.
+         *
+         *     @type string               $uuid          Changeset UUID.
+         *     @type string               $title         Requested title for the changeset post.
+         *     @type string               $status        Requested status for the changeset post.
+         *     @type string               $date_gmt      Requested date for the changeset post in MySQL format and GMT timezone.
+         *     @type int|false            $post_id       Post ID for the changeset, or false if it doesn't exist yet.
+         *     @type array                $previous_data Previous data contained in the changeset.
+         *     @type WP_Customize_Manager $manager       Manager instance.
+         * }
+         */
+        $data = apply_filters( 'customize_changeset_save_data', $data, $filter_context );
+
+        // Switch theme if publishing changes now.
+        if ( 'publish' === $args['status'] && ! $this->is_theme_active() ) {
+            // Temporarily stop previewing the theme to allow switch_themes() to operate properly.
             $this->stop_previewing_theme();
             switch_theme( $this->get_stylesheet() );
@@ -1109 +1846 @@
         }
 
+        // Gather the data for wp_insert_post()/wp_update_post().
+        $json_options = 0;
+        if ( defined( 'JSON_UNESCAPED_SLASHES' ) ) {
+            $json_options |= JSON_UNESCAPED_SLASHES; // Introduced in PHP 5.4. This is only to improve readability as slashes needn't be escaped in storage.
+        }
+        $json_options |= JSON_PRETTY_PRINT; // Also introduced in PHP 5.4, but WP defines constant for back compat. See WP Trac #30139.
+        $post_array = array(
+            'post_content' => wp_json_encode( $data, $json_options ),
+        );
+        if ( $args['title'] ) {
+            $post_array['post_title'] = $args['title'];
+        }
+        if ( $changeset_post_id ) {
+            $post_array['ID'] = $changeset_post_id;
+        } else {
+            $post_array['post_type'] = 'customize_changeset';
+            $post_array['post_name'] = $this->changeset_uuid();
+            $post_array['post_status'] = 'auto-draft';
+        }
+        if ( $args['status'] ) {
+            $post_array['post_status'] = $args['status'];
+        }
+        if ( $args['date_gmt'] ) {
+            $post_array['post_date_gmt'] = $args['date_gmt'];
+            $post_array['post_date'] = get_date_from_gmt( $args['date_gmt'] );
+        }
+
+        $this->store_changeset_revision = $allow_revision;
+        add_filter( 'wp_save_post_revision_post_has_changed', array( $this, '_filter_revision_post_has_changed' ), 5, 3 );
+
+        // Update the changeset post. The publish_customize_changeset action will cause the settings in the changeset to be saved via WP_Customize_Setting::save().
+        $has_kses = ( false !== has_filter( 'content_save_pre', 'wp_filter_post_kses' ) );
+        if ( $has_kses ) {
+            kses_remove_filters(); // Prevent KSES from corrupting JSON in post_content.
+        }
+
+        // Note that updating a post with publish status will trigger WP_Customize_Manager::publish_changeset_values().
+        if ( $changeset_post_id ) {
+            $post_array['edit_date'] = true; // Prevent date clearing.
+            $r = wp_update_post( wp_slash( $post_array ), true );
+        } else {
+            $r = wp_insert_post( wp_slash( $post_array ), true );
+            if ( ! is_wp_error( $r ) ) {
+                $this->_changeset_post_id = $r; // Update cached post ID for the loaded changeset.
+            }
+        }
+        if ( $has_kses ) {
+            kses_init_filters();
+        }
+        $this->_changeset_data = null; // Reset so WP_Customize_Manager::changeset_data() will re-populate with updated contents.
+
+        remove_filter( 'wp_save_post_revision_post_has_changed', array( $this, '_filter_revision_post_has_changed' ) );
+
+        if ( is_wp_error( $r ) ) {
+            $response['changeset_post_save_failure'] = $r->get_error_code();
+            return new WP_Error( 'changeset_post_save_failure', '', $response );
+        }
+
+        return $response;
+    }
+
+    /**
+     * Whether a changeset revision should be made.
+     *
+     * @since 4.7.0
+     * @access private
+     * @var bool
+     */
+    protected $store_changeset_revision;
+
+    /**
+     * Filters whether a changeset has changed to create a new revision.
+     *
+     * Note that this will not be called while a changeset post remains in auto-draft status.
+     *
+     * @since 4.7.0
+     * @access private
+     *
+     * @param bool    $post_has_changed Whether the post has changed.
+     * @param WP_Post $last_revision    The last revision post object.
+     * @param WP_Post $post             The post object.
+     *
+     * @return bool Whether a revision should be made.
+     */
+    public function _filter_revision_post_has_changed( $post_has_changed, $last_revision, $post ) {
+        unset( $last_revision );
+        if ( 'customize_changeset' === $post->post_type ) {
+            $post_has_changed = $this->store_changeset_revision;
+        }
+        return $post_has_changed;
+    }
+
+    /**
+     * Publish changeset values.
+     *
+     * This will the values contained in a changeset, even changesets that do not
+     * correspond to current manager instance. This is called by
+     * `_wp_customize_publish_changeset()` when a customize_changeset post is
+     * transitioned to the `publish` status. As such, this method should not be
+     * called directly and instead `wp_publish_post()` should be used.
+     *
+     * Please note that if the settings in the changeset are for a non-activated
+     * theme, the theme must first be switched to (via `switch_theme()`) before
+     * invoking this method.
+     *
+     * @since 4.7.0
+     * @access private
+     * @see _wp_customize_publish_changeset()
+     *
+     * @param int $changeset_post_id ID for customize_changeset post. Defaults to the changeset for the current manager instance.
+     * @return true|WP_Error True or error info.
+     */
+    public function _publish_changeset_values( $changeset_post_id ) {
+        $publishing_changeset_data = $this->get_changeset_post_data( $changeset_post_id );
+        if ( is_wp_error( $publishing_changeset_data ) ) {
+            return $publishing_changeset_data;
+        }
+
+        $changeset_post = get_post( $changeset_post_id );
+
+        /*
+         * Temporarily override the changeset context so that it will be read
+         * in calls to unsanitized_post_values() and so that it will be available
+         * on the $wp_customize object passed to hooks during the save logic.
+         */
+        $previous_changeset_post_id = $this->_changeset_post_id;
+        $this->_changeset_post_id   = $changeset_post_id;
+        $previous_changeset_uuid    = $this->_changeset_uuid;
+        $this->_changeset_uuid      = $changeset_post->post_name;
+        $previous_changeset_data    = $this->_changeset_data;
+        $this->_changeset_data      = $publishing_changeset_data;
+
+        // Ensure that other theme mods are stashed.
+        $other_theme_mod_settings = array();
+        if ( did_action( 'switch_theme' ) ) {
+            $namespace_pattern = '/^(?P<stylesheet>.+?)::(?P<setting_id>.+)$/';
+            $matches = array();
+            foreach ( $this->_changeset_data as $raw_setting_id => $setting_params ) {
+                $is_other_theme_mod = (
+                    isset( $setting_params['value'] )
+                    &&
+                    isset( $setting_params['type'] )
+                    &&
+                    'theme_mod' === $setting_params['type']
+                    &&
+                    preg_match( $namespace_pattern, $raw_setting_id, $matches )
+                    &&
+                    $this->get_stylesheet() !== $matches['stylesheet']
+                );
+                if ( $is_other_theme_mod ) {
+                    if ( ! isset( $other_theme_mod_settings[ $matches['stylesheet'] ] ) ) {
+                        $other_theme_mod_settings[ $matches['stylesheet'] ] = array();
+                    }
+                    $other_theme_mod_settings[ $matches['stylesheet'] ][ $matches['setting_id'] ] = $setting_params;
+                }
+            }
+        }
+
+        $changeset_setting_values = $this->unsanitized_post_values( array(
+            'exclude_post_data' => true,
+            'exclude_changeset' => false,
+        ) );
+        $changeset_setting_ids = array_keys( $changeset_setting_values );
+        $this->add_dynamic_settings( $changeset_setting_ids );
+
         /**
          * Fires once the theme has switched in the Customizer, but before settings
@@ -1115 +2017 @@
          * @since 3.4.0
          *
-         * @param WP_Customize_Manager $this WP_Customize_Manager instance.
+         * @param WP_Customize_Manager $manager WP_Customize_Manager instance.
          */
         do_action( 'customize_save', $this );
 
-        foreach ( $this->settings as $setting ) {
-            $setting->save();
+        /*
+         * Ensure that all settings will allow themselves to be saved. Note that
+         * this is safe because the setting would have checked the capability
+         * when the setting value was written into the changeset. So this is why
+         * an additional capability check is not required here.
+         */
+        $original_setting_capabilities = array();
+        foreach ( $changeset_setting_ids as $setting_id ) {
+            $setting = $this->get_setting( $setting_id );
+            if ( $setting ) {
+                $original_setting_capabilities[ $setting->id ] = $setting->capability;
+                $setting->capability = 'exist';
+            }
+        }
+
+        foreach ( $changeset_setting_ids as $setting_id ) {
+            $setting = $this->get_setting( $setting_id );
+            if ( $setting ) {
+                $setting->save();
+            }
+        }
+
+        // Update the stashed theme mod settings, removing the active theme's stashed settings, if activated.
+        if ( did_action( 'switch_theme' ) ) {
+            $this->update_stashed_theme_mod_settings( $other_theme_mod_settings );
         }
 
@@ -1128 +2053 @@
          * @since 3.6.0
          *
-         * @param WP_Customize_Manager $this WP_Customize_Manager instance.
+         * @param WP_Customize_Manager $manager WP_Customize_Manager instance.
          */
         do_action( 'customize_save_after', $this );
 
-        $data = array(
-            'setting_validities' => $exported_setting_validities,
-        );
-
-        /**
-         * Filters response data for a successful customize_save Ajax request.
-         *
-         * This filter does not apply if there was a nonce or authentication failure.
-         *
-         * @since 4.2.0
-         *
-         * @param array                $data Additional information passed back to the 'saved'
-         *                                   event on `wp.customize`.
-         * @param WP_Customize_Manager $this WP_Customize_Manager instance.
-         */
-        $response = apply_filters( 'customize_save_response', $data, $this );
-        wp_send_json_success( $response );
+        // Restore original capabilities.
+        foreach ( $original_setting_capabilities as $setting_id => $capability ) {
+            $setting = $this->get_setting( $setting_id );
+            if ( $setting ) {
+                $setting->capability = $capability;
+            }
+        }
+
+        // Restore original changeset data.
+        $this->_changeset_data    = $previous_changeset_data;
+        $this->_changeset_post_id = $previous_changeset_post_id;
+        $this->_changeset_uuid    = $previous_changeset_uuid;
+
+        return true;
+    }
+
+    /**
+     * Update stashed theme mod settings.
+     *
+     * @since 4.7.0
+     * @access private
+     *
+     * @param array $inactive_theme_mod_settings Mapping of stylesheet to arrays of theme mod settings.
+     * @return array|false Returns array of updated stashed theme mods or false if the update failed or there were no changes.
+     */
+    protected function update_stashed_theme_mod_settings( $inactive_theme_mod_settings ) {
+        $stashed_theme_mod_settings = get_option( 'customize_stashed_theme_mods' );
+        if ( empty( $stashed_theme_mod_settings ) ) {
+            $stashed_theme_mod_settings = array();
+        }
+
+        // Delete any stashed theme mods for the active theme since since they would have been loaded and saved upon activation.
+        unset( $stashed_theme_mod_settings[ $this->get_stylesheet() ] );
+
+        // Merge inactive theme mods with the stashed theme mod settings.
+        foreach ( $inactive_theme_mod_settings as $stylesheet => $theme_mod_settings ) {
+            if ( ! isset( $stashed_theme_mod_settings[ $stylesheet ] ) ) {
+                $stashed_theme_mod_settings[ $stylesheet ] = array();
+            }
+
+            $stashed_theme_mod_settings[ $stylesheet ] = array_merge(
+                $stashed_theme_mod_settings[ $stylesheet ],
+                $theme_mod_settings
+            );
+        }
+
+        $autoload = false;
+        $result = update_option( 'customize_stashed_theme_mods', $stashed_theme_mod_settings, $autoload );
+        if ( ! $result ) {
+            return false;
+        }
+        return $stashed_theme_mod_settings;
     }
 
@@ -1692 +2652 @@
 
     /**
+     * Determines whether the admin and the frontend are on different domains.
+     *
+     * @since 4.7.0
+     * @access public
+     *
+     * @return bool Whether cross-domain.
+     */
+    public function is_cross_domain() {
+        $admin_origin = wp_parse_url( admin_url() );
+        $home_origin = wp_parse_url( home_url() );
+        $cross_domain = ( strtolower( $admin_origin['host'] ) !== strtolower( $home_origin['host'] ) );
+        return $cross_domain;
+    }
+
+    /**
+     * Get URLs allowed to be previewed.
+     *
+     * If the front end and the admin are served from the same domain, load the
+     * preview over ssl if the Customizer is being loaded over ssl. This avoids
+     * insecure content warnings. This is not attempted if the admin and front end
+     * are on different domains to avoid the case where the front end doesn't have
+     * ssl certs. Domain mapping plugins can allow other urls in these conditions
+     * using the customize_allowed_urls filter.
+     *
+     * @since 4.7.0
+     * @access public
+     *
+     * @returns array Allowed URLs.
+     */
+    public function get_allowed_urls() {
+        $allowed_urls = array( home_url( '/' ) );
+
+        if ( is_ssl() && ! $this->is_cross_domain() ) {
+            $allowed_urls[] = home_url( '/', 'https' );
+        }
+
+        /**
+         * Filters the list of URLs allowed to be clicked and followed in the Customizer preview.
+         *
+         * @since 3.4.0
+         *
+         * @param array $allowed_urls An array of allowed URLs.
+         */
+        $allowed_urls = array_unique( apply_filters( 'customize_allowed_urls', $allowed_urls ) );
+
+        return $allowed_urls;
+    }
+
+    /**
+     * Get messenger channel.
+     *
+     * @since 4.7.0
+     * @access public
+     *
+     * @return string Messenger channel.
+     */
+    public function get_messenger_channel() {
+        return $this->messenger_channel;
+    }
+
+    /**
      * Set URL to link the user to when closing the Customizer.
      *
@@ -1800 +2821 @@
      */
     public function customize_pane_settings() {
-        /*
-         * If the front end and the admin are served from the same domain, load the
-         * preview over ssl if the Customizer is being loaded over ssl. This avoids
-         * insecure content warnings. This is not attempted if the admin and front end
-         * are on different domains to avoid the case where the front end doesn't have
-         * ssl certs. Domain mapping plugins can allow other urls in these conditions
-         * using the customize_allowed_urls filter.
-         */
-
-        $allowed_urls = array( home_url( '/' ) );
-        $admin_origin = parse_url( admin_url() );
-        $home_origin  = parse_url( home_url() );
-        $cross_domain = ( strtolower( $admin_origin['host'] ) !== strtolower( $home_origin['host'] ) );
-
-        if ( is_ssl() && ! $cross_domain ) {
-            $allowed_urls[] = home_url( '/', 'https' );
-        }
-
-        /**
-         * Filters the list of URLs allowed to be clicked and followed in the Customizer preview.
-         *
-         * @since 3.4.0
-         *
-         * @param array $allowed_urls An array of allowed URLs.
-         */
-        $allowed_urls = array_unique( apply_filters( 'customize_allowed_urls', $allowed_urls ) );
 
         $login_url = add_query_arg( array(
@@ -1832 +2827 @@
         ), wp_login_url() );
 
+        // Ensure dirty flags are set for modified settings.
+        foreach ( array_keys( $this->unsanitized_post_values() ) as $setting_id ) {
+            $setting = $this->get_setting( $setting_id );
+            if ( $setting ) {
+                $setting->dirty = true;
+            }
+        }
+
         // Prepare Customizer settings to pass to JavaScript.
         $settings = array(
+            'changeset' => array(
+                'uuid' => $this->changeset_uuid(),
+                'status' => $this->changeset_post_id() ? get_post_status( $this->changeset_post_id() ) : '',
+            ),
+            'timeouts' => array(
+                'windowRefresh' => 250,
+                'changesetAutoSave' => AUTOSAVE_INTERVAL * 1000,
+                'keepAliveCheck' => 2500,
+                'reflowPaneContents' => 100,
+                'previewFrameSensitivity' => 2000,
+            ),
             'theme'    => array(
                 'stylesheet' => $this->get_stylesheet(),
@@ -1843 +2857 @@
                 'activated'     => esc_url_raw( home_url( '/' ) ),
                 'ajax'          => esc_url_raw( admin_url( 'admin-ajax.php', 'relative' ) ),
-                'allowed'       => array_map( 'esc_url_raw', $allowed_urls ),
-                'isCrossDomain' => $cross_domain,
+                'allowed'       => array_map( 'esc_url_raw', $this->get_allowed_urls() ),
+                'isCrossDomain' => $this->is_cross_domain(),
                 'home'          => esc_url_raw( home_url( '/' ) ),
                 'login'         => esc_url_raw( $login_url ),
@@ -2338 +3352 @@
      */
     public function register_dynamic_settings() {
-        $this->add_dynamic_settings( array_keys( $this->unsanitized_post_values() ) );
+        $setting_ids = array_keys( $this->unsanitized_post_values() );
+        $this->add_dynamic_settings( $setting_ids );
     }
 

trunk/src/wp-includes/class-wp-customize-nav-menus.php

@@ -49 +49 @@
         $this->manager         = $manager;
 
-        // Skip useless hooks when the user can't manage nav menus anyway.
+        // See https://github.com/xwp/wp-customize-snapshots/blob/962586659688a5b1fd9ae93618b7ce2d4e7a421c/php/class-customize-snapshot-manager.php#L469-L499
+        add_action( 'customize_register', array( $this, 'customize_register' ), 11 );
+        add_filter( 'customize_dynamic_setting_args', array( $this, 'filter_dynamic_setting_args' ), 10, 2 );
+        add_filter( 'customize_dynamic_setting_class', array( $this, 'filter_dynamic_setting_class' ), 10, 3 );
+
+        // Skip remaining hooks when the user can't manage nav menus anyway.
         if ( ! current_user_can( 'edit_theme_options' ) ) {
             return;
@@ -59 +64 @@
         add_action( 'wp_ajax_customize-nav-menus-insert-auto-draft', array( $this, 'ajax_insert_auto_draft_post' ) );
         add_action( 'customize_controls_enqueue_scripts', array( $this, 'enqueue_scripts' ) );
-        add_action( 'customize_register', array( $this, 'customize_register' ), 11 );
-        add_filter( 'customize_dynamic_setting_args', array( $this, 'filter_dynamic_setting_args' ), 10, 2 );
-        add_filter( 'customize_dynamic_setting_class', array( $this, 'filter_dynamic_setting_class' ), 10, 3 );
         add_action( 'customize_controls_print_footer_scripts', array( $this, 'print_templates' ) );
         add_action( 'customize_controls_print_footer_scripts', array( $this, 'available_items_template' ) );
@@ -487 +489 @@
     public function customize_register() {
 
+        /*
+         * Preview settings for nav menus early so that the sections and controls will be added properly.
+         * See https://github.com/xwp/wp-customize-snapshots/blob/962586659688a5b1fd9ae93618b7ce2d4e7a421c/php/class-customize-snapshot-manager.php#L506-L543
+         */
+        $nav_menus_setting_ids = array();
+        foreach ( array_keys( $this->manager->unsanitized_post_values() ) as $setting_id ) {
+            if ( preg_match( '/^(nav_menu_locations|nav_menu|nav_menu_item)\[/', $setting_id ) ) {
+                $nav_menus_setting_ids[] = $setting_id;
+            }
+        }
+        foreach ( $nav_menus_setting_ids as $setting_id ) {
+            $setting = $this->manager->get_setting( $setting_id );
+            if ( $setting ) {
+                $setting->preview();
+            }
+        }
+
         // Require JS-rendered control types.
         $this->manager->register_panel_type( 'WP_Customize_Nav_Menus_Panel' );

trunk/src/wp-includes/class-wp-customize-widgets.php

@@ -94 +94 @@
         $this->manager = $manager;
 
-        // Skip useless hooks when the user can't manage widgets anyway.
+        // See https://github.com/xwp/wp-customize-snapshots/blob/962586659688a5b1fd9ae93618b7ce2d4e7a421c/php/class-customize-snapshot-manager.php#L420-L449
+        add_filter( 'customize_dynamic_setting_args',          array( $this, 'filter_customize_dynamic_setting_args' ), 10, 2 );
+        add_action( 'widgets_init',                            array( $this, 'register_settings' ), 95 );
+        add_action( 'customize_register',                      array( $this, 'schedule_customize_register' ), 1 );
+
+        // Skip remaining hooks when the user can't manage widgets anyway.
         if ( ! current_user_can( 'edit_theme_options' ) ) {
             return;
         }
 
-        add_filter( 'customize_dynamic_setting_args',          array( $this, 'filter_customize_dynamic_setting_args' ), 10, 2 );
-        add_action( 'widgets_init',                            array( $this, 'register_settings' ), 95 );
         add_action( 'wp_loaded',                               array( $this, 'override_sidebars_widgets_for_theme_switch' ) );
         add_action( 'customize_controls_init',                 array( $this, 'customize_controls_init' ) );
-        add_action( 'customize_register',                      array( $this, 'schedule_customize_register' ), 1 );
         add_action( 'customize_controls_enqueue_scripts',      array( $this, 'enqueue_scripts' ) );
         add_action( 'customize_controls_print_styles',         array( $this, 'print_styles' ) );
@@ -277 +279 @@
         $this->old_sidebars_widgets = wp_get_sidebars_widgets();
         add_filter( 'customize_value_old_sidebars_widgets_data', array( $this, 'filter_customize_value_old_sidebars_widgets_data' ) );
+        $this->manager->set_post_value( 'old_sidebars_widgets_data', $this->old_sidebars_widgets ); // Override any value cached in changeset.
 
         // retrieve_widgets() looks at the global $sidebars_widgets

trunk/src/wp-includes/customize/class-wp-customize-selective-refresh.php

@@ -307 +307 @@
             return;
         }
-
-        $this->manager->remove_preview_signature();
 
         /*

trunk/src/wp-includes/customize/class-wp-customize-theme-control.php

@@ -64 +64 @@
     public function content_template() {
         $current_url = set_url_scheme( 'http://' . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'] );
-        $active_url  = esc_url( remove_query_arg( 'theme', $current_url ) );
-        $preview_url = esc_url( add_query_arg( 'theme', '__THEME__', $current_url ) ); // Token because esc_url() strips curly braces.
+        $active_url  = esc_url( remove_query_arg( 'customize_theme', $current_url ) );
+        $preview_url = esc_url( add_query_arg( 'customize_theme', '__THEME__', $current_url ) ); // Token because esc_url() strips curly braces.
         $preview_url = str_replace( '__THEME__', '{{ data.theme.id }}', $preview_url );
         ?>

trunk/src/wp-includes/default-filters.php

@@ -76 +76 @@
 // Slugs
 add_filter( 'pre_term_slug', 'sanitize_title' );
+add_filter( 'wp_insert_post_data', '_wp_customize_changeset_filter_insert_post_data', 10, 2 );
 
 // Keys
@@ -383 +384 @@
 add_action( 'wp_head', '_custom_logo_header_styles' );
 add_action( 'plugins_loaded', '_wp_customize_include' );
+add_action( 'transition_post_status', '_wp_customize_publish_changeset', 10, 3 );
 add_action( 'admin_enqueue_scripts', '_wp_customize_loader_settings' );
 add_action( 'delete_attachment', '_delete_attachment_theme_mod' );

trunk/src/wp-includes/functions.php

@@ -5524 +5524 @@
     return false;
 }
+
+/**
+ * Generate a random UUID (version 4).
+ *
+ * @since 4.7.0
+ *
+ * @return string UUID.
+ */
+function wp_generate_uuid4() {
+    return sprintf( '%04x%04x-%04x-%04x-%04x-%04x%04x%04x',
+        mt_rand( 0, 0xffff ), mt_rand( 0, 0xffff ),
+        mt_rand( 0, 0xffff ),
+        mt_rand( 0, 0x0fff ) | 0x4000,
+        mt_rand( 0, 0x3fff ) | 0x8000,
+        mt_rand( 0, 0xffff ), mt_rand( 0, 0xffff ), mt_rand( 0, 0xffff )
+    );
+}

trunk/src/wp-includes/functions.wp-scripts.php

@@ -35 +35 @@
  */
 function _wp_scripts_maybe_doing_it_wrong( $function ) {
-    if ( did_action( 'init' ) ) {
+    if ( did_action( 'init' ) || did_action( 'admin_enqueue_scripts' ) || did_action( 'wp_enqueue_scripts' ) || did_action( 'login_enqueue_scripts' ) ) {
         return;
     }

trunk/src/wp-includes/js/customize-base.js

@@ -638 +638 @@
          * Initialize Messenger.
          *
-         * @param  {object} params        Parameters to configure the messenger.
-         *         {string} .url          The URL to communicate with.
-         *         {window} .targetWindow The window instance to communicate with. Default window.parent.
-         *         {string} .channel      If provided, will send the channel with each message and only accept messages a matching channel.
-         * @param  {object} options       Extend any instance parameter or method with this object.
+         * @param  {object} params - Parameters to configure the messenger.
+         *         {string} params.url - The URL to communicate with.
+         *         {window} params.targetWindow - The window instance to communicate with. Default window.parent.
+         *         {string} params.channel - If provided, will send the channel with each message and only accept messages a matching channel.
+         * @param  {object} options - Extend any instance parameter or method with this object.
          */
         initialize: function( params, options ) {
             // Target the parent frame by default, but only if a parent frame exists.
-            var defaultTarget = window.parent == window ? null : window.parent;
+            var defaultTarget = window.parent === window ? null : window.parent;
 
             $.extend( this, options || {} );
@@ -653 +653 @@
             this.add( 'url', params.url || '' );
             this.add( 'origin', this.url() ).link( this.url ).setter( function( to ) {
-                return to.replace( /([^:]+:\/\/[^\/]+).*/, '$1' );
+                var urlParser = document.createElement( 'a' );
+                urlParser.href = to;
+                return urlParser.protocol + '//' + urlParser.hostname;
             });
 
@@ -808 +810 @@
     };
 
+    /**
+     * Utility function namespace
+     */
+    api.utils = {};
+
+    /**
+     * Parse query string.
+     *
+     * @since 4.7.0
+     * @access public
+     *
+     * @param {string} queryString Query string.
+     * @returns {object} Parsed query string.
+     */
+    api.utils.parseQueryString = function parseQueryString( queryString ) {
+        var queryParams = {};
+        _.each( queryString.split( '&' ), function( pair ) {
+            var parts, key, value;
+            parts = pair.split( '=', 2 );
+            if ( ! parts[0] ) {
+                return;
+            }
+            key = decodeURIComponent( parts[0].replace( /\+/g, ' ' ) );
+            key = key.replace( / /g, '_' ); // What PHP does.
+            if ( _.isUndefined( parts[1] ) ) {
+                value = null;
+            } else {
+                value = decodeURIComponent( parts[1].replace( /\+/g, ' ' ) );
+            }
+            queryParams[ key ] = value;
+        } );
+        return queryParams;
+    };
+
     // Expose the API publicly on window.wp.customize
     exports.customize = api;

trunk/src/wp-includes/js/customize-loader.js

@@ -132 +132 @@
                 targetWindow: this.iframe[0].contentWindow
             });
+
+            // Expose the changeset UUID on the parent window's URL so that the customized state can survive a refresh.
+            if ( history.replaceState ) {
+                this.messenger.bind( 'changeset-uuid', function( changesetUuid ) {
+                    var urlParser = document.createElement( 'a' );
+                    urlParser.href = location.href;
+                    urlParser.search = $.param( _.extend(
+                        api.utils.parseQueryString( urlParser.search.substr( 1 ) ),
+                        { changeset_uuid: changesetUuid }
+                    ) );
+                    history.replaceState( { customize: urlParser.href }, '', urlParser.href );
+                } );
+            }
 
             // Wait for the connection from the iframe before sending any postMessage events.

trunk/src/wp-includes/js/customize-preview-nav-menus.js

@@ -107 +107 @@
              */
             isRelatedSetting: function( setting, newValue, oldValue ) {
-                var partial = this, navMenuLocationSetting, navMenuId, isNavMenuItemSetting;
+                var partial = this, navMenuLocationSetting, navMenuId, isNavMenuItemSetting, _newValue, _oldValue, urlParser;
                 if ( _.isString( setting ) ) {
                     setting = api( setting );
@@ -124 +124 @@
                 isNavMenuItemSetting = /^nav_menu_item\[/.test( setting.id );
                 if ( isNavMenuItemSetting && _.isObject( newValue ) && _.isObject( oldValue ) ) {
-                    delete newValue.type_label;
-                    delete oldValue.type_label;
-                    if ( _.isEqual( oldValue, newValue ) ) {
+                    _newValue = _.clone( newValue );
+                    _oldValue = _.clone( oldValue );
+                    delete _newValue.type_label;
+                    delete _oldValue.type_label;
+
+                    // Normalize URL scheme when parent frame is HTTPS to prevent selective refresh upon initial page load.
+                    if ( 'https' === api.preview.scheme.get() ) {
+                        urlParser = document.createElement( 'a' );
+                        urlParser.href = _newValue.url;
+                        urlParser.protocol = 'https:';
+                        _newValue.url = urlParser.href;
+                        urlParser.href = _oldValue.url;
+                        urlParser.protocol = 'https:';
+                        _oldValue.url = urlParser.href;
+                    }
+
+                    if ( _.isEqual( _oldValue, _newValue ) ) {
                         return false;
                     }
@@ -366 +380 @@
         var selector = '.menu-item';
 
+        // Skip adding highlights if not in the customizer preview iframe.
+        if ( ! api.settings.channel ) {
+            return;
+        }
+
         // Focus on the menu item control when shift+clicking the menu item.
         $( document ).on( 'click', selector, function( e ) {

trunk/src/wp-includes/js/customize-preview-widgets.js

@@ -573 +573 @@
             selector = this.widgetSelectors.join( ',' );
 
+        // Skip adding highlights if not in the customizer preview iframe.
+        if ( ! api.settings.channel ) {
+            return;
+        }
+
         $( selector ).attr( 'title', this.l10n.widgetTooltip );
 

trunk/src/wp-includes/js/customize-preview.js

@@ -4 +4 @@
 (function( exports, $ ){
     var api = wp.customize,
-        debounce;
+        debounce,
+        currentHistoryState = {};
+
+    /*
+     * Capture the state that is passed into history.replaceState() and history.pushState()
+     * and also which is returned in the popstate event so that when the changeset_uuid
+     * gets updated when transitioning to a new changeset there the current state will
+     * be supplied in the call to history.replaceState().
+     */
+    ( function( history ) {
+        var injectUrlWithState;
+
+        if ( ! history.replaceState ) {
+            return;
+        }
+
+        /**
+         * Amend the supplied URL with the customized state.
+         *
+         * @since 4.7.0
+         * @access private
+         *
+         * @param {string} url URL.
+         * @returns {string} URL with customized state.
+         */
+        injectUrlWithState = function( url ) {
+            var urlParser, queryParams;
+            urlParser = document.createElement( 'a' );
+            urlParser.href = url;
+            queryParams = api.utils.parseQueryString( urlParser.search.substr( 1 ) );
+
+            queryParams.customize_changeset_uuid = api.settings.changeset.uuid;
+            if ( ! api.settings.theme.active ) {
+                queryParams.customize_theme = api.settings.theme.stylesheet;
+            }
+            if ( api.settings.theme.channel ) {
+                queryParams.customize_messenger_channel = api.settings.channel;
+            }
+            urlParser.search = $.param( queryParams );
+            return url;
+        };
+
+        history.replaceState = ( function( nativeReplaceState ) {
+            return function historyReplaceState( data, title, url ) {
+                currentHistoryState = data;
+                return nativeReplaceState.call( history, data, title, injectUrlWithState( url ) );
+            };
+        } )( history.replaceState );
+
+        history.pushState = ( function( nativePushState ) {
+            return function historyPushState( data, title, url ) {
+                currentHistoryState = data;
+                return nativePushState.call( history, data, title, injectUrlWithState( url ) );
+            };
+        } )( history.pushState );
+
+        window.addEventListener( 'popstate', function( event ) {
+            currentHistoryState = event.state;
+        } );
+
+    }( history ) );
 
     /**
@@ -38 +98 @@
          */
         initialize: function( params, options ) {
-            var self = this;
-
-            api.Messenger.prototype.initialize.call( this, params, options );
-
-            this.body = $( document.body );
-            this.body.on( 'click.preview', 'a', function( event ) {
+            var preview = this, urlParser = document.createElement( 'a' );
+
+            api.Messenger.prototype.initialize.call( preview, params, options );
+
+            urlParser.href = preview.origin();
+            preview.add( 'scheme', urlParser.protocol.replace( /:$/, '' ) );
+
+            preview.body = $( document.body );
+            preview.body.on( 'click.preview', 'a', function( event ) {
                 var link, isInternalJumpLink;
                 link = $( this );
+
+                // No-op if the anchor is not a link.
+                if ( _.isUndefined( link.attr( 'href' ) ) ) {
+                    return;
+                }
+
                 isInternalJumpLink = ( '#' === link.attr( 'href' ).substr( 0, 1 ) );
+
+                // Allow internal jump links to behave normally without preventing default.
+                if ( isInternalJumpLink ) {
+                    return;
+                }
+
+                // If the link is not previewable, prevent the browser from navigating to it.
+                if ( ! api.isLinkPreviewable( link[0] ) ) {
+                    wp.a11y.speak( api.settings.l10n.linkUnpreviewable );
+                    event.preventDefault();
+                    return;
+                }
+
+                // If not in an iframe, then allow the link click to proceed normally since the state query params are added.
+                if ( ! api.settings.channel ) {
+                    return;
+                }
+
+                // Prevent initiating navigating from click and instead rely on sending url message to pane.
                 event.preventDefault();
-
-                if ( isInternalJumpLink && '#' !== link.attr( 'href' ) ) {
-                    $( link.attr( 'href' ) ).each( function() {
-                        this.scrollIntoView();
-                    } );
-                }
 
                 /*
@@ -60 +142 @@
                  * control instead of also navigating to the URL linked to.
                  */
-                if ( event.shiftKey || isInternalJumpLink ) {
+                if ( event.shiftKey ) {
                     return;
                 }
-                self.send( 'scroll', 0 );
-                self.send( 'url', link.prop( 'href' ) );
-            });
-
-            // You cannot submit forms.
-            this.body.on( 'submit.preview', 'form', function( event ) {
-                var urlParser;
+
+                // Note: It's not relevant to send scroll because sending url message will have the same effect.
+                preview.send( 'url', link.prop( 'href' ) );
+            } );
+
+            preview.body.on( 'submit.preview', 'form', function( event ) {
+                var urlParser = document.createElement( 'a' );
+                urlParser.href = this.action;
+
+                // If the link is not previewable, prevent the browser from navigating to it.
+                if ( 'GET' !== this.method.toUpperCase() || ! api.isLinkPreviewable( urlParser ) ) {
+                    wp.a11y.speak( api.settings.l10n.formUnpreviewable );
+                    event.preventDefault();
+                    return;
+                }
+
+                // If not in an iframe, then allow the form submission to proceed normally with the state inputs injected.
+                if ( ! api.settings.channel ) {
+                    return;
+                }
 
                 /*
@@ -82 +177 @@
                  * external site in the preview.
                  */
-                if ( ! event.isDefaultPrevented() && 'GET' === this.method.toUpperCase() ) {
-                    urlParser = document.createElement( 'a' );
-                    urlParser.href = this.action;
-                    if ( urlParser.search.substr( 1 ).length > 1 ) {
+                if ( ! event.isDefaultPrevented() ) {
+                    if ( urlParser.search.length > 1 ) {
                         urlParser.search += '&';
                     }
@@ -92 +185 @@
                 }
 
+                // Prevent default since navigation should be done via sending url message or via JS submit handler.
                 event.preventDefault();
             });
 
-            this.window = $( window );
-            this.window.on( 'scroll.preview', debounce( function() {
-                self.send( 'scroll', self.window.scrollTop() );
-            }, 200 ));
-
-            this.bind( 'scroll', function( distance ) {
-                self.window.scrollTop( distance );
-            });
+            preview.window = $( window );
+
+            if ( api.settings.channel ) {
+                preview.window.on( 'scroll.preview', debounce( function() {
+                    preview.send( 'scroll', preview.window.scrollTop() );
+                }, 200 ) );
+
+                preview.bind( 'scroll', function( distance ) {
+                    preview.window.scrollTop( distance );
+                });
+            }
         }
     });
+
+    /**
+     * Inject the changeset UUID into links in the document.
+     *
+     * @since 4.7.0
+     * @access protected
+     *
+     * @access private
+     * @returns {void}
+     */
+    api.addLinkPreviewing = function addLinkPreviewing() {
+        var linkSelectors = 'a[href], area';
+
+        // Inject links into initial document.
+        $( document.body ).find( linkSelectors ).each( function() {
+            api.prepareLinkPreview( this );
+        } );
+
+        // Inject links for new elements added to the page.
+        if ( 'undefined' !== typeof MutationObserver ) {
+            api.mutationObserver = new MutationObserver( function( mutations ) {
+                _.each( mutations, function( mutation ) {
+                    $( mutation.target ).find( linkSelectors ).each( function() {
+                        api.prepareLinkPreview( this );
+                    } );
+                } );
+            } );
+            api.mutationObserver.observe( document.documentElement, {
+                childList: true,
+                subtree: true
+            } );
+        } else {
+
+            // If mutation observers aren't available, fallback to just-in-time injection.
+            $( document.documentElement ).on( 'click focus mouseover', linkSelectors, function() {
+                api.prepareLinkPreview( this );
+            } );
+        }
+    };
+
+    /**
+     * Should the supplied link is previewable.
+     *
+     * @since 4.7.0
+     * @access public
+     *
+     * @param {HTMLAnchorElement|HTMLAreaElement} element Link element.
+     * @param {string} element.search Query string.
+     * @param {string} element.pathname Path.
+     * @param {string} element.hostname Hostname.
+     * @param {object} [options]
+     * @param {object} [options.allowAdminAjax=false] Allow admin-ajax.php requests.
+     * @returns {boolean} Is appropriate for changeset link.
+     */
+    api.isLinkPreviewable = function isLinkPreviewable( element, options ) {
+        var hasMatchingHost, urlParser, args;
+
+        args = _.extend( {}, { allowAdminAjax: false }, options || {} );
+
+        if ( 'javascript:' === element.protocol ) { // jshint ignore:line
+            return true;
+        }
+
+        // Only web URLs can be previewed.
+        if ( 'https:' !== element.protocol && 'http:' !== element.protocol ) {
+            return false;
+        }
+
+        urlParser = document.createElement( 'a' );
+        hasMatchingHost = ! _.isUndefined( _.find( api.settings.url.allowed, function( allowedUrl ) {
+            urlParser.href = allowedUrl;
+            if ( urlParser.hostname === element.hostname && urlParser.protocol === element.protocol ) {
+                return true;
+            }
+            return false;
+        } ) );
+        if ( ! hasMatchingHost ) {
+            return false;
+        }
+
+        // Skip wp login and signup pages.
+        if ( /\/wp-(login|signup)\.php$/.test( element.pathname ) ) {
+            return false;
+        }
+
+        // Allow links to admin ajax as faux frontend URLs.
+        if ( /\/wp-admin\/admin-ajax\.php$/.test( element.pathname ) ) {
+            return args.allowAdminAjax;
+        }
+
+        // Disallow links to admin, includes, and content.
+        if ( /\/wp-(admin|includes|content)(\/|$)/.test( element.pathname ) ) {
+            return false;
+        }
+
+        return true;
+    };
+
+    /**
+     * Inject the customize_changeset_uuid query param into links on the frontend.
+     *
+     * @since 4.7.0
+     * @access protected
+     *
+     * @param {HTMLAnchorElement|HTMLAreaElement} element Link element.
+     * @param {object} element.search Query string.
+     * @returns {void}
+     */
+    api.prepareLinkPreview = function prepareLinkPreview( element ) {
+        var queryParams;
+
+        // Skip links in admin bar.
+        if ( $( element ).closest( '#wpadminbar' ).length ) {
+            return;
+        }
+
+        // Ignore links with href="#" or href="#id".
+        if ( '#' === $( element ).attr( 'href' ).substr( 0, 1 ) ) {
+            return;
+        }
+
+        // Make sure links in preview use HTTPS if parent frame uses HTTPS.
+        if ( 'https' === api.preview.scheme.get() && 'http:' === element.protocol && -1 !== api.settings.url.allowedHosts.indexOf( element.hostname ) ) {
+            element.protocol = 'https:';
+        }
+
+        if ( ! api.isLinkPreviewable( element ) ) {
+            $( element ).addClass( 'customize-unpreviewable' );
+            return;
+        }
+        $( element ).removeClass( 'customize-unpreviewable' );
+
+        queryParams = api.utils.parseQueryString( element.search.substring( 1 ) );
+        queryParams.customize_changeset_uuid = api.settings.changeset.uuid;
+        if ( ! api.settings.theme.active ) {
+            queryParams.customize_theme = api.settings.theme.stylesheet;
+        }
+        if ( api.settings.channel ) {
+            queryParams.customize_messenger_channel = api.settings.channel;
+        }
+        element.search = $.param( queryParams );
+
+        // Prevent links from breaking out of preview iframe.
+        if ( api.settings.channel ) {
+            element.target = '_self';
+        }
+    };
+
+    /**
+     * Inject the changeset UUID into Ajax requests.
+     *
+     * @since 4.7.0
+     * @access protected
+     *
+     * @return {void}
+     */
+    api.addRequestPreviewing = function addRequestPreviewing() {
+
+        /**
+         * Rewrite Ajax requests to inject customizer state.
+         *
+         * @param {object} options Options.
+         * @param {string} options.type Type.
+         * @param {string} options.url URL.
+         * @param {object} originalOptions Original options.
+         * @param {XMLHttpRequest} xhr XHR.
+         * @returns {void}
+         */
+        var prefilterAjax = function( options, originalOptions, xhr ) {
+            var urlParser, queryParams, requestMethod, dirtyValues = {};
+            urlParser = document.createElement( 'a' );
+            urlParser.href = options.url;
+
+            // Abort if the request is not for this site.
+            if ( ! api.isLinkPreviewable( urlParser, { allowAdminAjax: true } ) ) {
+                return;
+            }
+            queryParams = api.utils.parseQueryString( urlParser.search.substring( 1 ) );
+
+            // Note that _dirty flag will be cleared with changeset updates.
+            api.each( function( setting ) {
+                if ( setting._dirty ) {
+                    dirtyValues[ setting.id ] = setting.get();
+                }
+            } );
+
+            if ( ! _.isEmpty( dirtyValues ) ) {
+                requestMethod = options.type.toUpperCase();
+
+                // Override underlying request method to ensure unsaved changes to changeset can be included (force Backbone.emulateHTTP).
+                if ( 'POST' !== requestMethod ) {
+                    xhr.setRequestHeader( 'X-HTTP-Method-Override', requestMethod );
+                    queryParams._method = requestMethod;
+                    options.type = 'POST';
+                }
+
+                // Amend the post data with the customized values.
+                if ( options.data ) {
+                    options.data += '&';
+                } else {
+                    options.data = '';
+                }
+                options.data += $.param( {
+                    customized: JSON.stringify( dirtyValues )
+                } );
+            }
+
+            // Include customized state query params in URL.
+            queryParams.customize_changeset_uuid = api.settings.changeset.uuid;
+            if ( ! api.settings.theme.active ) {
+                queryParams.customize_theme = api.settings.theme.stylesheet;
+            }
+            urlParser.search = $.param( queryParams );
+            options.url = urlParser.href;
+        };
+
+        $.ajaxPrefilter( prefilterAjax );
+    };
+
+    /**
+     * Inject changeset UUID into forms, allowing preview to persist through submissions.
+     *
+     * @since 4.7.0
+     * @access protected
+     *
+     * @returns {void}
+     */
+    api.addFormPreviewing = function addFormPreviewing() {
+
+        // Inject inputs for forms in initial document.
+        $( document.body ).find( 'form' ).each( function() {
+            api.prepareFormPreview( this );
+        } );
+
+        // Inject inputs for new forms added to the page.
+        if ( 'undefined' !== typeof MutationObserver ) {
+            api.mutationObserver = new MutationObserver( function( mutations ) {
+                _.each( mutations, function( mutation ) {
+                    $( mutation.target ).find( 'form' ).each( function() {
+                        api.prepareFormPreview( this );
+                    } );
+                } );
+            } );
+            api.mutationObserver.observe( document.documentElement, {
+                childList: true,
+                subtree: true
+            } );
+        }
+    };
+
+    /**
+     * Inject changeset into form inputs.
+     *
+     * @since 4.7.0
+     * @access protected
+     *
+     * @param {HTMLFormElement} form Form.
+     * @returns {void}
+     */
+    api.prepareFormPreview = function prepareFormPreview( form ) {
+        var urlParser, stateParams = {};
+
+        if ( ! form.action ) {
+            form.action = location.href;
+        }
+
+        urlParser = document.createElement( 'a' );
+        urlParser.href = form.action;
+
+        // Make sure forms in preview use HTTPS if parent frame uses HTTPS.
+        if ( 'https' === api.preview.scheme.get() && 'http:' === urlParser.protocol && -1 !== api.settings.url.allowedHosts.indexOf( urlParser.hostname ) ) {
+            urlParser.protocol = 'https:';
+            form.action = urlParser.href;
+        }
+
+        if ( 'GET' !== form.method.toUpperCase() || ! api.isLinkPreviewable( urlParser ) ) {
+            $( form ).addClass( 'customize-unpreviewable' );
+            return;
+        }
+        $( form ).removeClass( 'customize-unpreviewable' );
+
+        stateParams.customize_changeset_uuid = api.settings.changeset.uuid;
+        if ( ! api.settings.theme.active ) {
+            stateParams.customize_theme = api.settings.theme.stylesheet;
+        }
+        if ( api.settings.channel ) {
+            stateParams.customize_messenger_channel = api.settings.channel;
+        }
+
+        _.each( stateParams, function( value, name ) {
+            var input = $( form ).find( 'input[name="' + name + '"]' );
+            if ( input.length ) {
+                input.val( value );
+            } else {
+                $( form ).prepend( $( '<input>', {
+                    type: 'hidden',
+                    name: name,
+                    value: value
+                } ) );
+            }
+        } );
+
+        // Prevent links from breaking out of preview iframe.
+        if ( api.settings.channel ) {
+            form.target = '_self';
+        }
+    };
+
+    /**
+     * Watch current URL and send keep-alive (heartbeat) messages to the parent.
+     *
+     * Keep the customizer pane notified that the preview is still alive
+     * and that the user hasn't navigated to a non-customized URL.
+     *
+     * @since 4.7.0
+     * @access protected
+     */
+    api.keepAliveCurrentUrl = ( function() {
+        var previousPathName = location.pathname,
+            previousQueryString = location.search.substr( 1 ),
+            previousQueryParams = null,
+            stateQueryParams = [ 'customize_theme', 'customize_changeset_uuid', 'customize_messenger_channel' ];
+
+        return function keepAliveCurrentUrl() {
+            var urlParser, currentQueryParams;
+
+            // Short-circuit with keep-alive if previous URL is identical (as is normal case).
+            if ( previousQueryString === location.search.substr( 1 ) && previousPathName === location.pathname ) {
+                api.preview.send( 'keep-alive' );
+                return;
+            }
+
+            urlParser = document.createElement( 'a' );
+            if ( null === previousQueryParams ) {
+                urlParser.search = previousQueryString;
+                previousQueryParams = api.utils.parseQueryString( previousQueryString );
+                _.each( stateQueryParams, function( name ) {
+                    delete previousQueryParams[ name ];
+                } );
+            }
+
+            // Determine if current URL minus customized state params and URL hash.
+            urlParser.href = location.href;
+            currentQueryParams = api.utils.parseQueryString( urlParser.search.substr( 1 ) );
+            _.each( stateQueryParams, function( name ) {
+                delete currentQueryParams[ name ];
+            } );
+
+            if ( previousPathName !== location.pathname || ! _.isEqual( previousQueryParams, currentQueryParams ) ) {
+                urlParser.search = $.param( currentQueryParams );
+                urlParser.hash = '';
+                api.settings.url.self = urlParser.href;
+                api.preview.send( 'ready', {
+                    currentUrl: api.settings.url.self,
+                    activePanels: api.settings.activePanels,
+                    activeSections: api.settings.activeSections,
+                    activeControls: api.settings.activeControls,
+                    settingValidities: api.settings.settingValidities
+                } );
+            } else {
+                api.preview.send( 'keep-alive' );
+            }
+            previousQueryParams = currentQueryParams;
+            previousQueryString = location.search.substr( 1 );
+            previousPathName = location.pathname;
+        };
+    } )();
 
     $( function() {
@@ -118 +582 @@
             channel: api.settings.channel
         });
+
+        api.addLinkPreviewing();
+        api.addRequestPreviewing();
+        api.addFormPreviewing();
 
         /**
@@ -172 +640 @@
 
             api.preview.send( 'documentTitle', document.title );
+
+            // Send scroll in case of loading via non-refresh.
+            api.preview.send( 'scroll', $( window ).scrollTop() );
         });
 
         api.preview.bind( 'saved', function( response ) {
+
+            if ( response.next_changeset_uuid ) {
+                api.settings.changeset.uuid = response.next_changeset_uuid;
+
+                // Update UUIDs in links and forms.
+                $( document.body ).find( 'a[href], area' ).each( function() {
+                    api.prepareLinkPreview( this );
+                } );
+                $( document.body ).find( 'form' ).each( function() {
+                    api.prepareFormPreview( this );
+                } );
+
+                /*
+                 * Replace the UUID in the URL. Note that the wrapped history.replaceState()
+                 * will handle injecting the current api.settings.changeset.uuid into the URL,
+                 * so this is merely to trigger that logic.
+                 */
+                if ( history.replaceState ) {
+                    history.replaceState( currentHistoryState, '', location.href );
+                }
+            }
+
             api.trigger( 'saved', response );
         } );
 
-        api.bind( 'saved', function() {
-            api.each( function( setting ) {
-                setting._dirty = false;
+        /*
+         * Clear dirty flag for settings when saved to changeset so that they
+         * won't be needlessly included in selective refresh or ajax requests.
+         */
+        api.preview.bind( 'changeset-saved', function( data ) {
+            _.each( data.saved_changeset_values, function( value, settingId ) {
+                var setting = api( settingId );
+                if ( setting && _.isEqual( setting.get(), value ) ) {
+                    setting._dirty = false;
+                }
             } );
         } );
@@ -193 +693 @@
          */
         api.preview.send( 'ready', {
+            currentUrl: api.settings.url.self,
             activePanels: api.settings.activePanels,
             activeSections: api.settings.activeSections,
@@ -198 +699 @@
             settingValidities: api.settings.settingValidities
         } );
+
+        // Send ready when URL changes via JS.
+        setInterval( api.keepAliveCurrentUrl, api.settings.timeouts.keepAliveSend );
 
         // Display a loading indicator when preview is reloading, and remove on failure.

trunk/src/wp-includes/js/customize-selective-refresh.js

@@ -12 +12 @@
             l10n: {
                 shiftClickToEdit: ''
-            },
-            refreshBuffer: 250
+            }
         },
         currentRequest: null
@@ -486 +485 @@
             wp_customize: 'on',
             nonce: api.settings.nonce.preview,
-            theme: api.settings.theme.stylesheet,
-            customized: JSON.stringify( dirtyCustomized )
+            customize_theme: api.settings.theme.stylesheet,
+            customized: JSON.stringify( dirtyCustomized ),
+            customize_changeset_uuid: api.settings.changeset.uuid
         };
     };
@@ -669 +669 @@
                 } );
             },
-            self.data.refreshBuffer
+            api.settings.timeouts.selectiveRefresh
         );
 

trunk/src/wp-includes/post.php

@@ -110 +110 @@
         'delete_with_user' => false,
         'query_var' => false,
+    ) );
+
+    register_post_type( 'customize_changeset', array(
+        'labels' => array(
+            'name'               => _x( 'Changesets', 'post type general name' ),
+            'singular_name'      => _x( 'Changeset', 'post type singular name' ),
+            'menu_name'          => _x( 'Changesets', 'admin menu' ),
+            'name_admin_bar'     => _x( 'Changeset', 'add new on admin bar' ),
+            'add_new'            => _x( 'Add New', 'Customize Changeset' ),
+            'add_new_item'       => __( 'Add New Changeset' ),
+            'new_item'           => __( 'New Changeset' ),
+            'edit_item'          => __( 'Edit Changeset' ),
+            'view_item'          => __( 'View Changeset' ),
+            'all_items'          => __( 'All Changesets' ),
+            'search_items'       => __( 'Search Changesets' ),
+            'not_found'          => __( 'No changesets found.' ),
+            'not_found_in_trash' => __( 'No changesets found in Trash.' ),
+        ),
+        'public' => false,
+        '_builtin' => true, /* internal use only. don't use this when registering your own post type. */
+        'map_meta_cap' => true,
+        'hierarchical' => false,
+        'rewrite' => false,
+        'query_var' => false,
+        'can_export' => false,
+        'delete_with_user' => false,
+        'supports' => array( 'title', 'author' ),
+        'capability_type' => 'customize_changeset',
+        'capabilities' => array(
+            'create_posts' => 'customize',
+            'delete_others_posts' => 'customize',
+            'delete_post' => 'customize',
+            'delete_posts' => 'customize',
+            'delete_private_posts' => 'customize',
+            'delete_published_posts' => 'customize',
+            'edit_others_posts' => 'customize',
+            'edit_post' => 'customize',
+            'edit_posts' => 'customize',
+            'edit_private_posts' => 'customize',
+            'edit_published_posts' => 'do_not_allow',
+            'publish_posts' => 'customize',
+            'read' => 'read',
+            'read_post' => 'customize',
+            'read_private_posts' => 'customize',
+        ),
     ) );
 

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

@@ -451 +451 @@
     $scripts->add( 'customize-base',     "/wp-includes/js/customize-base$suffix.js",     array( 'jquery', 'json2', 'underscore' ), false, 1 );
     $scripts->add( 'customize-loader',   "/wp-includes/js/customize-loader$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( 'wp-a11y', 'customize-base' ), false, 1 );
     $scripts->add( 'customize-models',   "/wp-includes/js/customize-models.js", array( 'underscore', 'backbone' ), false, 1 );
     $scripts->add( 'customize-views',    "/wp-includes/js/customize-views.js",  array( 'jquery', 'underscore', 'imgareaselect', 'customize-models', 'media-editor', 'media-views' ), false, 1 );

trunk/src/wp-includes/theme.php

@@ -2067 +2067 @@
  *
  * Loads the Customizer at plugins_loaded when accessing the customize.php admin
- * page or when any request includes a wp_customize=on param, either as a GET
- * query var or as POST data. This param is a signal for whether to bootstrap
- * the Customizer when WordPress is loading, especially in the Customizer preview
+ * page or when any request includes a wp_customize=on param or a customize_changeset
+ * param (a UUID). This param is a signal for whether to bootstrap the Customizer when
+ * WordPress is loading, especially in the Customizer preview
  * or when making Customizer Ajax requests for widgets or menus.
  *
@@ -2077 +2077 @@
  */
 function _wp_customize_include() {
-    if ( ! ( ( isset( $_REQUEST['wp_customize'] ) && 'on' == $_REQUEST['wp_customize'] )
-        || ( is_admin() && 'customize.php' == basename( $_SERVER['PHP_SELF'] ) )
-    ) ) {
+
+    $is_customize_admin_page = ( is_admin() && 'customize.php' == basename( $_SERVER['PHP_SELF'] ) );
+    $should_include = (
+        $is_customize_admin_page
+        ||
+        ( isset( $_REQUEST['wp_customize'] ) && 'on' == $_REQUEST['wp_customize'] )
+        ||
+        ( ! empty( $_GET['customize_changeset_uuid'] ) || ! empty( $_POST['customize_changeset_uuid'] ) )
+    );
+
+    if ( ! $should_include ) {
         return;
     }
 
-    require_once ABSPATH . WPINC . '/class-wp-customize-manager.php'; 
-    $GLOBALS['wp_customize'] = new WP_Customize_Manager();
+    /*
+     * Note that wp_unslash() is not being used on the input vars because it is
+     * called before wp_magic_quotes() gets called. Besides this fact, none of
+     * the values should contain any characters needing slashes anyway.
+     */
+    $keys = array( 'changeset_uuid', 'customize_changeset_uuid', 'customize_theme', 'theme', 'customize_messenger_channel' );
+    $input_vars = array_merge(
+        wp_array_slice_assoc( $_GET, $keys ),
+        wp_array_slice_assoc( $_POST, $keys )
+    );
+
+    $theme = null;
+    $changeset_uuid = null;
+    $messenger_channel = null;
+
+    if ( $is_customize_admin_page && isset( $input_vars['changeset_uuid'] ) ) {
+        $changeset_uuid = sanitize_key( $input_vars['changeset_uuid'] );
+    } elseif ( ! empty( $input_vars['customize_changeset_uuid'] ) ) {
+        $changeset_uuid = sanitize_key( $input_vars['customize_changeset_uuid'] );
+    }
+
+    // Note that theme will be sanitized via WP_Theme.
+    if ( $is_customize_admin_page && isset( $input_vars['theme'] ) ) {
+        $theme = $input_vars['theme'];
+    } elseif ( isset( $input_vars['customize_theme'] ) ) {
+        $theme = $input_vars['customize_theme'];
+    }
+    if ( isset( $input_vars['customize_messenger_channel'] ) ) {
+        $messenger_channel = sanitize_key( $input_vars['customize_messenger_channel'] );
+    }
+
+    require_once ABSPATH . WPINC . '/class-wp-customize-manager.php';
+    $GLOBALS['wp_customize'] = new WP_Customize_Manager( compact( 'changeset_uuid', 'theme', 'messenger_channel' ) );
+}
+
+/**
+ * Publish a snapshot's changes.
+ *
+ * @param string  $new_status     New post status.
+ * @param string  $old_status     Old post status.
+ * @param WP_Post $changeset_post Changeset post object.
+ */
+function _wp_customize_publish_changeset( $new_status, $old_status, $changeset_post ) {
+    global $wp_customize;
+
+    $is_publishing_changeset = (
+        'customize_changeset' === $changeset_post->post_type
+        &&
+        'publish' === $new_status
+        &&
+        'publish' !== $old_status
+    );
+    if ( ! $is_publishing_changeset ) {
+        return;
+    }
+
+    if ( empty( $wp_customize ) ) {
+        require_once ABSPATH . WPINC . '/class-wp-customize-manager.php';
+        $wp_customize = new WP_Customize_Manager( $changeset_post->post_name );
+    }
+
+    if ( ! did_action( 'customize_register' ) ) {
+        /*
+         * When running from CLI or Cron, the customize_register action will need
+         * to be triggered in order for core, themes, and plugins to register their
+         * settings. Normally core will add_action( 'customize_register' ) at
+         * priority 10 to register the core settings, and if any themes/plugins
+         * also add_action( 'customize_register' ) at the same priority, they
+         * will have a $wp_customize with those settings registered since they
+         * call add_action() afterward, normally. However, when manually doing
+         * the customize_register action after the setup_theme, then the order
+         * will be reversed for two actions added at priority 10, resulting in
+         * the core settings no longer being available as expected to themes/plugins.
+         * So the following manually calls the method that registers the core
+         * settings up front before doing the action.
+         */
+        remove_action( 'customize_register', array( $wp_customize, 'register_controls' ) );
+        $wp_customize->register_controls();
+
+        /** This filter is documented in /wp-includes/class-wp-customize-manager.php */
+        do_action( 'customize_register', $wp_customize );
+    }
+    $wp_customize->_publish_changeset_values( $changeset_post->ID ) ;
+
+    /*
+     * Trash the changeset post if revisions are not enabled. Unpublished
+     * changesets by default get garbage collected due to the auto-draft status.
+     * When a changeset post is published, however, it would no longer get cleaned
+     * out. Ths is a problem when the changeset posts are never displayed anywhere,
+     * since they would just be endlessly piling up. So here we use the revisions
+     * feature to indicate whether or not a published changeset should get trashed
+     * and thus garbage collected.
+     */
+    if ( ! wp_revisions_enabled( $changeset_post ) ) {
+        wp_trash_post( $changeset_post->ID );
+    }
+}
+
+/**
+ * Filters changeset post data upon insert to ensure post_name is intact.
+ *
+ * This is needed to prevent the post_name from being dropped when the post is
+ * transitioned into pending status by a contributor.
+ *
+ * @since 4.7.0
+ * @see wp_insert_post()
+ *
+ * @param array $post_data          An array of slashed post data.
+ * @param array $supplied_post_data An array of sanitized, but otherwise unmodified post data.
+ * @returns array Filtered data.
+ */
+function _wp_customize_changeset_filter_insert_post_data( $post_data, $supplied_post_data ) {
+    if ( isset( $post_data['post_type'] ) && 'customize_changeset' === $post_data['post_type'] ) {
+
+        // Prevent post_name from being dropped, such as when contributor saves a changeset post as pending.
+        if ( empty( $post_data['post_name'] ) && ! empty( $supplied_post_data['post_name'] ) ) {
+            $post_data['post_name'] = $supplied_post_data['post_name'];
+        }
+    }
+    return $post_data;
 }
 

trunk/tests/phpunit/tests/adminbar.php

@@ -551 +551 @@
         $this->assertNull( $node );
     }
+
+    /**
+     * @ticket 30937
+     * @covers wp_admin_bar_customize_menu()
+     */
+    public function test_customize_link() {
+        global $wp_customize;
+        require_once ABSPATH . WPINC . '/class-wp-customize-manager.php';
+        $uuid = wp_generate_uuid4();
+        $this->go_to( home_url( "/?customize_changeset_uuid=$uuid" ) );
+        wp_set_current_user( self::$admin_id );
+
+        $this->factory()->post->create( array(
+            'post_type' => 'customize_changeset',
+            'post_status' => 'auto-draft',
+            'post_name' => $uuid,
+        ) );
+        $wp_customize = new WP_Customize_Manager( array(
+            'changeset_uuid' => $uuid,
+        ) );
+        $wp_customize->start_previewing_theme();
+
+        set_current_screen( 'front' );
+        $wp_admin_bar = $this->get_standard_admin_bar();
+        $node = $wp_admin_bar->get_node( 'customize' );
+        $this->assertNotEmpty( $node );
+
+        $parsed_url = wp_parse_url( $node->href );
+        $query_params = array();
+        wp_parse_str( $parsed_url['query'], $query_params );
+        $this->assertEquals( $uuid, $query_params['changeset_uuid'] );
+        $this->assertNotContains( 'changeset_uuid', $query_params['url'] );
+    }
 }

trunk/tests/phpunit/tests/customize/manager.php

@@ -28 +28 @@
 
     /**
+     * Admin user ID.
+     *
+     * @var int
+     */
+    protected static $admin_user_id;
+
+    /**
+     * Subscriber user ID.
+     *
+     * @var int
+     */
+    protected static $subscriber_user_id;
+
+    /**
+     * Set up before class.
+     *
+     * @param WP_UnitTest_Factory $factory Factory.
+     */
+    public static function wpSetUpBeforeClass( $factory ) {
+        self::$subscriber_user_id = $factory->user->create( array( 'role' => 'subscriber' ) );
+        self::$admin_user_id = $factory->user->create( array( 'role' => 'administrator' ) );
+    }
+
+    /**
      * Set up test.
      */
@@ -43 +67 @@
         $this->manager = null;
         unset( $GLOBALS['wp_customize'] );
+        $_REQUEST = array();
         parent::tearDown();
     }
@@ -54 +79 @@
         $GLOBALS['wp_customize'] = new WP_Customize_Manager();
         return $GLOBALS['wp_customize'];
+    }
+
+    /**
+     * Test WP_Customize_Manager::__construct().
+     *
+     * @covers WP_Customize_Manager::__construct()
+     */
+    function test_constructor() {
+        $uuid = wp_generate_uuid4();
+        $theme = 'twentyfifteen';
+        $messenger_channel = 'preview-123';
+        $wp_customize = new WP_Customize_Manager( array(
+            'changeset_uuid' => $uuid,
+            'theme' => $theme,
+            'messenger_channel' => $messenger_channel,
+        ) );
+        $this->assertEquals( $uuid, $wp_customize->changeset_uuid() );
+        $this->assertEquals( $theme, $wp_customize->get_stylesheet() );
+        $this->assertEquals( $messenger_channel, $wp_customize->get_messenger_channel() );
+
+        $theme = 'twentyfourteen';
+        $messenger_channel = 'preview-456';
+        $_REQUEST['theme'] = $theme;
+        $_REQUEST['customize_messenger_channel'] = $messenger_channel;
+        $wp_customize = new WP_Customize_Manager( array( 'changeset_uuid' => $uuid ) );
+        $this->assertEquals( $theme, $wp_customize->get_stylesheet() );
+        $this->assertEquals( $messenger_channel, $wp_customize->get_messenger_channel() );
+
+        $theme = 'twentyfourteen';
+        $_REQUEST['customize_theme'] = $theme;
+        $wp_customize = new WP_Customize_Manager();
+        $this->assertEquals( $theme, $wp_customize->get_stylesheet() );
+        $this->assertNotEmpty( $wp_customize->changeset_uuid() );
+    }
+
+    /**
+     * Test WP_Customize_Manager::setup_theme() for admin screen.
+     *
+     * @covers WP_Customize_Manager::setup_theme()
+     */
+    function test_setup_theme_in_customize_admin() {
+        global $pagenow, $wp_customize;
+        $pagenow = 'customize.php';
+        set_current_screen( 'customize' );
+
+        // Unauthorized.
+        $exception = null;
+        $wp_customize = new WP_Customize_Manager();
+        wp_set_current_user( self::$subscriber_user_id );
+        try {
+            $wp_customize->setup_theme();
+        } catch ( Exception $e ) {
+            $exception = $e;
+        }
+        $this->assertInstanceOf( 'WPDieException', $exception );
+        $this->assertContains( 'you are not allowed to customize this site', $exception->getMessage() );
+
+        // Bad changeset.
+        $exception = null;
+        wp_set_current_user( self::$admin_user_id );
+        $wp_customize = new WP_Customize_Manager( array( 'changeset_uuid' => 'bad' ) );
+        try {
+            $wp_customize->setup_theme();
+        } catch ( Exception $e ) {
+            $exception = $e;
+        }
+        $this->assertInstanceOf( 'WPDieException', $exception );
+        $this->assertContains( 'Invalid changeset UUID', $exception->getMessage() );
+
+        $wp_customize = new WP_Customize_Manager();
+        $wp_customize->setup_theme();
+    }
+
+    /**
+     * Test WP_Customize_Manager::setup_theme() for frontend.
+     *
+     * @covers WP_Customize_Manager::setup_theme()
+     */
+    function test_setup_theme_in_frontend() {
+        global $wp_customize, $pagenow, $show_admin_bar;
+        $pagenow = 'front';
+        set_current_screen( 'front' );
+
+        wp_set_current_user( 0 );
+        $exception = null;
+        $wp_customize = new WP_Customize_Manager();
+        wp_set_current_user( self::$subscriber_user_id );
+        try {
+            $wp_customize->setup_theme();
+        } catch ( Exception $e ) {
+            $exception = $e;
+        }
+        $this->assertInstanceOf( 'WPDieException', $exception );
+        $this->assertContains( 'Non-existent changeset UUID', $exception->getMessage() );
+
+        wp_set_current_user( self::$admin_user_id );
+        $wp_customize = new WP_Customize_Manager( array( 'messenger_channel' => 'preview-1' ) );
+        $wp_customize->setup_theme();
+        $this->assertFalse( $show_admin_bar );
+
+        show_admin_bar( true );
+        wp_set_current_user( self::$admin_user_id );
+        $wp_customize = new WP_Customize_Manager( array( 'messenger_channel' => null ) );
+        $wp_customize->setup_theme();
+        $this->assertTrue( $show_admin_bar );
+    }
+
+    /**
+     * Test WP_Customize_Manager::changeset_uuid().
+     *
+     * @ticket 30937
+     * @covers WP_Customize_Manager::changeset_uuid()
+     */
+    function test_changeset_uuid() {
+        $uuid = wp_generate_uuid4();
+        $wp_customize = new WP_Customize_Manager( array( 'changeset_uuid' => $uuid ) );
+        $this->assertEquals( $uuid, $wp_customize->changeset_uuid() );
+    }
+
+    /**
+     * Test WP_Customize_Manager::wp_loaded().
+     *
+     * Ensure that post values are previewed even without being in preview.
+     *
+     * @ticket 30937
+     * @covers WP_Customize_Manager::wp_loaded()
+     */
+    function test_wp_loaded() {
+        wp_set_current_user( self::$admin_user_id );
+        $wp_customize = new WP_Customize_Manager();
+        $title = 'Hello World';
+        $wp_customize->set_post_value( 'blogname', $title );
+        $this->assertNotEquals( $title, get_option( 'blogname' ) );
+        $wp_customize->wp_loaded();
+        $this->assertFalse( $wp_customize->is_preview() );
+        $this->assertEquals( $title, $wp_customize->get_setting( 'blogname' )->value() );
+        $this->assertEquals( $title, get_option( 'blogname' ) );
+    }
+
+    /**
+     * Test WP_Customize_Manager::find_changeset_post_id().
+     *
+     * @ticket 30937
+     * @covers WP_Customize_Manager::find_changeset_post_id()
+     */
+    function test_find_changeset_post_id() {
+        $uuid = wp_generate_uuid4();
+        $post_id = $this->factory()->post->create( array(
+            'post_name' => $uuid,
+            'post_type' => 'customize_changeset',
+            'post_status' => 'auto-draft',
+            'post_content' => '{}',
+        ) );
+
+        $wp_customize = new WP_Customize_Manager();
+        $this->assertNull( $wp_customize->find_changeset_post_id( wp_generate_uuid4() ) );
+        $this->assertEquals( $post_id, $wp_customize->find_changeset_post_id( $uuid ) );
+    }
+
+    /**
+     * Test WP_Customize_Manager::changeset_post_id().
+     *
+     * @ticket 30937
+     * @covers WP_Customize_Manager::changeset_post_id()
+     */
+    function test_changeset_post_id() {
+        $uuid = wp_generate_uuid4();
+        $wp_customize = new WP_Customize_Manager( array( 'changeset_uuid' => $uuid ) );
+        $this->assertNull( $wp_customize->changeset_post_id() );
+
+        $uuid = wp_generate_uuid4();
+        $wp_customize = new WP_Customize_Manager( array( 'changeset_uuid' => $uuid ) );
+        $post_id = $this->factory()->post->create( array(
+            'post_name' => $uuid,
+            'post_type' => 'customize_changeset',
+            'post_status' => 'auto-draft',
+            'post_content' => '{}',
+        ) );
+        $this->assertEquals( $post_id, $wp_customize->changeset_post_id() );
+    }
+
+    /**
+     * Test WP_Customize_Manager::changeset_data().
+     *
+     * @ticket 30937
+     * @covers WP_Customize_Manager::changeset_data()
+     */
+    function test_changeset_data() {
+        $uuid = wp_generate_uuid4();
+        $wp_customize = new WP_Customize_Manager( array( 'changeset_uuid' => $uuid ) );
+        $this->assertEquals( array(), $wp_customize->changeset_data() );
+
+        $uuid = wp_generate_uuid4();
+        $data = array( 'blogname' => array( 'value' => 'Hello World' ) );
+        $this->factory()->post->create( array(
+            'post_name' => $uuid,
+            'post_type' => 'customize_changeset',
+            'post_status' => 'auto-draft',
+            'post_content' => wp_json_encode( $data ),
+        ) );
+        $wp_customize = new WP_Customize_Manager( array( 'changeset_uuid' => $uuid ) );
+        $this->assertEquals( $data, $wp_customize->changeset_data() );
+    }
+
+    /**
+     * Test WP_Customize_Manager::customize_preview_init().
+     *
+     * @ticket 30937
+     * @covers WP_Customize_Manager::customize_preview_init()
+     */
+    function test_customize_preview_init() {
+
+        // Test authorized admin user.
+        wp_set_current_user( self::$admin_user_id );
+        $did_action_customize_preview_init = did_action( 'customize_preview_init' );
+        $wp_customize = new WP_Customize_Manager();
+        $wp_customize->customize_preview_init();
+        $this->assertEquals( $did_action_customize_preview_init + 1, did_action( 'customize_preview_init' ) );
+
+        $this->assertEquals( 10, has_action( 'wp_head', 'wp_no_robots' ) );
+        $this->assertEquals( 10, has_filter( 'wp_headers', array( $wp_customize, 'filter_iframe_security_headers' ) ) );
+        $this->assertEquals( 10, has_filter( 'wp_redirect', array( $wp_customize, 'add_state_query_params' ) ) );
+        $this->assertTrue( wp_script_is( 'customize-preview', 'enqueued' ) );
+        $this->assertEquals( 10, has_action( 'wp_head', array( $wp_customize, 'customize_preview_loading_style' ) ) );
+        $this->assertEquals( 20, has_action( 'wp_footer', array( $wp_customize, 'customize_preview_settings' ) ) );
+
+        // Test unauthorized user outside preview (no messenger_channel).
+        wp_set_current_user( self::$subscriber_user_id );
+        $wp_customize = new WP_Customize_Manager();
+        $wp_customize->register_controls();
+        $this->assertNotEmpty( $wp_customize->controls() );
+        $wp_customize->customize_preview_init();
+        $this->assertEmpty( $wp_customize->controls() );
+
+        // Test unauthorized user inside preview (with messenger_channel).
+        wp_set_current_user( self::$subscriber_user_id );
+        $wp_customize = new WP_Customize_Manager( array( 'messenger_channel' => 'preview-0' ) );
+        $exception = null;
+        try {
+            $wp_customize->customize_preview_init();
+        } catch ( WPDieException $e ) {
+            $exception = $e;
+        }
+        $this->assertNotNull( $exception );
+        $this->assertContains( 'Unauthorized', $exception->getMessage() );
+    }
+
+    /**
+     * Test WP_Customize_Manager::filter_iframe_security_headers().
+     *
+     * @ticket 30937
+     * @covers WP_Customize_Manager::filter_iframe_security_headers()
+     */
+    function test_filter_iframe_security_headers() {
+        $customize_url = admin_url( 'customize.php' );
+        $wp_customize = new WP_Customize_Manager();
+        $headers = $wp_customize->filter_iframe_security_headers( array() );
+        $this->assertArrayHasKey( 'X-Frame-Options', $headers );
+        $this->assertArrayHasKey( 'Content-Security-Policy', $headers );
+        $this->assertEquals( "ALLOW-FROM $customize_url", $headers['X-Frame-Options'] );
+    }
+
+    /**
+     * Test WP_Customize_Manager::add_state_query_params().
+     *
+     * @ticket 30937
+     * @covers WP_Customize_Manager::add_state_query_params()
+     */
+    function test_add_state_query_params() {
+        $uuid = wp_generate_uuid4();
+        $messenger_channel = 'preview-0';
+        $wp_customize = new WP_Customize_Manager( array(
+            'changeset_uuid' => $uuid,
+            'messenger_channel' => $messenger_channel,
+        ) );
+        $url = $wp_customize->add_state_query_params( home_url( '/' ) );
+        $parsed_url = wp_parse_url( $url );
+        parse_str( $parsed_url['query'], $query_params );
+        $this->assertArrayHasKey( 'customize_messenger_channel', $query_params );
+        $this->assertArrayHasKey( 'customize_changeset_uuid', $query_params );
+        $this->assertArrayNotHasKey( 'customize_theme', $query_params );
+        $this->assertEquals( $uuid, $query_params['customize_changeset_uuid'] );
+        $this->assertEquals( $messenger_channel, $query_params['customize_messenger_channel'] );
+
+        $uuid = wp_generate_uuid4();
+        $wp_customize = new WP_Customize_Manager( array(
+            'changeset_uuid' => $uuid,
+            'messenger_channel' => null,
+            'theme' => 'twentyfifteen',
+        ) );
+        $url = $wp_customize->add_state_query_params( home_url( '/' ) );
+        $parsed_url = wp_parse_url( $url );
+        parse_str( $parsed_url['query'], $query_params );
+        $this->assertArrayNotHasKey( 'customize_messenger_channel', $query_params );
+        $this->assertArrayHasKey( 'customize_changeset_uuid', $query_params );
+        $this->assertArrayHasKey( 'customize_theme', $query_params );
+        $this->assertEquals( $uuid, $query_params['customize_changeset_uuid'] );
+        $this->assertEquals( 'twentyfifteen', $query_params['customize_theme'] );
+
+        $uuid = wp_generate_uuid4();
+        $wp_customize = new WP_Customize_Manager( array(
+            'changeset_uuid' => $uuid,
+            'messenger_channel' => null,
+            'theme' => 'twentyfifteen',
+        ) );
+        $url = $wp_customize->add_state_query_params( 'http://not-allowed.example.com/?q=1' );
+        $parsed_url = wp_parse_url( $url );
+        parse_str( $parsed_url['query'], $query_params );
+        $this->assertArrayNotHasKey( 'customize_messenger_channel', $query_params );
+        $this->assertArrayNotHasKey( 'customize_changeset_uuid', $query_params );
+        $this->assertArrayNotHasKey( 'customize_theme', $query_params );
+    }
+
+    /**
+     * Test WP_Customize_Manager::save_changeset_post().
+     *
+     * @ticket 30937
+     * @covers WP_Customize_Manager::save_changeset_post()
+     */
+    function test_save_changeset_post_without_theme_activation() {
+        wp_set_current_user( self::$admin_user_id );
+
+        $did_action = array(
+            'customize_save_validation_before' => did_action( 'customize_save_validation_before' ),
+            'customize_save' => did_action( 'customize_save' ),
+            'customize_save_after' => did_action( 'customize_save_after' ),
+        );
+        $uuid = wp_generate_uuid4();
+
+        $manager = new WP_Customize_Manager( array(
+            'changeset_uuid' => $uuid,
+        ) );
+        $manager->register_controls();
+        $manager->set_post_value( 'blogname', 'Changeset Title' );
+        $manager->set_post_value( 'blogdescription', 'Changeset Tagline' );
+
+        $r = $manager->save_changeset_post( array(
+            'status' => 'auto-draft',
+            'title' => 'Auto Draft',
+            'date_gmt' => '2010-01-01 00:00:00',
+            'data' => array(
+                'blogname' => array(
+                    'value' => 'Overridden Changeset Title',
+                ),
+                'blogdescription' => array(
+                    'custom' => 'something',
+                ),
+            ),
+        ) );
+        $this->assertInternalType( 'array', $r );
+
+        $this->assertEquals( $did_action['customize_save_validation_before'] + 1, did_action( 'customize_save_validation_before' ) );
+
+        $post_id = $manager->find_changeset_post_id( $uuid );
+        $this->assertNotNull( $post_id );
+        $saved_data = json_decode( get_post( $post_id )->post_content, true );
+        $this->assertEquals( $manager->unsanitized_post_values(), wp_list_pluck( $saved_data, 'value' ) );
+        $this->assertEquals( 'Overridden Changeset Title', $saved_data['blogname']['value'] );
+        $this->assertEquals( 'something', $saved_data['blogdescription']['custom'] );
+        $this->assertEquals( 'Auto Draft', get_post( $post_id )->post_title );
+        $this->assertEquals( 'auto-draft', get_post( $post_id )->post_status );
+        $this->assertEquals( '2010-01-01 00:00:00', get_post( $post_id )->post_date_gmt );
+        $this->assertNotEquals( 'Changeset Title', get_option( 'blogname' ) );
+        $this->assertArrayHasKey( 'setting_validities', $r );
+
+        // Test saving with invalid settings, ensuring transaction blocked.
+        $previous_saved_data = $saved_data;
+        $manager->add_setting( 'foo_unauthorized', array(
+            'capability' => 'do_not_allow',
+        ) );
+        $manager->add_setting( 'baz_illegal', array(
+            'validate_callback' => array( $this, 'return_illegal_error' ),
+        ) );
+        $r = $manager->save_changeset_post( array(
+            'status' => 'auto-draft',
+            'data' => array(
+                'blogname' => array(
+                    'value' => 'OK',
+                ),
+                'foo_unauthorized' => array(
+                    'value' => 'No',
+                ),
+                'bar_unknown' => array(
+                    'value' => 'No',
+                ),
+                'baz_illegal' => array(
+                    'value' => 'No',
+                ),
+            ),
+        ) );
+        $this->assertInstanceOf( 'WP_Error', $r );
+        $this->assertEquals( 'transaction_fail', $r->get_error_code() );
+        $this->assertInternalType( 'array', $r->get_error_data() );
+        $this->assertArrayHasKey( 'setting_validities', $r->get_error_data() );
+        $error_data = $r->get_error_data();
+        $this->assertArrayHasKey( 'blogname', $error_data['setting_validities'] );
+        $this->assertTrue( $error_data['setting_validities']['blogname'] );
+        $this->assertArrayHasKey( 'foo_unauthorized', $error_data['setting_validities'] );
+        $this->assertInstanceOf( 'WP_Error', $error_data['setting_validities']['foo_unauthorized'] );
+        $this->assertEquals( 'unauthorized', $error_data['setting_validities']['foo_unauthorized']->get_error_code() );
+        $this->assertArrayHasKey( 'bar_unknown', $error_data['setting_validities'] );
+        $this->assertInstanceOf( 'WP_Error', $error_data['setting_validities']['bar_unknown'] );
+        $this->assertEquals( 'unrecognized', $error_data['setting_validities']['bar_unknown']->get_error_code() );
+        $this->assertArrayHasKey( 'baz_illegal', $error_data['setting_validities'] );
+        $this->assertInstanceOf( 'WP_Error', $error_data['setting_validities']['baz_illegal'] );
+        $this->assertEquals( 'illegal', $error_data['setting_validities']['baz_illegal']->get_error_code() );
+
+        // Since transactional, ensure no changes have been made.
+        $this->assertEquals( $previous_saved_data, json_decode( get_post( $post_id )->post_content, true ) );
+
+        // Attempt a non-transactional/incremental update.
+        $manager = new WP_Customize_Manager( array(
+            'changeset_uuid' => $uuid,
+        ) );
+        $manager->register_controls(); // That is, register settings.
+        $r = $manager->save_changeset_post( array(
+            'status' => null,
+            'data' => array(
+                'blogname' => array(
+                    'value' => 'Non-Transactional \o/ <script>unsanitized</script>',
+                ),
+                'bar_unknown' => array(
+                    'value' => 'No',
+                ),
+            ),
+        ) );
+        $this->assertInternalType( 'array', $r );
+        $this->assertArrayHasKey( 'setting_validities', $r );
+        $this->assertTrue( $r['setting_validities']['blogname'] );
+        $this->assertInstanceOf( 'WP_Error', $r['setting_validities']['bar_unknown'] );
+        $saved_data = json_decode( get_post( $post_id )->post_content, true );
+        $this->assertNotEquals( $previous_saved_data, $saved_data );
+        $this->assertEquals( 'Non-Transactional \o/ <script>unsanitized</script>', $saved_data['blogname']['value'] );
+
+        // Ensure the filter applies.
+        $customize_changeset_save_data_call_count = $this->customize_changeset_save_data_call_count;
+        add_filter( 'customize_changeset_save_data', array( $this, 'filter_customize_changeset_save_data' ), 10, 2 );
+        $manager->save_changeset_post( array(
+            'status' => null,
+            'data' => array(
+                'blogname' => array(
+                    'value' => 'Filtered',
+                ),
+            ),
+        ) );
+        $this->assertEquals( $customize_changeset_save_data_call_count + 1, $this->customize_changeset_save_data_call_count );
+
+        // Publish the changeset.
+        $manager = new WP_Customize_Manager( array( 'changeset_uuid' => $uuid ) );
+        $manager->register_controls();
+        $GLOBALS['wp_customize'] = $manager;
+        $r = $manager->save_changeset_post( array(
+            'status' => 'publish',
+            'data' => array(
+                'blogname' => array(
+                    'value' => 'Do it live \o/',
+                ),
+            ),
+        ) );
+        $this->assertInternalType( 'array', $r );
+        $this->assertEquals( 'Do it live \o/', get_option( 'blogname' ) );
+        $this->assertEquals( 'trash', get_post_status( $post_id ) ); // Auto-trashed.
+
+        // Test revisions.