Enable post locking in Gutenberg

docs/data/data-core-editor.md

@@ -1019,6 +1019,54 @@ Returns the editor settings.
 
 The editor settings object
 
+### isPostLocked
+
+Returns whether the post is locked.
+
+*Parameters*
+
+ * state: Global application state.
+
+*Returns*
+
+Is locked.
+
+### isPostLockTakeover
+
+Returns whether the post is locked.
+
+*Parameters*
+
+ * state: Global application state.
+
+*Returns*
+
+Is locked.
+
+### getPostLockUser
+
+Returns details about the post lock user.
+
+*Parameters*
+
+ * state: Global application state.
+
+*Returns*
+
+A user object.
+
+### getActivePostLock
+
+Returns the active post lock.
+
+*Parameters*
+
+ * state: Global application state.
+
+*Returns*
+
+The lock object.
+
 ### canUserUseUnfilteredHTML
 
 Returns whether or not the user has the unfiltered_html capability.
@@ -1319,6 +1367,14 @@ Returns an action object used to remove a notice.
 
  * id: The notice id.
 
+### updatePostLock
+
+Returns an action object used to lock the editor.
+
+*Parameters*
+
+ * lock: Details about the post lock status, user, and nonce.
+
 ### fetchReusableBlocks
 
 Returns an action object used to fetch a single reusable block or all

edit-post/assets/stylesheets/main.scss

@@ -80,7 +80,9 @@ body.gutenberg-editor-page {
 	}
 }
 
-.gutenberg {
+.gutenberg,
+// The modals are shown outside the .gutenberg wrapper, they need these styles
+.components-modal__frame {
 	box-sizing: border-box;
 
 	*,

edit-post/editor.js

@@ -2,9 +2,8 @@
  * WordPress dependencies
  */
 import { withSelect } from '@wordpress/data';
-import { EditorProvider, ErrorBoundary } from '@wordpress/editor';
+import { EditorProvider, ErrorBoundary, PostLockedModal } from '@wordpress/editor';
 import { StrictMode } from '@wordpress/element';
-
 /**
  * Internal dependencies
  */
@@ -39,6 +38,7 @@ function Editor( {
 				<ErrorBoundary onError={ onError }>
 					<Layout />
 				</ErrorBoundary>
+				<PostLockedModal />
 			</EditorProvider>
 		</StrictMode>
 	);

gutenberg.php

@@ -24,7 +24,7 @@
  * @since 0.1.0
  */
 function the_gutenberg_project() {
-	global $post_type_object;
+	global $post_type_object, $post;
 	?>
 	<div class="gutenberg">
 		<h1 class="screen-reader-text"><?php echo esc_html( $post_type_object->labels->edit_item ); ?></h1>
@@ -471,3 +471,15 @@ function gutenberg_add_admin_body_class( $classes ) {
 	// Default to is-fullscreen-mode to avoid jumps in the UI.
 	return "$classes gutenberg-editor-page is-fullscreen-mode";
 }
+
+/**
+ * Ensure heartbeat interval is low enough to work for post locking.
+ *
+ * @param  array $settings Settings.
+ * @return array           Filtered settings.
+ */
+function wp_heartbeat_settings_gutenberg( $settings ) {
+	$settings['interval'] = 15;
+	return $settings;
+}
+add_filter( 'heartbeat_settings', 'wp_heartbeat_settings_gutenberg' );

lib/client-assets.php

@@ -1432,6 +1432,52 @@ function gutenberg_editor_scripts_and_styles( $hook ) {
 		}
 	}
 
+	// Lock settings.
+	$user_id = wp_check_post_lock( $post->ID );
+	if ( $user_id ) {
+		/**
+		 * Filters whether to show the post locked dialog.
+		 *
+		 * Returning a falsey value to the filter will short-circuit displaying the dialog.
+		 *
+		 * @since 3.6.0
+		 *
+		 * @param bool         $display Whether to display the dialog. Default true.
+		 * @param WP_Post      $post    Post object.
+		 * @param WP_User|bool $user    The user id currently editing the post.
+		 */
+		if ( apply_filters( 'show_post_locked_dialog', true, $post, $user_id ) ) {
+			$locked = true;
+		}
+
+		$user_details = null;
+		if ( $locked ) {
+			$user         = get_userdata( $user_id );
+			$user_details = array(
+				'name' => $user->display_name,
+			);
+			$avatar       = get_avatar( $user_id, 64 );
+			if ( $avatar ) {
+				if ( preg_match( "|src='([^']+)'|", $avatar, $matches ) ) {
+					$user_details['avatar'] = $matches[1];
+				}
+			}
+		}
+
+		$lock_details = array(
+			'isLocked' => $locked,
+			'user'     => $user_details,
+		);
+	} else {
+
+		// Lock the post.
+		$active_post_lock = wp_set_post_lock( $post->ID );
+		$lock_details     = array(
+			'isLocked'       => false,
+			'activePostLock' => esc_attr( implode( ':', $active_post_lock ) ),
+		);
+	}
+
 	$editor_settings = array(
 		'alignWide'           => $align_wide || ! empty( $gutenberg_theme_support[0]['wide-images'] ), // Backcompat. Use `align-wide` outside of `gutenberg` array.
 		'availableTemplates'  => $available_templates,
@@ -1444,7 +1490,13 @@ function gutenberg_editor_scripts_and_styles( $hook ) {
 		'autosaveInterval'    => 10,
 		'maxUploadFileSize'   => $max_upload_size,
 		'allowedMimeTypes'    => get_allowed_mime_types(),
-		'styles'              => $styles,
+		'postLock'            => $lock_details,
+
+		// Ideally, we'd remove this and rely on a REST API endpoint.
+		'postLockUtils'       => array(
+			'nonce'   => wp_create_nonce( 'lock-post_' . $post->ID ),
+			'ajaxUrl' => admin_url( 'admin-ajax.php' ),
+		),
 	);
 
 	$post_autosave = get_autosave_newer_than_post_save( $post );
@@ -1471,8 +1523,8 @@ function gutenberg_editor_scripts_and_styles( $hook ) {
 	( function() {
 		var editorSettings = %s;
 		window._wpLoadGutenbergEditor = new Promise( function( resolve ) {
-			wp.domReady( function() {
-				resolve( wp.editPost.initializeEditor( 'editor', "%s", %d, editorSettings, window._wpGutenbergDefaultPost ) );
+				wp.domReady( function() {
+					resolve( wp.editPost.initializeEditor( 'editor', "%s", %d, editorSettings, window._wpGutenbergDefaultPost ) );
 			} );
 		} );
 } )();

packages/components/src/modal/README.md

@@ -97,6 +97,14 @@ If this property is added, it will determine whether the modal requests to close
 - Required: No
 - Default: true
 
+### isDismissable
+
+If this property is set to false, the modal will not display a close icon and cannot be dismissed.
+
+- Type: `bool`
+- Required: No
+- Default: true
+
 ### className
 
 If this property is added, it will an additional class name to the modal content `div`.

packages/components/src/modal/header.js

@@ -8,7 +8,7 @@ import { __ } from '@wordpress/i18n';
  */
 import IconButton from '../icon-button';
 
-const ModalHeader = ( { icon, title, onClose, closeLabel, headingId } ) => {
+const ModalHeader = ( { icon, title, onClose, closeLabel, headingId, isDismissable } ) => {
 	const label = closeLabel ? closeLabel : __( 'Close dialog' );
 
 	return (
@@ -28,11 +28,13 @@ const ModalHeader = ( { icon, title, onClose, closeLabel, headingId } ) => {
 					</h1>
 				}
 			</div>
-			<IconButton
-				onClick={ onClose }
-				icon="no-alt"
-				label={ label }
-			/>
+			{ isDismissable &&
+				<IconButton
+					onClick={ onClose }
+					icon="no-alt"
+					label={ label }
+				/>
+			}
 		</div>
 	);
 };

packages/components/src/modal/index.js

@@ -117,6 +117,7 @@ class Modal extends Component {
 			children,
 			aria,
 			instanceId,
+			isDismissable,
 			...otherProps
 		} = this.props;
 
@@ -143,10 +144,12 @@ class Modal extends Component {
 					{ ...otherProps } >
 					<ModalHeader
 						closeLabel={ closeButtonLabel }
+						isDismissable={ isDismissable }
 						onClose={ onRequestClose }
 						title={ title }
 						headingId={ headingId }
-						icon={ icon } />
+						icon={ icon }
+					/>
 					<div
 						className={ 'components-modal__content' }>
 						{ children }
@@ -166,6 +169,7 @@ Modal.defaultProps = {
 	focusOnMount: true,
 	shouldCloseOnEsc: true,
 	shouldCloseOnClickOutside: true,
+	isDismissable: true,
 	/* accessibility */
 	aria: {
 		labelledby: null,

packages/editor/src/components/index.js

@@ -48,6 +48,7 @@ export { default as PostFormat } from './post-format';
 export { default as PostFormatCheck } from './post-format/check';
 export { default as PostLastRevision } from './post-last-revision';
 export { default as PostLastRevisionCheck } from './post-last-revision/check';
+export { default as PostLockedModal } from './post-locked-modal';
 export { default as PostPendingStatus } from './post-pending-status';
 export { default as PostPendingStatusCheck } from './post-pending-status/check';
 export { default as PostPingbacks } from './post-pingbacks';