Fix Faust.js WordPress Plugin Preview (#1568)

* Fix preview button Signed-off-by: Joe Fusco <[email protected]> * Add changeset Signed-off-by: Joe Fusco <[email protected]> * Build lockfile Signed-off-by: Joe Fusco <[email protected]> --------- Signed-off-by: Joe Fusco <[email protected]>
wpengine · Sep 13, 2023 · fcc6d37 · fcc6d37 · headless-platform-by-wp-engine · Sep 13, 2023
1 parent deb5767
commit fcc6d37
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 50 deletions.
diff --git a/.changeset/soft-cooks-peel.md b/.changeset/soft-cooks-peel.md
@@ -0,0 +1,5 @@
+---
+'@faustwp/wordpress-plugin': patch
+---
+
+Fixed a bug in the block editor screen where the preview link was missing the `p` and `previewPathName` query arguments after saving a draft.
diff --git a/plugins/faustwp/includes/replacement/callbacks.php b/plugins/faustwp/includes/replacement/callbacks.php
@@ -233,8 +233,15 @@ function term_link( $term_link ) {
  * XXX: Please remove this once this issue is resolved: https://github.com/WordPress/gutenberg/issues/13998
  */
 function enqueue_preview_scripts() {
-	wp_enqueue_script( 'faustwp-gutenberg-filters', plugins_url( '/previewlinks.js', __FILE__ ), array( 'jquery' ), plugin_version(), true );
-	wp_localize_script( 'faustwp-gutenberg-filters', '_faustwp_preview_link', array( '_preview_link' => get_preview_post_link() ) );
+	wp_enqueue_script( 'faustwp-gutenberg-filters', plugins_url( '/previewlinks.js', __FILE__ ), array(), plugin_version(), true );
+	wp_localize_script(
+		'faustwp-gutenberg-filters',
+		'_faustwp_preview_data',
+		array(
+			'_preview_link' => get_preview_post_link(),
+			'_wp_version'   => get_bloginfo( 'version' ),
+		)
+	);
 }
 
 add_filter( 'wp_sitemaps_posts_entry', __NAMESPACE__ . '\\sitemaps_posts_entry' );

diff --git a/plugins/faustwp/includes/replacement/previewlinks.js b/plugins/faustwp/includes/replacement/previewlinks.js
@@ -2,54 +2,63 @@
  * XXX: Please remove this once this issue is resolved: https://github.com/WordPress/gutenberg/issues/13998
  */
 
-window.addEventListener('DOMContentLoaded', function () {
-  jQuery(document).ready(function () {
-    // Get the correct preview link via wp_localize_script
-    const previewLink = window._faustwp_preview_link
-      ? window._faustwp_preview_link._preview_link
-      : undefined;
-
-    /**
-     * Check to make sure there is a preview link before continuing, as there may not be a preview link
-     * for every instance the block editor is enqueued (e.g. /wp-admin/widgets.php)
-     */
-    if (!previewLink) {
-      return;
+document.addEventListener('DOMContentLoaded', function() {
+  // Get the preview data via wp_localize_script
+  const faustPreviewData = window._faustwp_preview_data;
+
+  /**
+   * Check to make sure there is a preview link before continuing, as there may not be a preview link
+   * for every instance the block editor is enqueued (e.g. /wp-admin/widgets.php)
+   */
+  if (!faustPreviewData) {
+    return;
+  }
+
+  const wpVersion = faustPreviewData._wp_version;
+  const faustPreviewLink = faustPreviewData._preview_link;
+
+  function debounce(func, wait) {
+    let timeout;
+    return function() {
+      const context = this;
+      const args = arguments;
+      clearTimeout(timeout);
+      timeout = setTimeout(function() {
+        func.apply(context, args);
+      }, wait);
+    };
+  }
+
+  // Handle potential breaking changes from WordPress.
+  function getPreviewLinksByVersion(version) {
+    switch (version) {
+      default:
+        return {
+          headerLink: document.querySelector('.edit-post-header-preview__grouping-external a'),
+          snackbarLink: document.querySelector('.components-snackbar__content a'),
+        };
+    }
+  }
+
+  function updateUIElements() {
+    const { headerLink, snackbarLink } = getPreviewLinksByVersion(wpVersion);
+
+    // Clone & replace the original link in order to clear pre-existing events.
+    if (headerLink && headerLink.getAttribute('href') !== faustPreviewLink) {
+      const clonedHeaderLink = headerLink.cloneNode(true);
+      headerLink.parentNode.replaceChild(clonedHeaderLink, headerLink);
+      if (clonedHeaderLink) clonedHeaderLink.setAttribute('href', faustPreviewLink);
     }
 
-    const intervalId = setInterval(function () {
-      const previewButton = jQuery(
-        'button[class~="block-editor-post-preview__button-toggle"]',
-      );
-
-      if (!previewButton.length) {
-        return;
-      }
-
-      clearInterval(intervalId);
-      previewButton.first().one('click', function () {
-        setTimeout(function () {
-          const links = jQuery('a[target*="wp-preview"]');
-
-          if (!links.length) {
-            return;
-          }
-
-          links.each((i, link) => {
-            link.href = previewLink;
-
-            var copy = link.cloneNode(true);
-            copy.addEventListener('click', function () {
-              previewButton[0].click();
-
-              wp.data.dispatch('core/editor').autosave();
-            });
-
-            link.parentElement.insertBefore(copy, link);
-            link.style.display = 'none';
-          });
-        }, 100);
-      });
-    }, 100);
-  });
+    if (snackbarLink && snackbarLink.getAttribute('href') !== faustPreviewLink) {
+      snackbarLink.setAttribute('href', faustPreviewLink);
+    }
+  }
+
+  // Run the update function on initial page load.
+  const debouncedUpdateUIElements = debounce(updateUIElements, 300);
+
+  // Observe DOM changes to update UI elements accordingly.
+  const observer = new MutationObserver(debouncedUpdateUIElements);
+  observer.observe(document.body, { childList: true, subtree: true });
 });