Perform a complete draft save on preview (#12097)

docs/data/data-core-editor.md

@@ -1083,6 +1083,18 @@ Returns true if the post is being previewed, or false otherwise.
 
 Whether the post is being previewed.
 
+### getEditedPostPreviewLink
+
+Returns the post preview link
+
+*Parameters*
+
+ * state: Global application state.
+
+*Returns*
+
+Preview Link.
+
 ### getSuggestedPostFormat
 
 Returns a suggested post format for the current post, inferred only if there

packages/editor/src/components/post-preview-button/index.js

@@ -12,7 +12,6 @@ import { __, _x } from '@wordpress/i18n';
 import { withSelect, withDispatch } from '@wordpress/data';
 import { DotTip } from '@wordpress/nux';
 import { ifCondition, compose } from '@wordpress/compose';
-import { addQueryArgs } from '@wordpress/url';
 
 function writeInterstitialMessage( targetDocument ) {
 	let markup = renderToString(
@@ -148,7 +147,11 @@ export class PostPreviewButton extends Component {
 
 		// Request an autosave. This happens asynchronously and causes the component
 		// to update when finished.
-		this.props.autosave( { isPreview: true } );
+		if ( this.props.isDraft ) {
+			this.props.savePost( { isPreview: true } );
+		} else {
+			this.props.autosave( { isPreview: true } );
+		}
 
 		// Display a 'Generating preview' message in the Preview tab while we wait for the
 		// autosave to finish.
@@ -192,33 +195,30 @@ export default compose( [
 		const {
 			getCurrentPostId,
 			getCurrentPostAttribute,
-			getAutosaveAttribute,
 			getEditedPostAttribute,
 			isEditedPostSaveable,
 			isEditedPostAutosaveable,
+			getEditedPostPreviewLink,
 		} = select( 'core/editor' );
 		const {
 			getPostType,
 		} = select( 'core' );
 
-		let previewLink = getAutosaveAttribute( 'preview_link' );
-		const featuredImageId = getEditedPostAttribute( 'featured_media' );
-		if ( previewLink && featuredImageId ) {
-			previewLink = addQueryArgs( previewLink, { _thumbnail_id: featuredImageId } );
-		}
-
+		const previewLink = getEditedPostPreviewLink();
 		const postType = getPostType( getEditedPostAttribute( 'type' ) );
 		return {
 			postId: getCurrentPostId(),
 			currentPostLink: getCurrentPostAttribute( 'link' ),
-			previewLink: forcePreviewLink !== undefined ? forcePreviewLink : getAutosaveAttribute( 'preview_link' ),
+			previewLink: forcePreviewLink !== undefined ? forcePreviewLink : previewLink,
 			isSaveable: isEditedPostSaveable(),
 			isAutosaveable: forceIsAutosaveable || isEditedPostAutosaveable(),
 			isViewable: get( postType, [ 'viewable' ], false ),
+			isDraft: [ 'draft', 'auto-draft' ].indexOf( getEditedPostAttribute( 'status' ) ) !== -1,
 		};
 	} ),
 	withDispatch( ( dispatch ) => ( {
 		autosave: dispatch( 'core/editor' ).autosave,
+		savePost: dispatch( 'core/editor' ).savePost,
 	} ) ),
 	ifCondition( ( { isViewable } ) => isViewable ),
 ] )( PostPreviewButton );

packages/editor/src/store/reducer.js

@@ -22,6 +22,7 @@ import {
  */
 import { isReusableBlock } from '@wordpress/blocks';
 import { combineReducers } from '@wordpress/data';
+import { addQueryArgs } from '@wordpress/url';
 
 /**
  * Internal dependencies
@@ -1203,13 +1204,29 @@ export function autosave( state = null, action ) {
 				title,
 				excerpt,
 				content,
-				preview_link: post.preview_link,
 			};
+	}
+
+	return state;
+}
+
+/**
+ * Reducer returning the poost preview link
+ *
+ * @param  {string?} state  The preview link
+ * @param  {Object} action Dispatched action.
+ *
+ * @return {string?} Updated state.
+ */
+export function previewLink( state = null, action ) {
+	switch ( action.type ) {
+		case 'REQUEST_POST_UPDATE_SUCCESS':
+			return action.post.preview_link || addQueryArgs( action.post.link, { preview: true } );
 
 		case 'REQUEST_POST_UPDATE_START':
 			// Invalidate known preview link when autosave starts.
-			if ( state && action.options.isAutosave ) {
-				return omit( state, 'preview_link' );
+			if ( state && action.options.isPreview ) {
+				return null;
 			}
 			break;
 	}
@@ -1233,6 +1250,7 @@ export default optimist( combineReducers( {
 	reusableBlocks,
 	template,
 	autosave,
+	previewLink,
 	settings,
 	postSavingLock,
 } ) );

packages/editor/src/store/selectors.js

@@ -33,6 +33,7 @@ import {
 } from '@wordpress/blocks';
 import { isInTheFuture, getDate } from '@wordpress/date';
 import { removep } from '@wordpress/autop';
+import { addQueryArgs } from '@wordpress/url';
 
 /**
  * Dependencies
@@ -1532,6 +1533,23 @@ export function isPreviewingPost( state ) {
 	return isSavingPost( state ) && !! state.saving.options.isPreview;
 }
 
+/**
+ * Returns the post preview link
+ *
+ * @param {Object} state Global application state.
+ *
+ * @return {string?} Preview Link.
+ */
+export function getEditedPostPreviewLink( state ) {
+	const featuredImageId = getEditedPostAttribute( state, 'featured_media' );
+	const previewLink = state.previewLink;
+	if ( previewLink && featuredImageId ) {
+		return addQueryArgs( previewLink, { _thumbnail_id: featuredImageId } );
+	}
+
+	return previewLink;
+}
+
 /**
  * Returns a suggested post format for the current post, inferred only if there
  * is a single block within the post and it is of a type known to match a

packages/editor/src/store/test/reducer.js

@@ -2422,15 +2422,13 @@ describe( 'state', () => {
 						raw: 'The Excerpt',
 					},
 					status: 'draft',
-					preview_link: 'https://wordpress.org/?p=1&preview=true',
 				},
 			} );
 
 			expect( state ).toEqual( {
 				title: 'The Title',
 				content: 'The Content',
 				excerpt: 'The Excerpt',
-				preview_link: 'https://wordpress.org/?p=1&preview=true',
 			} );
 		} );
 	} );

test/e2e/specs/preview.test.js

@@ -71,7 +71,7 @@ describe( 'Preview', () => {
 			return window.location.search.match( /[\?&]post=(\d+)/ );
 		} ) ).jsonValue();
 
-		let expectedPreviewURL = getUrl( '', `?p=${ postId }&preview=true` );
+		const expectedPreviewURL = getUrl( '', `?p=${ postId }&preview=true` );
 		expect( previewPage.url() ).toBe( expectedPreviewURL );
 
 		// Title in preview should match input.
@@ -97,16 +97,6 @@ describe( 'Preview', () => {
 		// Preview for published post (no unsaved changes) directs to canonical URL for post.
 		await editorPage.bringToFront();
 		await publishPost();
-		// Wait until the publish panel is closed
-		await Promise.all( [
-			editorPage.waitForFunction( () => ! document.querySelector( '.editor-post-publish-panel' ) ),
-			editorPage.click( '.editor-post-publish-panel__header button' ),
-		] );
-		expectedPreviewURL = await editorPage.$eval( '.components-notice.is-success a', ( node ) => node.href );
-
-		await editorPage.bringToFront();
-		await waitForPreviewNavigation( previewPage );
-		expect( previewPage.url() ).toBe( expectedPreviewURL );
 
 		// Return to editor to change title.
 		await editorPage.bringToFront();