Merge pull request #1967 from WordPress/update/use-autodraft

Initialize new post with auto-draft

editor/effects.js

@@ -27,18 +27,14 @@ export default {
 		const { dispatch, getState } = store;
 		const state = getState();
 		const post = getCurrentPost( state );
-		const isNew = ! post.id;
 		const edits = getPostEdits( state );
 		const toSend = {
 			...edits,
 			content: serialize( getBlocks( state ) ),
+			id: post.id,
 		};
 		const transactionId = uniqueId();
 
-		if ( ! isNew ) {
-			toSend.id = post.id;
-		}
-
 		dispatch( {
 			type: 'CLEAR_POST_EDITS',
 			optimist: { type: BEGIN, id: transactionId },
@@ -58,7 +54,6 @@ export default {
 				type: 'REQUEST_POST_UPDATE_SUCCESS',
 				previousPost: post,
 				post: newPost,
-				isNew,
 				optimist: { type: COMMIT, id: transactionId },
 			} );
 		} ).fail( ( err ) => {
@@ -75,7 +70,7 @@ export default {
 		} );
 	},
 	REQUEST_POST_UPDATE_SUCCESS( action, store ) {
-		const { previousPost, post, isNew } = action;
+		const { previousPost, post } = action;
 		const { dispatch } = store;
 
 		const publishStatus = [ 'publish', 'private', 'future' ];
@@ -102,13 +97,15 @@ export default {
 			) );
 		}
 
-		if ( ! isNew ) {
-			return;
+		if ( get( window.history.state, 'id' ) !== post.id ) {
+			window.history.replaceState(
+				{ id: post.id },
+				'Post ' + post.id,
+				getGutenbergURL( {
+					post_id: post.id,
+				} )
+			);
 		}
-		const newURL = getGutenbergURL( {
-			post_id: post.id,
-		} );
-		window.history.replaceState( {}, 'Post ' + post.id, newURL );
 	},
 	REQUEST_POST_UPDATE_FAILURE( action, store ) {
 		const { post, edits } = action;

editor/header/saved-state/index.js

@@ -49,7 +49,10 @@ export function SavedState( { isNew, isDirty, isSaving, isSaveable, status, onSt
 	}
 
 	const onClick = () => {
-		onStatusChange( status || 'draft' );
+		if ( 'auto-draft' === status ) {
+			onStatusChange( 'draft' );
+		}
+
 		onSave();
 	};
 

editor/header/saved-state/test/index.js

@@ -46,6 +46,27 @@ describe( 'SavedState', () => {
 		expect( wrapper.childAt( 1 ).text() ).toBe( 'Saved' );
 	} );
 
+	it( 'should edit auto-draft post to draft before save', () => {
+		const statusSpy = jest.fn();
+		const saveSpy = jest.fn();
+		const wrapper = shallow(
+			<SavedState
+				isNew={ false }
+				isDirty={ true }
+				isSaving={ false }
+				isSaveable={ true }
+				onStatusChange={ statusSpy }
+				onSave={ saveSpy }
+				status="auto-draft" />
+		);
+
+		expect( wrapper.name() ).toBe( 'Button' );
+		expect( wrapper.childAt( 0 ).text() ).toBe( 'Save' );
+		wrapper.simulate( 'click' );
+		expect( statusSpy ).toHaveBeenCalledWith( 'draft' );
+		expect( saveSpy ).toHaveBeenCalled();
+	} );
+
 	it( 'should return Save button if edits to be saved', () => {
 		const statusSpy = jest.fn();
 		const saveSpy = jest.fn();
@@ -62,7 +83,7 @@ describe( 'SavedState', () => {
 		expect( wrapper.name() ).toBe( 'Button' );
 		expect( wrapper.childAt( 0 ).text() ).toBe( 'Save' );
 		wrapper.simulate( 'click' );
-		expect( statusSpy ).toHaveBeenCalledWith( 'draft' );
+		expect( statusSpy ).not.toHaveBeenCalled();
 		expect( saveSpy ).toHaveBeenCalled();
 	} );
 } );

editor/index.js

@@ -3,7 +3,6 @@
  */
 import { Provider as ReduxProvider } from 'react-redux';
 import { Provider as SlotFillProvider } from 'react-slot-fill';
-import { omit } from 'lodash';
 import moment from 'moment-timezone';
 import 'moment-timezone/moment-timezone-utils';
 
@@ -44,28 +43,26 @@ if ( settings.timezone.string ) {
  * @param {Object}     post  Bootstrapped post object
  */
 function preparePostState( store, post ) {
+	// Set current post into state
 	store.dispatch( {
 		type: 'RESET_POST',
 		post,
 	} );
 
-	if ( post.content ) {
+	// Parse content as blocks
+	if ( post.content.raw ) {
 		store.dispatch( {
 			type: 'RESET_BLOCKS',
 			blocks: parse( post.content.raw ),
 		} );
 	}
 
-	if ( ! post.id ) {
-		// Each property that is set in `post-content.js` (other than `content`
-		// because it is serialized when a save is requested) needs to be
-		// registered as an edit now.  Otherwise the initial values of these
-		// properties will not be properly saved with the post.
+	// Include auto draft title in edits while not flagging post as dirty
+	if ( post.status === 'auto-draft' ) {
 		store.dispatch( {
 			type: 'SETUP_NEW_POST',
 			edits: {
-				title: post.title ? post.title.raw : undefined,
-				...omit( post, 'title', 'content', 'type' ),
+				title: post.title.raw,
 			},
 		} );
 	}

editor/post-permalink/index.js

@@ -14,7 +14,7 @@ import { Dashicon, ClipboardButton, Button } from 'components';
  * Internal Dependencies
  */
 import './style.scss';
-import { getEditedPostAttribute } from '../selectors';
+import { isEditedPostNew, getEditedPostAttribute } from '../selectors';
 
 class PostPermalink extends Component {
 	constructor() {
@@ -43,8 +43,8 @@ class PostPermalink extends Component {
 	}
 
 	render() {
-		const { link } = this.props;
-		if ( ! link ) {
+		const { isNew, link } = this.props;
+		if ( isNew || ! link ) {
 			return null;
 		}
 
@@ -66,6 +66,7 @@ class PostPermalink extends Component {
 export default connect(
 	( state ) => {
 		return {
+			isNew: isEditedPostNew( state ),
 			link: getEditedPostAttribute( state, 'link' ),
 		};
 	}

editor/selectors.js

@@ -79,7 +79,7 @@ export function hasEditorRedo( state ) {
  * @return {Boolean}       Whether the post is new
  */
 export function isEditedPostNew( state ) {
-	return ! getCurrentPostId( state );
+	return getEditedPostAttribute( state, 'status' ) === 'auto-draft';
 }
 
 /**

editor/sidebar/last-revision/index.js

@@ -15,7 +15,12 @@ import PanelBody from 'components/panel/body';
  * Internal dependencies
  */
 import './style.scss';
-import { getCurrentPostId, getCurrentPostType, isSavingPost } from '../../selectors';
+import {
+	isEditedPostNew,
+	getCurrentPostId,
+	getCurrentPostType,
+	isSavingPost,
+} from '../../selectors';
 import { getWPAdminURL } from '../../utils/url';
 
 class LastRevision extends Component {
@@ -51,19 +56,19 @@ class LastRevision extends Component {
 	}
 
 	fetchRevisions() {
-		if ( ! this.props.postId ) {
+		const { isNew, postId, postType } = this.props;
+		if ( isNew || ! postId ) {
 			this.setState( { loading: false } );
 			return;
 		}
 		this.setState( { loading: true } );
-		const postIdToLoad = this.props.postId;
-		const Collection = wp.api.getPostTypeRevisionsCollection( this.props.postType );
+		const Collection = wp.api.getPostTypeRevisionsCollection( postType );
 		if ( ! Collection ) {
 			return;
 		}
-		this.fetchRevisionsRequest = new Collection( {}, { parent: postIdToLoad } ).fetch()
+		this.fetchRevisionsRequest = new Collection( {}, { parent: postId } ).fetch()
 			.done( ( revisions ) => {
-				if ( this.props.postId !== postIdToLoad ) {
+				if ( this.props.postId !== postId ) {
 					return;
 				}
 				this.setState( {
@@ -72,7 +77,7 @@ class LastRevision extends Component {
 				} );
 			} )
 			.fail( () => {
-				if ( this.props.postId !== postIdToLoad ) {
+				if ( this.props.postId !== postId ) {
 					return;
 				}
 				this.setState( {
@@ -112,6 +117,7 @@ class LastRevision extends Component {
 export default connect(
 	( state ) => {
 		return {
+			isNew: isEditedPostNew( state ),
 			postId: getCurrentPostId( state ),
 			postType: getCurrentPostType( state ),
 			isSaving: isSavingPost( state ),

editor/sidebar/post-trash/index.js

@@ -13,11 +13,15 @@ import { Button, Dashicon } from 'components';
  * Internal dependencies
  */
 import './style.scss';
-import { getCurrentPostId, getCurrentPostType } from '../../selectors';
+import {
+	isEditedPostNew,
+	getCurrentPostId,
+	getCurrentPostType,
+} from '../../selectors';
 import { trashPost } from '../../actions';
 
-function PostTrash( { postId, postType, ...props } ) {
-	if ( ! postId ) {
+function PostTrash( { isNew, postId, postType, ...props } ) {
+	if ( isNew || ! postId ) {
 		return null;
 	}
 
@@ -34,6 +38,7 @@ function PostTrash( { postId, postType, ...props } ) {
 export default connect(
 	( state ) => {
 		return {
+			isNew: isEditedPostNew( state ),
 			postId: getCurrentPostId( state ),
 			postType: getCurrentPostType( state ),
 		};

editor/test/selectors.js

@@ -148,16 +148,24 @@ describe( 'selectors', () => {
 	describe( 'isEditedPostNew', () => {
 		it( 'should return true when the post is new', () => {
 			const state = {
-				currentPost: {},
+				currentPost: {
+					status: 'auto-draft',
+				},
+				editor: {
+					edits: {},
+				},
 			};
 
 			expect( isEditedPostNew( state ) ).toBe( true );
 		} );
 
-		it( 'should return false when the post has an ID', () => {
+		it( 'should return false when the post is not new', () => {
 			const state = {
 				currentPost: {
-					id: 1,
+					status: 'draft',
+				},
+				editor: {
+					edits: {},
 				},
 			};
 
@@ -193,8 +201,12 @@ describe( 'selectors', () => {
 			const state = {
 				editor: {
 					dirty: false,
+					edits: {},
+				},
+				currentPost: {
+					id: 1,
+					status: 'auto-draft',
 				},
-				currentPost: {},
 			};
 
 			expect( isCleanNewPost( state ) ).toBe( true );
@@ -204,8 +216,12 @@ describe( 'selectors', () => {
 			const state = {
 				editor: {
 					dirty: false,
+					edits: {},
+				},
+				currentPost: {
+					id: 1,
+					status: 'draft',
 				},
-				currentPost: { id: 1 },
 			};
 
 			expect( isCleanNewPost( state ) ).toBe( false );
@@ -215,7 +231,11 @@ describe( 'selectors', () => {
 			const state = {
 				editor: {
 					dirty: true,
-					currentPost: {},
+					edits: {},
+				},
+				currentPost: {
+					id: 1,
+					status: 'auto-draft',
 				},
 			};
 
@@ -337,6 +357,8 @@ describe( 'selectors', () => {
 		it( 'should return new post title when new post is clean', () => {
 			const state = {
 				currentPost: {
+					id: 1,
+					status: 'auto-draft',
 					title: { raw: '' },
 				},
 				editor: {
@@ -351,6 +373,8 @@ describe( 'selectors', () => {
 		it( 'should return untitled title when new post is dirty', () => {
 			const state = {
 				currentPost: {
+					id: 1,
+					status: 'auto-draft',
 					title: { raw: '' },
 				},
 				editor: {
@@ -366,6 +390,7 @@ describe( 'selectors', () => {
 			const state = {
 				currentPost: {
 					id: 123,
+					status: 'draft',
 					title: { raw: '' },
 				},
 				editor: {