Introduction

Welcome to the WordPress Block Editor Tutorial Series!

This tutorial will cover many different concepts and topics when it comes to using the WordPress Block Editor. However, the tutorial will primarily focus on using the block editor in conjunction with a keyboard and screen reader.

Topics and Concepts that will be covered:

  • What are Blocks in WordPress
  • Comments on editor accessibility
  • Tools used for tutorial
  • Frequently used keyboard shortcuts
  • Inserting, Deleting and Changing Layout of Blocks
  • Document View versus Block View
  • Inserting and Deleting Hyperlinks

What Are Blocks In WordPress?

Blocks are the components for adding content in the new WordPress editor. They are used to transform a single document into a collection of discrete elements, each of which has an explicit, easy-to-change structure. Block structure and settings are separate from the settings for the entire document, and block settings and document settings have their own distinct parts within the editor’s user interface.

Comments on editor accessibility

Although there may be additional keystrokes available, this document provides enough to get you started.

As we find more keystrokes and test with them, we will of course keep editing and updating this document, so please stay tuned for future revisions.

The keystrokes we have documented here were not easy to find. Most are not documented within the editor, and there is no link to any outside documentation to find further information. We made an educated guess that “richedit” implied that the new WordPress editor is supposed to be something like Microsoft’s WordPad. We looked up the keystrokes for that editor, tested them with the new WordPress editor, and our educated guess turned out to be correct.

We went with Wordpad and not Microsoft Word because while Wordpad is a richedit application in the technical sense, Microsoft Word is not. Furthermore, it is an unattainable goal if the new WordPress editor lives in the browser. Not all the Wordpad keystrokes work, so we have documented the ones that do.

Individuals using assistive technology that depend strictly on keyboards or keyboard simulation will need to experiment to understand fully what is available to them.

Tools used for tutorial

  • WordPress 6.8using the twentytwentyfive (2025) theme
  • Browsers: Mozilla Firefox, Google Chrome and Microsoft Edge; all browsers kept up to date.
  • Screen readers: JAWS 2025, NVDA 2024 and Microsoft Narrator (Windows 11)

Frequently used keyboard shortcuts

Notes:

  • If a shortcut requires two or more keys at the same time, the keys are separated by a plus sign (+).
  • The shortcuts in this article refer to the U.S. keyboard layout. Keys for other layouts might not correspond exactly to the keys on a U.S. keyboard.

Editing Shortcuts

ActionKey StrokeContext
CutCtrl+XBlocks & Text
CopyCtrl+CBlocks & Text
PasteCtrl+VBlocks & Text
Make selected text BoldCTRL + Btext only
Make selected text underlineCTRL + Utext only
Make selected text italicsCTRL + Itext only
Undo last editCTRL + ZBlocks & text
Insert a hyperlinkCtrl+KText Only
Remove a hyperlinkCTRL + Shift + KText Only
CancelEscBlocks & Text

Move around in a document/block editor using the keyboard

ActionKey StrokeContext
One character to the leftLeft ArrowBlocks & Text
One character to the rightRight ArrowBlocks & Text
One word to the leftCtrl+Left ArrowBlocks & Text
One word to the rightCtrl+Right ArrowBlocks & Text
Up one-lineUp ArrowBlocks & Text
Down one-lineDown ArrowBlocks & Text
To the end of a lineEndText only
To the beginning of a lineHomeText only

Edit and move text and graphics

</table

Delete text and graphics

ActionKey StrokeContext
Extend a selection one character to the rightShift+Right ArrowBlocks & Text
Extend a selection one character to the leftShift+Left ArrowBlocks & Text
Extend a selection to the end of a wordCtrl+Shift+Right ArrowBlocks & Text
Extend a selection to the beginning of a wordCtrl+Shift+Left ArrowBlocks & Text
Extend a selection to the end of a lineShift+EndText only
Extend a selection to the beginning of a lineShift+HomeText only
Extend a selection one line downShift+Down ArrowText only
Extend a selection one line upShift+Up ArrowText only
ActionKey StrokeContext
Delete one character to the leftBackspaceText only
Delete one word to the leftCtrl+BackspaceText only
Delete one character to the rightDeletetext only
Delete one word to the rightCtrl+Deletetext only

Specific key strokes for the block editor

ActionKey Stroke
Switch between Visual editor and text editorAlt + CTRL + Shift + M
Select a block typeuse the slash (/) key
Show the block editing menu barAlt + F10
Hide or show the settings barCTRL + Shift + comma (,)
Select all text in a blockCTRL + A
Select all blocksCTRL + A twice quicly
Open the block navigation menuAlt + Shift + O
Toggle the full screen modeAlt + CTRL + Shift + F
Duplicate a blockCTRL + Shift + D
Remove multiple selected blocksbackspace or delete
Insert block beforeAlt + CTRL + T
Move block up one positionAlt + CTRL + Shift + T
Insert block afterAlt + CTRL + Y
Move block down one positionAlt + CTRL + Shift + Y
Remove blockAlt + Shift + Z
Navigate to the previous part of the editorAlt + Shift + P or CTRL + Shift + `
Navigate to the next part of the editorAlt + Shift + N or CTRL + `

Inserting, Deleting and Changing Layout of Blocks

Inserting a new block

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

From the block’s 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. If using a screen reader, you will need to invoke forms or edit mode before you start typing or use the slash key.

If you are editing an existing page or post that already has blocks in the content area, you can add a block either before or after a selected block in the hierarchy. To add a block before the selected block press CTRL + Alt + T and to add a block after the selected block press CTRL + Alt + Y. Screen reader users will need to be in forms or edit mode.

You can also duplicate a block by pressing CTRL + Shift + D. This is useful if you have a block already formatted and want to duplicate this block along with its information in another location in your pages or posts.

Copying a block uses the standard Windows keystroke of CTRL + C, which is useful for when your block is setup and formatted and you wish to share between other pages or posts. You can also move a block by using CTRL + X.

Choosing a block

With focus on the block place holder, press the slash (/) key to choose a block. You will more than likely see a list of approximately 8 to 9 items in this list that is presented. This list is either the most commonly or most recently used blocks chosen. Please note that screen reader users will need to be in forms or edit mode.

Use your up and down arrow keys to navigate this list until you get to the item you desire 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 are focused on the block, make sure you are in forms or edit mode and then press Alt + F10 to bring up the block editing toolbar.

Use your right and left arrow keys to navigate this toolbar. As you press the right arrow keys, the first two (2) options on this toolbar are 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.

You can also use the keystroke of Alt + CTRL + Shift + T to move your block up one position in the hierarchy, as well as press the Alt + CTRL + Shift + Y to move your block down one position in the hierarchy.

Deleting a block

To delete a block, make sure that your focus is on the block you wish to delete, and in forms or edit mode and then press the keystroke Alt + Shift + Z. Your block will be deleted.

There is a second option for you to explore in deleting a block. Press Alt + F10 to bring up the toolbar, then use the right arrow to move to the “More options button” and press either the spacebar or enter key to drop down a list of items, then down arrow to the option for “remove/delete block” and press the enter key on this item and the block will be deleted.

Furthermore, you can press CTRL + A twice to select all the blocks in the content area and press either the backspace or the delete key to get rid of all the blocks in the content area. You want to use caution when using this method, as it may not give you the result that you are looking for.

Document View versus Block View

For the sake of this tutorial, we will refer to editor or view, as each has the word block involved and we will attempt to untangle the confusing terminology.

Do not confuse the editing views with the editors themselves. You can switch between the two (2) editors with a simple keystroke which is Alt + CTRL + Shift + M. The block editor is also called the “visual editor” and the text/HTML editor. These editors along with the blocks are the primary focus of this tutorial.

Document view

After inserting your block of choice to work with, you will have the add block toolbar still available. Just after this toolbar, is two (2) buttons that is used to switch between the views.

The document view is used for configuring certain elements about your page or post prior to publication, such as the following:

  • Status and visibility
  • Permalink
  • Categories
  • Tags
  • Featured image
  • Excerpt
  • Discussion
  • Post attributes

It is recommended that you consider the above items before you publish to make sure everything is in place to work properly on your web site.

Explore these attributes on your own as it is beyond the scope of this tutorial currently to write up these options. However, this does not mean that a future revision of this tutorial may not have these attributes documented.

Block view

The block view is different for each block that you insert into your content area, so to keep this simple we will use the paragraph block to explain the configuration options available. Each block will be documented separately along with its configuration options in block view in more detail when the document for each block is introduced and published.

For the paragraph options you will have the following at the time of this writing:

  • Topography – for setting the font size
  • Color Settings – for setting text color
  • Text Settings – choose either drop cap or large initial letter
  • Advanced Settings – insert a hyperlink or modify the CSS for your choice of style

For other formatting options for the paragraph block, look at the tutorial specific to working with the paragraph block which will have much more detail.

Inserting and Deleting Hyperlinks

This tutorial is going to assume that you have a list block created with three (3) list items.

For example, my list looks like the following:

  • Visit John
  • Call John
  • Email John

Since this list is now established, let us turn the text of the list into useable hyperlinks.

First select the list block, and if you are using a screen reader turn on your forms or edit mode. Use your navigation keys to move to the first part of the text and using text selection keystrokes, select “Visit John.” Tip: be sure to only select the text, because if you accidentally select the blank at the end of the first item, the first two (2) items in the list are both incorporated into a single link.

Once your text is selected, then press the keystroke of CTRL + K and the insert link dialog appears prompting for a URL. Type the following in this field: https://www.customerservant.com and then you should hear that one (1) option has been found. Tab to the submit button and then press your spacebar or enter key. You should hear a message stating that a link has been inserted.

That is how to insert a hyperlink using the http or https protocol, but what if you wish to use another protocol to insert a hyperlink?

Let us select the second list item text remembering to only select the text and not the blank character at the end of the line. When you have this selection made, then press the keystroke of CTRL + K and in the edit field type tel://8005551212 and you should hear that one (1) item has been found. Tab to the submit button and press either your spacebar or the enter key. You should hear a message that the link has been inserted.

For the last list item, again select the text to become a link being careful not to get the blank character at the end of the line. Press the keystroke of CTRL + K and then type mailto:john@jcarson.wtf into the edit field and you should hear a message stating one (1) item has been found. Tab to the submit button and either press your spacebar or the enter key and you should hear a message stating that the link has been inserted.

It is now time to test your links to make sure they do what you intended to do.

Note: We used three (3) examples to show how to insert hyperlinks using different protocols just so you do not have to experiment to figure out these procedures.

Deleting or Removing a hyperlink

Deleting or removing a hyperlink is just as easy as inserting one, just select the text that is already a hyperlink using the cautions already mentioned in this tutorial and press the keystroke of CTRL + Shift + K and you should hear a message indicating that the hyperlink has now been removed.

What blocks can you insert and delete hyperlinks?

This list will eventually evolve with continuing revisions, however, so far, we have found that inserting and deleting hyperlinks works with the following blocks used in this tutorial.

  • Paragraph
  • Heading
  • Lists
I spoke to my client last night, and #Gutenberg interview is happening. He’s really excited about it and we’ll record next week.
Longer than 280 chars so you’ll need to click, but I’m speaking with my #Gutenberg-using blind client this evening, and I’m going to ask if I can interview him. There’s been a ton of real accessibility progress on it and as someone who’s levelled some of the harshest criticism against it I’d also like to help move things forward by giving credit where it’s due and helping other people migrate now that it’s possible.
I’m writing these shorter posts as well because one of my professional goals for this year is to start writing more tutorials and case studies, and I need to exercise my writing muscles, and the best way for me to do that is, well, just write, even if it’s short content for the time being.
I’m in the process of importing a ton of old bookmarks from Pocket into customerservant.com. The bookmarks section as well as the reads section has proven to be not only a really easy way for me to find things again, but also a great place to store resources others can use and to which I can tie related resources. It turns out that these are the most frequently updated portions of the site, so I need to do more to highlight them.