Custom preview_post_link not working for draft post

I encountered the same issue and after some research, I came across the following solution.

For context, there is a bug on gutenberg and there is no platform specific way to change the preview link yet.

Add the following code to your functions.php:

// Workaround script until there's an official solution for https://github.com/WordPress/gutenberg/issues/13998
function fix_preview_link_on_draft() {
    echo '<script type="text/javascript">
        jQuery(document).ready(function () {
            const checkPreviewInterval = setInterval(checkPreview, 1000);
            function checkPreview() {
                const editorPreviewButton = jQuery(".editor-post-preview");
                const editorPostSaveDraft = jQuery(".editor-post-save-draft");
                if (editorPostSaveDraft.length && editorPreviewButton.length && editorPreviewButton.attr("href") !== "' . get_preview_post_link() . '" ) {
                    editorPreviewButton.attr("href", "' . get_preview_post_link() . '");
                    editorPreviewButton.off();
                    editorPreviewButton.click(false);
                    editorPreviewButton.on("click", function() {
                        editorPostSaveDraft.click();
                        setTimeout(function() { 
                            const win = window.open("' . get_preview_post_link() . '", "_blank");
                            if (win) {
                                win.focus();
                            }
                        }, 1000);
                    });
                }
            }
        });
    </script>';
}

add_action('admin_footer', 'fix_preview_link_on_draft');

Link to solution: https://github.com/WordPress/gutenberg/issues/13998#issuecomment-568698680

All credit to the contributor – Tvanro