How to override gutenberg preview link

Override preview link in functions.php

 function custom_preview_post_link($link, $_post = null) {
     global $post;    
 
     $post = $_post ? $_post : $post;
 
     if($post->post_type == 'revision') {
         $original = get_post($post->post_parent);
     } else {
         $original = $post;
     }
     
     $id = $original->ID;
     $nonce = wp_create_nonce( 'wp_rest' );
     $params = '?id=' . $id . '&wpnonce='. $nonce. '&preview=true';
 
     switch ($original->post_type) {
         case 'services': 
             $slug = $original->post_name ? $original->post_name : 'preview';
             $template = get_page_template_slug($original);
 
             if($template == 'template-main-service-page.php') {
                 $link = '/services/' . $slug . $params;
             }elseif($template == 'template-sub-service-page.php') {
                 $link = '/services/preview/' . $slug . $params;
             }else {
                 $link = '/services' . $params;
             }
         break;
         default:
             $link = '/preview' . $params;
         break;
     }
 
     return $link;
 }

 add_filter('preview_post_link', 'custom_preview_post_link');

Create a URL to retrieve preview link via AJAX. Add this code to functions.php

 function my_get_preview_url() {
     $post_id = $_REQUEST["post_id"];
     $post = get_post($post_id);

     $preview_link = get_preview_post_link($post);

     echo json_encode([
         'preview_url' => custom_preview_post_link($preview_link, $post),
         'post_id' => $post_id,
     ]);
     wp_die();
 }

 add_action("wp_ajax_my_get_preview_url", "my_get_preview_url");

Load JavaScript file on post and page edit pages. Add this to functions.php

 function my_gutenberg_admin_scripts($hook) {
     if (in_array($hook, ['post.php', 'post-new.php'])) {

         global $post;

         // Register the script.
         wp_register_script('my_gutenberg_lib', get_template_directory_uri() . '/js/gutenberg.js', [], 1.1, TRUE);

         // Localize the script with new data.
         $data = [
         'postId' => $post->ID,
         'previewLink' => get_preview_post_link(),
         'ajaxUrl' => admin_url('admin-ajax.php'),
         ];
         wp_localize_script('my_gutenberg_lib', 'data', $data);

         // Enqueued script with localized data.
         wp_enqueue_script('my_gutenberg_lib');
     }
 }

 add_action('admin_enqueue_scripts', 'my_gutenberg_admin_scripts');

Create gutenberg.js in your js directory with the following code

 // Fix preview link on gutenberg draft
 jQuery(() => {
 window.previewLink = data.previewLink;

 const getPreviewLink = () => {
     return new Promise((resolve, reject) => {
     jQuery
         .ajax({
         type: "POST",
         url: data.ajaxUrl,
         data: { action: "my_get_preview_url", post_id: data.postId },
         dataType: "json",
         })
         .done((response) => {
             resolve(response);
         })
         .fail((jqXHR, textStatus) => {
             reject([jqXHR, textStatus]);
         });
     });
 };

 const observePopoverSlot = (node) => {
     const slotObserver = new MutationObserver((mutationList, observer) => {
         for (const { addedNodes } of mutationList) {
             for (const node of addedNodes) {
                 if (!node.tagName) continue; // not an element

                 let link = node.querySelector(
                     "a.edit-post-header-preview__button-external"
                 );

                 if (link) {
                     console.log(link);
                     const a = link.cloneNode(true);
                     a.href = window.previewLink;
                     a.classList.add("custom");

                     link.after(a);
                     // the 'link' is hidden via css in _post-type-services.scss file

                     jQuery(a).on("click", (event) => {
                         if (wp.data.select("core/editor").isEditedPostDirty()) {
                             event.preventDefault();
                             event.stopPropagation();

                             wp.data
                             .dispatch("core/editor")
                             .savePost({ isPreview: true })
                             .then(() => {
                                 getPreviewLink().then((response) => {
                                 window.previewLink = response.preview_url;

                                 window.open(
                                     response.preview_url,
                                     event.currentTarget.target
                                 );
                                 });
                             });
                         }
                     });
                 }
             }
         }
     });

     slotObserver.observe(node, { childList: true, subtree: true });
 };

 const editorObserver = new MutationObserver((mutationList, observer) => {
     let found = false;

     for (const { addedNodes } of mutationList) {
         for (const node of addedNodes) {
             if (!node.tagName) continue; // not an element

             let slot = node.querySelector(".popover-slot");
             if (slot) {
                 observePopoverSlot(node);
                 found = true;
                 break;
             }
         }

         if (found) {
             observer.disconnect();
             break;
         }
     }
 });

 const editor = document.querySelector("#editor");
 editorObserver.observe(editor, { childList: true });
 });

Hide original preview link via css

 #editor .popover-slot a.edit-post-header-preview__button-external:not(.custom) {
     display: none;
 }

avblink/gutenberg-custom-preview-link.md

How to override gutenberg preview link