Block Editor: Cmd+Shift+Minus to Toggle Block Outline List View

Block editor cmdshiftminus to toggle block outline list view image

Why limit yourself to default keyboard shortcuts in the Block Editor when you could add extra ones that you’ll probably never remember? (but for me this one’s better 👟 )

What it does…

Allows Mac users to press Cmd+Shift+Minus and see the Block Outline List View.

Why it does it…

There was a time when I found this really useful. Sometimes I’m doing a lot of repetitive work in the WordPress Block Editor, and will toggle this on. Yes, by default, WP offers Shift + Alt + O or ⌃ + ⌥ + O, but I like mine better. And the default is less comfy.

How it does it…

When the Block Editor loads, this adds a javascript that listens for keydown, then triggers a click of the open/close button. You might need to adjust the setTimeout delay if the script is firing before your Block Editor finishes loading.

Download JSON for importing into Code Snippets Pro
Download PHP for adding as a plugin or copying into functions.php

See the code…

<?php

// Block Editor: Cmd+Shift+Plus to Toggle Block Inserter
// https://snipsnip.pro/s/437
namespace jZrJd5rv;
function block_editor_toggle_inserter_shortcut(){
	if ( !function_exists( '\get_current_screen' ) ) { return false; }
	$screen = \get_current_screen();
	if ( method_exists( $screen, 'is_block_editor' ) && $screen->is_block_editor() ) {
?>
	<script>
    let jZrJd5rv = {};
	jZrJd5rv.domReady = cb => {
		"interactive" === document.readyState || 
		"complete" === document.readyState ? 
		cb() : document.addEventListener("DOMContentLoaded", cb)
	};
	jZrJd5rv.domReady(() => {
        setTimeout(()=>{
            document.addEventListener("keydown", function(e) {
                if (e.shiftKey && e.metaKey && e.keyCode === 189) {
                    e.preventDefault();
                    let el = document.querySelector('button[aria-label="List View"]');
                    el && el.click();
                }  
            });
			console.log('Block Editor: Cmd+Shift+Minus to Toggle Block Outline List View [SnipSnip.pro]');
        },6000);
	});
	</script>
<?php
	}
}
\add_action( 'admin_print_footer_scripts', '\jZrJd5rv\block_editor_toggle_inserter_shortcut' );