Your first 5 minutes with the new block editor

 

---

This is important! Please read carefully!

/ use the forward slash

Access commonly used blocks by typing a forward slash as the first character in the block editor.

---

This list learns your favourite blocks

WordPress watches which blocks you use the most and adds those blocks to the common blocks panel.

For instance, you might use the button block regularly. If you do, button will be added to the common blocks. Now you will see button as one of the options, when you type a forward slash as the first character in the new block editor.

Many more blocks are available

How do I access the many other blocks that are available?

Move your cursor to the left of the new block pane and click the plus icon.

Scroll through the options and drill down to find the block you need

Each individual block has it’s own toolbar and settings

When you select a block, a toolbar appears above that specific block. This toolbar shows the tools you can use to edit that specific block. Only a few blocks have a full width option. So, for instance, if the selected block does not have a width option, you won’t see a width option button.

More options are available in the post editor sidebar

You find the block settings in three places

1. Above the selected block
2. In the post editor sidebar’s block tab
3. In the post editor’s document tab

Don’t forget!

There are two tabs in the sidebar. Toggle between the document tab and the block tab to see both settings.

1. Click the arrows to expand each setting.

The plus icon and column layouts

The plus icon…

…is used in two different ways

• To add a new block
• To select the type of block used in a row or column

The plus icon in a column based layout

1. Plus icon above a row adds a new block on it’s own row.
2. Plus icon to the left opens a dialogue that enables you to select the type of block to use. It does not add a new block.
3. In column based layouts you will see a plus icon to the right. This opens the block selection dialogue that enables you to select the type of block to use. It does not add a new block.

And remember, the easiest way to select common blocks is to type a / forward slash as the first character in the dialogue box. This opens a list of commonly used blocks for you to choose from.

Learn these basics first

Make sure you master these basic skills before moving on to more advanced block editing.

The new block editor is very powerful. Theme authors and plugin authors are already adding beautiful looking, ready made blocks to their themes and plugins.

All kinds of blocks are already available via plugins. For instance Atomic Blocks plugin includes a great looking call-out box block and a very useful post grid block.

Once you’ve mastered the basics of how blocks work, dealing with individual blocks is much easier.

Next Tutorial