Adding a new block

Written by

April 8, 2021

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

The block editor

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? #What is the Inserter?

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 #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 #Inserter ⊕ right of an empty block

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

Top ↑

Inserter ⊕ from the Top Toolbar #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 #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.

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 #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.

The ellipsis menu expanded above a block

Top ↑

Moving Blocks #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.

Moving blocks

View our templates

View our massive template libary!
Start your website off with a confidence.

Hosting

Learn about our hosting and why litespeed WordPress servers live up to the name!

Customizing

Find out why DIvi gives you full control to modify and update the website as you wish, with no code!

Troubleshooting

Contact our team and we dignoise your website problems and bugs. Fix, patch and explain the issue to you.

Search Based on Categories?

Over 100 Articles & 12 Online courses Still Can’t Find What You’re Looking For?
Have a look at our Online Courses!

Wordpress

WordPress is a free and open-source content management system written in PHP and paired with a MySQL or MariaDB database. Features include a plugin architecture and a template system, referred to within WordPress as Themes.

DIVI

WordPress is a free and open-source content management system written in PHP and paired with a MySQL or MariaDB database. Features include a plugin architecture and a template system, referred to within WordPress as Themes.

Learn Dash

The online course platform created by e-learning experts. With LearnDash you have complete control when selling your online courses. Choose the pricing model, up-sell offerings, reminder notifications, and watch your sales soar!

Documents

Over 100 Articles & 60 Video Tutorials. Still Can’t Find What You’re Looking For?

Scrapy advanced

Advanced tutorial on using the scrapy framework for business applications

The Why and How of SEO

The world of search engine optimization is complex and ever-changing, but you can easily understand the basics, and even a small amount of knowledge can make a big difference.

Join Today