Introduce a dedicated autosaves endpoint for handling autosave behavior

editor/components/autosave-monitor/index.js

@@ -6,10 +6,13 @@ import { withSelect, withDispatch } from '@wordpress/data';
 
 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 );
 		}
 	}
 
@@ -35,13 +38,15 @@ export class AutosaveMonitor extends Component {
 
 export default compose( [
 	withSelect( ( select ) => {
-		const { isEditedPostDirty, isEditedPostSaveable } = select( 'core/editor' );
+		const { isEditedPostDirty, isEditedPostSaveable, isPostAutosavable } = select( 'core/editor' );
 		return {
 			isDirty: isEditedPostDirty(),
 			isSaveable: isEditedPostSaveable(),
+			isAutosavable: isPostAutosavable(),
 		};
 	} ),
+
 	withDispatch( ( dispatch ) => ( {
-		autosave: dispatch( 'core/editor' ).autosave,
+		autosave: dispatch( 'core/editor' ).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

@@ -25,6 +25,7 @@ export function PostPublishButton( {
 	visibility,
 	isPublishable,
 	isSaveable,
+	isAutosaving,
 	user,
 	onSubmit = noop,
 	forceIsSaving,
@@ -44,7 +45,7 @@ export function PostPublishButton( {
 	}
 
 	const className = classnames( 'editor-post-publish-button', {
-		'is-saving': isSaving,
+		'is-saving': isSaving && ! isAutosaving,
 	} );
 
 	const onClick = () => {

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

@@ -35,13 +35,13 @@ export class PostSavedState extends Component {
 	}
 
 	render() {
-		const { isNew, isPublished, isDirty, isSaving, isSaveable, onSave } = this.props;
+		const { isNew, isPublished, isDirty, isSaving, isSaveable, onSave, isAutosaving } = this.props;
 		const { forceSavedMessage } = this.state;
 		if ( isSaving ) {
 			return (
 				<span className="editor-post-saved-state is-saving">
 					<Dashicon icon="cloud" />
-					{ __( 'Saving' ) }
+					{ isAutosaving ? __( 'Autosaving' ) : __( 'Saving' ) }
 				</span>
 			);
 		}
@@ -84,6 +84,7 @@ export default compose( [
 			isSavingPost,
 			isEditedPostSaveable,
 			getCurrentPost,
+			isAutosavingPost,
 		} = select( 'core/editor' );
 		return {
 			post: getCurrentPost(),
@@ -92,6 +93,7 @@ export default compose( [
 			isDirty: forceIsDirty || isEditedPostDirty(),
 			isSaving: forceIsSaving || isSavingPost(),
 			isSaveable: isEditedPostSaveable(),
+			isAutosaving: isAutosavingPost(),
 		};
 	} ),
 	withDispatch( ( dispatch ) => ( {

editor/store/actions.js

@@ -353,9 +353,17 @@ export function editPost( edits ) {
 	};
 }
 
-export function savePost() {
+/**
+ * Returns an action object to save the post.
+ *
+ * @param {Object} options Set autosave: true for an autosave.
+ *
+ * @return {Object} Action object.
+ */
+export function savePost( options ) {
 	return {
 		type: 'REQUEST_POST_UPDATE',
+		options,
 	};
 }
 
@@ -393,12 +401,19 @@ export function mergeBlocks( blockAUid, blockBUid ) {
  *
  * @return {Object} Action object.
  */
-export function autosave() {
+export function doAutosave() {
 	return {
 		type: 'AUTOSAVE',
 	};
 }
 
+export function toggleAutosave( isAutosaving ) {
+	return {
+		type: 'DOING_AUTOSAVE',
+		isAutosaving,
+	};
+}
+
 /**
  * Returns an action object used in signalling that undo history should
  * restore last popped state.

editor/store/effects.js

@@ -43,15 +43,14 @@ import {
 	removeBlock,
 	resetBlocks,
 	setTemplateValidity,
+	toggleAutosave,
 } from './actions';
 import {
 	getCurrentPost,
 	getCurrentPostType,
 	getEditedPostContent,
 	getPostEdits,
-	isCurrentPostPublished,
 	isEditedPostDirty,
-	isEditedPostNew,
 	isEditedPostSaveable,
 	getBlock,
 	getBlockCount,
@@ -102,41 +101,66 @@ export default {
 			content: getEditedPostContent( state ),
 			id: post.id,
 		};
-
-		dispatch( {
-			type: 'UPDATE_POST',
-			edits: toSend,
-			optimist: { type: BEGIN, id: POST_UPDATE_TRANSACTION_ID },
-		} );
-		dispatch( removeNotice( SAVE_POST_NOTICE_ID ) );
 		const basePath = wp.api.getPostTypeRoute( getCurrentPostType( state ) );
-		wp.apiRequest( { path: `/wp/v2/${ basePath }/${ post.id }`, method: 'PUT', data: toSend } ).then(
-			( newPost ) => {
-				dispatch( resetPost( newPost ) );
-				dispatch( {
-					type: 'REQUEST_POST_UPDATE_SUCCESS',
-					previousPost: post,
-					post: newPost,
-					edits: toSend,
-					optimist: { type: COMMIT, id: POST_UPDATE_TRANSACTION_ID },
-				} );
-			},
-			( err ) => {
-				dispatch( {
-					type: 'REQUEST_POST_UPDATE_FAILURE',
-					error: get( err, 'responseJSON', {
-						code: 'unknown_error',
-						message: __( 'An unknown error occurred.' ),
-					} ),
-					post,
-					edits,
-					optimist: { type: REVERT, id: POST_UPDATE_TRANSACTION_ID },
+		const isAutosave = action.options && action.options.autosave;
+
+		if ( isAutosave ) {
+			dispatch( toggleAutosave( true ) );
+			toSend.parent = post.id;
+			wp.apiRequest( { path: `/wp/v2/${ basePath }/${ post.id }/autosaves`, method: 'POST', data: toSend } ).then(
+				( autosave ) => {
+					dispatch( toggleAutosave( false ) );
+
+					dispatch( {
+						type: 'RESET_AUTOSAVE',
+						post: autosave,
+					} );
+
+					dispatch( {
+						type: 'REQUEST_POST_UPDATE_SUCCESS',
+						previousPost: post,
+						post: post,
+						isAutosave: true,
+					} );
+				},
+				() => {
+					dispatch( toggleAutosave( false ) );
 				} );
-			}
-		);
+		} else {
+			dispatch( {
+				type: 'UPDATE_POST',
+				edits: toSend,
+				optimist: { type: BEGIN, id: POST_UPDATE_TRANSACTION_ID },
+			} );
+			dispatch( removeNotice( SAVE_POST_NOTICE_ID ) );
+			wp.apiRequest( { path: `/wp/v2/${ basePath }/${ post.id }`, method: 'PUT', data: toSend } ).then(
+				( newPost ) => {
+					dispatch( resetPost( newPost ) );
+					dispatch( {
+						type: 'REQUEST_POST_UPDATE_SUCCESS',
+						previousPost: post,
+						post: newPost,
+						edits: toSend,
+						optimist: { type: COMMIT, id: POST_UPDATE_TRANSACTION_ID },
+					} );
+				},
+				( err ) => {
+					dispatch( {
+						type: 'REQUEST_POST_UPDATE_FAILURE',
+						error: get( err, 'responseJSON', {
+							code: 'unknown_error',
+							message: __( 'An unknown error occurred.' ),
+						} ),
+						post,
+						edits,
+						optimist: { type: REVERT, id: POST_UPDATE_TRANSACTION_ID },
+					} );
+				}
+			);
+		}
 	},
 	REQUEST_POST_UPDATE_SUCCESS( action, store ) {
-		const { previousPost, post } = action;
+		const { previousPost, post, isAutosave } = action;
 		const { dispatch } = store;
 
 		const publishStatus = [ 'publish', 'private', 'future' ];
@@ -145,8 +169,9 @@ export default {
 
 		let noticeMessage;
 		let shouldShowLink = true;
-		if ( ! isPublished && ! willPublish ) {
-			// If saving a non published post, don't show any notice
+
+		if ( isAutosave || ( ! isPublished && ! willPublish ) ) {
+			// If autosaving, or saving a non published post, don't show any notice
 			noticeMessage = null;
 		} else if ( isPublished && ! willPublish ) {
 			// If undoing publish status, show specific notice
@@ -309,20 +334,11 @@ export default {
 			return;
 		}
 
-		if ( ! isEditedPostNew( state ) && ! isEditedPostDirty( state ) ) {
-			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;
 		}
 
-		dispatch( savePost() );
+		dispatch( savePost( { autosave: true } ) );
 	},
 	SETUP_EDITOR( action ) {
 		const { post, settings } = action;

editor/store/reducer.js

@@ -228,6 +228,15 @@ export const editor = flow( [
 		ignoreTypes: [ 'RECEIVE_BLOCKS' ],
 	} ),
 ] )( {
+	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':
@@ -584,6 +593,16 @@ export function isTyping( state = false, action ) {
 	return state;
 }
 
+export function currentlyAutosaving( state = false, action ) {
+	switch ( action.type ) {
+		case 'DOING_AUTOSAVE':
+			const { isAutosaving } = action;
+			return isAutosaving;
+	}
+
+	return state;
+}
+
 /**
  * Reducer returning the block selection's state.
  *
@@ -1008,6 +1027,7 @@ export const sharedBlocks = combineReducers( {
 
 export default optimist( combineReducers( {
 	editor,
+	currentlyAutosaving,
 	currentPost,
 	isTyping,
 	blockSelection,

editor/store/selectors.js

@@ -299,6 +299,44 @@ export function isEditedPostEmpty( state ) {
 	);
 }
 
+/**
+ * Returns true if the post can be autosaved, or false otherwise.
+ *
+ * @param  {Object}  state Global application state
+ * @return {boolean}       Whether the post can be autosaved
+ */
+export function isPostAutosavable( state ) {
+	// If the post is autosaving, it is not autosavable.
+	if ( state.currentlyAutosaving ) {
+		return false;
+	}
+
+	// If we don't already have an autosave, the post is autosavable.
+	if ( ! hasAutosave( state ) ) {
+		return true;
+	}
+
+	const title = getEditedPostAttribute( state, 'title' );
+	const excerpt = getEditedPostExcerpt( state );
+	const content = getEditedPostContent( state );
+	const autosave = state.editor.present.autosave;
+
+	// If the title, excerpt or content has changed, the post is autosavable.
+	if (
+		( autosave.title && title !== autosave.title.raw ) ||
+		( autosave.excerpt && excerpt !== autosave.excerpt.raw ) ||
+		( autosave.content && content !== autosave.content.raw )
+	) {
+		return true;
+	}
+
+	return false;
+}
+
+export function hasAutosave( state ) {
+	return !! state.editor.present.autosave;
+}
+
 /**
  * Return true if the post being edited is being scheduled. Preferring the
  * unsaved status values.
@@ -1107,6 +1145,16 @@ export function didPostSaveRequestFail( state ) {
 	return !! state.saving.error;
 }
 
+/**
+ * Is the post autosaving?
+ *
+ * @param  {Object}  state Global application state
+ * @return {boolean}       Whether the post is autosaving
+ */
+export function isAutosavingPost( state ) {
+	return !! state.currentlyAutosaving;
+}
+
 /**
  * Returns a suggested post format for the current post, inferred only if there
  * is a single block within the post and it is of a type known to match a