Adding a new block

You are here:

The image below shows you the full admin screen of the WordPress block editor for editing posts and pages.

blank

You can add blocks from the top icon bar or from the empty block underneath the post title section, when you start a new page or post.

But there is more! You’ll find different ways to add blocks to your document in this article. First read about the inserter and its search functionality and then you learn the various ways to add blocks and also how to move blocks around your document.

What is the Inserter? blank

When ever you see the ⊕ you can click on it and get a list of blocks, in a little modal window. On top you see the ‘Most Used’ blocks. You can scroll down and open up other categories, like Layout, or Common, or Widgets, and find more blocks. In the inserter window you also find 3rd party blocks from installed plugins.

There are multiple ways to add a block, search and choose the block type you need.

  • Inserter ⊕ right of an empty block
  • Inserter ⊕ in the Top Tool Bar
  • Inserter ⊕ in the center between blocks
  • Slash command in an empty paragraph block
  • 3-dots ( More options) Menu on Block Toolbar

See below for specific screenshots to identify the “Inserter” location

Top

Searching for Blocks 

From the inserter you can use the search box to search blocks by typing the beginning of a block name or a keyword for example, "image" or "heading", then a list of blocks that fit the search will show. Select the desired block with the mouse click, tap or arrow keys. When using the Slash command, you also get auto-suggested search result when you start typing.

Top

Inserter ⊕ right of an empty block 

Click on the Inserter icon ( Add block tooltip ) to search for a block to insert.

blank

Top

Inserter ⊕ from the Top Toolbar 

Another way to add a block is by clicking on the Inserter icon ⊕ at the top left of the editor. (Top Toolbar)

The Inserter from the Top Toolbar also shows additional information per block and you can see a small preview of the block.

Top

Slash command 

Using the slash command invokes the Block Inserter including its search, so you don’t need to interrupt your writing flow to hunt for your mouse to add a quote or a list via the keyboard.

Begin by adding a new paragraph; normally achieved by pressing Enter one or more times.

blank
An empty paragraph block

Then hit the “/” key and start typing the name of the block.

  • “/l” gives you the List block as a choice. Selecting it and typing your first list item is really cool.
  • Type “/i” + for a list that includes the Image block.
  • Type more letters to filter the list of blocks. e.g. “/image”.

Demo of how you can add a new block with the “slash” command in a new line.

Top

3-dot (More options) menu from the Block Toolbar 

Finally, you can click on the three dots just above a selected block (called the Block Toolbar) and choose to add a block above or below the current block.

blank

Top ↑

Moving Blocks 

Move handles

The up and down arrow icons on the left side of the block can be used to move a block up and down in your document.

Drag & Drop

You can drag blocks by clicking and holding the six-dot-grid near the top-left corner of each block. Notice the blue bars indicating where the block will be placed. Release the mouse button when you find the place to which to move the block.

blank

Changelog

  • 2020-06-04
    • Corrected several typos.
    • Change Inserter right of an empty block to left of an empty block.
    • Removed Inserter between blocks section
    • Improved slash command option
    • Changed date format in changelog
  • 2019-12-21
    • Added summary paragraph on the top
    • Add short video to demonstrate the search box of the inserter modal
    • Tightened up the language a bit.
  • 2019-12-20
    • Updated graphics with newer interface (WP 5.3)
    • Added videos for demo purposes
    • Updated headings for better readability,
    • Added text about Inserter, and Move handles
Was this article helpful?
Dislike 0
Views: 11