Changeset 41839

Timestamp:

10/12/2017 04:00:15 AM (7 years ago)

Author:

westonruter

Message:

Customize: Add changeset locking in Customizer to prevent users from overriding each other's changes.

• Customization locking is checked when changesets are saved and when heartbeat ticks.
• Lock is lifted immediately upon a user closing the Customizer.
• Heartbeat is introduced into Customizer.
• Changes made to user after it was locked by another user are stored as an autosave revision for restoration.
• Lock notification displays link to preview the other user's changes on the frontend.
• A user loading a locked Customizer changeset will be presented with an option to take over.
• Autosave revisions attached to a published changeset are converted into auto-drafts so that they will be presented to users for restoration.
• Focus constraining is improved in overlay notifications.
• Escape key is stopped from propagating in overlay notifications, and it dismisses dismissible overlay notifications.
• Introduces changesetLocked state which is used to disable the Save button and suppress the AYS dialog when leaving the Customizer.
• Fixes bug where users could be presented with each other's autosave revisions.

Props sayedwp, westonruter, melchoyce.
See #31436, #31897, #39896.
Fixes #42024.

Location:

trunk

Files:

• src/wp-admin/css/customize-controls.css (modified) (1 diff)
• src/wp-admin/customize.php (modified) (1 diff)
• src/wp-admin/js/customize-controls.js (modified) (13 diffs)
• src/wp-includes/class-wp-customize-manager.php (modified) (20 diffs)
• src/wp-includes/js/heartbeat.js (modified) (1 diff)
• src/wp-includes/script-loader.php (modified) (2 diffs)
• tests/phpunit/tests/ajax/CustomizeManager.php (modified) (7 diffs)
• tests/phpunit/tests/customize/manager.php (modified) (4 diffs)
• tests/qunit/fixtures/customize-settings.js (modified) (1 diff)
• tests/qunit/index.html (modified) (1 diff)

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

@@ -19 +19 @@
 #customize-controls .submit {
     text-align: center;
+}
+
+#customize-controls #customize-notifications-area .notice.notification-overlay.notification-changeset-locked {
+    background-color: rgba( 0, 0, 0, 0.7 );
+    padding: 25px;
+}
+
+#customize-controls #customize-notifications-area .notice.notification-overlay.notification-changeset-locked .customize-changeset-locked-message {
+    margin-left: auto;
+    margin-right: auto;
+    max-width: 366px;
+    min-height: 64px;
+    width: auto;
+    padding: 25px 25px 25px 109px;
+    position: relative;
+    background: #fff;
+    box-shadow: 0 3px 6px rgba( 0, 0, 0, 0.3 );
+    line-height: 1.5;
+    overflow-y: auto;
+    text-align: left;
+    top: calc( 50% - 100px );
+}
+
+#customize-controls #customize-notifications-area .notice.notification-overlay.notification-changeset-locked .currently-editing {
+    margin-top: 0;
+}
+#customize-controls #customize-notifications-area .notice.notification-overlay.notification-changeset-locked .action-buttons {
+    margin-bottom: 0;
+}
+
+.customize-changeset-locked-avatar {
+    width: 64px;
+    position: absolute;
+    left: 25px;
+    top: 25px;
+}
+
+.wp-core-ui.wp-customizer .customize-changeset-locked-message a.button {
+    margin-right: 10px;
+    margin-top: 0;
 }
 

trunk/src/wp-admin/customize.php

@@ -88 +88 @@
 do_action( 'customize_controls_init' );
 
+wp_enqueue_script( 'heartbeat' );
 wp_enqueue_script( 'customize-controls' );
 wp_enqueue_style( 'customize-controls' );

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

@@ -34 +34 @@
             if ( notification.loading ) {
                 notification.containerClasses += ' notification-loading';
+            }
+        },
+
+        /**
+         * Render notification.
+         *
+         * @since 4.9.0
+         *
+         * @return {jQuery} Notification container.
+         */
+        render: function() {
+            var li = api.Notification.prototype.render.call( this );
+            li.on( 'keydown', _.bind( this.handleEscape, this ) );
+            return li;
+        },
+
+        /**
+         * Stop propagation on escape key presses, but also dismiss notification if it is dismissible.
+         *
+         * @since 4.9.0
+         *
+         * @param {jQuery.Event} event - Event.
+         * @returns {void}
+         */
+        handleEscape: function( event ) {
+            var notification = this;
+            if ( 27 === event.which ) {
+                event.stopPropagation();
+                if ( notification.dismissible && notification.parent ) {
+                    notification.parent.remove( notification.code );
+                }
             }
         }
@@ -283 +314 @@
          */
         constrainFocus: function constrainFocus( event ) {
-            var collection = this;
-            if ( ! collection.focusContainer || collection.focusContainer.is( event.target ) || $.contains( collection.focusContainer[0], event.target[0] ) ) {
+            var collection = this, focusableElements;
+
+            // Prevent keys from escaping.
+            event.stopPropagation();
+
+            if ( 9 !== event.which ) { // Tab key.
                 return;
             }
-            collection.focusContainer.focus();
+
+            focusableElements = collection.focusContainer.find( ':focusable' );
+            if ( 0 === focusableElements.length ) {
+                focusableElements = collection.focusContainer;
+            }
+
+            if ( ! $.contains( collection.focusContainer[0], event.target ) || ! $.contains( collection.focusContainer[0], document.activeElement ) ) {
+                event.preventDefault();
+                focusableElements.first().focus();
+            } else if ( focusableElements.last().is( event.target ) && ! event.shiftKey ) {
+                event.preventDefault();
+                focusableElements.first().focus();
+            } else if ( focusableElements.first().is( event.target ) && event.shiftKey ) {
+                event.preventDefault();
+                focusableElements.last().focus();
+            }
         }
     });
@@ -6738 +6788 @@
         'remainingTimeToPublish',
         'previewerAlive',
-        'editShortcutVisibility'
+        'editShortcutVisibility',
+        'changesetLocked'
     ], function( name ) {
         api.state.create( name );
@@ -7185 +7236 @@
                             if ( 'not_future_date' === response.code && api.section.has( 'publish_settings' ) && api.section( 'publish_settings' ).active.get() && api.control.has( 'changeset_scheduled_date' ) ) {
                                 api.control( 'changeset_scheduled_date' ).toggleFutureDateNotification( true ).focus();
-                            } else {
+                            } else if ( 'changeset_locked' !== response.code ) {
                                 notification = new api.Notification( response.code, _.extend( notificationArgs, {
                                     message: response.message
@@ -7192 +7243 @@
                         } else {
                             notification = new api.Notification( 'unknown_error', _.extend( notificationArgs, {
-                                message: api.l10n.serverSaveError
+                                message: api.l10n.unknownRequestFail
                             } ) );
                         }
@@ -7498 +7549 @@
                 previewerAlive = state.instance( 'previewerAlive' ),
                 editShortcutVisibility  = state.instance( 'editShortcutVisibility' ),
+                changesetLocked = state.instance( 'changesetLocked' ),
                 populateChangesetUuidParam;
 
@@ -7548 +7600 @@
                  * and if the theme is not active or the changeset exists but is not published.
                  */
-                canSave = ! saving() && ! trashing() && ( ! activated() || ! saved() || ( changesetStatus() !== selectedChangesetStatus() && '' !== changesetStatus() ) || ( 'future' === selectedChangesetStatus() && changesetDate.get() !== selectedChangesetDate.get() ) );
+                canSave = ! saving() && ! trashing() && ! changesetLocked() && ( ! activated() || ! saved() || ( changesetStatus() !== selectedChangesetStatus() && '' !== changesetStatus() ) || ( 'future' === selectedChangesetStatus() && changesetDate.get() !== selectedChangesetDate.get() ) );
 
                 saveBtn.prop( 'disabled', ! canSave );
@@ -7562 +7614 @@
             // Set default states.
             changesetStatus( api.settings.changeset.status );
+            changesetLocked( Boolean( api.settings.changeset.lockUser ) );
             changesetDate( api.settings.changeset.publishDate );
             selectedChangesetDate( api.settings.changeset.publishDate );
@@ -7660 +7713 @@
             }
         }( api.state ) );
+
+        /**
+         * Handles lock notice and take over request.
+         *
+         * @since 4.9.0
+         */
+        ( function checkAndDisplayLockNotice() {
+
+            /**
+             * A notification that is displayed in a full-screen overlay with information about the locked changeset.
+             *
+             * @since 4.9.0
+             * @class
+             * @augments wp.customize.Notification
+             * @augments wp.customize.OverlayNotification
+             */
+            var LockedNotification = api.OverlayNotification.extend({
+
+                /**
+                 * Template ID.
+                 *
+                 * @type {string}
+                 */
+                templateId: 'customize-changeset-locked-notification',
+
+                /**
+                 * Lock user.
+                 *
+                 * @type {object}
+                 */
+                lockUser: null,
+
+                /**
+                 * Initialize.
+                 *
+                 * @since 4.9.0
+                 *
+                 * @param {string} [code] - Code.
+                 * @param {object} [params] - Params.
+                 */
+                initialize: function( code, params ) {
+                    var notification = this, _code, _params;
+                    _code = code || 'changeset_locked';
+                    _params = _.extend(
+                        {
+                            type: 'warning',
+                            containerClasses: '',
+                            lockUser: {}
+                        },
+                        params
+                    );
+                    _params.containerClasses += ' notification-changeset-locked';
+                    api.OverlayNotification.prototype.initialize.call( notification, _code, _params );
+                },
+
+                /**
+                 * Render notification.
+                 *
+                 * @since 4.9.0
+                 *
+                 * @return {jQuery} Notification container.
+                 */
+                render: function() {
+                    var notification = this, li, data, takeOverButton, request;
+                    data = _.extend(
+                        {
+                            allowOverride: false,
+                            returnUrl: api.settings.url['return'],
+                            previewUrl: api.previewer.previewUrl.get(),
+                            frontendPreviewUrl: api.previewer.getFrontendPreviewUrl()
+                        },
+                        this
+                    );
+
+                    li = api.OverlayNotification.prototype.render.call( data );
+
+                    // Try to autosave the changeset now.
+                    api.requestChangesetUpdate( {}, { autosave: true } ).fail( function( response ) {
+                        if ( ! response.autosaved ) {
+                            li.find( '.notice-error' ).prop( 'hidden', false ).text( response.message || api.l10n.unknownRequestFail );
+                        }
+                    } );
+
+                    takeOverButton = li.find( '.customize-notice-take-over-button' );
+                    takeOverButton.on( 'click', function( event ) {
+                        event.preventDefault();
+                        if ( request ) {
+                            return;
+                        }
+
+                        takeOverButton.addClass( 'disabled' );
+                        request = wp.ajax.post( 'customize_override_changeset_lock', {
+                            wp_customize: 'on',
+                            customize_theme: api.settings.theme.stylesheet,
+                            customize_changeset_uuid: api.settings.changeset.uuid,
+                            nonce: api.settings.nonce.override_lock
+                        } );
+
+                        request.done( function() {
+                            api.notifications.remove( notification.code ); // Remove self.
+                            api.state( 'changesetLocked' ).set( false );
+                        } );
+
+                        request.fail( function( response ) {
+                            var message = response.message || api.l10n.unknownRequestFail;
+                            li.find( '.notice-error' ).prop( 'hidden', false ).text( message );
+
+                            request.always( function() {
+                                takeOverButton.removeClass( 'disabled' );
+                            } );
+                        } );
+
+                        request.always( function() {
+                            request = null;
+                        } );
+                    } );
+
+                    return li;
+                }
+            });
+
+            /**
+             * Start lock.
+             *
+             * @since 4.9.0
+             *
+             * @param {object} [args] - Args.
+             * @param {object} [args.lockUser] - Lock user data.
+             * @param {boolean} [args.allowOverride=false] - Whether override is allowed.
+             * @returns {void}
+             */
+            function startLock( args ) {
+                if ( args && args.lockUser ) {
+                    api.settings.changeset.lockUser = args.lockUser;
+                }
+                api.state( 'changesetLocked' ).set( true );
+                api.notifications.add( new LockedNotification( 'changeset_locked', {
+                    lockUser: api.settings.changeset.lockUser,
+                    allowOverride: Boolean( args && args.allowOverride )
+                } ) );
+            }
+
+            // Show initial notification.
+            if ( api.settings.changeset.lockUser ) {
+                startLock( { allowOverride: true } );
+            }
+
+            // Check for lock when sending heartbeat requests.
+            $( document ).on( 'heartbeat-send.update_lock_notice', function( event, data ) {
+                data.check_changeset_lock = true;
+            } );
+
+            // Handle heartbeat ticks.
+            $( document ).on( 'heartbeat-tick.update_lock_notice', function( event, data ) {
+                var notification, code = 'changeset_locked';
+                if ( ! data.customize_changeset_lock_user ) {
+                    return;
+                }
+
+                // Update notification when a different user takes over.
+                notification = api.notifications( code );
+                if ( notification && notification.lockUser.id !== api.settings.changeset.lockUser.id ) {
+                    api.notifications.remove( code );
+                }
+
+                startLock( {
+                    lockUser: data.customize_changeset_lock_user
+                } );
+            } );
+
+            // Handle locking in response to changeset save errors.
+            api.bind( 'error', function( response ) {
+                if ( 'changeset_locked' === response.code && response.lock_user ) {
+                    startLock( {
+                        lockUser: response.lock_user
+                    } );
+                }
+            } );
+        } )();
 
         // Set up initial notifications.
@@ -7734 +7966 @@
                         // Handle dismissal of notice.
                         li.find( '.notice-dismiss' ).on( 'click', function() {
-                            wp.ajax.post( 'customize_dismiss_autosave', {
+                            wp.ajax.post( 'customize_dismiss_autosave_or_lock', {
                                 wp_customize: 'on',
                                 customize_theme: api.settings.theme.stylesheet,
                                 customize_changeset_uuid: api.settings.changeset.uuid,
-                                nonce: api.settings.nonce.dismiss_autosave
+                                nonce: api.settings.nonce.dismiss_autosave_or_lock,
+                                dismiss_autosave: true
                             } );
                         } );
@@ -8168 +8401 @@
                 // Prompt user with AYS dialog if leaving the Customizer with unsaved changes
                 $( window ).on( 'beforeunload.customize-confirm', function() {
-                    if ( ! isCleanState() ) {
+                    if ( ! isCleanState() && ! api.state( 'changesetLocked' ).get() ) {
                         setTimeout( function() {
                             overlay.removeClass( 'customize-loading' );
@@ -8179 +8412 @@
 
             function requestClose() {
-                var clearedToClose = $.Deferred();
+                var clearedToClose = $.Deferred(), dismissAutoSave = false, dismissLock = false;
+
                 if ( isCleanState() ) {
-                    clearedToClose.resolve();
+                    dismissLock = true;
                 } else if ( confirm( api.l10n.saveAlert ) ) {
+
+                    dismissLock = true;
 
                     // Mark all settings as clean to prevent another call to requestChangesetUpdate.
@@ -8192 +8428 @@
 
                     closeBtn.css( 'cursor', 'progress' );
-                    if ( '' === api.state( 'changesetStatus' ).get() ) {
-                        clearedToClose.resolve();
-                    } else {
-                        wp.ajax.send( 'customize_dismiss_autosave', {
-                            timeout: 500, // Don't wait too long.
-                            data: {
-                                wp_customize: 'on',
-                                customize_theme: api.settings.theme.stylesheet,
-                                customize_changeset_uuid: api.settings.changeset.uuid,
-                                nonce: api.settings.nonce.dismiss_autosave
-                            }
-                        } ).always( function() {
-                            clearedToClose.resolve();
-                        } );
+                    if ( '' !== api.state( 'changesetStatus' ).get() ) {
+                        dismissAutoSave = true;
                     }
                 } else {
                     clearedToClose.reject();
                 }
+
+                if ( dismissLock || dismissAutoSave ) {
+                    wp.ajax.send( 'customize_dismiss_autosave_or_lock', {
+                        timeout: 500, // Don't wait too long.
+                        data: {
+                            wp_customize: 'on',
+                            customize_theme: api.settings.theme.stylesheet,
+                            customize_changeset_uuid: api.settings.changeset.uuid,
+                            nonce: api.settings.nonce.dismiss_autosave_or_lock,
+                            dismiss_autosave: dismissAutoSave,
+                            dismiss_lock: dismissLock
+                        }
+                    } ).always( function() {
+                        clearedToClose.resolve();
+                    } );
+                }
+
                 return clearedToClose.promise();
             }

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

@@ -175 +175 @@
 
     /**
-     * Whether the autosave revision of the changeset should should be loaded.
+     * Whether the autosave revision of the changeset should be loaded.
      *
      * @since 4.9.0
@@ -374 +374 @@
         remove_action( 'admin_init', '_maybe_update_themes' );
 
-        add_action( 'wp_ajax_customize_save',             array( $this, 'save' ) );
-        add_action( 'wp_ajax_customize_trash',            array( $this, 'handle_changeset_trash_request' ) );
-        add_action( 'wp_ajax_customize_refresh_nonces',   array( $this, 'refresh_nonces' ) );
-        add_action( 'wp_ajax_customize_load_themes',      array( $this, 'handle_load_themes_request' ) );
-        add_action( 'wp_ajax_customize_dismiss_autosave', array( $this, 'handle_dismiss_autosave_request' ) );
+        add_action( 'wp_ajax_customize_save',                     array( $this, 'save' ) );
+        add_action( 'wp_ajax_customize_trash',                    array( $this, 'handle_changeset_trash_request' ) );
+        add_action( 'wp_ajax_customize_refresh_nonces',           array( $this, 'refresh_nonces' ) );
+        add_action( 'wp_ajax_customize_load_themes',              array( $this, 'handle_load_themes_request' ) );
+        add_filter( 'heartbeat_settings',                         array( $this, 'add_customize_screen_to_heartbeat_settings' ) );
+        add_filter( 'heartbeat_received',                         array( $this, 'check_changeset_lock_with_heartbeat' ), 10, 3 );
+        add_action( 'wp_ajax_customize_override_changeset_lock',  array( $this, 'handle_override_changeset_lock_request' ) );
+        add_action( 'wp_ajax_customize_dismiss_autosave_or_lock', array( $this, 'handle_dismiss_autosave_or_lock_request' ) );
 
         add_action( 'customize_register',                 array( $this, 'register_controls' ) );
@@ -630 +633 @@
             $this->_changeset_uuid = $changeset_uuid;
         }
+
+        $this->set_changeset_lock( $this->changeset_post_id() );
     }
 
@@ -1107 +1112 @@
         } else {
             if ( $this->autosaved() ) {
-                $autosave_post = wp_get_post_autosave( $changeset_post_id );
+                $autosave_post = wp_get_post_autosave( $changeset_post_id, get_current_user_id() );
                 if ( $autosave_post ) {
                     $data = $this->get_changeset_post_data( $autosave_post->ID );
@@ -2377 +2382 @@
         }
 
+        $lock_user_id = null;
         $autosave = ! empty( $_POST['customize_changeset_autosave'] );
+        if ( ! $is_new_changeset ) {
+            $lock_user_id = wp_check_post_lock( $this->changeset_post_id() );
+        }
+
+        // Force request to autosave when changeset is locked.
+        if ( $lock_user_id && ! $autosave ) {
+            $autosave = true;
+            $changeset_status = null;
+            $changeset_date_gmt = null;
+        }
+
         if ( $autosave && ! defined( 'DOING_AUTOSAVE' ) ) { // Back-compat.
             define( 'DOING_AUTOSAVE', true );
         }
 
+        $autosaved = false;
         $r = $this->save_changeset_post( array(
             'status' => $changeset_status,
@@ -2389 +2407 @@
             'autosave' => $autosave,
         ) );
+        if ( $autosave && ! is_wp_error( $r ) ) {
+            $autosaved = true;
+        }
+
+        // If the changeset was locked and an autosave request wasn't itself an error, then now explicitly return with a failure.
+        if ( $lock_user_id && ! is_wp_error( $r ) ) {
+            $r = new WP_Error(
+                'changeset_locked',
+                __( 'Changeset is being edited by other user.' ),
+                array(
+                    'lock_user' => $this->get_lock_user_data( $lock_user_id ),
+                )
+            );
+        }
+
         if ( is_wp_error( $r ) ) {
             $response = array(
@@ -2414 +2447 @@
             }
 
+            if ( 'publish' !== $response['changeset_status'] ) {
+                $this->set_changeset_lock( $changeset_post->ID );
+            }
+
             if ( 'future' === $response['changeset_status'] ) {
                 $response['changeset_date'] = $changeset_post->post_date;
@@ -2421 +2458 @@
                 $response['next_changeset_uuid'] = wp_generate_uuid4();
             }
+        }
+
+        if ( $autosave ) {
+            $response['autosaved'] = $autosaved;
         }
 
@@ -2685 +2726 @@
                         'type' => $setting->type,
                         'user_id' => $args['user_id'],
+                        'date_modified_gmt' => current_time( 'mysql', true ),
                     )
                 );
@@ -2799 +2841 @@
 
                 // Delete autosave revision when the changeset is updated.
-                $autosave_draft = wp_get_post_autosave( $changeset_post_id );
+                $autosave_draft = wp_get_post_autosave( $changeset_post_id, get_current_user_id() );
                 if ( $autosave_draft ) {
                     wp_delete_post( $autosave_draft->ID, true );
@@ -2991 +3033 @@
 
     /**
+     * Marks the changeset post as being currently edited by the current user.
+     *
+     * @since 4.9.0
+     *
+     * @param int  $changeset_post_id Changeset post id.
+     * @param bool $take_over Take over the changeset, default is false.
+     */
+    public function set_changeset_lock( $changeset_post_id, $take_over = false ) {
+        if ( $changeset_post_id ) {
+            $can_override = ! (bool) get_post_meta( $changeset_post_id, '_edit_lock', true );
+
+            if ( $take_over ) {
+                $can_override = true;
+            }
+
+            if ( $can_override ) {
+                $lock = sprintf( '%s:%s', time(), get_current_user_id() );
+                update_post_meta( $changeset_post_id, '_edit_lock', $lock );
+            } else {
+                $this->refresh_changeset_lock( $changeset_post_id );
+            }
+        }
+    }
+
+    /**
+     * Refreshes changeset lock with the current time if current user edited the changeset before.
+     *
+     * @since 4.9.0
+     *
+     * @param int $changeset_post_id Changeset post id.
+     */
+    public function refresh_changeset_lock( $changeset_post_id ) {
+        if ( ! $changeset_post_id ) {
+            return;
+        }
+        $lock = get_post_meta( $changeset_post_id, '_edit_lock', true );
+        $lock = explode( ':', $lock );
+
+        if ( $lock && ! empty( $lock[1] ) ) {
+            $user_id = intval( $lock[1] );
+            $current_user_id = get_current_user_id();
+            if ( $user_id === $current_user_id ) {
+                $lock = sprintf( '%s:%s', time(), $user_id );
+                update_post_meta( $changeset_post_id, '_edit_lock', $lock );
+            }
+        }
+    }
+
+    /**
+     * Filter heartbeat settings for the Customizer.
+     *
+     * @since 4.9.0
+     * @param array $settings Current settings to filter.
+     * @return array Heartbeat settings.
+     */
+    public function add_customize_screen_to_heartbeat_settings( $settings ) {
+        global $pagenow;
+        if ( 'customize.php' === $pagenow ) {
+            $settings['screenId'] = 'customize';
+        }
+        return $settings;
+    }
+
+    /**
+     * Get lock user data.
+     *
+     * @since 4.9.0
+     *
+     * @param int $user_id User ID.
+     * @return array|null User data formatted for client.
+     */
+    protected function get_lock_user_data( $user_id ) {
+        if ( ! $user_id ) {
+            return null;
+        }
+        $lock_user = get_userdata( $user_id );
+        if ( ! $lock_user ) {
+            return null;
+        }
+        return array(
+            'id' => $lock_user->ID,
+            'name' => $lock_user->display_name,
+            'avatar' => get_avatar_url( $lock_user->ID, array( 'size' => 128 ) ),
+        );
+    }
+
+    /**
+     * Check locked changeset with heartbeat API.
+     *
+     * @since 4.9.0
+     *
+     * @param array  $response  The Heartbeat response.
+     * @param array  $data      The $_POST data sent.
+     * @param string $screen_id The screen id.
+     * @return array The Heartbeat response.
+     */
+    public function check_changeset_lock_with_heartbeat( $response, $data, $screen_id ) {
+        if ( array_key_exists( 'check_changeset_lock', $data ) && 'customize' === $screen_id && current_user_can( 'customize' ) && $this->changeset_post_id() ) {
+            $lock_user_id = wp_check_post_lock( $this->changeset_post_id() );
+
+            if ( $lock_user_id ) {
+                $response['customize_changeset_lock_user'] = $this->get_lock_user_data( $lock_user_id );
+            } else {
+
+                // Refreshing time will ensure that the user is sitting on customizer and has not closed the customizer tab.
+                $this->refresh_changeset_lock( $this->changeset_post_id() );
+            }
+        }
+
+        return $response;
+    }
+
+    /**
+     * Removes changeset lock when take over request is sent via Ajax.
+     *
+     * @since 4.9.0
+     */
+    public function handle_override_changeset_lock_request() {
+        if ( ! $this->is_preview() ) {
+            wp_send_json_error( 'not_preview', 400 );
+        }
+
+        if ( ! check_ajax_referer( 'customize_override_changeset_lock', 'nonce', false ) ) {
+            wp_send_json_error( array(
+                'code' => 'invalid_nonce',
+                'message' => __( 'Security check failed.' ),
+            ) );
+        }
+
+        $changeset_post_id = $this->changeset_post_id();
+
+        if ( empty( $changeset_post_id ) ) {
+            wp_send_json_error( array(
+                'code' => 'no_changeset_found_to_take_over',
+                'message' => __( 'No changeset found to take over' ),
+            ) );
+        }
+
+        if ( ! current_user_can( get_post_type_object( 'customize_changeset' )->cap->edit_post, $changeset_post_id ) ) {
+            wp_send_json_error( array(
+                'code' => 'cannot_remove_changeset_lock',
+                'message' => __( 'Sorry you are not allowed to take over.' ),
+            ) );
+        }
+
+        $this->set_changeset_lock( $changeset_post_id, true );
+
+        wp_send_json_success( 'changeset_taken_over' );
+    }
+
+    /**
      * Whether a changeset revision should be made.
      *
@@ -3034 +3227 @@
      * @since 4.7.0
      * @see _wp_customize_publish_changeset()
+     * @global wpdb $wpdb
      *
      * @param int $changeset_post_id ID for customize_changeset post. Defaults to the changeset for the current manager instance.
@@ -3039 +3233 @@
      */
     public function _publish_changeset_values( $changeset_post_id ) {
+        global $wpdb;
+
         $publishing_changeset_data = $this->get_changeset_post_data( $changeset_post_id );
         if ( is_wp_error( $publishing_changeset_data ) ) {
@@ -3176 +3372 @@
         $this->_changeset_uuid    = $previous_changeset_uuid;
 
+        /*
+         * Convert all autosave revisions into their own auto-drafts so that users can be prompted to
+         * restore them when a changeset is published, but they had been locked out from including
+         * their changes in the changeset.
+         */
+        $revisions = wp_get_post_revisions( $changeset_post_id, array( 'check_enabled' => false ) );
+        foreach ( $revisions as $revision ) {
+            if ( false !== strpos( $revision->post_name, "{$changeset_post_id}-autosave" ) ) {
+                $wpdb->update(
+                    $wpdb->posts,
+                    array(
+                        'post_status' => 'auto-draft',
+                        'post_type' => 'customize_changeset',
+                        'post_name' => wp_generate_uuid4(),
+                        'post_parent' => 0,
+                    ),
+                    array(
+                        'ID' => $revision->ID,
+                    )
+                );
+                clean_post_cache( $revision->ID );
+            }
+        }
+
         return true;
     }
@@ -3230 +3450 @@
 
     /**
-     * Delete a given auto-draft changeset or the autosave revision for a given changeset.
+     * Delete a given auto-draft changeset or the autosave revision for a given changeset or delete changeset lock.
      *
      * @since 4.9.0
      */
-    public function handle_dismiss_autosave_request() {
+    public function handle_dismiss_autosave_or_lock_request() {
         if ( ! $this->is_preview() ) {
             wp_send_json_error( 'not_preview', 400 );
         }
 
-        if ( ! check_ajax_referer( 'customize_dismiss_autosave', 'nonce', false ) ) {
+        if ( ! check_ajax_referer( 'customize_dismiss_autosave_or_lock', 'nonce', false ) ) {
             wp_send_json_error( 'invalid_nonce', 403 );
         }
 
         $changeset_post_id = $this->changeset_post_id();
-
-        if ( empty( $changeset_post_id ) || 'auto-draft' === get_post_status( $changeset_post_id ) ) {
-            $dismissed = $this->dismiss_user_auto_draft_changesets();
-            if ( $dismissed > 0 ) {
-                wp_send_json_success( 'auto_draft_dismissed' );
-            } else {
-                wp_send_json_error( 'no_auto_draft_to_delete', 404 );
-            }
-        } else {
-            $revision = wp_get_post_autosave( $changeset_post_id );
-
-            if ( $revision ) {
-                if ( ! current_user_can( get_post_type_object( 'customize_changeset' )->cap->delete_post, $changeset_post_id ) ) {
-                    wp_send_json_error( 'cannot_delete_autosave_revision', 403 );
-                }
-
-                if ( ! wp_delete_post( $revision->ID, true ) ) {
-                    wp_send_json_error( 'autosave_revision_deletion_failure', 500 );
+        $dismiss_lock = ! empty( $_POST['dismiss_lock'] );
+        $dismiss_autosave = ! empty( $_POST['dismiss_autosave'] );
+
+        if ( $dismiss_lock ) {
+            if ( empty( $changeset_post_id ) && ! $dismiss_autosave ) {
+                wp_send_json_error( 'no_changeset_to_dismiss_lock', 404 );
+            }
+            if ( ! current_user_can( get_post_type_object( 'customize_changeset' )->cap->edit_post, $changeset_post_id ) && ! $dismiss_autosave ) {
+                wp_send_json_error( 'cannot_remove_changeset_lock', 403 );
+            }
+
+            delete_post_meta( $changeset_post_id, '_edit_lock' );
+
+            if ( ! $dismiss_autosave ) {
+                wp_send_json_success( 'changeset_lock_dismissed' );
+            }
+        }
+
+        if ( $dismiss_autosave ) {
+            if ( empty( $changeset_post_id ) || 'auto-draft' === get_post_status( $changeset_post_id ) ) {
+                $dismissed = $this->dismiss_user_auto_draft_changesets();
+                if ( $dismissed > 0 ) {
+                    wp_send_json_success( 'auto_draft_dismissed' );
                 } else {
-                    wp_send_json_success( 'autosave_revision_deleted' );
+                    wp_send_json_error( 'no_auto_draft_to_delete', 404 );
                 }
             } else {
-                wp_send_json_error( 'no_autosave_revision_to_delete', 404 );
-            }
-        }
+                $revision = wp_get_post_autosave( $changeset_post_id, get_current_user_id() );
+
+                if ( $revision ) {
+                    if ( ! current_user_can( get_post_type_object( 'customize_changeset' )->cap->delete_post, $changeset_post_id ) ) {
+                        wp_send_json_error( 'cannot_delete_autosave_revision', 403 );
+                    }
+
+                    if ( ! wp_delete_post( $revision->ID, true ) ) {
+                        wp_send_json_error( 'autosave_revision_deletion_failure', 500 );
+                    } else {
+                        wp_send_json_success( 'autosave_revision_deleted' );
+                    }
+                } else {
+                    wp_send_json_error( 'no_autosave_revision_to_delete', 404 );
+                }
+            }
+        }
+
         wp_send_json_error( 'unknown_error', 500 );
     }
@@ -3818 +4058 @@
         </script>
 
+        <script type="text/html" id="tmpl-customize-changeset-locked-notification">
+            <li class="notice notice-{{ data.type || 'info' }} {{ data.containerClasses || '' }}" data-code="{{ data.code }}" data-type="{{ data.type }}">
+                <div class="notification-message customize-changeset-locked-message">
+                    <img class="customize-changeset-locked-avatar" src="{{ data.lockUser.avatar }}" alt="{{ data.lockUser.name }}">
+                    <p class="currently-editing">
+                        <# if ( data.message ) { #>
+                            {{{ data.message }}}
+                        <# } else if ( data.allowOverride ) { #>
+                            <?php
+                            /* translators: %s: User who is customizing the changeset in customizer. */
+                            printf( __( '%s is already customizing this site. Do you want to take over?' ), '{{ data.lockUser.name }}' );
+                            ?>
+                        <# } else { #>
+                            <?php
+                            /* translators: %s: User who is customizing the changeset in customizer. */
+                            printf( __( '%s is already customizing this site. Please wait until they are done to try customizing. Your latest changes have been autosaved.' ), '{{ data.lockUser.name }}' );
+                            ?>
+                        <# } #>
+                    </p>
+                    <p class="notice notice-error notice-alt" hidden></p>
+                    <p class="action-buttons">
+                        <# if ( data.returnUrl !== data.previewUrl ) { #>
+                            <a class="button customize-notice-go-back-button" href="{{ data.returnUrl }}"><?php _e( 'Go back' ); ?></a>
+                        <# } #>
+                        <a class="button customize-notice-preview-button" href="{{ data.frontendPreviewUrl }}"><?php _e( 'Preview' ); ?></a>
+                        <# if ( data.allowOverride ) { #>
+                            <button class="button button-primary wp-tab-last customize-notice-take-over-button"><?php _e( 'Take over' ); ?></button>
+                        <# } #>
+                    </p>
+                </div>
+            </li>
+        </script>
+
         <?php
         /* The following template is obsolete in core but retained for plugins. */
@@ -4189 +4462 @@
             'preview' => wp_create_nonce( 'preview-customize_' . $this->get_stylesheet() ),
             'switch_themes' => wp_create_nonce( 'switch_themes' ),
-            'dismiss_autosave' => wp_create_nonce( 'customize_dismiss_autosave' ),
+            'dismiss_autosave_or_lock' => wp_create_nonce( 'customize_dismiss_autosave_or_lock' ),
+            'override_lock' => wp_create_nonce( 'customize_override_changeset_lock' ),
             'trash' => wp_create_nonce( 'trash_customize_changeset' ),
         );
@@ -4232 +4506 @@
         if ( ! $this->saved_starter_content_changeset && ! $this->autosaved() ) {
             if ( $changeset_post_id ) {
-                $autosave_revision_post = wp_get_post_autosave( $changeset_post_id );
+                $autosave_revision_post = wp_get_post_autosave( $changeset_post_id, get_current_user_id() );
             } else {
                 $autosave_autodraft_posts = $this->get_changeset_posts( array(
@@ -4276 +4550 @@
         } else {
             $initial_date = current_time( 'mysql', false );
+        }
+
+        $lock_user_id = false;
+        if ( $this->changeset_post_id() ) {
+            $lock_user_id = wp_check_post_lock( $this->changeset_post_id() );
         }
 
@@ -4289 +4568 @@
                 'publishDate' => $initial_date,
                 'statusChoices' => $status_choices,
+                'lockUser' => $lock_user_id ? $this->get_lock_user_data( $lock_user_id ) : null,
             ),
             'initialServerDate' => current_time( 'mysql', false ),

trunk/src/wp-includes/js/heartbeat.js

@@ -368 +368 @@
             };
 
+            if ( 'customize' === settings.screenId  ) {
+                ajaxData.wp_customize = 'on';
+            }
+
             settings.connecting = true;
             settings.xhr = $.ajax({

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

@@ -548 +548 @@
     $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 );
-    $scripts->add( 'customize-controls', "/wp-admin/js/customize-controls$suffix.js", array( 'customize-base', 'wp-a11y', 'wp-util' ), false, 1 );
+    $scripts->add( 'customize-controls', "/wp-admin/js/customize-controls$suffix.js", array( 'customize-base', 'wp-a11y', 'wp-util', 'jquery-ui-core' ), false, 1 );
     did_action( 'init' ) && $scripts->localize( 'customize-controls', '_wpCustomizeControlsL10n', array(
         'activate'           => __( 'Activate & Publish' ),
@@ -575 +575 @@
         'expandSidebar'      => _x( 'Show Controls', 'label for hide controls button without length constraints' ),
         'untitledBlogName'   => __( '(Untitled)' ),
-        'serverSaveError'    => __( 'Failed connecting to the server. Please try saving again.' ),
+        'unknownRequestFail' => __( 'Looks like something’s gone wrong. Wait a couple seconds, and then try again.' ),
         'themeDownloading'   => __( 'Downloading your new theme…' ),
         'themePreviewWait'   => __( 'Setting up your live preview. This may take a bit.' ),
         'revertingChanges'   => __( 'Reverting unpublished changes…' ),
         'trashConfirm'       => __( 'Are you sure you’d like to discard your unpublished changes?' ),
+        /* translators: %s: Display name of the user who has taken over the changeset in customizer. */
+        'takenOverMessage'   => __( '%s has taken over and is currently customizing.' ),
         /* translators: %s: URL to the Customizer to load the autosaved version */
         'autosaveNotice'     => __( 'There is a more recent autosave of your changes than the one you are previewing. <a href="%s">Restore the autosave</a>' ),

trunk/tests/phpunit/tests/ajax/CustomizeManager.php

@@ -517 +517 @@
      *
      * @ticket 39896
-     * @covers WP_Customize_Manager::handle_dismiss_autosave_request()
+     * @covers WP_Customize_Manager::handle_dismiss_autosave_or_lock_request()
      * @covers WP_Customize_Manager::dismiss_user_auto_draft_changesets()
      */
-    public function test_handle_dismiss_autosave_request() {
+    public function test_handle_dismiss_autosave_or_lock_request() {
         $uuid = wp_generate_uuid4();
         $wp_customize = $this->set_up_valid_state( $uuid );
 
-        $this->make_ajax_call( 'customize_dismiss_autosave' );
+        $this->make_ajax_call( 'customize_dismiss_autosave_or_lock' );
         $this->assertFalse( $this->_last_response_parsed['success'] );
         $this->assertEquals( 'invalid_nonce', $this->_last_response_parsed['data'] );
 
-        $nonce = wp_create_nonce( 'customize_dismiss_autosave' );
+        $nonce = wp_create_nonce( 'customize_dismiss_autosave_or_lock' );
         $_POST['nonce'] = $_GET['nonce'] = $_REQUEST['nonce'] = $nonce;
-        $this->make_ajax_call( 'customize_dismiss_autosave' );
+
+        $_POST['dismiss_lock'] = $_GET['dismiss_lock'] = $_REQUEST['dismiss_lock'] = true;
+        $this->make_ajax_call( 'customize_dismiss_autosave_or_lock' );
+        $this->assertFalse( $this->_last_response_parsed['success'] );
+        $this->assertEquals( 'no_changeset_to_dismiss_lock', $this->_last_response_parsed['data'] );
+
+        $_POST['dismiss_autosave'] = $_GET['dismiss_autosave'] = $_REQUEST['dismiss_autosave'] = true;
+        $this->make_ajax_call( 'customize_dismiss_autosave_or_lock' );
         $this->assertFalse( $this->_last_response_parsed['success'] );
         $this->assertEquals( 'no_auto_draft_to_delete', $this->_last_response_parsed['data'] );
@@ -560 +567 @@
             $this->assertFalse( (bool) get_post_meta( $post_id, '_customize_restore_dismissed', true ) );
         }
-        $this->make_ajax_call( 'customize_dismiss_autosave' );
+        $this->make_ajax_call( 'customize_dismiss_autosave_or_lock' );
         $this->assertTrue( $this->_last_response_parsed['success'] );
         $this->assertEquals( 'auto_draft_dismissed', $this->_last_response_parsed['data'] );
@@ -573 +580 @@
 
         // Subsequent test results in none dismissed.
-        $this->make_ajax_call( 'customize_dismiss_autosave' );
+        $this->make_ajax_call( 'customize_dismiss_autosave_or_lock' );
         $this->assertFalse( $this->_last_response_parsed['success'] );
         $this->assertEquals( 'no_auto_draft_to_delete', $this->_last_response_parsed['data'] );
@@ -586 +593 @@
             'status' => 'draft',
         ) );
+
+        $_POST['dismiss_autosave'] = $_GET['dismiss_autosave'] = $_REQUEST['dismiss_autosave'] = false;
+        $this->make_ajax_call( 'customize_dismiss_autosave_or_lock' );
+        $this->assertTrue( $this->_last_response_parsed['success'] );
+        $this->assertEquals( 'changeset_lock_dismissed', $this->_last_response_parsed['data'] );
+
+        $_POST['dismiss_autosave'] = $_GET['dismiss_autosave'] = $_REQUEST['dismiss_autosave'] = true;
         $this->assertNotInstanceOf( 'WP_Error', $r );
         $this->assertFalse( wp_get_post_autosave( $wp_customize->changeset_post_id() ) );
@@ -591 +605 @@
 
         // Since no autosave yet, confirm no action.
-        $this->make_ajax_call( 'customize_dismiss_autosave' );
+        $this->make_ajax_call( 'customize_dismiss_autosave_or_lock' );
         $this->assertFalse( $this->_last_response_parsed['success'] );
         $this->assertEquals( 'no_autosave_revision_to_delete', $this->_last_response_parsed['data'] );
@@ -611 +625 @@
 
         // Confirm autosave gets deleted.
-        $this->make_ajax_call( 'customize_dismiss_autosave' );
+        $this->make_ajax_call( 'customize_dismiss_autosave_or_lock' );
         $this->assertTrue( $this->_last_response_parsed['success'] );
         $this->assertEquals( 'autosave_revision_deleted', $this->_last_response_parsed['data'] );
@@ -617 +631 @@
 
         // Since no autosave yet, confirm no action.
-        $this->make_ajax_call( 'customize_dismiss_autosave' );
+        $this->make_ajax_call( 'customize_dismiss_autosave_or_lock' );
         $this->assertFalse( $this->_last_response_parsed['success'] );
         $this->assertEquals( 'no_autosave_revision_to_delete', $this->_last_response_parsed['data'] );

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

@@ -1456 +1456 @@
             'autosave' => true,
         ) );
-        $this->assertFalse( wp_get_post_autosave( $changeset_post_id ) );
+        $this->assertFalse( wp_get_post_autosave( $changeset_post_id, get_current_user_id() ) );
         $this->assertContains( 'Autosaved Auto-draft Title', get_post( $changeset_post_id )->post_content );
 
@@ -1494 +1494 @@
 
         // Try autosave.
-        $this->assertFalse( wp_get_post_autosave( $changeset_post_id ) );
+        $this->assertFalse( wp_get_post_autosave( $changeset_post_id, get_current_user_id() ) );
         $r = $wp_customize->save_changeset_post( array(
             'data' => array(
@@ -1506 +1506 @@
 
         // Verify that autosave happened.
-        $autosave_revision = wp_get_post_autosave( $changeset_post_id );
+        $autosave_revision = wp_get_post_autosave( $changeset_post_id, get_current_user_id() );
         $this->assertInstanceOf( 'WP_Post', $autosave_revision );
         $this->assertContains( 'Draft Title', get_post( $changeset_post_id )->post_content );
@@ -2636 +2636 @@
                 'publishDate',
                 'statusChoices',
+                'lockUser',
             ),
             array_keys( $data['changeset'] )

trunk/tests/qunit/fixtures/customize-settings.js

@@ -168 +168 @@
         hasAutosaveRevision: false,
         latestAutoDraftUuid: '341b06f6-3c1f-454f-96df-3cf197f3e347',
-        publishDate: ''
+        publishDate: '',
+        locked: false
     },
     timeouts: {

trunk/tests/qunit/index.html

@@ -2211 +2211 @@
         <script src="wp-includes/js/tinymce/tinymce-obsolete.js"></script>
 
+        <!-- Changeset locked notice template -->
+        <script type="text/html" id="tmpl-customize-changeset-locked-notice">
+            <div id="customize-changeset-lock-dialog" class="notification-dialog-wrap hidden">
+                <div class="notification-dialog-background"></div>
+                <div class="notification-dialog">
+                    <div class="customize-changeset-locked-message">
+                        <div class="customize-changeset-locked-avatar"></div>
+                        <p class="currently-editing wp-tab-first" tabindex="0">
+                            <span class="customize-notice-user-name"></span> <span class="customize-take-over-message">is already customizing this site. Do you want to take over?</span></p>
+                        <p>
+                            <a class="button customize-notice-go-back-button" href="/wp-admin/post.php?post=505&#038;action=edit">Go back</a>
+                            <a class="button customize-notice-preview-button" href="http://example.org/?customize_changeset_uuid=7a796f7a-255c-49f5-9d25-cef0c315a4ba">Preview</a>
+                            <a class="button button-primary wp-tab-last customize-notice-take-over-button" href="http://example.org/wp-admin/customize.php?changeset_uuid=7a796f7a-255c-49f5-9d25-cef0c315a4ba&action=customize_take_over_changeset&nonce=e3a1df16d2&return=/wp-admin/post.php?post=505&action=edit">Take over</a>
+                        </p>
+                    </div>
+                </div>
+            </div>
+        </script>
+
         <!-- Updates templates and HTML fixtures -->
         <script id="tmpl-wp-updates-admin-notice" type="text/html">