fix: preview mode bugs with preview on unpublished posts

website/src/components/PreviewModeBar.js

@@ -4,13 +4,10 @@ import { useState, useEffect } from 'react';
 import { BsInfoCircle } from 'react-icons/bs';
 import styles from './PreviewModeBar.module.scss';
 
-const WORDPRESS_EDIT_URL =
-  process.env.WORDPRESS_EDIT_URL ||
-  `${WORDPRESS_URL}/wp-admin/post.php?action=edit`;
-
 export default function PreviewModeBar({
   postId,
   position = 'bottom',
+  isRevision,
 }) {
   const [redirect, setRedirect] = useState('/api/exit-preview');
   let positionClassName = styles['top'];
@@ -19,6 +16,8 @@ export default function PreviewModeBar({
     positionClassName = styles['bottom'];
   }
 
+  // postId is either a string or a number. If string, that means the post is not published yet, and we get a URI like: `?page_id=3&preview=true&revision_id=58`
+
   useEffect(() => {
     if (typeof location !== 'undefined') {
       setRedirect(
@@ -38,17 +37,21 @@ export default function PreviewModeBar({
               <BsInfoCircle />
             </span>
             You are viewing this site in Preview Mode
+            <span className="d-inline-block ps-1 pe-1">|</span>
             {postId && (
               <>
-                &nbsp;&nbsp;|&nbsp;&nbsp;
                 <a
-                  href={`${WORDPRESS_EDIT_URL}&post=${postId}`}
+                  href={
+                    isRevision
+                      ? `${WORDPRESS_URL}/wp-admin/revision.php?revision=${postId}`
+                      : `${WORDPRESS_URL}/wp-admin/post.php?action=edit&post=${postId}`
+                  }
                   target="_blank"
                   rel="noreferrer"
                 >
                   Edit
                 </a>
-                &nbsp;&nbsp;|&nbsp;&nbsp;
+                <span className="d-inline-block ps-1 pe-1">|</span>
               </>
             )}
             <a href={redirect}>Exit</a>

website/src/components/layouts/LayoutDefault.js

@@ -10,6 +10,7 @@ export default function LayoutDefault({
   image,
   seo,
   postId,
+  isRevision,
   preview,
 }) {
   return (
@@ -20,7 +21,9 @@ export default function LayoutDefault({
         image={image}
         seo={seo}
       />
-      {preview && <PreviewModeBar postId={postId} />}
+      {preview && (
+        <PreviewModeBar postId={postId} isRevision={isRevision} />
+      )}
       <Header />
       {children}
       <Footer />

website/src/lib/wordpress/graphql/queryContent.js

@@ -4,7 +4,7 @@ import { flexWysiwygContent } from './flexWysiwygContent';
 import pageOptions from './fragmentPageOptions';
 import seo from './fragmentSeo';
 
-export function queryContent(preview) {
+export function queryContent(draft) {
   const query = /* GraphQL */ `
     query GetContent($slug: ID!, $preview: Boolean) {
       contentNode(id: $slug, idType: URI, asPreview: $preview) {
@@ -66,12 +66,12 @@ export function queryContent(preview) {
         ... on Page {
           isFrontPage
           content
-          ${preview ? '' : seo}
+          ${draft ? '' : seo}
           ${pageOptions}
         }
         ... on Post {
           content
-          ${preview ? '' : seo}
+          ${draft ? '' : seo}
           ${pageOptions}
         }
       }

website/src/lib/wordpress/index.js

@@ -30,7 +30,6 @@ async function fetchAPI(query, { variables } = {}, token) {
     console.error(JSON.stringify(json.errors, null, 2));
     throw new Error('Failed to fetch API');
   }
-  // console.log("graphql results", JSON.stringify(json.data, null, 2));
   return json.data;
 }
 
@@ -135,6 +134,7 @@ export async function getAllContentWithSlug(contentType) {
  * Get fields for single page regardless of post type.
  */
 export async function getContent(slug, preview, previewData) {
+  let draft = false;
   if (preview) {
     // Get the content types to help build preview URLs
     const contentTypesArray = await getContentTypes(
@@ -158,6 +158,7 @@ export async function getContent(slug, preview, previewData) {
 
     // wordpress requires a different slug structure for various post types
     if (slug !== '/' && !isNaN(Number(lastSegment))) {
+      draft = true;
       if (postType === 'post') {
         slug = `/?p=${lastSegment}`;
       } else if (secondLastSegment) {
@@ -170,7 +171,7 @@ export async function getContent(slug, preview, previewData) {
     }
   }
 
-  let query = queryContent();
+  let query = queryContent(draft);
 
   const data = await fetchAPI(
     query,
@@ -200,9 +201,6 @@ export async function getPosts({
 }) {
   let query = queryPosts(taxonomyType, taxonomyTerms);
 
-  console.log('queryPosts', typeof query, query);
-
-  // console.log('query', query);
   const data = await fetchAPI(query, {
     variables: {
       contentTypes,
@@ -216,7 +214,6 @@ export async function getPosts({
       taxonomyTerms,
     },
   });
-  // console.log('data', JSON.stringify(data, null, 2));
 
   return data;
 }

website/src/pages/[[...slug]].js

@@ -46,6 +46,7 @@ export default function Page({
           preview={preview}
           seo={post?.seo}
           postId={post?.databaseId}
+          isRevision={post?.isPreview}
           title={post?.title}
         >
           <Flex sections={flexSections} />
@@ -58,6 +59,7 @@ export default function Page({
     <GlobalsProvider globals={globals}>
       <LayoutDefault
         postId={post?.databaseId}
+        isRevision={post?.isPreview}
         seo={post?.seo}
         preview={preview}
         title={post?.title}

website/src/pages/api/graphcdn.js

@@ -47,12 +47,14 @@ export default async function handler(req, res) {
   try {
     const response = await purgeAllPosts();
 
+    // eslint-disable-next-line no-console
     console.log('CDN data', response.data);
 
     if (!response.data._purgeAll) {
       throw 'CDN Failure';
     }
 
+    // eslint-disable-next-line no-console
     console.log('Purge Success');
 
     return res.status(200).end('Purge Success');

website/src/pages/api/preview.js

@@ -40,7 +40,7 @@ export default async function preview(req, res) {
 
   // Fetch WordPress to check if the provided `id` exists
   const post = await getPreviewContent(
-    id,
+    preview_id || id,
     'DATABASE_ID',
     accessToken,
   );

website/src/pages/posts/[[...slug]].js

@@ -14,6 +14,7 @@ function PostsSinglePage({ post, globals, preview }) {
         title={post?.title}
         preview={preview}
         postId={post?.databaseId}
+        isRevision={post?.isPreview}
       >
         <div className="container">
           <div className="row">
@@ -122,6 +123,7 @@ export async function getStaticProps(context) {
       revalidate: 60,
     };
   } catch (error) {
+    // eslint-disable-next-line no-console
     console.log(error);
   }
 

wordpress/wp-content/themes/headless/functions.php

@@ -28,18 +28,22 @@
   define('WP_HOST', 'localhost');
   $headless_domain = $local_domain;
 } else if ( function_exists('is_wpe') ) {
+  $preview_domain = get_theme_mod('headless_preview_url');
+
   if ( strpos($_SERVER['HTTP_HOST'], $staging_wp_host) !== false ) {
     define('WP_HOST', 'staging');
-    $preview_domain = get_theme_mod('headless_preview_url');
-
     if ($preview_domain) {
       $headless_domain = rtrim($preview_domain, '/');
     } else {
       $headless_domain = $staging_headless_domain;
     }
   } else {
     define('WP_HOST', 'production');
-    $headless_domain = $production_headless_domain;
+    if ($preview_domain) {
+      $headless_domain = rtrim($preview_domain, '/');
+    } else {
+      $headless_domain = $production_headless_domain;
+    }
   }
 }