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, isAutosaveable } = this.props;
+		if (
+			prevProps.isDirty !== isDirty ||
+			prevProps.isSaveable !== isSaveable ||
+			prevProps.isAutosaveable !== isAutosaveable
+		) {
+			this.toggleTimer( isDirty && isSaveable && isAutosaveable );
 		}
 	}
 
@@ -19,11 +22,11 @@ export class AutosaveMonitor extends Component {
 
 	toggleTimer( isPendingSave ) {
 		clearTimeout( this.pendingSave );
-
+		const { autosaveInterval } = this.props;
 		if ( isPendingSave ) {
 			this.pendingSave = setTimeout(
 				() => this.props.autosave(),
-				10000
+				autosaveInterval * 1000
 			);
 		}
 	}
@@ -35,13 +38,22 @@ export class AutosaveMonitor extends Component {
 
 export default compose( [
 	withSelect( ( select ) => {
-		const { isEditedPostDirty, isEditedPostSaveable } = select( 'core/editor' );
+		const {
+			isEditedPostDirty,
+			isEditedPostSaveable,
+			isPostAutosaveable,
+			getEditorSettings,
+		} = select( 'core/editor' );
+		const { autosaveInterval } = getEditorSettings();
 		return {
 			isDirty: isEditedPostDirty(),
 			isSaveable: isEditedPostSaveable(),
+			isAutosaveable: isPostAutosaveable(),
+			autosaveInterval: autosaveInterval,
 		};
 	} ),
+
 	withDispatch( ( dispatch ) => ( {
-		autosave: dispatch( 'core/editor' ).autosave,
+		autosave: dispatch( 'core/editor' ).doAutosave,
 	} ) ),
 ] )( AutosaveMonitor );

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

@@ -23,11 +23,17 @@ 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, isAutosaveable: true } );
 
 			expect( toggleTimer ).toHaveBeenCalledWith( true );
 		} );
 
+		it( 'should stop autosave timer when the autosave is up to date', () => {
+			wrapper.setProps( { isDirty: true, isSaveable: true, isAutosaveable: false } );
+
+			expect( toggleTimer ).toHaveBeenCalledWith( false );
+		} );
+
 		it( 'should stop autosave timer when having become dirty but not saveable', () => {
 			wrapper.setProps( { isDirty: true, isSaveable: false } );
 

editor/components/editor-global-keyboard-shortcuts/index.js

@@ -116,7 +116,7 @@ export default compose( [
 			redo,
 			undo,
 			removeBlocks,
-			autosave,
+			savePost,
 		} = dispatch( 'core/editor' );
 
 		return {
@@ -125,7 +125,7 @@ export default compose( [
 			onRedo: redo,
 			onUndo: undo,
 			onRemove: removeBlocks,
-			onSave: autosave,
+			onSave: savePost,
 		};
 	} ),
 ] )( EditorGlobalKeyboardShortcuts );

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

@@ -23,11 +23,12 @@ export function PostPublishButton( {
 	visibility,
 	isPublishable,
 	isSaveable,
+	isAutosaving,
 	hasPublishAction,
 	onSubmit = noop,
 	forceIsSaving,
 } ) {
-	const isButtonEnabled = ! isSaving && isPublishable && isSaveable;
+	const isButtonEnabled = ! isSaving && ! isAutosaving && isPublishable && isSaveable;
 
 	let publishStatus;
 	if ( ! hasPublishAction ) {
@@ -70,6 +71,7 @@ export default compose( [
 			isEditedPostPublishable,
 			getCurrentPost,
 			getCurrentPostType,
+			isAutosavingPost,
 		} = select( 'core/editor' );
 		return {
 			isSaving: forceIsSaving || isSavingPost(),
@@ -79,6 +81,7 @@ export default compose( [
 			isPublishable: forceIsDirty || isEditedPostPublishable(),
 			hasPublishAction: get( getCurrentPost(), [ '_links', 'wp:action-publish' ], false ),
 			postType: getCurrentPostType(),
+			isAutosaving: isAutosavingPost(),
 		};
 	} ),
 	withDispatch( ( dispatch ) => {

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

@@ -38,13 +38,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>
 			);
 		}
@@ -88,6 +88,7 @@ export default compose( [
 			isSavingPost,
 			isEditedPostSaveable,
 			getCurrentPost,
+			isAutosavingPost,
 		} = select( 'core/editor' );
 		return {
 			post: getCurrentPost(),
@@ -96,6 +97,7 @@ export default compose( [
 			isDirty: forceIsDirty || isEditedPostDirty(),
 			isSaving: forceIsSaving || isSavingPost(),
 			isSaveable: isEditedPostSaveable(),
+			isAutosaving: isAutosavingPost(),
 		};
 	} ),
 	withDispatch( ( dispatch ) => ( {

editor/store/actions.js

@@ -351,9 +351,18 @@ export function editPost( edits ) {
 	};
 }
 
-export function savePost() {
+/**
+ * Returns an action object to save the post.
+ *
+ * @param {Object}  options          Options for the save.
+ * @param {boolean} options.autosave Perform an autosave if true.
+ *
+ * @return {Object} Action object.
+ */
+export function savePost( options ) {
 	return {
 		type: 'REQUEST_POST_UPDATE',
+		options,
 	};
 }
 
@@ -391,7 +400,7 @@ export function mergeBlocks( blockAUid, blockBUid ) {
  *
  * @return {Object} Action object.
  */
-export function autosave() {
+export function doAutosave() {
 	return {
 		type: 'AUTOSAVE',
 	};

editor/store/effects.js

@@ -49,9 +49,7 @@ import {
 	getCurrentPostType,
 	getEditedPostContent,
 	getPostEdits,
-	isCurrentPostPublished,
 	isEditedPostDirty,
-	isEditedPostNew,
 	isEditedPostSaveable,
 	getBlock,
 	getBlockCount,
@@ -102,38 +100,56 @@ 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 ) {
+			toSend.parent = post.id;
+			wp.apiRequest( { path: `/wp/v2/${ basePath }/${ post.id }/autosaves`, method: 'POST', data: toSend } ).then(
+				( autosave ) => {
+					dispatch( {
+						type: 'RESET_AUTOSAVE',
+						post: autosave,
+					} );
+				},
+				() => {
+					dispatch( {
+						type: 'RESET_AUTOSAVE',
+						post: post,
+					} );
 				} );
-			}
-		);
+		} 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;
@@ -145,8 +161,9 @@ export default {
 
 		let noticeMessage;
 		let shouldShowLink = true;
+
 		if ( ! isPublished && ! willPublish ) {
-			// If saving a non published post, don't show any notice
+			// 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 +326,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, { getState } ) {
 		const { post } = action;

editor/store/reducer.js

@@ -584,6 +584,26 @@ export function isTyping( state = false, action ) {
 	return state;
 }
 
+/**
+ * Reducer returning autosave state. True if an autosave is currently occurring.
+ *
+ * @param  {boolean} state  Current state.
+ * @param  {Object}  action Dispatched action.
+ *
+ * @return {boolean} Updated state.
+ */
+export function isAutosaving( state = false, action ) {
+	switch ( action.type ) {
+		case 'REQUEST_POST_UPDATE':
+			const isAutosave = action.options && action.options.autosave;
+			return !! isAutosave;
+		case 'RESET_AUTOSAVE':
+			return false;
+	}
+
+	return state;
+}
+
 /**
  * Reducer returning the block selection's state.
  *
@@ -873,6 +893,7 @@ export function saving( state = {}, action ) {
 				error: null,
 			};
 
+		case 'RESET_AUTOSAVE':
 		case 'REQUEST_POST_UPDATE_SUCCESS':
 			return {
 				requesting: false,
@@ -1056,8 +1077,26 @@ export const blockListSettings = ( state = {}, action ) => {
 	return state;
 };
 
+/**
+ * Reducer returning the most recent autosave.
+ *
+ * @param  {Object} state  The autosave object.
+ * @param  {Object} action Dispatched action.
+ *
+ * @return {Object} Updated state.
+ */
+export const autosave = ( state = null, action ) => {
+	switch ( action.type ) {
+		case 'RESET_AUTOSAVE':
+			return action.post;
+	}
+
+	return state;
+};
+
 export default optimist( combineReducers( {
 	editor,
+	isAutosaving,
 	currentPost,
 	isTyping,
 	blockSelection,
@@ -1070,5 +1109,6 @@ export default optimist( combineReducers( {
 	notices,
 	sharedBlocks,
 	template,
+	autosave,
 	settings,
 } ) );