Fix draft previews (#37952)

* Fix for #33616: Draft posts not previewable

- Fixes issue with draft post not previwable if the draft was previously published.
- During preview link creation, check if current post is in draft status.

* test: Add E2E test for issue #33616
- Add end to end test for issue #33616: Draft post not previewable if the draft was previously published.

* test: Update End to End test

- Include a link to the issue that the test validates.
- Use aria-label instead of css class as a selector for Title field.
- Update test title to be more descriptive about the case under test.

* docs: Add brief comment to provide context

* docs: Remove link to PR

* docs: Add link to PR

packages/e2e-tests/specs/editor/various/preview.test.js

@@ -204,7 +204,7 @@ describe( 'Preview', () => {
 	it( 'should not revert title during a preview right after a save draft', async () => {
 		const editorPage = page;
 
-		// Type aaaaa in the title filed.
+		// Type aaaaa in the title field.
 		await editorPage.type( '.editor-post-title__input', 'aaaaa' );
 		await editorPage.keyboard.press( 'Tab' );
 
@@ -248,6 +248,71 @@ describe( 'Preview', () => {
 
 		await previewPage.close();
 	} );
+
+	// Verify correct preview. See: https://github.com/WordPress/gutenberg/issues/33616
+	it( 'should display the correct preview when switching between published and draft statuses', async () => {
+		const editorPage = page;
+
+		// Type Lorem in the title field.
+		await editorPage.type( '[aria-label="Add title"]', 'Lorem' );
+
+		// Open the preview page.
+		const previewPage = await openPreviewPage( editorPage );
+		await previewPage.waitForSelector( '.entry-title' );
+
+		// Title in preview should match input.
+		let previewTitle = await previewPage.$eval(
+			'.entry-title',
+			( node ) => node.textContent
+		);
+		expect( previewTitle ).toBe( 'Lorem' );
+
+		// Return to editor and publish post.
+		await editorPage.bringToFront();
+		await publishPost();
+
+		// Close the panel.
+		await page.waitForSelector( '.editor-post-publish-panel' );
+		await page.click( '.editor-post-publish-panel__header button' );
+
+		// Change the title and preview again.
+		await editorPage.type( '[aria-label="Add title"]', ' Ipsum' );
+		await editorPage.keyboard.press( 'Tab' );
+		await waitForPreviewDropdownOpen( editorPage );
+		await waitForPreviewNavigation( previewPage );
+
+		// Title in preview should match updated input.
+		previewTitle = await previewPage.$eval(
+			'.entry-title',
+			( node ) => node.textContent
+		);
+
+		expect( previewTitle ).toBe( 'Lorem Ipsum' );
+
+		// Return to editor and switch to Draft.
+		await editorPage.bringToFront();
+		await editorPage.waitForSelector( '.editor-post-switch-to-draft' );
+		await editorPage.click( '.editor-post-switch-to-draft' );
+		await page.keyboard.press( 'Enter' );
+
+		// Change the title.
+		await editorPage.type( '[aria-label="Add title"]', 'Draft ' );
+		await editorPage.keyboard.press( 'Tab' );
+
+		// Open the preview page.
+		await waitForPreviewDropdownOpen( editorPage );
+		await waitForPreviewNavigation( previewPage );
+
+		// Title in preview should match updated input.
+		previewTitle = await previewPage.$eval(
+			'.entry-title',
+			( node ) => node.textContent
+		);
+
+		expect( previewTitle ).toBe( 'Draft Lorem Ipsum' );
+
+		await previewPage.close();
+	} );
 } );
 
 describe( 'Preview with Custom Fields enabled', () => {

packages/editor/src/store/selectors.js

@@ -839,7 +839,12 @@ export function getEditedPostPreviewLink( state ) {
 	}
 
 	let previewLink = getAutosaveAttribute( state, 'preview_link' );
-	if ( ! previewLink ) {
+	// Fix for issue: https://github.com/WordPress/gutenberg/issues/33616
+	// If the post is draft, ignore the preview link from the autosave record,
+	// because the preview could be a stale autosave if the post was switched from
+	// published to draft.
+	// See: https://github.com/WordPress/gutenberg/pull/37952
+	if ( ! previewLink || 'draft' === getCurrentPost( state ).status ) {
 		previewLink = getEditedPostAttribute( state, 'link' );
 		if ( previewLink ) {
 			previewLink = addQueryArgs( previewLink, { preview: true } );