From 01520b4726e84c71a6ead4ab1f3e2983919889e7 Mon Sep 17 00:00:00 2001
From: Andrew Duthie <andrew@andrewduthie.com>
Date: Mon, 4 Jun 2018 16:10:45 -0400
Subject: [PATCH 01/11] State: Trigger autosave as standard save for draft by
 current user

---
 editor/store/effects.js | 26 ++++++++++++++++++++++++--
 1 file changed, 24 insertions(+), 2 deletions(-)

diff --git a/editor/store/effects.js b/editor/store/effects.js
index 5d98bb9821a9b1..864e06db5141df 100644
--- a/editor/store/effects.js
+++ b/editor/store/effects.js
@@ -92,11 +92,34 @@ export function removeProvisionalBlock( action, store ) {
 	}
 }
 
+/**
+ * Returns true if a requested autosave should occur as a standard save. This
+ * is true if the saved post is a draft or auto-draft, and if the request is
+ * is issued on behalf of the post author.
+ *
+ * @param {Object} post Post object
+ *
+ * @return {boolean} Whether autosave request should be issued as full save.
+ */
+function isAutosaveAsDraft( post ) {
+	// TODO: Improve retrieval of current user ID to not rely on this global.
+	const uid = Number( window.userSettings.uid );
+
+	return (
+		uid === post.author &&
+		includes( [ 'draft', 'auto-draft' ], post.status )
+	);
+}
+
 export default {
 	REQUEST_POST_UPDATE( action, store ) {
 		const { dispatch, getState } = store;
 		const state = getState();
-		const isAutosave = action.options && action.options.autosave;
+		const post = getCurrentPost( state );
+		const isAutosave = (
+			get( action.options, [ 'autosave' ], false ) &&
+			! isAutosaveAsDraft( post )
+		);
 
 		// Prevent save if not saveable.
 		const isSaveable = isAutosave ? isEditedPostAutosaveable : isEditedPostSaveable;
@@ -104,7 +127,6 @@ export default {
 			return;
 		}
 
-		const post = getCurrentPost( state );
 		const edits = getPostEdits( state );
 		let toSend = {
 			...edits,

From d817ec1c8b0c092dfe21ca1176c1c8145526d453 Mon Sep 17 00:00:00 2001
From: Andrew Duthie <andrew@andrewduthie.com>
Date: Mon, 4 Jun 2018 17:04:04 -0400
Subject: [PATCH 02/11] Testing: Update E2E tests for expected autosave
 conditions

---
 test/e2e/specs/change-detection.test.js | 37 +++++++++++++++++++++++--
 1 file changed, 34 insertions(+), 3 deletions(-)

diff --git a/test/e2e/specs/change-detection.test.js b/test/e2e/specs/change-detection.test.js
index 944346629f60be..20a4ed7387eca1 100644
--- a/test/e2e/specs/change-detection.test.js
+++ b/test/e2e/specs/change-detection.test.js
@@ -76,14 +76,45 @@ describe( 'Change detection', () => {
 	it( 'Should autosave post', async () => {
 		await page.type( '.editor-post-title__input', 'Hello World' );
 
-		// Force autosave to occur immediately.
+		// Force autosave to occur immediately. It will occur as a normal save.
 		await Promise.all( [
 			page.evaluate( () => window.wp.data.dispatch( 'core/editor' ).autosave() ),
-			page.waitForSelector( '.editor-post-saved-state.is-autosaving' ),
+			page.waitForSelector( '.editor-post-saved-state.is-saving' ),
 			page.waitForSelector( '.editor-post-saved-state.is-saved' ),
 		] );
 
-		// Still dirty after an autosave.
+		// Autosave draft as same user should do full save, i.e. not dirty.
+		await assertIsDirty( false );
+	} );
+
+	it( 'Should prompt to confirm unsaved changes for autosaved published post', async () => {
+		await page.type( '.editor-post-title__input', 'Hello World' );
+
+		await Promise.all( [
+			page.waitForSelector( '.editor-post-publish-button' ),
+			page.click( '.editor-post-publish-panel__toggle' ),
+		] );
+
+		await Promise.all( [
+			page.waitForSelector( '.editor-post-publish-panel__header-published' ),
+			page.click( '.editor-post-publish-button' ),
+		] );
+
+		// Close publish panel.
+		await Promise.all( [
+			page.waitForFunction( () => ! document.querySelector( '.editor-post-publish-panel' ) ),
+			page.click( '.editor-post-publish-panel__header button' ),
+		] );
+
+		// Should be dirty after autosave change of published post.
+		await page.type( '.editor-post-title__input', '!' );
+
+		await Promise.all( [
+			page.waitForSelector( '.editor-post-publish-button.is-busy' ),
+			page.evaluate( () => window.wp.data.dispatch( 'core/editor' ).autosave() ),
+		] );
+		await page.waitForSelector( '.editor-post-publish-button:not( .is-busy )' );
+
 		await assertIsDirty( true );
 	} );
 

From 08afec7b38a169de490057331f67356d81044f60 Mon Sep 17 00:00:00 2001
From: Andrew Duthie <andrew@andrewduthie.com>
Date: Tue, 5 Jun 2018 11:35:12 -0400
Subject: [PATCH 03/11] Testing: Wait for animation to avoid cursor chasing
 button

---
 test/e2e/specs/change-detection.test.js | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/test/e2e/specs/change-detection.test.js b/test/e2e/specs/change-detection.test.js
index 20a4ed7387eca1..fd7e696244ef42 100644
--- a/test/e2e/specs/change-detection.test.js
+++ b/test/e2e/specs/change-detection.test.js
@@ -95,6 +95,11 @@ describe( 'Change detection', () => {
 			page.click( '.editor-post-publish-panel__toggle' ),
 		] );
 
+		// Disable reason: Wait for animation to complete to avoid click
+		// occuring at wrong point.
+		// eslint-disable-next-line no-restricted-syntax
+		await page.waitFor( 100 );
+
 		await Promise.all( [
 			page.waitForSelector( '.editor-post-publish-panel__header-published' ),
 			page.click( '.editor-post-publish-button' ),
@@ -111,9 +116,9 @@ describe( 'Change detection', () => {
 
 		await Promise.all( [
 			page.waitForSelector( '.editor-post-publish-button.is-busy' ),
+			page.waitForSelector( '.editor-post-publish-button:not( .is-busy )' ),
 			page.evaluate( () => window.wp.data.dispatch( 'core/editor' ).autosave() ),
 		] );
-		await page.waitForSelector( '.editor-post-publish-button:not( .is-busy )' );
 
 		await assertIsDirty( true );
 	} );

From da5d327d2ba25ba62fbf07697d70e4fc775901bf Mon Sep 17 00:00:00 2001
From: Andrew Duthie <andrew@andrewduthie.com>
Date: Tue, 5 Jun 2018 11:37:11 -0400
Subject: [PATCH 04/11] State: Distinguish save on effective autosave

Change detection reset for known-to-be-draft, pick from non-effective autosave for resetting post
---
 editor/store/effects.js | 52 ++++++++++++++++++++++++++++++++---------
 1 file changed, 41 insertions(+), 11 deletions(-)

diff --git a/editor/store/effects.js b/editor/store/effects.js
index 864e06db5141df..409784ec1ae661 100644
--- a/editor/store/effects.js
+++ b/editor/store/effects.js
@@ -116,10 +116,7 @@ export default {
 		const { dispatch, getState } = store;
 		const state = getState();
 		const post = getCurrentPost( state );
-		const isAutosave = (
-			get( action.options, [ 'autosave' ], false ) &&
-			! isAutosaveAsDraft( post )
-		);
+		const isAutosave = get( action.options, [ 'autosave' ], false );
 
 		// Prevent save if not saveable.
 		const isSaveable = isAutosave ? isEditedPostAutosaveable : isEditedPostSaveable;
@@ -158,12 +155,6 @@ export default {
 				data: toSend,
 			} );
 		} else {
-			dispatch( {
-				type: 'UPDATE_POST',
-				edits: toSend,
-				optimist: { id: POST_UPDATE_TRANSACTION_ID },
-			} );
-
 			dispatch( removeNotice( SAVE_POST_NOTICE_ID ) );
 			dispatch( removeNotice( AUTOSAVE_POST_NOTICE_ID ) );
 
@@ -174,9 +165,48 @@ export default {
 			} );
 		}
 
+		// An autosave may be processed by the server as an update to the post,
+		// in which case it should be treated the same as a regular save so far
+		// as updating canonical post values and resetting change detection.
+		const isEffectiveAutosave = isAutosave && ! isAutosaveAsDraft( post );
+		if ( ! isEffectiveAutosave ) {
+			dispatch( {
+				type: 'UPDATE_POST',
+				edits: toSend,
+				optimist: { id: POST_UPDATE_TRANSACTION_ID },
+			} );
+		}
+
 		request.then(
 			( newPost ) => {
-				const reset = isAutosave ? resetAutosave : resetPost;
+				const reset = isEffectiveAutosave ? resetAutosave : resetPost;
+
+				// Autosave response value shape is not the same as the post
+				// endpoint, so even if the server processes it as a regular
+				// save, it can't be received into state directly. Instead,
+				// merge to known saved post with updated common keys.
+				if ( isAutosave && ! isEffectiveAutosave ) {
+					newPost = {
+						...post,
+						...pick( newPost, [
+							// Autosave content fields.
+							'title',
+							'content',
+							'excerpt',
+
+							// UI considers save to have occurred if modified
+							// date of post changes (e.g. PostPreviewButton).
+							//
+							// TODO: Consider more formalized pattern for
+							// identifying a save as having completed.
+							'date',
+							'date_gmt',
+							'modified',
+							'modified_gmt',
+						] ),
+					};
+				}
+
 				dispatch( reset( newPost ) );
 
 				dispatch( {

From 8f82de82869f8a1be2fbddfdebf53677cf3f6093 Mon Sep 17 00:00:00 2001
From: Andrew Duthie <andrew@andrewduthie.com>
Date: Tue, 5 Jun 2018 11:51:55 -0400
Subject: [PATCH 05/11] Testing: Ensure autosave is identified as autosave

Passed previously because when autosaving, class is assigned with _both_ `is-saving` and `is-autosaving`. The superset of classes is what what should be expected.
---
 test/e2e/specs/change-detection.test.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/test/e2e/specs/change-detection.test.js b/test/e2e/specs/change-detection.test.js
index fd7e696244ef42..2b04769cb81c44 100644
--- a/test/e2e/specs/change-detection.test.js
+++ b/test/e2e/specs/change-detection.test.js
@@ -76,10 +76,10 @@ describe( 'Change detection', () => {
 	it( 'Should autosave post', async () => {
 		await page.type( '.editor-post-title__input', 'Hello World' );
 
-		// Force autosave to occur immediately. It will occur as a normal save.
+		// Force autosave to occur immediately.
 		await Promise.all( [
 			page.evaluate( () => window.wp.data.dispatch( 'core/editor' ).autosave() ),
-			page.waitForSelector( '.editor-post-saved-state.is-saving' ),
+			page.waitForSelector( '.editor-post-saved-state.is-autosaving' ),
 			page.waitForSelector( '.editor-post-saved-state.is-saved' ),
 		] );
 

From df6f471c69470beb26b7db66183f43cd0291c674 Mon Sep 17 00:00:00 2001
From: Andrew Duthie <andrew@andrewduthie.com>
Date: Tue, 5 Jun 2018 15:39:43 -0400
Subject: [PATCH 06/11] State: Update post in autosave as assumed full save

---
 editor/store/actions.js |  15 ++++++
 editor/store/effects.js | 116 ++++++++++++++++++++--------------------
 editor/store/reducer.js |   6 +--
 3 files changed, 75 insertions(+), 62 deletions(-)

diff --git a/editor/store/actions.js b/editor/store/actions.js
index 65619fb8b54adc..272438254f5c76 100644
--- a/editor/store/actions.js
+++ b/editor/store/actions.js
@@ -59,6 +59,21 @@ export function resetAutosave( post ) {
 	};
 }
 
+/**
+ * Returns an action object used in signalling that a patch of updates for the
+ * latest version of the post have been received.
+ *
+ * @param {Object} edits Updated post fields.
+ *
+ * @return {Object} Action object.
+ */
+export function updatePost( edits ) {
+	return {
+		type: 'UPDATE_POST',
+		edits,
+	};
+}
+
 /**
  * Returns an action object used to setup the editor state when first opening an editor.
  *
diff --git a/editor/store/effects.js b/editor/store/effects.js
index 409784ec1ae661..833f818a56fdbf 100644
--- a/editor/store/effects.js
+++ b/editor/store/effects.js
@@ -29,6 +29,7 @@ import {
 	setupEditorState,
 	resetAutosave,
 	resetPost,
+	updatePost,
 	receiveBlocks,
 	receiveSharedBlocks,
 	replaceBlock,
@@ -92,25 +93,6 @@ export function removeProvisionalBlock( action, store ) {
 	}
 }
 
-/**
- * Returns true if a requested autosave should occur as a standard save. This
- * is true if the saved post is a draft or auto-draft, and if the request is
- * is issued on behalf of the post author.
- *
- * @param {Object} post Post object
- *
- * @return {boolean} Whether autosave request should be issued as full save.
- */
-function isAutosaveAsDraft( post ) {
-	// TODO: Improve retrieval of current user ID to not rely on this global.
-	const uid = Number( window.userSettings.uid );
-
-	return (
-		uid === post.author &&
-		includes( [ 'draft', 'auto-draft' ], post.status )
-	);
-}
-
 export default {
 	REQUEST_POST_UPDATE( action, store ) {
 		const { dispatch, getState } = store;
@@ -138,6 +120,14 @@ export default {
 			isAutosave,
 		} );
 
+		// Optimistically apply updates under the assumption that the post
+		// will be updated. See below logic in success resolution for revert
+		// if the autosave is applied as a revision.
+		dispatch( {
+			...updatePost( toSend ),
+			optimist: { id: POST_UPDATE_TRANSACTION_ID },
+		} );
+
 		let request;
 		if ( isAutosave ) {
 			// Ensure autosaves contain all expected fields, using autosave or
@@ -165,55 +155,63 @@ export default {
 			} );
 		}
 
-		// An autosave may be processed by the server as an update to the post,
-		// in which case it should be treated the same as a regular save so far
-		// as updating canonical post values and resetting change detection.
-		const isEffectiveAutosave = isAutosave && ! isAutosaveAsDraft( post );
-		if ( ! isEffectiveAutosave ) {
-			dispatch( {
-				type: 'UPDATE_POST',
-				edits: toSend,
-				optimist: { id: POST_UPDATE_TRANSACTION_ID },
-			} );
-		}
-
 		request.then(
 			( newPost ) => {
-				const reset = isEffectiveAutosave ? resetAutosave : resetPost;
-
-				// Autosave response value shape is not the same as the post
-				// endpoint, so even if the server processes it as a regular
-				// save, it can't be received into state directly. Instead,
-				// merge to known saved post with updated common keys.
-				if ( isAutosave && ! isEffectiveAutosave ) {
-					newPost = {
-						...post,
-						...pick( newPost, [
-							// Autosave content fields.
-							'title',
-							'content',
-							'excerpt',
-
-							// UI considers save to have occurred if modified
-							// date of post changes (e.g. PostPreviewButton).
-							//
-							// TODO: Consider more formalized pattern for
-							// identifying a save as having completed.
-							'date',
-							'date_gmt',
-							'modified',
-							'modified_gmt',
-						] ),
-					};
+				// An autosave may be processed by the server as a regular save
+				// when its update is requested by the author and the post was
+				// draft or auto-draft.
+				const isRevision = newPost.id !== post.id;
+
+				// Thus, the following behaviors occur:
+				//
+				//  - If it was a revision, it is treated as latest autosave
+				//    and updates optimistically applied are reverted.
+				//  - If it was an autosave but not revision under the above
+				//    noted conditions, cherry-pick updated properties since
+				//    the received revision entity shares some but not all
+				//    properties of a post.
+				//  - Otherwise, it was a full save and the received entity
+				//    can be considered the new reset post.
+				let updateAction;
+				if ( isRevision ) {
+					updateAction = resetAutosave( newPost );
+				} else if ( isAutosave ) {
+					const revisionEdits = pick( newPost, [
+						// Autosave content fields.
+						'title',
+						'content',
+						'excerpt',
+
+						// UI considers save to have occurred if modified date
+						// of post changes (e.g. PostPreviewButton).
+						//
+						// TODO: Consider formalized pattern for identifying a
+						// save as having completed.
+						'date',
+						'date_gmt',
+						'modified',
+						'modified_gmt',
+					] );
+
+					updateAction = updatePost( revisionEdits );
+				} else {
+					updateAction = resetPost( newPost );
 				}
 
-				dispatch( reset( newPost ) );
+				dispatch( updateAction );
 
 				dispatch( {
 					type: 'REQUEST_POST_UPDATE_SUCCESS',
 					previousPost: post,
 					post: newPost,
-					optimist: { type: COMMIT, id: POST_UPDATE_TRANSACTION_ID },
+					optimist: {
+						// Note: REVERT is not a failure case here. Rather, it
+						// is simply reversing the assumption that the updates
+						// were applied to the post proper, such that the post
+						// treated as having unsaved changes.
+						type: isRevision ? REVERT : COMMIT,
+						id: POST_UPDATE_TRANSACTION_ID,
+					},
 					isAutosave,
 				} );
 			},
diff --git a/editor/store/reducer.js b/editor/store/reducer.js
index ec3558e5501c79..1884a72ef5c443 100644
--- a/editor/store/reducer.js
+++ b/editor/store/reducer.js
@@ -217,15 +217,15 @@ export const editor = flow( [
 	// Track undo history, starting at editor initialization.
 	withHistory( {
 		resetTypes: [ 'SETUP_EDITOR_STATE' ],
-		ignoreTypes: [ 'RECEIVE_BLOCKS' ],
+		ignoreTypes: [ 'RECEIVE_BLOCKS', 'RESET_POST', 'UPDATE_POST' ],
 		shouldOverwriteState,
 	} ),
 
 	// Track whether changes exist, resetting at each post save. Relies on
 	// editor initialization firing post reset as an effect.
 	withChangeDetection( {
-		resetTypes: [ 'SETUP_EDITOR_STATE', 'UPDATE_POST' ],
-		ignoreTypes: [ 'RECEIVE_BLOCKS', 'RESET_POST' ],
+		resetTypes: [ 'SETUP_EDITOR_STATE', 'REQUEST_POST_UPDATE_START' ],
+		ignoreTypes: [ 'RECEIVE_BLOCKS', 'RESET_POST', 'UPDATE_POST' ],
 	} ),
 ] )( {
 	edits( state = {}, action ) {

From 5e9e1cac4a0b2eabf08c87af7b08f906ea4b60b8 Mon Sep 17 00:00:00 2001
From: Andrew Duthie <andrew@andrewduthie.com>
Date: Mon, 11 Jun 2018 11:43:30 -0400
Subject: [PATCH 07/11] Preview: Enable published posts preview (#7189)

* REST API: Move preview_link to autosaves controller

* Post Preview: Redirect to preview by autosave property availability

* Preview Button: Use preview link as href if available

* Preview Button: Move window bind to after write

Was not reliably triggered when redirect occurs by setPreviewWindowLink, possibly because document.open triggered by document.write erased window handlers.

* Preview Button: Always trigger autosave when dirty

* Preview Button: Consider preview ready by change in value

* State: Set default value for savePost options

Allows use in handlers to assume options present

* Store: Clarify preview link with query parameter

* REST API: Set preview link by parent only if autosave

* Store: Invalid autosave preview link on save intent

Preview link is no longer valid until autosave completes, by which UI can infer availability of preview as being ready to view.

* Testing: Add preview E2E tests

* Testing: Fix copypasta

* Preview: Use correct location property for URL comparison
---
 .../components/post-preview-button/index.js   |  59 ++++---
 .../post-preview-button/test/index.js         |  68 ++++++--
 editor/store/actions.js                       |   2 +-
 editor/store/effects.js                       |  43 +----
 editor/store/reducer.js                       |  14 +-
 editor/store/selectors.js                     |  43 ++++-
 editor/store/test/actions.js                  |   8 +
 editor/store/test/reducer.js                  |   2 +
 editor/store/test/selectors.js                |  79 +++++++++
 lib/class-wp-rest-autosaves-controller.php    |  30 +++-
 lib/rest-api.php                              |  39 -----
 phpunit/class-gutenberg-rest-api-test.php     |  15 --
 .../class-rest-autosaves-controller-test.php  |   3 +-
 test/e2e/specs/preview.test.js                | 158 ++++++++++++++++++
 test/e2e/specs/publishing.test.js             |  14 +-
 test/e2e/support/utils.js                     |  24 ++-
 16 files changed, 448 insertions(+), 153 deletions(-)
 create mode 100644 test/e2e/specs/preview.test.js

diff --git a/editor/components/post-preview-button/index.js b/editor/components/post-preview-button/index.js
index acb2ae41a3fac2..f9037ae64f8108 100644
--- a/editor/components/post-preview-button/index.js
+++ b/editor/components/post-preview-button/index.js
@@ -17,26 +17,34 @@ export class PostPreviewButton extends Component {
 		super( ...arguments );
 
 		this.saveForPreview = this.saveForPreview.bind( this );
-
-		this.state = {
-			isAwaitingSave: false,
-		};
 	}
 
-	componentWillReceiveProps( nextProps ) {
-		const { modified, link } = nextProps;
-		const { isAwaitingSave } = this.state;
-		const hasFinishedSaving = (
-			isAwaitingSave &&
-			modified !== this.props.modified
-		);
+	componentDidUpdate( prevProps ) {
+		const { previewLink } = this.props;
 
-		if ( hasFinishedSaving && this.previewWindow ) {
-			this.previewWindow.location = link;
-			this.setState( { isAwaitingSave: false } );
+		// This relies on the window being responsible to unset itself when
+		// navigation occurs or a new preview window is opened, to avoid
+		// unintentional forceful redirects.
+		if ( previewLink && previewLink !== prevProps.previewLink ) {
+			this.setPreviewWindowLink( previewLink );
 		}
 	}
 
+	/**
+	 * Sets the preview window's location to the given URL, if a preview window
+	 * exists and is not already at that location.
+	 *
+	 * @param {string} url URL to assign as preview window location.
+	 */
+	setPreviewWindowLink( url ) {
+		const { previewWindow } = this;
+		if ( ! previewWindow || previewWindow.location.href === url ) {
+			return;
+		}
+
+		previewWindow.location = url;
+	}
+
 	getWindowTarget() {
 		const { postId } = this.props;
 		return `wp-preview-${ postId }`;
@@ -44,6 +52,7 @@ export class PostPreviewButton extends Component {
 
 	saveForPreview( event ) {
 		const { isDirty, isNew } = this.props;
+
 		// Let default link behavior occur if no changes to saved post
 		if ( ! isDirty && ! isNew ) {
 			return;
@@ -51,9 +60,6 @@ export class PostPreviewButton extends Component {
 
 		// Save post prior to opening window
 		this.props.autosave();
-		this.setState( {
-			isAwaitingSave: true,
-		} );
 
 		// Open a popup, BUT: Set it to a blank page until save completes. This
 		// is necessary because popups can only be opened in response to user
@@ -64,10 +70,6 @@ export class PostPreviewButton extends Component {
 			this.getWindowTarget()
 		);
 
-		// When popup is closed, delete reference to avoid later assignment of
-		// location in a post update.
-		this.previewWindow.onbeforeunload = () => delete this.previewWindow;
-
 		const markup = `
 			<div>
 				<p>Please wait&hellip;</p>
@@ -93,16 +95,20 @@ export class PostPreviewButton extends Component {
 
 		this.previewWindow.document.write( markup );
 		this.previewWindow.document.close();
+
+		// When popup is closed or redirected by setPreviewWindowLink, delete
+		// reference to avoid later assignment of location in a post update.
+		this.previewWindow.onbeforeunload = () => delete this.previewWindow;
 	}
 
 	render() {
-		const { link, isSaveable } = this.props;
+		const { currentPostLink, isSaveable } = this.props;
 
 		return (
 			<Button
 				className="editor-post-preview"
 				isLarge
-				href={ link }
+				href={ currentPostLink }
 				onClick={ this.saveForPreview }
 				target={ this.getWindowTarget() }
 				disabled={ ! isSaveable }
@@ -120,7 +126,8 @@ export default compose( [
 	withSelect( ( select ) => {
 		const {
 			getCurrentPostId,
-			getEditedPostPreviewLink,
+			getCurrentPostAttribute,
+			getAutosaveAttribute,
 			getEditedPostAttribute,
 			isEditedPostDirty,
 			isEditedPostNew,
@@ -132,12 +139,12 @@ export default compose( [
 		const postType = getPostType( getEditedPostAttribute( 'type' ) );
 		return {
 			postId: getCurrentPostId(),
-			link: getEditedPostPreviewLink(),
+			currentPostLink: getCurrentPostAttribute( 'link' ),
+			previewLink: getAutosaveAttribute( 'preview_link' ),
 			isDirty: isEditedPostDirty(),
 			isNew: isEditedPostNew(),
 			isSaveable: isEditedPostSaveable(),
 			isViewable: get( postType, [ 'viewable' ], false ),
-			modified: getEditedPostAttribute( 'modified' ),
 		};
 	} ),
 	withDispatch( ( dispatch ) => ( {
diff --git a/editor/components/post-preview-button/test/index.js b/editor/components/post-preview-button/test/index.js
index ba57148eb8aaf8..9baad77fc1f1aa 100644
--- a/editor/components/post-preview-button/test/index.js
+++ b/editor/components/post-preview-button/test/index.js
@@ -9,11 +9,55 @@ import { shallow } from 'enzyme';
 import { PostPreviewButton } from '../';
 
 describe( 'PostPreviewButton', () => {
-	describe( 'constructor()', () => {
-		it( 'should initialize with non-awaiting-save', () => {
-			const instance = new PostPreviewButton( {} );
+	describe( 'setPreviewWindowLink()', () => {
+		it( 'should do nothing if there is no preview window', () => {
+			const url = 'https://wordpress.org';
+			const setter = jest.fn();
+			const wrapper = shallow( <PostPreviewButton /> );
 
-			expect( instance.state.isAwaitingSave ).toBe( false );
+			wrapper.instance().setPreviewWindowLink( url );
+
+			expect( setter ).not.toHaveBeenCalled();
+		} );
+
+		it( 'should do nothing if the preview window is already at url location', () => {
+			const url = 'https://wordpress.org';
+			const setter = jest.fn();
+			const wrapper = shallow( <PostPreviewButton /> );
+			wrapper.instance().previewWindow = {
+				get location() {
+					return {
+						href: url,
+					};
+				},
+				set location( value ) {
+					setter( value );
+				},
+			};
+
+			wrapper.instance().setPreviewWindowLink( url );
+
+			expect( setter ).not.toHaveBeenCalled();
+		} );
+
+		it( 'set preview window location to url', () => {
+			const url = 'https://wordpress.org';
+			const setter = jest.fn();
+			const wrapper = shallow( <PostPreviewButton /> );
+			wrapper.instance().previewWindow = {
+				get location() {
+					return {
+						href: 'about:blank',
+					};
+				},
+				set location( value ) {
+					setter( value );
+				},
+			};
+
+			wrapper.instance().setPreviewWindowLink( url );
+
+			expect( setter ).toHaveBeenCalledWith( url );
 		} );
 	} );
 
@@ -28,23 +72,21 @@ describe( 'PostPreviewButton', () => {
 	} );
 
 	describe( 'componentDidUpdate()', () => {
-		it( 'should change popup location if save finishes', () => {
+		it( 'should change popup location if preview link is available', () => {
 			const wrapper = shallow(
 				<PostPreviewButton
 					postId={ 1 }
-					link="https://wordpress.org/?p=1"
+					currentPostLink="https://wordpress.org/?p=1"
 					isSaveable
 					modified="2017-08-03T15:05:50" />
 			);
-			wrapper.instance().previewWindow = {};
-			wrapper.setState( { isAwaitingSave: true } );
+			wrapper.instance().previewWindow = { location: {} };
 
-			wrapper.setProps( { modified: '2017-08-03T15:05:52' } );
+			wrapper.setProps( { previewLink: 'https://wordpress.org/?p=1' } );
 
 			expect(
 				wrapper.instance().previewWindow.location
 			).toBe( 'https://wordpress.org/?p=1' );
-			expect( wrapper.state( 'isAwaitingSave' ) ).toBe( false );
 		} );
 	} );
 
@@ -71,13 +113,11 @@ describe( 'PostPreviewButton', () => {
 			if ( isExpectingSave ) {
 				expect( autosave ).toHaveBeenCalled();
 				expect( preventDefault ).toHaveBeenCalled();
-				expect( wrapper.state( 'isAwaitingSave' ) ).toBe( true );
 				expect( window.open ).toHaveBeenCalled();
 				expect( wrapper.instance().previewWindow.document.write ).toHaveBeenCalled();
 			} else {
 				expect( autosave ).not.toHaveBeenCalled();
 				expect( preventDefault ).not.toHaveBeenCalled();
-				expect( wrapper.state( 'isAwaitingSave' ) ).not.toBe( true );
 				expect( window.open ).not.toHaveBeenCalled();
 			}
 
@@ -118,7 +158,7 @@ describe( 'PostPreviewButton', () => {
 				<PostPreviewButton
 					postId={ 1 }
 					isSaveable
-					link="https://wordpress.org/?p=1" />
+					currentPostLink="https://wordpress.org/?p=1" />
 			);
 
 			expect( wrapper.prop( 'href' ) ).toBe( 'https://wordpress.org/?p=1' );
@@ -130,7 +170,7 @@ describe( 'PostPreviewButton', () => {
 			const wrapper = shallow(
 				<PostPreviewButton
 					postId={ 1 }
-					link="https://wordpress.org/?p=1" />
+					currentPostLink="https://wordpress.org/?p=1" />
 			);
 
 			expect( wrapper.prop( 'disabled' ) ).toBe( true );
diff --git a/editor/store/actions.js b/editor/store/actions.js
index 272438254f5c76..278a76e1c0e5f7 100644
--- a/editor/store/actions.js
+++ b/editor/store/actions.js
@@ -391,7 +391,7 @@ export function editPost( edits ) {
  *
  * @return {Object} Action object.
  */
-export function savePost( options ) {
+export function savePost( options = {} ) {
 	return {
 		type: 'REQUEST_POST_UPDATE',
 		options,
diff --git a/editor/store/effects.js b/editor/store/effects.js
index 833f818a56fdbf..41d6148cc7fa8c 100644
--- a/editor/store/effects.js
+++ b/editor/store/effects.js
@@ -98,7 +98,7 @@ export default {
 		const { dispatch, getState } = store;
 		const state = getState();
 		const post = getCurrentPost( state );
-		const isAutosave = get( action.options, [ 'autosave' ], false );
+		const isAutosave = !! action.options.autosave;
 
 		// Prevent save if not saveable.
 		const isSaveable = isAutosave ? isEditedPostAutosaveable : isEditedPostSaveable;
@@ -157,49 +157,14 @@ export default {
 
 		request.then(
 			( newPost ) => {
+				const reset = isAutosave ? resetAutosave : resetPost;
+				dispatch( reset( newPost ) );
+
 				// An autosave may be processed by the server as a regular save
 				// when its update is requested by the author and the post was
 				// draft or auto-draft.
 				const isRevision = newPost.id !== post.id;
 
-				// Thus, the following behaviors occur:
-				//
-				//  - If it was a revision, it is treated as latest autosave
-				//    and updates optimistically applied are reverted.
-				//  - If it was an autosave but not revision under the above
-				//    noted conditions, cherry-pick updated properties since
-				//    the received revision entity shares some but not all
-				//    properties of a post.
-				//  - Otherwise, it was a full save and the received entity
-				//    can be considered the new reset post.
-				let updateAction;
-				if ( isRevision ) {
-					updateAction = resetAutosave( newPost );
-				} else if ( isAutosave ) {
-					const revisionEdits = pick( newPost, [
-						// Autosave content fields.
-						'title',
-						'content',
-						'excerpt',
-
-						// UI considers save to have occurred if modified date
-						// of post changes (e.g. PostPreviewButton).
-						//
-						// TODO: Consider formalized pattern for identifying a
-						// save as having completed.
-						'date',
-						'date_gmt',
-						'modified',
-						'modified_gmt',
-					] );
-
-					updateAction = updatePost( revisionEdits );
-				} else {
-					updateAction = resetPost( newPost );
-				}
-
-				dispatch( updateAction );
-
 				dispatch( {
 					type: 'REQUEST_POST_UPDATE_SUCCESS',
 					previousPost: post,
diff --git a/editor/store/reducer.js b/editor/store/reducer.js
index 1884a72ef5c443..f0a960321a8e36 100644
--- a/editor/store/reducer.js
+++ b/editor/store/reducer.js
@@ -1085,7 +1085,19 @@ export function autosave( state = null, action ) {
 				'content',
 			].map( ( field ) => getPostRawValue( post[ field ] ) );
 
-			return { title, excerpt, content };
+			return {
+				title,
+				excerpt,
+				content,
+				preview_link: post.preview_link,
+			};
+
+		case 'REQUEST_POST_UPDATE':
+			// Invalidate known preview link when autosave starts.
+			if ( state && action.options.autosave ) {
+				return omit( state, 'preview_link' );
+			}
+			break;
 	}
 
 	return state;
diff --git a/editor/store/selectors.js b/editor/store/selectors.js
index c9217d96b51489..28d1626a7c0481 100644
--- a/editor/store/selectors.js
+++ b/editor/store/selectors.js
@@ -182,6 +182,21 @@ export function getPostEdits( state ) {
 	return state.editor.present.edits;
 }
 
+/**
+ * Returns an attribute value of the saved post.
+ *
+ * @param {Object} state         Global application state.
+ * @param {string} attributeName Post attribute name.
+ *
+ * @return {*} Post attribute value.
+ */
+export function getCurrentPostAttribute( state, attributeName ) {
+	const post = getCurrentPost( state );
+	if ( post.hasOwnProperty( attributeName ) ) {
+		return post[ attributeName ];
+	}
+}
+
 /**
  * Returns a single attribute of the post being edited, preferring the unsaved
  * edit if one exists, but falling back to the attribute for the last known
@@ -201,9 +216,31 @@ export function getEditedPostAttribute( state, attributeName ) {
 			return getEditedPostContent( state );
 	}
 
-	return edits[ attributeName ] === undefined ?
-		state.currentPost[ attributeName ] :
-		edits[ attributeName ];
+	if ( ! edits.hasOwnProperty( attributeName ) ) {
+		return getCurrentPostAttribute( state, attributeName );
+	}
+
+	return edits[ attributeName ];
+}
+
+/**
+ * Returns an attribute value of the current autosave revision for a post, or
+ * null if there is no autosave for the post.
+ *
+ * @param {Object} state         Global application state.
+ * @param {string} attributeName Autosave attribute name.
+ *
+ * @return {*} Autosave attribute value.
+ */
+export function getAutosaveAttribute( state, attributeName ) {
+	if ( ! hasAutosave( state ) ) {
+		return null;
+	}
+
+	const autosave = getAutosave( state );
+	if ( autosave.hasOwnProperty( attributeName ) ) {
+		return autosave[ attributeName ];
+	}
 }
 
 /**
diff --git a/editor/store/test/actions.js b/editor/store/test/actions.js
index 4729c88c286559..401250bfeff59c 100644
--- a/editor/store/test/actions.js
+++ b/editor/store/test/actions.js
@@ -244,6 +244,14 @@ describe( 'actions', () => {
 		it( 'should return REQUEST_POST_UPDATE action', () => {
 			expect( savePost() ).toEqual( {
 				type: 'REQUEST_POST_UPDATE',
+				options: {},
+			} );
+		} );
+
+		it( 'should pass through options argument', () => {
+			expect( savePost( { autosave: true } ) ).toEqual( {
+				type: 'REQUEST_POST_UPDATE',
+				options: { autosave: true },
 			} );
 		} );
 	} );
diff --git a/editor/store/test/reducer.js b/editor/store/test/reducer.js
index e4ffbc89112e56..09ee5841f80e36 100644
--- a/editor/store/test/reducer.js
+++ b/editor/store/test/reducer.js
@@ -2298,6 +2298,7 @@ describe( 'state', () => {
 						raw: 'The Excerpt',
 					},
 					status: 'draft',
+					preview_link: 'https://wordpress.org/?p=1&preview=true',
 				},
 			} );
 
@@ -2305,6 +2306,7 @@ describe( 'state', () => {
 				title: 'The Title',
 				content: 'The Content',
 				excerpt: 'The Excerpt',
+				preview_link: 'https://wordpress.org/?p=1&preview=true',
 			} );
 		} );
 	} );
diff --git a/editor/store/test/selectors.js b/editor/store/test/selectors.js
index ba174eae36c41f..abdb2b53015c11 100644
--- a/editor/store/test/selectors.js
+++ b/editor/store/test/selectors.js
@@ -50,7 +50,9 @@ const {
 	getSelectedBlock,
 	getSelectedBlockUID,
 	getBlockRootUID,
+	getCurrentPostAttribute,
 	getEditedPostAttribute,
+	getAutosaveAttribute,
 	getGlobalBlockCount,
 	getMultiSelectedBlockUids,
 	getMultiSelectedBlocks,
@@ -365,6 +367,34 @@ describe( 'selectors', () => {
 		} );
 	} );
 
+	describe( 'getCurrentPostAttribute', () => {
+		it( 'should return undefined for an attribute which does not exist', () => {
+			const state = {
+				currentPost: {},
+			};
+
+			expect( getCurrentPostAttribute( state, 'foo' ) ).toBeUndefined();
+		} );
+
+		it( 'should return undefined for object prototype member', () => {
+			const state = {
+				currentPost: {},
+			};
+
+			expect( getCurrentPostAttribute( state, 'valueOf' ) ).toBeUndefined();
+		} );
+
+		it( 'should return the value of an attribute', () => {
+			const state = {
+				currentPost: {
+					title: 'Hello World',
+				},
+			};
+
+			expect( getCurrentPostAttribute( state, 'title' ) ).toBe( 'Hello World' );
+		} );
+	} );
+
 	describe( 'getEditedPostAttribute', () => {
 		it( 'should return the current post\'s slug if no edits have been made', () => {
 			const state = {
@@ -423,6 +453,55 @@ describe( 'selectors', () => {
 
 			expect( getEditedPostAttribute( state, 'title' ) ).toBe( 'youcha' );
 		} );
+
+		it( 'should return undefined for object prototype member', () => {
+			const state = {
+				currentPost: {},
+				editor: {
+					present: {
+						edits: {},
+					},
+				},
+			};
+
+			expect( getEditedPostAttribute( state, 'valueOf' ) ).toBeUndefined();
+		} );
+	} );
+
+	describe( 'getAutosaveAttribute', () => {
+		it( 'returns null if there is no autosave', () => {
+			const state = {
+				autosave: null,
+			};
+
+			expect( getAutosaveAttribute( state, 'title' ) ).toBeNull();
+		} );
+
+		it( 'returns undefined for an attribute which is not set', () => {
+			const state = {
+				autosave: {},
+			};
+
+			expect( getAutosaveAttribute( state, 'foo' ) ).toBeUndefined();
+		} );
+
+		it( 'returns undefined for object prototype member', () => {
+			const state = {
+				autosave: {},
+			};
+
+			expect( getAutosaveAttribute( state, 'valueOf' ) ).toBeUndefined();
+		} );
+
+		it( 'returns the attribute value', () => {
+			const state = {
+				autosave: {
+					title: 'Hello World',
+				},
+			};
+
+			expect( getAutosaveAttribute( state, 'title' ) ).toBe( 'Hello World' );
+		} );
 	} );
 
 	describe( 'getCurrentPostLastRevisionId', () => {
diff --git a/lib/class-wp-rest-autosaves-controller.php b/lib/class-wp-rest-autosaves-controller.php
index 57574e80420129..c0a15f0e63411b 100644
--- a/lib/class-wp-rest-autosaves-controller.php
+++ b/lib/class-wp-rest-autosaves-controller.php
@@ -265,7 +265,17 @@ public function get_items( $request ) {
 	 * @return array Item schema data.
 	 */
 	public function get_item_schema() {
-		return $this->revisions_controller->get_item_schema();
+		$schema = $this->revisions_controller->get_item_schema();
+
+		$schema['properties']['preview_link'] = array(
+			'description' => __( 'Preview link for the post.', 'gutenberg' ),
+			'type'        => 'string',
+			'format'      => 'uri',
+			'context'     => array( 'edit' ),
+			'readonly'    => true,
+		);
+
+		return $schema;
 	}
 
 	/**
@@ -339,6 +349,24 @@ public function prepare_item_for_response( $post, $request ) {
 
 		$response = $this->revisions_controller->prepare_item_for_response( $post, $request );
 
+		$schema = $this->get_item_schema();
+
+		if ( ! empty( $schema['properties']['preview_link'] ) ) {
+			$parent_id = wp_is_post_autosave( $post );
+			$preview_post_id = false === $parent_id ? $post->ID : $parent_id;
+			$preview_query_args = array();
+
+			if ( false !== $parent_id ) {
+				$preview_query_args['preview_id']    = $parent_id;
+				$preview_query_args['preview_nonce'] = wp_create_nonce( 'post_preview_' . $parent_id );
+			}
+
+			$response->data['preview_link'] = get_preview_post_link( $preview_post_id, $preview_query_args );
+		}
+
+		$context        = ! empty( $request['context'] ) ? $request['context'] : 'view';
+		$response->data = $this->filter_response_by_context( $response->data, $context );
+
 		/**
 		 * Filters a revision returned from the API.
 		 *
diff --git a/lib/rest-api.php b/lib/rest-api.php
index 2c691f954e184b..b13cd3d766e65c 100644
--- a/lib/rest-api.php
+++ b/lib/rest-api.php
@@ -438,45 +438,6 @@ function gutenberg_register_rest_api_post_revisions() {
 }
 add_action( 'rest_api_init', 'gutenberg_register_rest_api_post_revisions' );
 
-/**
- * Get the preview link for the post object.
- *
- * @see https://github.com/WordPress/gutenberg/issues/4555
- *
- * @param WP_Post $post Post object.
- * @return string
- */
-function gutenberg_get_post_preview_link( $post ) {
-	return get_preview_post_link( $post['id'] );
-}
-
-/**
- * Adds the 'preview_link' attribute to the REST API response of a post.
- *
- * @see https://github.com/WordPress/gutenberg/issues/4555
- */
-function gutenberg_register_rest_api_post_preview_link() {
-	foreach ( get_post_types( array( 'show_in_rest' => true ), 'names' ) as $post_type ) {
-		if ( ! is_post_type_viewable( $post_type ) ) {
-			continue;
-		}
-		register_rest_field( $post_type,
-			'preview_link',
-			array(
-				'get_callback' => 'gutenberg_get_post_preview_link',
-				'schema'       => array(
-					'description' => __( 'Preview link for the post.', 'gutenberg' ),
-					'type'        => 'string',
-					'format'      => 'uri',
-					'context'     => array( 'edit' ),
-					'readonly'    => true,
-				),
-			)
-		);
-	}
-}
-add_action( 'rest_api_init', 'gutenberg_register_rest_api_post_preview_link' );
-
 /**
  * Ensure that the wp-json index contains the 'theme-supports' setting as
  * part of its site info elements.
diff --git a/phpunit/class-gutenberg-rest-api-test.php b/phpunit/class-gutenberg-rest-api-test.php
index 54656a4811f296..ed07d5af7dfe61 100644
--- a/phpunit/class-gutenberg-rest-api-test.php
+++ b/phpunit/class-gutenberg-rest-api-test.php
@@ -414,19 +414,4 @@ public function test_get_pages_unbounded_per_page_unauthorized() {
 		$data = $response->get_data();
 		$this->assertEquals( 'rest_forbidden_per_page', $data['code'] );
 	}
-
-	public function test_get_page_edit_context_includes_preview() {
-		wp_set_current_user( $this->editor );
-		$page_id = $this->factory->post->create( array(
-			'post_type'   => 'page',
-			'post_status' => 'draft',
-		) );
-		$page    = get_post( $page_id );
-		$request = new WP_REST_Request( 'GET', '/wp/v2/pages/' . $page_id );
-		$request->set_param( 'context', 'edit' );
-		$response = rest_get_server()->dispatch( $request );
-		$this->assertEquals( 200, $response->get_status() );
-		$data = $response->get_data();
-		$this->assertEquals( get_preview_post_link( $page ), $data['preview_link'] );
-	}
 }
diff --git a/phpunit/class-rest-autosaves-controller-test.php b/phpunit/class-rest-autosaves-controller-test.php
index 20f61f1d2ede49..2acc91295070c5 100644
--- a/phpunit/class-rest-autosaves-controller-test.php
+++ b/phpunit/class-rest-autosaves-controller-test.php
@@ -239,7 +239,7 @@ public function test_get_item_schema() {
 		$response   = rest_get_server()->dispatch( $request );
 		$data       = $response->get_data();
 		$properties = $data['schema']['properties'];
-		$this->assertEquals( 12, count( $properties ) );
+		$this->assertEquals( 13, count( $properties ) );
 		$this->assertArrayHasKey( 'author', $properties );
 		$this->assertArrayHasKey( 'content', $properties );
 		$this->assertArrayHasKey( 'date', $properties );
@@ -252,6 +252,7 @@ public function test_get_item_schema() {
 		$this->assertArrayHasKey( 'parent', $properties );
 		$this->assertArrayHasKey( 'slug', $properties );
 		$this->assertArrayHasKey( 'title', $properties );
+		$this->assertArrayHasKey( 'preview_link', $properties );
 	}
 
 	public function test_create_item() {
diff --git a/test/e2e/specs/preview.test.js b/test/e2e/specs/preview.test.js
new file mode 100644
index 00000000000000..76f92ca706965f
--- /dev/null
+++ b/test/e2e/specs/preview.test.js
@@ -0,0 +1,158 @@
+/**
+ * External dependencies
+ */
+import { parse } from 'url';
+
+/**
+ * Internal dependencies
+ */
+import '../support/bootstrap';
+import {
+	newPost,
+	newDesktopBrowserPage,
+	getUrl,
+	publishPost,
+} from '../support/utils';
+
+describe( 'Preview', () => {
+	beforeAll( async () => {
+		await newDesktopBrowserPage();
+	} );
+
+	beforeEach( async () => {
+		await newPost();
+	} );
+
+	it( 'Should open a preview window for a new post', async () => {
+		const editorPage = page;
+
+		// Disabled until content present.
+		const isPreviewDisabled = await page.$$eval(
+			'.editor-post-preview:not( :disabled )',
+			( enabledButtons ) => ! enabledButtons.length,
+		);
+		expect( isPreviewDisabled ).toBe( true );
+
+		await editorPage.type( '.editor-post-title__input', 'Hello World' );
+
+		// Don't proceed with autosave until preview window page is resolved.
+		await editorPage.setRequestInterception( true );
+
+		let [ , previewPage ] = await Promise.all( [
+			editorPage.click( '.editor-post-preview' ),
+			new Promise( ( resolve ) => {
+				browser.once( 'targetcreated', async ( target ) => {
+					resolve( await target.page() );
+				} );
+			} ),
+		] );
+
+		// Interstitial screen while save in progress.
+		expect( previewPage.url() ).toBe( 'about:blank' );
+
+		// Release request intercept should allow redirect to occur after save.
+		await Promise.all( [
+			previewPage.waitForNavigation(),
+			editorPage.setRequestInterception( false ),
+		] );
+
+		// When autosave completes for a new post, the URL of the editor should
+		// update to include the ID. Use this to assert on preview URL.
+		const [ , postId ] = await ( await editorPage.waitForFunction( () => {
+			return window.location.search.match( /[\?&]post=(\d+)/ );
+		} ) ).jsonValue();
+
+		let expectedPreviewURL = getUrl( '', `?p=${ postId }&preview=true` );
+		expect( previewPage.url() ).toBe( expectedPreviewURL );
+
+		// Title in preview should match input.
+		let previewTitle = await previewPage.$eval( '.entry-title', ( node ) => node.textContent );
+		expect( previewTitle ).toBe( 'Hello World' );
+
+		// Return to editor to change title.
+		await editorPage.bringToFront();
+		await editorPage.type( '.editor-post-title__input', '!' );
+
+		// Second preview should reuse same popup frame, with interstitial.
+		await editorPage.setRequestInterception( true );
+		await Promise.all( [
+			editorPage.click( '.editor-post-preview' ),
+			// Note: `load` event is used since, while a `window.open` with
+			// `about:blank` is called, the target window doesn't actually
+			// navigate to `about:blank` (it is treated as noop). But when
+			// the `document.write` + `document.close` of the interstitial
+			// finishes, a `load` event is fired.
+			new Promise( ( resolve ) => previewPage.once( 'load', resolve ) ),
+		] );
+		await editorPage.setRequestInterception( false );
+
+		// Wait for preview to load.
+		await new Promise( ( resolve ) => {
+			previewPage.once( 'load', resolve );
+		} );
+
+		// Title in preview should match updated input.
+		previewTitle = await previewPage.$eval( '.entry-title', ( node ) => node.textContent );
+		expect( previewTitle ).toBe( 'Hello World!' );
+
+		// Pressing preview without changes should bring same preview window to
+		// front and reload, but should not show interstitial. Intercept editor
+		// requests in case a save attempt occurs, to avoid race condition on
+		// the load event and title retrieval.
+		await editorPage.bringToFront();
+		await editorPage.setRequestInterception( true );
+		await editorPage.click( '.editor-post-preview' );
+		await new Promise( ( resolve ) => previewPage.once( 'load', resolve ) );
+		previewTitle = await previewPage.$eval( '.entry-title', ( node ) => node.textContent );
+		expect( previewTitle ).toBe( 'Hello World!' );
+		await editorPage.setRequestInterception( false );
+
+		// Preview for published post (no unsaved changes) directs to canonical
+		// URL for post.
+		await editorPage.bringToFront();
+		await publishPost();
+		await Promise.all( [
+			page.waitForFunction( () => ! document.querySelector( '.editor-post-preview' ) ),
+			page.click( '.editor-post-publish-panel__header button' ),
+		] );
+		expectedPreviewURL = await editorPage.$eval( '.notice-success a', ( node ) => node.href );
+		// Note / Temporary: It's expected that Chrome should reuse the same
+		// tab with window name `wp-preview-##`, yet in this instance a new tab
+		// is unfortunately created.
+		previewPage = ( await Promise.all( [
+			editorPage.click( '.editor-post-preview' ),
+			new Promise( ( resolve ) => {
+				browser.once( 'targetcreated', async ( target ) => {
+					resolve( await target.page() );
+				} );
+			} ),
+		] ) )[ 1 ];
+		expect( previewPage.url() ).toBe( expectedPreviewURL );
+
+		// Return to editor to change title.
+		await editorPage.bringToFront();
+		await editorPage.type( '.editor-post-title__input', ' And more.' );
+
+		// Published preview should reuse same popup frame, with interstitial.
+		await editorPage.setRequestInterception( true );
+		await Promise.all( [
+			editorPage.click( '.editor-post-preview' ),
+			new Promise( ( resolve ) => previewPage.once( 'load', resolve ) ),
+		] );
+		await editorPage.setRequestInterception( false );
+
+		// Wait for preview to load.
+		await new Promise( ( resolve ) => {
+			previewPage.once( 'load', resolve );
+		} );
+
+		// Title in preview should match updated input.
+		previewTitle = await previewPage.$eval( '.entry-title', ( node ) => node.textContent );
+		expect( previewTitle ).toBe( 'Hello World! And more.' );
+
+		// Published preview URL should include ID and nonce parameters.
+		const { query } = parse( previewPage.url(), true );
+		expect( query ).toHaveProperty( 'preview_id' );
+		expect( query ).toHaveProperty( 'preview_nonce' );
+	} );
+} );
diff --git a/test/e2e/specs/publishing.test.js b/test/e2e/specs/publishing.test.js
index c48758942c5eba..3a5a219c6e955b 100644
--- a/test/e2e/specs/publishing.test.js
+++ b/test/e2e/specs/publishing.test.js
@@ -5,6 +5,7 @@ import '../support/bootstrap';
 import {
 	newPost,
 	newDesktopBrowserPage,
+	publishPost,
 } from '../support/utils';
 
 describe( 'Publishing', () => {
@@ -19,18 +20,7 @@ describe( 'Publishing', () => {
 	it( 'Should publish a post and close the panel once we start editing again', async () => {
 		await page.type( '.editor-post-title__input', 'E2E Test Post' );
 
-		// Opens the publish panel
-		await page.click( '.editor-post-publish-panel__toggle' );
-
-		// Disable reason: Wait for a second ( wait for the animation )
-		// eslint-disable-next-line no-restricted-syntax
-		await page.waitFor( 1000 );
-
-		// Publish the post
-		await page.click( '.editor-post-publish-button' );
-
-		// A success notice should show up
-		page.waitForSelector( '.notice-success' );
+		await publishPost();
 
 		// The post publish panel is visible
 		expect( await page.$( '.editor-post-publish-panel' ) ).not.toBeNull();
diff --git a/test/e2e/support/utils.js b/test/e2e/support/utils.js
index 97dd0e23ef2f02..4585a2580758b7 100644
--- a/test/e2e/support/utils.js
+++ b/test/e2e/support/utils.js
@@ -26,7 +26,7 @@ const MOD_KEY = process.platform === 'darwin' ? 'Meta' : 'Control';
  */
 const REGEXP_ZWSP = /[\u200B\u200C\u200D\uFEFF]/;
 
-function getUrl( WPPath, query = '' ) {
+export function getUrl( WPPath, query = '' ) {
 	const url = new URL( WP_BASE_URL );
 
 	url.pathname = join( url.pathname, WPPath );
@@ -158,3 +158,25 @@ export async function toggleMoreMenuItem( buttonLabel ) {
 	const itemButton = ( await page.$x( `//button[contains(text(), \'${ buttonLabel }\')]` ) )[ 0 ];
 	await itemButton.click( 'button' );
 }
+
+/**
+ * Publishes the post, resolving once the request is complete (once a notice
+ * is displayed).
+ *
+ * @return {Promise} Promise resolving when publish is complete.
+ */
+export async function publishPost() {
+	// Opens the publish panel
+	await page.click( '.editor-post-publish-panel__toggle' );
+
+	// Disable reason: Wait for the animation to complete, since otherwise the
+	// click attempt may occur at the wrong point.
+	// eslint-disable-next-line no-restricted-syntax
+	await page.waitFor( 100 );
+
+	// Publish the post
+	await page.click( '.editor-post-publish-button' );
+
+	// A success notice should show up
+	return page.waitForSelector( '.notice-success' );
+}

From 6fa254e87f13859a1eccfe19851a0d221c47fea2 Mon Sep 17 00:00:00 2001
From: Andrew Duthie <andrew@andrewduthie.com>
Date: Wed, 20 Jun 2018 10:43:11 -0400
Subject: [PATCH 08/11] State: Partially pick saved fields for autosave

Must dirty artificially once save completes if there were edits not included in the payload.
---
 editor/store/effects.js                 | 34 ++++++++++++++++++++++---
 editor/store/reducer.js                 |  3 +++
 editor/store/test/effects.js            | 34 +++++++++++++++++++++----
 test/e2e/specs/change-detection.test.js | 24 ++++++++++++++++-
 test/e2e/support/utils.js               | 16 ++++++++++++
 5 files changed, 102 insertions(+), 9 deletions(-)

diff --git a/editor/store/effects.js b/editor/store/effects.js
index 41d6148cc7fa8c..75da4df7821d25 100644
--- a/editor/store/effects.js
+++ b/editor/store/effects.js
@@ -65,6 +65,7 @@ import {
 	getTemplate,
 	getTemplateLock,
 	getAutosave,
+	isEditedPostNew,
 	POST_UPDATE_TRANSACTION_ID,
 } from './selectors';
 
@@ -106,7 +107,26 @@ export default {
 			return;
 		}
 
-		const edits = getPostEdits( state );
+		let edits = getPostEdits( state );
+		if ( isAutosave ) {
+			edits = pick( edits, [ 'title', 'content', 'excerpt' ] );
+		}
+
+		// New posts (with auto-draft status) must be explicitly assigned draft
+		// status if there is not already a status assigned in edits (publish).
+		// Otherwise, they are wrongly left as auto-draft. Status is not always
+		// respected for autosaves, so it cannot simply be included in the pick
+		// above. This behavior relies on an assumption that an auto-draft post
+		// would never be saved by anyone other than the owner of the post, per
+		// logic within autosaves REST controller to save status field only for
+		// draft/auto-draft by current user.
+		//
+		// See: https://core.trac.wordpress.org/ticket/43316#comment:88
+		// See: https://core.trac.wordpress.org/ticket/43316#comment:89
+		if ( isEditedPostNew( state ) ) {
+			edits = { status: 'draft', ...edits };
+		}
+
 		let toSend = {
 			...edits,
 			content: getEditedPostContent( state ),
@@ -198,7 +218,16 @@ export default {
 	},
 	REQUEST_POST_UPDATE_SUCCESS( action, store ) {
 		const { previousPost, post, isAutosave } = action;
-		const { dispatch } = store;
+		const { dispatch, getState } = store;
+
+		// TEMPORARY: If edits remain after a save completes, the user must be
+		// prompted about unsaved changes. This should be refactored as part of
+		// the `isEditedPostDirty` selector instead.
+		//
+		// See: https://github.com/WordPress/gutenberg/issues/7409
+		if ( Object.keys( getPostEdits( getState() ) ).length ) {
+			dispatch( { type: 'DIRTY_ARTIFICIALLY' } );
+		}
 
 		// Autosaves are neither shown a notice nor redirected.
 		if ( isAutosave ) {
@@ -390,7 +419,6 @@ export default {
 		const edits = {};
 		if ( post.status === 'auto-draft' ) {
 			edits.title = post.title.raw;
-			edits.status = 'draft';
 		}
 
 		// Check the auto-save status
diff --git a/editor/store/reducer.js b/editor/store/reducer.js
index f0a960321a8e36..ee29c384ef13a6 100644
--- a/editor/store/reducer.js
+++ b/editor/store/reducer.js
@@ -254,6 +254,9 @@ export const editor = flow( [
 
 				return state;
 
+			case 'DIRTY_ARTIFICIALLY':
+				return { ...state };
+
 			case 'UPDATE_POST':
 			case 'RESET_POST':
 				const getCanonicalValue = action.type === 'UPDATE_POST' ?
diff --git a/editor/store/test/effects.js b/editor/store/test/effects.js
index b585ba079771b4..8e135cb7c566b8 100644
--- a/editor/store/test/effects.js
+++ b/editor/store/test/effects.js
@@ -34,6 +34,7 @@ import {
 	convertBlockToStatic,
 	convertBlockToShared,
 	setTemplateValidity,
+	editPost,
 } from '../actions';
 import effects, {
 	removeProvisionalBlock,
@@ -260,6 +261,16 @@ describe( 'effects', () => {
 	describe( '.REQUEST_POST_UPDATE_SUCCESS', () => {
 		const handler = effects.REQUEST_POST_UPDATE_SUCCESS;
 
+		function createGetState( hasLingeringEdits = false ) {
+			let state = reducer( undefined, {} );
+			if ( hasLingeringEdits ) {
+				state = reducer( state, editPost( { edited: true } ) );
+			}
+
+			const getState = () => state;
+			return getState;
+		}
+
 		const defaultPost = {
 			id: 1,
 			title: {
@@ -280,7 +291,7 @@ describe( 'effects', () => {
 
 		it( 'should dispatch notices when publishing or scheduling a post', () => {
 			const dispatch = jest.fn();
-			const store = { dispatch };
+			const store = { dispatch, getState: createGetState() };
 
 			const previousPost = getDraftPost();
 			const post = getPublishedPost();
@@ -302,7 +313,7 @@ describe( 'effects', () => {
 
 		it( 'should dispatch notices when reverting a published post to a draft', () => {
 			const dispatch = jest.fn();
-			const store = { dispatch };
+			const store = { dispatch, getState: createGetState() };
 
 			const previousPost = getPublishedPost();
 			const post = getDraftPost();
@@ -328,7 +339,7 @@ describe( 'effects', () => {
 
 		it( 'should dispatch notices when just updating a published post again', () => {
 			const dispatch = jest.fn();
-			const store = { dispatch };
+			const store = { dispatch, getState: createGetState() };
 
 			const previousPost = getPublishedPost();
 			const post = getPublishedPost();
@@ -350,7 +361,7 @@ describe( 'effects', () => {
 
 		it( 'should do nothing if the updated post was autosaved', () => {
 			const dispatch = jest.fn();
-			const store = { dispatch };
+			const store = { dispatch, getState: createGetState() };
 
 			const previousPost = getPublishedPost();
 			const post = { ...getPublishedPost(), id: defaultPost.id + 1 };
@@ -359,6 +370,19 @@ describe( 'effects', () => {
 
 			expect( dispatch ).toHaveBeenCalledTimes( 0 );
 		} );
+
+		it( 'should dispatch dirtying action if edits linger after autosave', () => {
+			const dispatch = jest.fn();
+			const store = { dispatch, getState: createGetState( true ) };
+
+			const previousPost = getPublishedPost();
+			const post = { ...getPublishedPost(), id: defaultPost.id + 1 };
+
+			handler( { post, previousPost, isAutosave: true }, store );
+
+			expect( dispatch ).toHaveBeenCalledTimes( 1 );
+			expect( dispatch ).toHaveBeenCalledWith( { type: 'DIRTY_ARTIFICIALLY' } );
+		} );
 	} );
 
 	describe( '.REQUEST_POST_UPDATE_FAILURE', () => {
@@ -531,7 +555,7 @@ describe( 'effects', () => {
 
 			expect( result ).toEqual( [
 				setTemplateValidity( true ),
-				setupEditorState( post, [], { title: 'A History of Pork', status: 'draft' } ),
+				setupEditorState( post, [], { title: 'A History of Pork' } ),
 			] );
 		} );
 	} );
diff --git a/test/e2e/specs/change-detection.test.js b/test/e2e/specs/change-detection.test.js
index 2b04769cb81c44..2ab2bcbc1a416e 100644
--- a/test/e2e/specs/change-detection.test.js
+++ b/test/e2e/specs/change-detection.test.js
@@ -2,7 +2,12 @@
  * Internal dependencies
  */
 import '../support/bootstrap';
-import { newPost, newDesktopBrowserPage, pressWithModifier } from '../support/utils';
+import {
+	newPost,
+	newDesktopBrowserPage,
+	pressWithModifier,
+	ensureSidebarOpened,
+} from '../support/utils';
 
 describe( 'Change detection', () => {
 	let handleInterceptedRequest, hadInterceptedSave;
@@ -87,6 +92,23 @@ describe( 'Change detection', () => {
 		await assertIsDirty( false );
 	} );
 
+	it( 'Should prompt to confirm unsaved changes for autosaved draft for non-content fields', async () => {
+		await page.type( '.editor-post-title__input', 'Hello World' );
+
+		// Toggle post as sticky (not persisted for autosave).
+		await ensureSidebarOpened();
+		await page.click( '[id^="post-sticky-toggle-"]' );
+
+		// Force autosave to occur immediately.
+		await Promise.all( [
+			page.evaluate( () => window.wp.data.dispatch( 'core/editor' ).autosave() ),
+			page.waitForSelector( '.editor-post-saved-state.is-autosaving' ),
+			page.waitForSelector( '.editor-post-saved-state.is-saved' ),
+		] );
+
+		await assertIsDirty( true );
+	} );
+
 	it( 'Should prompt to confirm unsaved changes for autosaved published post', async () => {
 		await page.type( '.editor-post-title__input', 'Hello World' );
 
diff --git a/test/e2e/support/utils.js b/test/e2e/support/utils.js
index 4585a2580758b7..40c2f756b708d5 100644
--- a/test/e2e/support/utils.js
+++ b/test/e2e/support/utils.js
@@ -112,6 +112,22 @@ export async function getHTMLFromCodeEditor() {
 	return textEditorContent;
 }
 
+/**
+ * Verifies that the edit post sidebar is opened, and if it is not, opens it.
+ *
+ * @return {Promise} Promise resolving once the edit post sidebar is opened.
+ */
+export async function ensureSidebarOpened() {
+	// This try/catch flow relies on the fact that `page.$eval` throws an error
+	// if the element matching the given selector does not exist. Thus, if an
+	// error is thrown, it can be inferred that the sidebar is not opened.
+	try {
+		return page.$eval( '.edit-post-sidebar', () => {} );
+	} catch ( error ) {
+		return page.click( '.edit-post-header__settings [aria-label="Settings"]' );
+	}
+}
+
 /**
  * Opens the inserter, searches for the given term, then selects the first
  * result that appears.

From ae15eca8bcd0373b8711430004d2b6aa0171d80d Mon Sep 17 00:00:00 2001
From: Andrew Duthie <andrew@andrewduthie.com>
Date: Wed, 20 Jun 2018 10:47:50 -0400
Subject: [PATCH 09/11] Testing: Update published change detection test to use
 publishPost utility

---
 test/e2e/specs/change-detection.test.js | 16 ++--------------
 1 file changed, 2 insertions(+), 14 deletions(-)

diff --git a/test/e2e/specs/change-detection.test.js b/test/e2e/specs/change-detection.test.js
index 2ab2bcbc1a416e..8db99f779d6f75 100644
--- a/test/e2e/specs/change-detection.test.js
+++ b/test/e2e/specs/change-detection.test.js
@@ -7,6 +7,7 @@ import {
 	newDesktopBrowserPage,
 	pressWithModifier,
 	ensureSidebarOpened,
+	publishPost,
 } from '../support/utils';
 
 describe( 'Change detection', () => {
@@ -112,20 +113,7 @@ describe( 'Change detection', () => {
 	it( 'Should prompt to confirm unsaved changes for autosaved published post', async () => {
 		await page.type( '.editor-post-title__input', 'Hello World' );
 
-		await Promise.all( [
-			page.waitForSelector( '.editor-post-publish-button' ),
-			page.click( '.editor-post-publish-panel__toggle' ),
-		] );
-
-		// Disable reason: Wait for animation to complete to avoid click
-		// occuring at wrong point.
-		// eslint-disable-next-line no-restricted-syntax
-		await page.waitFor( 100 );
-
-		await Promise.all( [
-			page.waitForSelector( '.editor-post-publish-panel__header-published' ),
-			page.click( '.editor-post-publish-button' ),
-		] );
+		await publishPost();
 
 		// Close publish panel.
 		await Promise.all( [

From 9f48e1a7f2a51dd29033e61d6d635abc5598108b Mon Sep 17 00:00:00 2001
From: Andrew Duthie <andrew@andrewduthie.com>
Date: Wed, 20 Jun 2018 10:54:34 -0400
Subject: [PATCH 10/11] REST API: Fix code styling (aligned assignment
 operator)

---
 lib/class-wp-rest-autosaves-controller.php | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/lib/class-wp-rest-autosaves-controller.php b/lib/class-wp-rest-autosaves-controller.php
index c0a15f0e63411b..6058ba5297112d 100644
--- a/lib/class-wp-rest-autosaves-controller.php
+++ b/lib/class-wp-rest-autosaves-controller.php
@@ -352,8 +352,8 @@ public function prepare_item_for_response( $post, $request ) {
 		$schema = $this->get_item_schema();
 
 		if ( ! empty( $schema['properties']['preview_link'] ) ) {
-			$parent_id = wp_is_post_autosave( $post );
-			$preview_post_id = false === $parent_id ? $post->ID : $parent_id;
+			$parent_id          = wp_is_post_autosave( $post );
+			$preview_post_id    = false === $parent_id ? $post->ID : $parent_id;
 			$preview_query_args = array();
 
 			if ( false !== $parent_id ) {

From d97441474d119ede5e6264ad5f5a8f15132d8faf Mon Sep 17 00:00:00 2001
From: Andrew Duthie <andrew@andrewduthie.com>
Date: Wed, 20 Jun 2018 13:13:21 -0400
Subject: [PATCH 11/11] Autosave: Remove redundant draft transition of reset
 autosave

Now reflected in committed updatePost edit of status to draft in save effect for auto-draft (by current user).
---
 editor/store/reducer.js      | 10 ----------
 editor/store/test/reducer.js | 18 ------------------
 2 files changed, 28 deletions(-)

diff --git a/editor/store/reducer.js b/editor/store/reducer.js
index ee29c384ef13a6..fdfdfa2476ed18 100644
--- a/editor/store/reducer.js
+++ b/editor/store/reducer.js
@@ -562,16 +562,6 @@ export function currentPost( state = {}, action ) {
 			}
 
 			return mapValues( post, getPostRawValue );
-
-		case 'RESET_AUTOSAVE':
-			// A post is no longer auto-draft (now draft) when autosave occurs.
-			if ( state.status === 'auto-draft' ) {
-				return {
-					...state,
-					status: 'draft',
-				};
-			}
-			break;
 	}
 
 	return state;
diff --git a/editor/store/test/reducer.js b/editor/store/test/reducer.js
index 09ee5841f80e36..b1afa1c7e6e529 100644
--- a/editor/store/test/reducer.js
+++ b/editor/store/test/reducer.js
@@ -1273,24 +1273,6 @@ describe( 'state', () => {
 				status: 'publish',
 			} );
 		} );
-
-		it( 'should set status to draft if autosave reset while auto-draft', () => {
-			const original = deepFreeze( { title: '', status: 'auto-draft' } );
-
-			const state = currentPost( original, {
-				type: 'RESET_AUTOSAVE',
-				edits: {
-					title: 'Hello world',
-					content: '',
-					excerpt: '',
-				},
-			} );
-
-			expect( state ).toEqual( {
-				title: '',
-				status: 'draft',
-			} );
-		} );
 	} );
 
 	describe( 'isInsertionPointVisible', () => {