Enable post locking in Gutenberg

editor/index.js

@@ -17,6 +17,7 @@ import './assets/stylesheets/main.scss';
 import Layout from './edit-post/layout';
 import { EditorProvider, ErrorBoundary } from './components';
 import { initializeMetaBoxState } from './store/actions';
+import { setupHearthbeat } from './utils/heartbeat';
 
 export * from './components';
 import store from './store'; // Registers the state tree
@@ -37,15 +38,6 @@ if ( dateSettings.timezone.string ) {
 	moment.tz.setDefault( 'WP' );
 }
 
-/**
- * Configure heartbeat to refresh the wp-api nonce, keeping the editor authorization intact.
- */
-window.jQuery( document ).on( 'heartbeat-tick', ( event, response ) => {
-	if ( response[ 'rest-nonce' ] ) {
-		window.wpApiSettings.nonce = response[ 'rest-nonce' ];
-	}
-} );
-
 /**
  * Reinitializes the editor after the user chooses to reboot the editor after
  * an unhandled error occurs, replacing previously mounted editor element using
@@ -83,6 +75,7 @@ export function recreateEditorInstance( target, settings ) {
 export function createEditorInstance( id, post, settings ) {
 	const target = document.getElementById( id );
 	const reboot = recreateEditorInstance.bind( null, target, settings );
+	setupHearthbeat();
 
 	render(
 		<EditorProvider settings={ settings } post={ post }>

editor/utils/heartbeat.js

@@ -0,0 +1,50 @@
+export function setupHearthbeat() {
+	/**
+	 * Configure heartbeat to refresh the wp-api nonce, keeping the editor authorization intact.
+	 */
+	window.jQuery( document ).on( 'heartbeat-tick', ( event, response ) => {
+		if ( response[ 'rest-nonce' ] ) {
+			window.wpApiSettings.nonce = response[ 'rest-nonce' ];
+		}
+	} );
+
+	/**
+	 * Configure Heartbeat post locks.
+	 *
+	 * Used to lock editing of an object by only one user at a time.
+	 *
+	 * When the user does not send a heartbeat in a heartbeat-time
+	 * the user is no longer editing and another user can start editing.
+	 */
+	jQuery( document ).on( 'heartbeat-send.refresh-lock', function( e, data ) {
+		const lock = jQuery( '#active_post_lock' ).val(),
+			postId = jQuery( '#post_ID' ).val(),
+			send = {};
+
+		if ( ! postId ) {
+			return;
+		}
+
+		send.postId = postId;
+
+		if ( lock ) {
+			send.lock = lock;
+		}
+
+		data[ 'wp-refresh-post-lock' ] = send;
+	} );
+
+	// Refresh post locks: update the lock string or show the dialog if somebody has taken over editing.
+	jQuery( document ).on( 'heartbeat-tick.refresh-lock', function( e, data ) {
+		if ( data[ 'wp-refresh-post-lock' ] ) {
+			const received = data[ 'wp-refresh-post-lock' ];
+
+			if ( received.lock_error ) {
+				// @todo suspend autosaving
+				// @todo Show "editing taken over" message.
+			} else if ( received.new_lock ) {
+				jQuery( '#active_post_lock' ).val( received.new_lock );
+			}
+		}
+	} );
+}