Gutenberg Tutorial: How to Remove a Block (3 Ways)

Gutenberg blocks are the essential components for building content in WordPress. And while WordPress provides plenty of blocks out-of-the-box, you can also install many 3rd party plugins that give you even more blocks to play with.

In this short tutorial, I will show you how to remove a block in three ways.

1. Gutenberg Blocks – Show Them to Me
2. How to Remove a Block in Gutenberg
   1. The Context Menu
   2. Delete/Backspace Key
   3. Keyboard Shortcut
3. Bonus! Remove Multiple Blocks at Once

Gutenberg Blocks – Show Them to Me

When you start creating a new page or post in WordPress, the Gutenberg Editor view looks like this:

In this tutorial, our focus is on the plus icon. So go ahead, click on the Block Inserter (the plus icon) on the top left, and look what you’ll see next:

Blocks. Those are Gutenberg blocks – all of them at your disposal. Please note that the screenshot shows only a partial list of available elements.

All you have to do is to hover your mouse pointer over any given block and click it to see it on the design canvas. You can also drag and drop the block to the post/page area.

That’s how you start building your content, by adding the elements you want, one by one. But at some point, you realize you added a block you don’t want. So how do you remove it?

That’s what we are going to explore next.

How to Remove a Block in Gutenberg

Removing a block is easy, and you have three ways to do it. Figure out which one of these ways is your favorite.

The Context Menu

The most common way to remove a block is to use the context menu in Gutenberg. It’s also the most robust way, as you can see later in this post.

1. Activate the block by clicking on it. Then, locate the menu on top of it. In this example, I’m using the Code block.

2. Click on the three dots on the right:

3. On the opening menu, at the bottom, find the Remove Code and click it.

4. The block is now gone.

Please note that the menu item text varies based on which element you are about to remove. For example, if you were about to delete a Table block, it would have said: Remove Table.

Delete/Backspace Key

I prefer using a keyboard as much as possible when I work with the Gutenberg editor. Why? Because it helps me to do things faster than by clicking away with my mouse.

To delete a block with a keyboard, let me show you an example with the Info Box block (which ships with the free Spectra blocks).

1. Activate the element by clicking on it so its borders become blue.

2. Click the Backspace/Delete key on your keyboard.

3. You have just removed the block.

But here is the catch: Not all the Gutenberg blocks are created equal.

For instance, when I tried removing the Heading block with my keyboard, pressing the Backspace/Delete key didn’t remove the element. Instead, it deleted the content inside the component.

After struggling with this behavior, I gave up and removed the block using the context menu.

Keyboard Shortcut

Another way to remove a block with your keyboard is to use a shortcut. The process is almost the same as when using the Backspace/Delete key.

1. Activate the block by clicking on it. You should now see the blue rectangle around it.

2. On your keyboard, press: Alt + Shift + Z (Windows) or Control + Option + Z (Mac).

3. Goodbye, block!

Of course, using three keys instead of just hitting Backspace/Delete may seem an overkill – and it is. But just letting you know that the keyboard shortcut exists.

Bonus! Remove Multiple Blocks at Once

You can even remove multiple blocks simultaneously. To do this, take the following steps:

1. Activate the first block. Then press down the Shift key and click on the other block. Both components are now active, and they have turned blue:

2. Click on the context menu (three dots) and select Remove blocks:

3. You can also hit the Backspace/Delete key to remove a block. Naturally, the keyboard shortcuts work too.