Improve autosaves

editor/components/autosave-monitor/index.js

@@ -11,18 +11,22 @@ import { Component } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { autosave } from '../../store/actions';
+import { doAutosave } from '../../store/actions';
 import {
 	isEditedPostDirty,
 	isEditedPostSaveable,
+	isPostAutosavable,
 } from '../../store/selectors';
 
 export class AutosaveMonitor extends Component {
 	componentDidUpdate( prevProps ) {
-		const { isDirty, isSaveable } = this.props;
-		if ( prevProps.isDirty !== isDirty ||
-				prevProps.isSaveable !== isSaveable ) {
-			this.toggleTimer( isDirty && isSaveable );
+		const { isDirty, isSaveable, isAutosavable } = this.props;
+		if (
+			prevProps.isDirty !== isDirty ||
+			prevProps.isSaveable !== isSaveable ||
+			prevProps.isAutosavable !== isAutosavable
+		) {
+			this.toggleTimer( isDirty && isSaveable && isAutosavable );
 		}
 	}
 
@@ -51,7 +55,8 @@ export default connect(
 		return {
 			isDirty: isEditedPostDirty( state ),
 			isSaveable: isEditedPostSaveable( state ),
+			isAutosavable: isPostAutosavable( state ),
 		};
 	},
-	{ autosave }
+	{ doAutosave }
 )( AutosaveMonitor );

editor/components/autosave-monitor/test/index.js

@@ -23,7 +23,7 @@ describe( 'AutosaveMonitor', () => {
 
 	describe( '#componentDidUpdate()', () => {
 		it( 'should start autosave timer when having become dirty and saveable', () => {
-			wrapper.setProps( { isDirty: true, isSaveable: true } );
+			wrapper.setProps( { isDirty: true, isSaveable: true, isAutosavable: true } );
 
 			expect( toggleTimer ).toHaveBeenCalledWith( true );
 		} );

editor/components/post-publish-button/index.js

@@ -23,6 +23,7 @@ import {
 	getEditedPostVisibility,
 	isEditedPostSaveable,
 	isEditedPostPublishable,
+	isAutosavingPost,
 	getCurrentPostType,
 } from '../../store/selectors';
 
@@ -34,6 +35,7 @@ export function PostPublishButton( {
 	visibility,
 	isPublishable,
 	isSaveable,
+	isAutosaving,
 	user,
 	onSubmit = noop,
 } ) {
@@ -52,7 +54,7 @@ export function PostPublishButton( {
 	}
 
 	const className = classnames( 'editor-post-publish-button', {
-		'is-saving': isSaving,
+		'is-saving': isSaving && ! isAutosaving,
 	} );
 
 	const onClick = () => {
@@ -81,6 +83,7 @@ const applyConnect = connect(
 		visibility: getEditedPostVisibility( state ),
 		isSaveable: isEditedPostSaveable( state ),
 		isPublishable: isEditedPostPublishable( state ),
+		isAutosaving: isAutosavingPost( state ),
 		postType: getCurrentPostType( state ),
 	} ),
 	{

editor/components/post-saved-state/index.js

@@ -23,20 +23,21 @@ import {
 	isEditedPostSaveable,
 	getCurrentPost,
 	getEditedPostAttribute,
+	isAutosavingPost,
 } from '../../store/selectors';
 
-export function PostSavedState( { isNew, isPublished, isDirty, isSaving, isSaveable, status, onStatusChange, onSave } ) {
+export function PostSavedState( { isNew, isPublished, isDirty, isSaving, isSaveable, status, onStatusChange, onSave, isAutosaving } ) {
 	const className = 'editor-post-saved-state';
 
 	if ( isSaving ) {
 		return (
 			<span className={ className }>
-				{ __( 'Saving' ) }
+				{ isAutosaving ? __( 'Autosaving' ) : __( 'Saving' ) }
 			</span>
 		);
 	}
 
-	if ( ! isSaveable || isPublished ) {
+	if ( ! isSaveable ) {
 		return null;
 	}
 
@@ -59,8 +60,8 @@ export function PostSavedState( { isNew, isPublished, isDirty, isSaving, isSavea
 
 	return (
 		<Button className={ classnames( className, 'button-link' ) } onClick={ onClick }>
-			<span className="editor-post-saved-state__mobile">{ __( 'Save' ) }</span>
-			<span className="editor-post-saved-state__desktop">{ __( 'Save Draft' ) }</span>
+			<span className="editor-post-saved-state__mobile">{ isPublished ? '' : __( 'Save' ) }</span>
+			<span className="editor-post-saved-state__desktop">{ isPublished ? '' : __( 'Save Draft' ) }</span>
 		</Button>
 	);
 }
@@ -74,6 +75,7 @@ export default connect(
 		isSaving: isSavingPost( state ),
 		isSaveable: isEditedPostSaveable( state ),
 		status: getEditedPostAttribute( state, 'status' ),
+		isAutosaving: isAutosavingPost( state ),
 	} ),
 	{
 		onStatusChange: ( status ) => editPost( { status } ),

editor/components/provider/index.js

@@ -19,7 +19,7 @@ import {
 /**
  * Internal Dependencies
  */
-import { setupEditor, undo } from '../../store/actions';
+import { setupEditor, undo, showAutosaveAlert } from '../../store/actions';
 import store from '../../store';
 
 /**
@@ -52,6 +52,10 @@ class EditorProvider extends Component {
 		// Assume that we don't need to initialize in the case of an error recovery.
 		if ( ! props.recovery ) {
 			this.store.dispatch( setupEditor( props.post, this.settings ) );
+
+			if ( props.autosave ) {
+				this.store.dispatch( showAutosaveAlert( props.autosave ) );
+			}
 		}
 	}
 

editor/index.js

@@ -78,14 +78,15 @@ export function recreateEditorInstance( target, settings ) {
  * @param  {String}  id       Unique identifier for editor instance
  * @param  {Object}  post     API entity for post to edit
  * @param  {?Object} settings Editor settings object
+ * @param  {?Object} autosave The autosave data
  * @return {Object}           Editor interface
  */
-export function createEditorInstance( id, post, settings ) {
+export function createEditorInstance( id, post, settings, autosave ) {
 	const target = document.getElementById( id );
 	const reboot = recreateEditorInstance.bind( null, target, settings );
 
 	render(
-		<EditorProvider settings={ settings } post={ post }>
+		<EditorProvider settings={ settings } post={ post } autosave={ autosave }>
 			<ErrorBoundary onError={ reboot }>
 				<Layout />
 			</ErrorBoundary>

editor/store/actions.js

@@ -220,9 +220,10 @@ export function editPost( edits ) {
 	};
 }
 
-export function savePost() {
+export function savePost( options ) {
 	return {
 		type: 'REQUEST_POST_UPDATE',
+		options,
 	};
 }
 
@@ -246,12 +247,26 @@ export function mergeBlocks( blockA, blockB ) {
  *
  * @return {Object} Action object
  */
-export function autosave() {
+export function doAutosave() {
 	return {
 		type: 'AUTOSAVE',
 	};
 }
 
+export function toggleAutosave( isAutosaving ) {
+	return {
+		type: 'DOING_AUTOSAVE',
+		isAutosaving,
+	};
+}
+
+export function showAutosaveAlert( autosave ) {
+	return {
+		type: 'REQUEST_AUTOSAVE_EXISTS',
+		autosave,
+	};
+}
+
 /**
  * Returns an action object used in signalling that undo history should
  * restore last popped state.

editor/store/effects.js

@@ -30,8 +30,10 @@ import {
 	replaceBlocks,
 	createSuccessNotice,
 	createErrorNotice,
+	createWarningNotice,
 	removeNotice,
 	savePost,
+	toggleAutosave,
 	editPost,
 	requestMetaBoxUpdates,
 	updateReusableBlock,
@@ -44,7 +46,8 @@ import {
 	getDirtyMetaBoxes,
 	getEditedPostContent,
 	getPostEdits,
-	isCurrentPostPublished,
+	getEditedPostTitle,
+	getEditedPostExcerpt,
 	isEditedPostDirty,
 	isEditedPostNew,
 	isEditedPostSaveable,
@@ -57,6 +60,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 SAVE_REUSABLE_BLOCK_NOTICE_ID = 'SAVE_REUSABLE_BLOCK_NOTICE_ID';
 
@@ -71,26 +75,65 @@ export default {
 			content: getEditedPostContent( state ),
 			id: post.id,
 		};
+		const isAutosave = action.options && action.options.autosave;
+		let Model, newModel;
 
-		dispatch( {
-			type: 'UPDATE_POST',
-			edits: toSend,
-			optimist: { type: BEGIN, id: POST_UPDATE_TRANSACTION_ID },
-		} );
-		dispatch( removeNotice( SAVE_POST_NOTICE_ID ) );
-		const Model = wp.api.getPostTypeModel( getCurrentPostType( state ) );
-		new Model( toSend ).save().done( ( newPost ) => {
-			dispatch( {
-				type: 'RESET_POST',
-				post: newPost,
-			} );
+		if ( isAutosave ) {
+			toSend.parent = post.id;
+			delete toSend.id;
+			Model = wp.api.getPostTypeAutosaveModel( getCurrentPostType( state ) );
+			newModel = new Model( toSend );
+		} else {
 			dispatch( {
-				type: 'REQUEST_POST_UPDATE_SUCCESS',
-				previousPost: post,
-				post: newPost,
-				optimist: { type: COMMIT, id: POST_UPDATE_TRANSACTION_ID },
+				type: 'UPDATE_POST',
+				edits: toSend,
+				optimist: { type: BEGIN, id: POST_UPDATE_TRANSACTION_ID },
 			} );
+			dispatch( removeNotice( SAVE_POST_NOTICE_ID ) );
+			dispatch( removeNotice( AUTOSAVE_POST_NOTICE_ID ) );
+			Model = wp.api.getPostTypeModel( getCurrentPostType( state ) );
+			newModel = new Model( toSend );
+		}
+
+		newModel.save().done( ( newPost ) => {
+			if ( isAutosave ) {
+				const autosave = {
+					id: newPost.id,
+					title: getEditedPostTitle( state ),
+					excerpt: getEditedPostExcerpt( state ),
+					content: getEditedPostContent( state ),
+				};
+				dispatch( {
+					type: 'RESET_AUTOSAVE',
+					post: autosave,
+				} );
+				dispatch( toggleAutosave( false ) );
+
+				dispatch( {
+					type: 'REQUEST_POST_UPDATE_SUCCESS',
+					previousPost: post,
+					post: post,
+					isAutosave: true,
+				} );
+			} else {
+				// dispatch post autosaved false
+				// delete the autosave
+				dispatch( {
+					type: 'RESET_POST',
+					post: newPost,
+				} );
+				dispatch( {
+					type: 'REQUEST_POST_UPDATE_SUCCESS',
+					previousPost: post,
+					post: newPost,
+					optimist: { type: COMMIT, id: POST_UPDATE_TRANSACTION_ID },
+				} );
+			}
 		} ).fail( ( err ) => {
+			if ( isAutosave ) {
+				dispatch( toggleAutosave( false ) );
+			}
+
 			dispatch( {
 				type: 'REQUEST_POST_UPDATE_FAILURE',
 				error: get( err, 'responseJSON', {
@@ -99,12 +142,28 @@ export default {
 				} ),
 				post,
 				edits,
-				optimist: { type: REVERT, id: POST_UPDATE_TRANSACTION_ID },
+				optimist: isAutosave ? false : { type: REVERT, id: POST_UPDATE_TRANSACTION_ID },
 			} );
 		} );
 	},
+	REQUEST_AUTOSAVE_EXISTS( action, store ) {
+		const { autosave } = action;
+		const { dispatch } = store;
+		if ( autosave ) {
+			dispatch( createWarningNotice(
+				<p>
+					<span>{ __( 'There is an autosave of this post that is more recent than the version below.' ) }</span>
+					{ ' ' }
+					{ <a href={ autosave.edit_link }>{ __( 'View the autosave' ) }</a> }
+				</p>,
+				{
+					id: AUTOSAVE_POST_NOTICE_ID,
+				}
+			) );
+		}
+	},
 	REQUEST_POST_UPDATE_SUCCESS( action, store ) {
-		const { previousPost, post } = action;
+		const { previousPost, post, isAutosave } = action;
 		const { dispatch, getState } = store;
 
 		const publishStatus = [ 'publish', 'private', 'future' ];
@@ -128,7 +187,7 @@ export default {
 				private: __( 'Post published privately!' ),
 				future: __( 'Post scheduled!' ),
 			}[ post.status ];
-		} else {
+		} else if ( ! isAutosave ) {
 			// Generic fallback notice
 			noticeMessage = __( 'Post updated!' );
 		}
@@ -263,25 +322,19 @@ export default {
 			return;
 		}
 
-		if ( ! isEditedPostNew( state ) && ! isEditedPostDirty( state ) ) {
+		// Change status from auto-draft to draft, saving the post.
+		if ( isEditedPostNew( state ) ) {
+			dispatch( editPost( { status: 'draft' } ) );
+			dispatch( savePost() );
 			return;
 		}
 
-		if ( isCurrentPostPublished( state ) ) {
-			// TODO: Publish autosave.
-			//  - Autosaves are created as revisions for published posts, but
-			//    the necessary REST API behavior does not yet exist
-			//  - May need to check for whether the status of the edited post
-			//    has changed from the saved copy (i.e. published -> pending)
+		if ( ! isEditedPostDirty( state ) ) {
 			return;
 		}
 
-		// Change status from auto-draft to draft
-		if ( isEditedPostNew( state ) ) {
-			dispatch( editPost( { status: 'draft' } ) );
-		}
-
-		dispatch( savePost() );
+		dispatch( toggleAutosave( true ) );
+		dispatch( savePost( { autosave: true } ) );
 	},
 	SETUP_EDITOR( action ) {
 		const { post, settings } = action;