Quick #Gutenberg tutorial: Heading Blocks with a keyboard

Introduction

This is the first in a series of tutorials on using WordPress’s block editor with a keyboard. We’re assuming that you’re using a screen reader as well, but we’ve also tried to include keyboard navigation tips for times when a screen reader is not present.

Inserrting a new block

When starting a new page or post, a dialog appears welcoming you to the block editor. Move to the “close this dialog button” and press either spacebar or enter to dismiss this welcome dialog.

From the blocks toolbar choose to add a new block, by either pressing the spacebar or enter key on the appropriate button. A place holder for a new block is inserted into the content area which prompts the user to start typing or press the slash (/) key to choose a block type.

Choosing the heading block

With focus on the block place holder, press the slash (/) key to choose a block. A list appears with 81 items in which to choose the option you need. The number of items in this list may change, however, at the time this was being documented only 81 items were available in WordPress 5.5.1.

Use your up and down arrow keys to navigate this list until you get to the heading item and then press the enter key. Do not attempt to use first letter navigation in this list as it does not work, only the arrow keys.

Changing your block layout

As you continue to compose your page or post, the blocks are enumerated 1 of 10, 2 of 10, and so on.

To move your block up or down in the hierarchy, first make sure you’re focused on the block and then press Alt + F10 to bring up the block editing menu.

Use your right and left arrow keys to navigate this menu. As you press the right arrow keys, the first two (2) options on this menu bar is the buttons to move either up or down one (1) block at a time. Choose the appropriate button, and press the spacebar or enter key to maneuver the block into the position of the hierarchy you desire.

Choosing your heading level

By default when a heading block is inserted into the content area it is automatically designated . as a heading level two (2) element.

To change the heading level, first make sure to be focused on the block and press Alt + F10 to bring up the menu bar, and right arrow to the button for heading level.

Press your spacebar on this button. A list of buttons appears for each heading level, to navigate this list, however, you will need to use the left and right arrow keys to choose the heading level you desire.

Once you have the heading level, press either your spacebar or enter key to confirm your choice.

Inserting text into the heading block

To insert text into the heading block, just simply start typing if you have your focus on this block. Screen reader users will need to make sure that their screen reader of choice is in either forms mode or editing mode.

Editing text in the heading block

Editing text in the heading block can be a little tricky at first with a keyboard, however, it can be done with practice.

Make sure you have the heading block focused, then use your arrow keys to navigate to the text you wish to edit. Use your keyboard commands for selecting text and make your modification.