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.


git-svn-id: https://develop.svn.wordpress.org/trunk@41839 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Weston Ruter
2017-10-12 04:00:15 +00:00
parent baa8937d58
commit bb63758be8
10 changed files with 677 additions and 74 deletions

View File

@@ -20,6 +20,46 @@ body {
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;
}
#customize-controls .description {
color: #555d66;
}