Add a keyboard shortcut to preview a WordPress post in a new tab

I use post previews constantly. There's a reason I wrote code to move my drafts and scheduled posts to the top of the posts list! Imagine my disappointment, then, when I didn't see any keyboard shortcuts within Gutenberg to open a post preview in a new tab.

Well, as I'm a big fan of userscripts, here's one you can add that will override the usual (and useless in this case) print dialog you see when hitting Cmd/Ctrl-P with a new preview tab instead.

// ==UserScript==
// @name        Gutenberg Preview Shortcut
// @namespace   Violentmonkey Scripts
// @match       https://*/wp-admin/post.php*
// @grant       none
// @version     1.0
// @author      chairmanbrando
// @description Why would you ever print an editor screen? Let's make that keyboard shortcut open a preview tab instead!
// ==/UserScript==

document.body.addEventListener('keydown', (e) => {
  if (e.metaKey || e.ctrlKey) { // Cmd || Ctrl
    if (e.key.toLowerCase() === 'p') {
      e.preventDefault();
      window.open(wp.data.select('core/editor').getEditedPostPreviewLink(), '_blank');
    }
  }
});

So long as you've interacted with the page in some way before hitting Cmd/Ctrl-P, this "should" open a new tab with your desired preview. If you haven't interacted with the page yet, you'll probably get one of those "pop-up blocked" notifications from your browser.

Updated

A small nibbling at the back of my mind said this post wasn't done. After all, I know no one uses Firefox despite it being in their best interests and that Chrome has disabled many useful extensions like Violentmonkey because they no longer (or can't) adhere to their requirements. You can force some to continue to work by clicking a few buttons, but who knows how long that'll be the case.

The point, then, is that presenting folks only with a userscript to accomplish a given task isn't ideal. Thus, here's a little WP plugin that accomplishes the same thing. It's naturally less convenient, needing to be installed on each site you want this keyboard shortcut, but at least it doesn't require anyone to switch browsers.

<?php

/**
 * Plugin Name: Gutenberg Preview Shortcut
 * Description: Why would you ever print an editor screen? Let's make that keyboard shortcut open a preview tab instead!
 * Version:     1.0.0
 * Author:      chairmanbrando
 * Author URI:  https://chairmanbrando.github.io/
 * Update URI:  false
 */

if (! defined('ABSPATH')) exit;

/**
 * While in the Gutenberg editor, hit Cmd/Ctrl-P to open a preview tab.
 */
add_action('admin_footer', function () {
    if (in_array($GLOBALS['pagenow'], ['post.php', 'post-new.php'], true)) : ?>
        <script>
            document.body.addEventListener('keydown', (e) => {
                if (e.metaKey || e.ctrlKey) { // Cmd || Ctrl
                    if (e.key.toLowerCase() === 'p') {
                        e.preventDefault();
                        window.open(wp.data.select('core/editor').getEditedPostPreviewLink(), '_blank');
                    }
                }
            });
        </script>
    <?php endif;
});

You should still switch to Firefox, though, for personal use if nothing else. A giant advertising company creating a web browser and then kneecapping extensions' ability to filter out ads should be considered a massive conflict of interest and an illegal monopolistic move, but there's no one big enough to contest Google and its bullshit.