Improve autosaves

editor/components/autosave-monitor/index.js

@@ -15,14 +15,15 @@ import { autosave } 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 ( isDirty && isSaveable && isAutosavable ) {
+			this.toggleTimer( true );
 		}
 	}
 
@@ -51,6 +52,7 @@ export default connect(
 		return {
 			isDirty: isEditedPostDirty( state ),
 			isSaveable: isEditedPostSaveable( state ),
+			isAutosavable: isPostAutosavable( state ),
 		};
 	},
 	{ autosave }

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

@@ -23,6 +23,7 @@ import {
 	getEditedPostVisibility,
 	isEditedPostSaveable,
 	isEditedPostPublishable,
+	isAutosavingPost,
 	getCurrentPostType,
 } from '../../store/selectors';
 
@@ -52,7 +53,7 @@ export function PostPublishButton( {
 	}
 
 	const className = classnames( 'editor-post-publish-button', {
-		'is-saving': isSaving,
+		'is-saving': isSaving && ! isAutosavingPost,
 	} );
 
 	const onClick = () => {
@@ -81,6 +82,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, autosaveAlert } from '../../store/actions';
 import store from '../../store';
 
 /**
@@ -52,6 +52,12 @@ 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 ) );
+
+			// @todo only show the autosave alert when there exists an autosave newer than the post
+			// and if that autosave is different than the post (title, excerpt & content)
+			if ( props.autosave ) {
+				this.store.dispatch( autosaveAlert( props.autosave ) );
+			}
 		}
 	}
 

editor/index.js

@@ -80,12 +80,12 @@ export function recreateEditorInstance( target, settings ) {
  * @param  {?Object} settings Editor settings object
  * @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,
 	};
 }
 
@@ -252,6 +253,20 @@ export function autosave() {
 	};
 }
 
+export function isAutosaving( isAutosaving ) {
+	return {
+		type: 'DOING_AUTOSAVE',
+		isAutosaving,
+	}
+}
+
+export function autosaveAlert( 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,
+	isAutosaving,
 	editPost,
 	requestMetaBoxUpdates,
 	updateReusableBlock,
@@ -44,6 +46,8 @@ import {
 	getDirtyMetaBoxes,
 	getEditedPostContent,
 	getPostEdits,
+	getEditedPostTitle,
+	getEditedPostExcerpt,
 	isCurrentPostPublished,
 	isEditedPostDirty,
 	isEditedPostNew,
@@ -57,6 +61,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 +76,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( isAutosaving( 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( isAutosaving( false ) );
+			}
+
 			dispatch( {
 				type: 'REQUEST_POST_UPDATE_FAILURE',
 				error: get( err, 'responseJSON', {
@@ -99,12 +143,29 @@ 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, getState } = 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' ];
@@ -129,8 +190,10 @@ export default {
 				future: __( 'Post scheduled!' ),
 			}[ post.status ];
 		} else {
-			// Generic fallback notice
-			noticeMessage = __( 'Post updated!' );
+			if ( ! isAutosave ) {
+				// Generic fallback notice
+				noticeMessage = __( 'Post updated!' );
+			}
 		}
 
 		if ( noticeMessage ) {
@@ -263,25 +326,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( isAutosaving( true ) );
+		dispatch( savePost( { 'autosave': true } ) );
 	},
 	SETUP_EDITOR( action ) {
 		const { post, settings } = action;

editor/store/reducer.js

@@ -77,6 +77,15 @@ export const editor = flow( [
 	// resetting at each post save.
 	partialRight( withChangeDetection, { resetTypes: [ 'SETUP_EDITOR', 'RESET_POST' ] } ),
 ] )( {
+	autosave ( state = false, action ) {
+		const { post } = action;
+		switch ( action.type ) {
+			case 'RESET_AUTOSAVE':
+				return post;
+		}
+
+		return state;
+	},
 	edits( state = {}, action ) {
 		switch ( action.type ) {
 			case 'EDIT_POST':
@@ -473,6 +482,16 @@ export function blocksMode( state = {}, action ) {
 	return state;
 }
 
+export function isAutosaving( state = false, action ) {
+	switch ( action.type ) {
+		case 'DOING_AUTOSAVE':
+			const { isAutosaving } = action;
+			return isAutosaving;
+	}
+
+	return state;
+}
+
 /**
  * Reducer returning the block insertion point
  *
@@ -780,6 +799,7 @@ export const reusableBlocks = combineReducers( {
 
 export default optimist( combineReducers( {
 	editor,
+	isAutosaving,
 	currentPost,
 	isTyping,
 	blockSelection,