Show autosave message when autosave exists

editor/components/provider/index.js

@@ -28,6 +28,11 @@ class EditorProvider extends Component {
 			this.props.updateEditorSettings( props.settings );
 			this.props.setupEditor( props.post );
 		}
+
+		// Display a notice if an autosave exists.
+		if ( props.settings.autosave ) {
+			this.props.showAutosaveNotice( props.settings.autosave );
+		}
 	}
 
 	componentDidUpdate( prevProps ) {
@@ -106,12 +111,14 @@ export default withDispatch( ( dispatch ) => {
 		undo,
 		redo,
 		createUndoLevel,
+		showAutosaveNotice,
 	} = dispatch( 'core/editor' );
 	return {
 		setupEditor,
 		undo,
 		redo,
 		createUndoLevel,
+		showAutosaveNotice,
 		updateEditorSettings,
 	};
 } )( EditorProvider );

editor/store/actions.js

@@ -419,6 +419,19 @@ export function autosave() {
 	return savePost( { autosave: true } );
 }
 
+/**
+ * Returns an action to show the autosave notice.
+ *
+ * @param  {boolean} autosaveStatus Autosave status and data including a link to the autosave.
+ * @return {Object}                 Action object.
+ */
+export function showAutosaveNotice( autosaveStatus ) {
+	return {
+		type: 'REQUEST_AUTOSAVE_NOTICE',
+		autosaveStatus,
+	};
+}
+
 /**
  * Returns an action object used in signalling that undo history should
  * restore last popped state.

editor/store/effects.js

@@ -35,6 +35,7 @@ import {
 	replaceBlocks,
 	createSuccessNotice,
 	createErrorNotice,
+	createWarningNotice,
 	removeNotice,
 	saveSharedBlock,
 	insertBlock,
@@ -69,6 +70,7 @@ import {
  * Module Constants
  */
 const SAVE_POST_NOTICE_ID = 'SAVE_POST_NOTICE_ID';
+const AUTOSAVE_POST_NOTICE_ID = 'AUTOSAVE_POST_NOTICE_ID';
 const TRASH_POST_NOTICE_ID = 'TRASH_POST_NOTICE_ID';
 const SHARED_BLOCK_NOTICE_ID = 'SHARED_BLOCK_NOTICE_ID';
 
@@ -133,6 +135,7 @@ export default {
 			} );
 
 			dispatch( removeNotice( SAVE_POST_NOTICE_ID ) );
+			dispatch( removeNotice( AUTOSAVE_POST_NOTICE_ID ) );
 
 			request = wp.apiRequest( {
 				path: `/wp/v2/${ basePath }/${ post.id }`,
@@ -238,6 +241,25 @@ export default {
 			__( 'Updating failed' );
 		dispatch( createErrorNotice( noticeMessage, { id: SAVE_POST_NOTICE_ID } ) );
 	},
+	REQUEST_AUTOSAVE_NOTICE( action, store ) {
+		const { autosaveStatus } = action;
+		const { dispatch } = store;
+		if ( ! autosaveStatus ) {
+			return;
+		}
+		const noticeMessage = __( 'There is an autosave of this post that is more recent than the version below.' );
+		dispatch( createWarningNotice(
+			<p>
+				<span>{ noticeMessage }</span>
+				{ ' ' }
+				<a href={ autosaveStatus.editLink }>{ __( 'View the autosave' ) }</a>
+			</p>,
+			{
+				id: AUTOSAVE_POST_NOTICE_ID,
+				spokenMessage: noticeMessage,
+			}
+		) );
+	},
 	TRASH_POST( action, store ) {
 		const { dispatch, getState } = store;
 		const { postId } = action;

lib/client-assets.php

@@ -912,6 +912,35 @@ function gutenberg_capture_code_editor_settings( $settings ) {
 	return false;
 }
 
+/**
+ * Retrieve a stored autosave that is newer than the post save.
+ *
+ * Deletes autosaves that are older than the post save.
+ *
+ * @param  WP_Post $post Post object.
+ * @return WP_Post|boolean The post autosave. False if none found.
+ */
+function get_autosave_newer_than_post_save( $post ) {
+	// Add autosave data if it is newer and changed.
+	$autosave = wp_get_post_autosave( $post->ID );
+
+	if ( ! $autosave ) {
+		return false;
+	}
+
+	// Check if the autosave is newer than the current post.
+	if (
+		mysql2date( 'U', $autosave->post_modified_gmt, false ) > mysql2date( 'U', $post->post_modified_gmt, false )
+	) {
+		return $autosave;
+	}
+
+	// If the autosave isn't newer, remove it.
+	wp_delete_post_revision( $autosave->ID );
+
+	return false;
+}
+
 /**
  * Scripts & Styles.
  *
@@ -1084,6 +1113,13 @@ function gutenberg_editor_scripts_and_styles( $hook ) {
 		'autosaveInterval'    => 10,
 	);
 
+	$post_autosave = get_autosave_newer_than_post_save( $post );
+	if ( $post_autosave ) {
+		$editor_settings['autosave'] = array(
+			'editLink' => add_query_arg( 'gutenberg', true, get_edit_post_link( $post_autosave->ID ) ),
+		);
+	}
+
 	if ( ! empty( $color_palette ) ) {
 		$editor_settings['colors'] = $color_palette;
 	}