Using WordPress Gutenberg With Only Keyboard Shortcuts

For the past few days, because of a shoulder issue, I’ve decided to use my keyboard as much as possible. Solutions like Vimium for browsing web pages are great, but the real challenge is WordPress. I spend so much time creating and editing posts, designing blocks, and rearranging elements, that if my strategy was to work, I had to find a way to use the WordPress Gutenberg editor with a keyboard wherever I could.

And here’s what I’ve learned.

Block Navigation Using the Arrow Keys

Whenever someone asks for Gutenberg keyboard shortcuts, they’ll tell you about the editing shortcuts like Ctrl + B for strong text, or Ctrl + I for italics. But everyone already knows this. The real challenge is navigating between blocks. For a wall of text, this isn’t too hard, but when you have images and complex containers like the ones I use with GenerateBlocks, the challenge is finding a way to navigate these.

The answer is the surprising “Escape” key. This is the way to transfer focus from a paragraph to the block itself as shown here:

Once the block is selected, you can use the arrow keys to navigate between them. Pressing the “Enter” key on a paragraph will then drop you into the editing mode, and you can continue as before. As proof that this works, I’m typing this entire post right now using just the keyboard. No hands!

Table Navigation Remains Janky

I use a fair number of tables in my posts. And while Gutenberg allows navigating between cells using the arrow keys, it doesn’t always work well. Granted, I’m using Firefox, and this might cause issues, but often the content scrolls out of view when the cursor moves into the next cell. Hopefully, this improves in the future!

View the Word Count with a Shortcut

WordPress Gutenberg allows you to navigate between panels using the “Shift + Alt + N” and “Shift + Alt + P” shortcuts. But while these shortcuts bring the focus to the respective panels, there’s no documentation on how to click the elements inside it. Fortunately, with a bit of experimentation, I found that using the “Tab” key, I can focus on the elements inside the panel, and then use the arrow keys to navigate to the “Details” exclamation mark and use the Enter key to open the panel with the word count.

However, this is extremely inconvenient. You need to spend far more time navigating with the keys than you would have just using a mouse. I realize this might be worth it for a lot of people, but the extra time spent isn’t worth it for me.

Using Vimium for Navigating Inside Gutenberg

I initially started by disabling the Vimium extension for WordPress editing pages, because I didn’t want to accidentally erase something. However, I changed my mind because of the cumbersome process of selecting elements. With the Vimium extension enabled, I can press “F”, and get a list of shortcuts for each clickable element on the page – including the “Word Count” like this:

You can download both Chrome as well as Firefox Vimium extensions. The Vimium project is open-source on GitHub and is one of the most useful extensions for browsing. It’s quite a mature product and has undergone sufficient development to be stable, and the bugs have all been ironed out.

As I mentioned earlier, this entire post has been written using the keyboard, with the exception of using the mouse to select the images I needed to upload – and of course, to crop and edit the images themselves. While you’re inside a WordPress paragraph block, use the regular editor shortcuts. Then press “Esc” whenever you need to click something else, and use the Vimium shortcut keys for the rest. It works like a charm and is far superior to the inbuilt WordPress editor shortcuts. I can’t recommend it enough for those looking to move away from the mouse!