Prevent autosave when the post is locked

packages/core-data/src/actions.js

@@ -57,6 +57,20 @@ export function receiveCurrentUser( currentUser ) {
 	};
 }
 
+/**
+ * Returns an action object used to lock the editor.
+ *
+ * @param {Object} currentUserSession Meta information about the login session for current user.
+ *
+ * @return {Object} Action object.
+ */
+export function __experimentalUpdateCurrentUserSession( currentUserSession ) {
+	return {
+		type: 'UPDATE_CURRENT_USER_SESSION',
+		currentUserSession,
+	};
+}
+
 /**
  * Returns an action object used in adding new entities.
  *

packages/core-data/src/reducer.js

@@ -92,6 +92,29 @@ export function currentUser( state = {}, action ) {
 	return state;
 }
 
+/**
+ * Reducer returning the login session for current user.
+ *
+ * The default state is { isActive: true }. We are just going to assume that by default the user session is active.
+ * If the block editor is already being loaded for user and if the data store is already being initialised for the user,
+ * it means user is already logged in.
+ * Eventually Heartbeat API can update this state if the auth cookie either expires or is deleted for the user.
+ *
+ * @param {Object} state  Current state for login session.
+ * @param {Object} action Dispatched action.
+ */
+export function currentUserSession( state = { isActive: true }, action ) {
+	switch ( action.type ) {
+		case 'UPDATE_CURRENT_USER_SESSION':
+			return {
+				...state,
+				...action.currentUserSession,
+			};
+	}
+
+	return state;
+}
+
 /**
  * Reducer managing taxonomies.
  *
@@ -629,6 +652,7 @@ export default combineReducers( {
 	currentTheme,
 	currentGlobalStylesId,
 	currentUser,
+	currentUserSession,
 	themeGlobalStyleVariations,
 	themeBaseGlobalStyles,
 	themeGlobalStyleRevisions,

packages/core-data/src/selectors.ts

@@ -36,6 +36,7 @@ export interface State {
 	currentGlobalStylesId: string;
 	currentTheme: string;
 	currentUser: ET.User< 'edit' >;
+	currentUserSession: { isActive: boolean };
 	embedPreviews: Record< string, { html: string } >;
 	entities: EntitiesState;
 	themeBaseGlobalStyles: Record< string, Object >;
@@ -185,6 +186,21 @@ export function getCurrentUser( state: State ): ET.User< 'edit' > {
 	return state.currentUser;
 }
 
+/**
+ *Returns a boolean flag for current user's active login session.
+ *
+ * By default this returns true, because we assume that by default the user session is active.
+ * If the block editor is already being loaded for user and if the data store is already being initialised for the user,
+ * it means user is already logged in.
+ *
+ * @param {Object} state Current state data.
+ *
+ * @return {boolean} Whether the current user has active login maintained or not.
+ */
+export function __experimentalIsCurrentUserSessionActive( state: State ) {
+	return state.currentUserSession?.isActive ?? true;
+}
+
 /**
  * Returns all the users returned by a query ID.
  *

packages/editor/src/components/post-locked-modal/index.js

@@ -10,7 +10,11 @@ import {
 } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { addQueryArgs } from '@wordpress/url';
-import { useEffect, createInterpolateElement } from '@wordpress/element';
+import {
+	useEffect,
+	useState,
+	createInterpolateElement,
+} from '@wordpress/element';
 import { addAction, removeAction } from '@wordpress/hooks';
 import { useInstanceId } from '@wordpress/compose';
 import { store as coreStore } from '@wordpress/core-data';
@@ -21,10 +25,14 @@ import { store as coreStore } from '@wordpress/core-data';
 import { store as editorStore } from '../../store';
 
 export default function PostLockedModal() {
+	const [ heartbeatTickTriggered, triggerHeartbeatTick ] = useState( false );
 	const instanceId = useInstanceId( PostLockedModal );
 	const hookName = 'core/editor/post-locked-modal-' + instanceId;
 	const { autosave, updatePostLock } = useDispatch( editorStore );
+	const { __experimentalUpdateCurrentUserSession: updateCurrentUserSession } =
+		useDispatch( coreStore );
 	const {
+		isDraft,
 		isLocked,
 		isTakeover,
 		user,
@@ -33,6 +41,7 @@ export default function PostLockedModal() {
 		activePostLock,
 		postType,
 		previewLink,
+		isCurrentUserSessionActive,
 	} = useSelect( ( select ) => {
 		const {
 			isPostLocked,
@@ -44,8 +53,12 @@ export default function PostLockedModal() {
 			getEditedPostPreviewLink,
 			getEditorSettings,
 		} = select( editorStore );
-		const { getPostType } = select( coreStore );
+		const { getPostType, __experimentalIsCurrentUserSessionActive } =
+			select( coreStore );
 		return {
+			isDraft: [ 'draft', 'auto-draft' ].includes(
+				getEditedPostAttribute( 'status' )
+			),
 			isLocked: isPostLocked(),
 			isTakeover: isPostLockTakeover(),
 			user: getPostLockUser(),
@@ -54,9 +67,61 @@ export default function PostLockedModal() {
 			activePostLock: getActivePostLock(),
 			postType: getPostType( getEditedPostAttribute( 'type' ) ),
 			previewLink: getEditedPostPreviewLink(),
+			isCurrentUserSessionActive:
+				__experimentalIsCurrentUserSessionActive(),
 		};
 	}, [] );
 
+	useEffect( () => {
+		const checkUserLoginHookName = `core/editor/check-user-login/post-locked-modal-${ instanceId }`;
+
+		/**
+		 * Binds to the Heartbeat Tick event and checks if the user is logged in or not.
+		 *
+		 * @param {Object} data Data received in the heartbeat request
+		 */
+		function checkUserLogin( data ) {
+			// Bail early, if the heartbeat has neither auth check data attribute nor nonce expiry attribute.
+			if (
+				! [ 'wp-auth-check', 'nonces_expired' ].some( ( attr ) =>
+					Object.prototype.hasOwnProperty.call( data, attr )
+				)
+			) {
+				return;
+			}
+
+			if ( ! data[ 'wp-auth-check' ] && isCurrentUserSessionActive ) {
+				// Update login state to false,
+				// if server does not respond with auth check
+				// and current login state is true.
+				updateCurrentUserSession( { isActive: false } );
+			} else if ( ! isCurrentUserSessionActive && data.nonces_expired ) {
+				// If current login state is false and nonce is renewed,
+				// trigger a heartbeat tick to check for latest post lock.
+				// Because first heartbeat will only renew the nonce.
+				// It will not return any errors if the post is already locked by other user or not.
+				if ( window.wp?.heartbeat?.connectNow ) {
+					triggerHeartbeatTick( true );
+					window.wp.heartbeat.connectNow();
+				}
+			} else if (
+				! isCurrentUserSessionActive &&
+				heartbeatTickTriggered &&
+				data[ 'wp-auth-check' ]
+			) {
+				// If current login state is false and server responds with auth check for previously triggered heartbeat,
+				// update login state to true.
+				updateCurrentUserSession( { isActive: true } );
+			}
+		}
+
+		addAction( 'heartbeat.tick', checkUserLoginHookName, checkUserLogin );
+
+		return () => {
+			removeAction( 'heartbeat.tick', checkUserLoginHookName );
+		};
+	}, [ heartbeatTickTriggered, isCurrentUserSessionActive ] );
+
 	useEffect( () => {
 		/**
 		 * Keep the lock refreshed.
@@ -90,7 +155,12 @@ export default function PostLockedModal() {
 			const received = data[ 'wp-refresh-post-lock' ];
 			if ( received.lock_error ) {
 				// Auto save and display the takeover modal.
-				autosave();
+				// Meanwhile, other user may have opened the post and started to make new changes.
+				// Post may have been published or may have been switched back to draft.
+				// In either case, we don't want to accidentally loose the changes made by other user.
+				// If we perform server side autosave, and the post is in draft, previous changes will be overwritten in the database.
+				// Hence, we will only perform local autosave.
+				autosave( { local: true } );
 				updatePostLock( {
 					isLocked: true,
 					isTakeover: true,
@@ -141,7 +211,7 @@ export default function PostLockedModal() {
 			removeAction( 'heartbeat.tick', hookName );
 			window.removeEventListener( 'beforeunload', releasePostLock );
 		};
-	}, [] );
+	}, [ isDraft, isLocked ] );
 
 	if ( ! isLocked ) {
 		return null;

packages/editor/src/components/post-preview-button/index.js

@@ -106,8 +106,8 @@ export default function PostPreviewButton( {
 	role,
 	onPreview,
 } ) {
-	const { postId, currentPostLink, previewLink, isSaveable, isViewable } =
-		useSelect( ( select ) => {
+	const { postId, currentPostLink, previewLink, isViewable } = useSelect(
+		( select ) => {
 			const editor = select( editorStore );
 			const core = select( coreStore );
 
@@ -119,10 +119,11 @@ export default function PostPreviewButton( {
 				postId: editor.getCurrentPostId(),
 				currentPostLink: editor.getCurrentPostAttribute( 'link' ),
 				previewLink: editor.getEditedPostPreviewLink(),
-				isSaveable: editor.isEditedPostSaveable(),
 				isViewable: postType?.viewable ?? false,
 			};
-		}, [] );
+		},
+		[]
+	);
 
 	const { __unstableSaveForPreview } = useDispatch( editorStore );
 
@@ -168,7 +169,6 @@ export default function PostPreviewButton( {
 			className={ className || 'editor-post-preview' }
 			href={ href }
 			target={ targetId }
-			disabled={ ! isSaveable }
 			onClick={ openPreviewWindow }
 			role={ role }
 		>

packages/editor/src/components/post-preview-button/test/index.js

@@ -139,22 +139,6 @@ describe( 'PostPreviewButton', () => {
 		).toBeInTheDocument();
 	} );
 
-	it( 'should be disabled if post is not saveable.', () => {
-		mockUseSelect( { isEditedPostSaveable: () => false } );
-
-		render( <PostPreviewButton /> );
-
-		expect( screen.getByRole( 'button' ) ).toBeDisabled();
-	} );
-
-	it( 'should not be disabled if post is saveable.', () => {
-		mockUseSelect( { isEditedPostSaveable: () => true } );
-
-		render( <PostPreviewButton /> );
-
-		expect( screen.getByRole( 'button' ) ).toBeEnabled();
-	} );
-
 	it( 'should set `href` to edited post preview link if specified.', () => {
 		const url = 'https://wordpress.org';
 		mockUseSelect( {

packages/editor/src/store/selectors.js

@@ -495,6 +495,10 @@ export function isEditedPostSaveable( state ) {
 		return false;
 	}
 
+	if ( isPostLocked( state ) ) {
+		return false;
+	}
+
 	// TODO: Post should not be saveable if not dirty. Cannot be added here at
 	// this time since posts where meta boxes are present can be saved even if
 	// the post is not dirty. Currently this restriction is imposed at UI, but
@@ -1031,7 +1035,7 @@ export function getPermalinkParts( state ) {
  * @return {boolean} Is locked.
  */
 export function isPostLocked( state ) {
-	return state.postLock.isLocked;
+	return state.postLock?.isLocked ?? false;
 }
 
 /**

packages/editor/src/store/test/selectors.js

@@ -1421,6 +1421,27 @@ describe( 'selectors', () => {
 
 			expect( isEditedPostSaveable( state ) ).toBe( true );
 		} );
+
+		it( 'should return false if the post is locked', () => {
+			const state = {
+				editor: {
+					present: {
+						blocks: {
+							value: [],
+						},
+						edits: {},
+					},
+				},
+				initialEdits: {},
+				currentPost: {},
+				saving: {},
+				postLock: {
+					isLocked: true,
+				},
+			};
+
+			expect( isEditedPostSaveable( state ) ).toBe( false );
+		} );
 	} );
 
 	describe( 'isEditedPostAutosaveable', () => {