Previews: Use WordPress-generated preview links

assets/src/dashboard/app/serializers/stories.js

@@ -34,6 +34,7 @@ export default function reshapeStoryObject(editStoryURL) {
       modified,
       modified_gmt,
       link,
+      preview_link: previewLink,
       story_data: storyData,
       _embedded: { author = [] } = {},
     } = originalStoryData;
@@ -63,6 +64,7 @@ export default function reshapeStoryObject(editStoryURL) {
       centerTargetAction: '',
       bottomTargetAction: `${editStoryURL}&post=${id}`,
       editStoryLink: `${editStoryURL}&post=${id}`,
+      previewLink,
       link,
       originalStoryData,
     };

assets/src/dashboard/components/popoverMenu/story-menu-generator.js

@@ -24,7 +24,7 @@ export const generateStoryMenu = ({ menuItems, story }) =>
     if (menuItem.value === STORY_CONTEXT_MENU_ACTIONS.OPEN_IN_EDITOR) {
       return { ...menuItem, url: story.bottomTargetAction, newTab: false };
     } else if (menuItem.value === STORY_CONTEXT_MENU_ACTIONS.OPEN_STORY_LINK) {
-      return { ...menuItem, url: story.link, newTab: true };
+      return { ...menuItem, url: story.previewLink, newTab: true };
     }
     return menuItem;
   });

assets/src/edit-story/app/story/actions/useSaveStory.js

@@ -78,6 +78,7 @@ function useSaveStory({ storyId, pages, story, updateStory }) {
           const properties = {
             ...objectPick(post, ['status', 'slug', 'link']),
             featuredMediaUrl: post.featured_media_url,
+            previewLink: post.preview_link,
           };
           updateStory({ properties });
 

assets/src/edit-story/app/story/effects/useLoadStory.js

@@ -53,6 +53,7 @@ function useLoadStory({ storyId, shouldLoad, restore, isDemo }) {
           permalink_template: permalinkTemplate,
           style_presets: stylePresets,
           password,
+          preview_link: previewLink,
           _embedded: embedded = {},
         } = post;
 
@@ -129,6 +130,7 @@ function useLoadStory({ storyId, shouldLoad, restore, isDemo }) {
           permalinkConfig,
           publisherLogoUrl,
           password,
+          previewLink,
           stylePresets,
           autoAdvance: storyData?.autoAdvance,
           defaultPageDuration: storyData?.defaultPageDuration,

assets/src/edit-story/components/header/buttons/preview.js

@@ -27,29 +27,27 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import { addQueryArgs } from '../../../../design-system';
 import { trackEvent } from '../../../../tracking';
-import { useStory, useLocalMedia, useConfig } from '../../../app';
+import { useStory, useLocalMedia } from '../../../app';
 import { Outline } from '../../button';
 import escapeHTML from '../../../utils/escapeHTML';
 import PreviewErrorDialog from '../previewErrorDialog';
 
 const PREVIEW_TARGET = 'story-preview';
 
 function Preview() {
-  const { isSaving, link, status, autoSave, saveStory } = useStory(
+  const { isSaving, previewLink, status, autoSave, saveStory } = useStory(
     ({
       state: {
         meta: { isSaving },
-        story: { link, status },
+        story: { status, previewLink },
       },
       actions: { autoSave, saveStory },
-    }) => ({ isSaving, link, status, autoSave, saveStory })
+    }) => ({ isSaving, status, previewLink, autoSave, saveStory })
   );
   const { isUploading } = useLocalMedia((state) => ({
     isUploading: state.state.isUploading,
   }));
-  const { previewLink: autoSaveLink } = useConfig();
 
   const [previewLinkToOpenViaDialog, setPreviewLinkToOpenViaDialog] = useState(
     null
@@ -62,11 +60,6 @@ function Preview() {
   const openPreviewLink = useCallback(() => {
     trackEvent('preview_story', 'editor');
 
-    // Display the actual link in case of a draft.
-    const previewLink = isDraft
-      ? addQueryArgs(link, { preview: 'true' })
-      : autoSaveLink;
-
     // Start a about:blank popup with waiting message until we complete
     // the saving operation. That way we will not bust the popup timeout.
     let popup;
@@ -112,7 +105,7 @@ function Preview() {
         }
       })
       .catch(() => setPreviewLinkToOpenViaDialog(previewLink));
-  }, [autoSave, autoSaveLink, isDraft, link, saveStory]);
+  }, [autoSave, isDraft, previewLink, saveStory]);
 
   const openPreviewLinkSync = useCallback(
     (evt) => {

includes/REST_API/Stories_Controller.php

@@ -86,6 +86,28 @@ public function prepare_item_for_response( $post, $request ) {
 			$data['style_presets'] = is_array( $style_presets ) ? $style_presets : self::EMPTY_STYLE_PRESETS;
 		}
 
+		if ( in_array( 'preview_link', $fields, true ) ) {
+			// Based on https://github.com/WordPress/wordpress-develop/blob/8153c8ba020c4aec0b9d94243cd39c689a0730f7/src/wp-admin/includes/post.php#L1445-L1457
+			if ( 'draft' === $post->post_status || empty( $post->post_name ) ) {
+				$view_link = get_preview_post_link( $post );
+			} else {
+				if ( 'publish' === $post->post_status ) {
+					$view_link = get_permalink( $post );
+				} else {
+					if ( ! function_exists( 'get_sample_permalink' ) ) {
+						require_once ABSPATH . 'wp-admin/includes/post.php';
+					}
+
+					list ( $permalink ) = get_sample_permalink( $post->ID, $post->post_title, '' );
+
+					// Allow non-published (private, future) to be viewed at a pretty permalink, in case $post->post_name is set.
+					$view_link = str_replace( [ '%pagename%', '%postname%' ], $post->post_name, $permalink );
+				}
+			}
+
+			$data['preview_link'] = $view_link;
+		}
+
 		$data  = $this->filter_response_by_context( $data, $context );
 		$links = $response->get_links();
 
@@ -173,6 +195,14 @@ public function get_item_schema() {
 			'context'     => [ 'view', 'edit' ],
 		];
 
+		$schema['properties']['preview_link'] = [
+			'description' => __( 'Preview Link.', 'web-stories' ),
+			'type'        => 'string',
+			'context'     => [ 'edit' ],
+			'format'      => 'uri',
+			'default'     => '',
+		];
+
 		$schema['properties']['status']['enum'][] = 'auto-draft';
 
 		$this->schema = $schema;

includes/Story_Post_Type.php

@@ -517,12 +517,6 @@ public function get_editor_settings() {
 			$max_upload_size = 0;
 		}
 
-		$preview_query_args = [
-			'preview_id'    => $story_id,
-			// Leveraging the default WP post preview logic.
-			'preview_nonce' => wp_create_nonce( 'post_preview_' . $story_id ),
-		];
-
 		$is_demo = ( isset( $_GET['web-stories-demo'] ) && (bool) $_GET['web-stories-demo'] ); // phpcs:ignore WordPress.Security.NonceVerification.Recommended
 
 		$settings = [
@@ -535,7 +529,6 @@ public function get_editor_settings() {
 				'allowedFileTypes' => $this->get_allowed_file_types(),
 				'postType'         => self::POST_TYPE_SLUG,
 				'storyId'          => $story_id,
-				'previewLink'      => get_preview_post_link( $story_id, $preview_query_args ),
 				'assetsURL'        => trailingslashit( WEBSTORIES_ASSETS_URL ),
 				'cdnURL'           => trailingslashit( WEBSTORIES_CDN_URL ),
 				'maxUpload'        => $max_upload_size,