Fix a few issues with saving post titles, dirty handling, etc.

editor/header/saved-state/index.js

@@ -13,18 +13,28 @@ import Dashicon from 'components/dashicon';
  * Internal dependencies
  */
 import './style.scss';
-import { isEditedPostDirty } from '../../selectors';
+import { isEditedPostNew, isEditedPostDirty } from '../../selectors';
 
-function SavedState( { isDirty } ) {
+function SavedState( { isNew, isDirty } ) {
 	const classes = classNames( 'editor-saved-state', {
+		'is-new': isNew,
 		'is-dirty': isDirty,
 	} );
-	const icon = isDirty
-		? 'warning'
-		: 'saved';
-	const text = isDirty
-		? wp.i18n.__( 'Unsaved changes' )
-		: wp.i18n.__( 'Saved' );
+
+	let icon, text;
+	if ( isNew && isDirty ) {
+		icon = 'warning';
+		text = wp.i18n.__( 'New post with changes' );
+	} else if ( isNew ) {
+		icon = 'edit';
+		text = wp.i18n.__( 'New post' );
+	} else if ( isDirty ) {
+		icon = 'warning';
+		text = wp.i18n.__( 'Unsaved changes' );
+	} else {
+		icon = 'saved';
+		text = wp.i18n.__( 'Saved' );
+	}
 
 	return (
 		<div className={ classes }>
@@ -36,6 +46,7 @@ function SavedState( { isDirty } ) {
 
 export default connect(
 	( state ) => ( {
+		isNew: isEditedPostNew( state ),
 		isDirty: isEditedPostDirty( state ),
 	} )
 )( SavedState );

editor/header/tools/publish-button.js

@@ -32,12 +32,11 @@ function PublishButton( {
 	isRequesting,
 	isError,
 	requestIsNewPost,
-	onUpdate,
-	onSaveDraft,
+	onSave,
 } ) {
 	const buttonEnabled = ! isRequesting;
-	let buttonText, saveCallback;
 
+	let buttonText;
 	if ( isRequesting ) {
 		buttonText = requestIsNewPost
 			? wp.i18n.__( 'Saving…' )
@@ -56,12 +55,6 @@ function PublishButton( {
 		buttonText = wp.i18n.__( 'Save draft' );
 	}
 
-	if ( post && post.id ) {
-		saveCallback = onUpdate;
-	} else {
-		saveCallback = onSaveDraft;
-	}
-
 	const buttonDisabledHint = process.env.NODE_ENV === 'production'
 		? wp.i18n.__( 'The Save button is disabled during early alpha releases.' )
 		: null;
@@ -70,7 +63,7 @@ function PublishButton( {
 		<Button
 			isPrimary
 			isLarge
-			onClick={ () => saveCallback( post, edits, blocks ) }
+			onClick={ () => onSave( post, edits, blocks ) }
 			disabled={ ! buttonEnabled || process.env.NODE_ENV === 'production' }
 			title={ buttonDisabledHint }
 		>
@@ -91,19 +84,11 @@ export default connect(
 		requestIsNewPost: isSavingNewPost( state ),
 	} ),
 	( dispatch ) => ( {
-		onUpdate( post, edits, blocks ) {
+		onSave( post, edits, blocks ) {
 			savePost( dispatch, post.id, {
 				content: wp.blocks.serialize( blocks ),
 				...edits,
 			} );
 		},
-
-		onSaveDraft( post, edits, blocks ) {
-			savePost( dispatch, null /* is a new post */, {
-				content: wp.blocks.serialize( blocks ),
-				status: 'draft', // TODO change this after status controls
-				...edits,
-			} );
-		},
 	} )
 )( PublishButton );

editor/index.js

@@ -3,6 +3,7 @@
  */
 import { Provider as ReduxProvider } from 'react-redux';
 import { Provider as SlotFillProvider } from 'react-slot-fill';
+import { omit } from 'lodash';
 
 /**
  * Internal dependencies
@@ -25,6 +26,20 @@ export function createEditorInstance( id, post ) {
 		blocks: wp.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.
+		store.dispatch( {
+			type: 'SETUP_NEW_POST',
+			edits: {
+				title: post.title.raw,
+				...omit( post, 'title', 'content' ),
+			},
+		} );
+	}
+
 	wp.element.render(
 		<ReduxProvider store={ store }>
 			<SlotFillProvider>

editor/selectors.js

@@ -24,6 +24,10 @@ export function hasEditorRedo( state ) {
 	return state.editor.history.future.length > 0;
 }
 
+export function isEditedPostNew( state ) {
+	return ! state.currentPost.id;
+}
+
 export function isEditedPostDirty( state ) {
 	return state.editor.dirty;
 }

editor/state.js

@@ -27,6 +27,7 @@ export const editor = combineUndoableReducers( {
 	edits( state = {}, action ) {
 		switch ( action.type ) {
 			case 'EDIT_POST':
+			case 'SETUP_NEW_POST':
 				return {
 					...state,
 					...action.edits,
@@ -48,6 +49,7 @@ export const editor = combineUndoableReducers( {
 			case 'MOVE_BLOCK_UP':
 			case 'REPLACE_BLOCKS':
 			case 'REMOVE_BLOCK':
+			case 'EDIT_POST':
 				return true;
 		}
 

editor/test/selectors.js

@@ -11,6 +11,7 @@ import {
 	isEditorSidebarOpened,
 	hasEditorUndo,
 	hasEditorRedo,
+	isEditedPostNew,
 	isEditedPostDirty,
 	getCurrentPost,
 	getPostEdits,
@@ -123,6 +124,26 @@ describe( 'selectors', () => {
 		} );
 	} );
 
+	describe( 'isEditedPostNew', () => {
+		it( 'should return true when the post is new', () => {
+			const state = {
+				currentPost: {},
+			};
+
+			expect( isEditedPostNew( state ) ).to.be.true();
+		} );
+
+		it( 'should return false when the post has an ID', () => {
+			const state = {
+				currentPost: {
+					id: 1,
+				},
+			};
+
+			expect( isEditedPostNew( state ) ).to.be.false();
+		} );
+	} );
+
 	describe( 'isEditedPostDirty', () => {
 		it( 'should return true when the post is dirty', () => {
 			const state = {

editor/test/state.js

@@ -304,6 +304,85 @@ describe( 'state', () => {
 					tags: [ 2 ],
 				} );
 			} );
+
+			it( 'should save initial post state', () => {
+				const state = editor( undefined, {
+					type: 'SETUP_NEW_POST',
+					edits: {
+						status: 'draft',
+						title: 'post title',
+					},
+				} );
+
+				expect( state.edits ).to.eql( {
+					status: 'draft',
+					title: 'post title',
+				} );
+			} );
+		} );
+
+		describe( 'dirty()', () => {
+			it( 'should be true when the post is edited', () => {
+				const state = editor( undefined, {
+					type: 'EDIT_POST',
+					edits: {},
+				} );
+
+				expect( state.dirty ).to.be.true();
+			} );
+
+			it( 'should change to false when the post is reset', () => {
+				const original = editor( undefined, {
+					type: 'EDIT_POST',
+					edits: {},
+				} );
+
+				const state = editor( original, {
+					type: 'RESET_BLOCKS',
+					post: {},
+					blocks: [],
+				} );
+
+				expect( state.dirty ).to.be.false();
+			} );
+
+			it( 'should not change from true when an unrelated action occurs', () => {
+				const original = editor( undefined, {
+					type: 'EDIT_POST',
+					edits: {},
+				} );
+
+				const state = editor( original, {
+					type: 'BRISKET_READY',
+				} );
+
+				expect( state.dirty ).to.be.true();
+			} );
+
+			it( 'should not change from false when an unrelated action occurs', () => {
+				const original = editor( undefined, {
+					type: 'RESET_BLOCKS',
+					post: {},
+					blocks: [],
+				} );
+
+				expect( original.dirty ).to.be.false();
+
+				const state = editor( original, {
+					type: 'BRISKET_READY',
+				} );
+
+				expect( state.dirty ).to.be.false();
+			} );
+
+			it( 'should be false when the post is initialized', () => {
+				const state = editor( undefined, {
+					type: 'SETUP_NEW_POST',
+					edits: {},
+				} );
+
+				expect( state.dirty ).to.be.false();
+			} );
 		} );
 	} );
 

post-content.js

@@ -5,6 +5,10 @@ window._wpGutenbergPost = {
 	title: {
 		raw: 'Welcome to the Gutenberg Editor',
 	},
+	// TODO `status` and any other initial attributes other than content and
+	// title need to move somewhere else when this file goes away.  See:
+	// https://github.com/WordPress/gutenberg/pull/848#issuecomment-302836177
+	status: 'draft',
 	content: {
 		raw: [
 			'<!-- wp:core/text -->',