gutenberg-custom-preview-link.md

How to override gutenberg preview link

1. 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');
   

2. 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");
   

3. 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');   
   

4. 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 });
    });
   

5. Hide original preview link via css

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