Enable post locking in Gutenberg

docs/data/data-core-editor.md

@@ -1030,6 +1030,42 @@ Returns the editor settings.
 
 The editor settings object
 
+### isPostLocked
+
+Returns whether the post is locked.
+
+*Parameters*
+
+ * state: Global application state.
+
+*Returns*
+
+Is locked.
+
+### getLockDetails
+
+Returns details about the current post lock if available.
+
+*Parameters*
+
+ * state: Global application state.
+
+*Returns*
+
+The lock details object.
+
+### getPostLockUser
+
+Returns whether the post lock user.
+
+*Parameters*
+
+ * state: Global application state.
+
+*Returns*
+
+A user object.
+
 ### canUserUseUnfilteredHTML
 
 Returns whether or not the user has the unfiltered_html capability.
@@ -1053,6 +1089,7 @@ the specified post object and editor settings.
 
  * post: Post object.
  * autosaveStatus: The Post's autosave status.
+ * lockedUser: The Post's locked user, or false if not locked.
 
 ### resetPost
 
@@ -1330,6 +1367,15 @@ Returns an action object used to remove a notice.
 
  * id: The notice id.
 
+### lockPost
+
+Returns an action object used to remove a modal.
+
+*Parameters*
+
+ * locked: Whether the editor should be locked.
+ * lockDetails: Details about the lock user and their avatar.
+
 ### fetchReusableBlocks
 
 Returns an action object used to fetch a single reusable block or all

edit-post/editor.js

@@ -4,13 +4,13 @@
 import { withSelect } from '@wordpress/data';
 import { EditorProvider, ErrorBoundary } from '@wordpress/editor';
 import { StrictMode } from '@wordpress/element';
-
+import PostLockedModal from '../packages/components/src/post-locked-modal';
 /**
  * Internal dependencies
  */
 import Layout from './components/layout';
 
-function Editor( { settings, hasFixedToolbar, post, overridePost, onError, ...props } ) {
+function Editor( { settings, hasFixedToolbar, post, isLocked, overridePost, onError, ...props } ) {
 	if ( ! post ) {
 		return null;
 	}
@@ -26,6 +26,7 @@ function Editor( { settings, hasFixedToolbar, post, overridePost, onError, ...pr
 				<ErrorBoundary onError={ onError }>
 					<Layout />
 				</ErrorBoundary>
+				{ isLocked && <PostLockedModal /> }
 			</EditorProvider>
 		</StrictMode>
 	);
@@ -34,4 +35,5 @@ function Editor( { settings, hasFixedToolbar, post, overridePost, onError, ...pr
 export default withSelect( ( select, { postId, postType } ) => ( {
 	hasFixedToolbar: select( 'core/edit-post' ).isFeatureActive( 'fixedToolbar' ),
 	post: select( 'core' ).getEntityRecord( 'postType', postType, postId ),
+	isLocked: select( 'core/editor' ).isPostLocked(),
 } ) )( Editor );

edit-post/index.js

@@ -4,6 +4,7 @@
 import { registerCoreBlocks } from '@wordpress/block-library';
 import { render, unmountComponentAtNode } from '@wordpress/element';
 import { dispatch } from '@wordpress/data';
+import { setupHearthbeatPostLocking } from '@wordpress/editor';
 
 /**
  * Internal dependencies
@@ -55,6 +56,9 @@ export function initializeEditor( id, postType, postId, settings, overridePost )
 
 	registerCoreBlocks();
 
+	// Set up heartbeat post locking.
+	setupHearthbeatPostLocking();
+
 	dispatch( 'core/nux' ).triggerGuide( [
 		'core/editor.inserter',
 		'core/editor.settings',

gutenberg.php

@@ -24,8 +24,15 @@
  * @since 0.1.0
  */
 function the_gutenberg_project() {
-	global $post_type_object;
-	?>
+	global $post_type_object, $post;
+
+	if ( ! wp_check_post_lock( $post->ID ) ) {
+		$active_post_lock = wp_set_post_lock( $post->ID );
+	}
+
+	if ( ! empty( $active_post_lock ) ) { ?>
+	<input type="hidden" id="active_post_lock" value="<?php echo esc_attr( implode( ':', $active_post_lock ) ); ?>" />
+	<?php } ?>
 	<div class="gutenberg">
 		<h1 class="screen-reader-text"><?php echo esc_html( $post_type_object->labels->edit_item ); ?></h1>
 		<div id="editor" class="gutenberg__editor"></div>
@@ -437,3 +444,15 @@ function toggleDropdown() {
 function gutenberg_add_admin_body_class( $classes ) {
 	return "$classes gutenberg-editor-page";
 }
+
+/**
+ * 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

@@ -1387,6 +1387,7 @@ function gutenberg_editor_scripts_and_styles( $hook ) {
 		'autosaveInterval'    => 10,
 		'maxUploadFileSize'   => $max_upload_size,
 		'allowedMimeTypes'    => get_allowed_mime_types(),
+		'ajaxurl'             => admin_url( 'admin-ajax.php' ),
 	);
 
 	$post_autosave = get_autosave_newer_than_post_save( $post );
@@ -1396,6 +1397,45 @@ function gutenberg_editor_scripts_and_styles( $hook ) {
 		);
 	}
 
+	// Check to see if the post is locked.
+	$user    = null;
+	$user_id = wp_check_post_lock( $post->ID );
+	if ( $user_id ) {
+		$user = get_userdata( $user_id );
+	}
+
+	if ( $user ) {
+
+		/**
+		 * 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    WP_User object on success, false otherwise.
+		 */
+		if ( apply_filters( 'show_post_locked_dialog', true, $post, $user ) ) {
+			$locked = true;
+		}
+
+		$avatar = get_avatar( $user->ID, 64 );
+		if ( $avatar ) {
+			if ( preg_match( "|src='([^']+)'|", $avatar, $matches ) ) {
+				$user->avatar_src = $matches[1];
+			}
+		}
+
+		$editor_settings['lockedUser'] = $locked ? $user : false;
+		$editor_settings['lockNonce']  = wp_create_nonce( 'lock-post_' . $post->ID );
+
+	} else {
+		$locked = false;
+	}
+	$editor_settings['locked'] = $locked;
+
 	if ( false !== $color_palette ) {
 		$editor_settings['colors'] = $color_palette;
 	}

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 (
@@ -18,7 +18,7 @@ const ModalHeader = ( { icon, title, onClose, closeLabel, headingId } ) => {
 			<div className="components-modal__header-heading-container">
 				{ icon &&
 					<span className="components-modal__icon-container" aria-hidden>
-						{ icon }
+						{ icon && <img alt={ __( 'User avatar' ) } src={ icon } /> }
 					</span>
 				}
 				{ title &&
@@ -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,