From fcc6d377f3928fb6c931273651c8718ff081084f Mon Sep 17 00:00:00 2001 From: Joe Fusco Date: Wed, 13 Sep 2023 12:44:27 -0400 Subject: [PATCH] Fix Faust.js WordPress Plugin Preview (#1568) * Fix preview button Signed-off-by: Joe Fusco * Add changeset Signed-off-by: Joe Fusco * Build lockfile Signed-off-by: Joe Fusco --------- Signed-off-by: Joe Fusco --- .changeset/soft-cooks-peel.md | 5 + .../includes/replacement/callbacks.php | 11 +- .../includes/replacement/previewlinks.js | 105 ++++++++++-------- 3 files changed, 71 insertions(+), 50 deletions(-) create mode 100644 .changeset/soft-cooks-peel.md diff --git a/.changeset/soft-cooks-peel.md b/.changeset/soft-cooks-peel.md new file mode 100644 index 000000000..af337b22d --- /dev/null +++ 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 index 81bfeaaa0..82a271baa 100644 --- 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 index 23051a84e..ac48faf44 100644 --- 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 }); });