Title: Adding a new block
Author: Rohit Motwani
Published: June 20, 2019
Last modified: April 23, 2024

---

# Adding a new block

## In this article

 * [How to add blocks using the Block Inserter](https://wordpress.org/documentation/article/adding-a-new-block/?output_format=md#what-is-the-inserter)
    - [Using the Block inserter icon in the top toolbar](https://wordpress.org/documentation/article/adding-a-new-block/?output_format=md#using-the-block-inserter-icon-in-the-top-toolbar)
    - [Using the Block Inserter icon to the right of an empty block](https://wordpress.org/documentation/article/adding-a-new-block/?output_format=md#inserter-right-of-an-empty-block)
    - [Using the Block inserter icon in between blocks](https://wordpress.org/documentation/article/adding-a-new-block/?output_format=md#using-the-block-inserter-icon-in-between-blocks)
 * [How to add blocks using the slash command](https://wordpress.org/documentation/article/adding-a-new-block/?output_format=md#slash-command)
 * [How to add blocks using the More option on a block’s toolbar](https://wordpress.org/documentation/article/adding-a-new-block/?output_format=md#3-dot-more-options-menu-from-the-block-toolbar)
 * [How to add blocks within nested blocks](https://wordpress.org/documentation/article/adding-a-new-block/?output_format=md#how-to-add-blocks-within-nested-blocks)
 * [How to add blocks using the block directory](https://wordpress.org/documentation/article/adding-a-new-block/?output_format=md#how-to-add-blocks-using-the-block-directory)
 * [How to search for blocks](https://wordpress.org/documentation/article/adding-a-new-block/?output_format=md#searching-for-blocks)
 * [How to move blocks](https://wordpress.org/documentation/article/adding-a-new-block/?output_format=md#moving-blocks)

[ Back to top](https://wordpress.org/documentation/article/adding-a-new-block/?output_format=md#wp--skip-link--target)

[Go to the List of Blocks](https://wordpress.org/documentation/article/blocks/)

There are several ways to add a block to your post or page from the admin screen
of the [WordPress block editor](https://wordpress.org/documentation/article/wordpress-editor/)
when you are editing your post or page.

You can use the Block Inserter **+** icon to add a block. You can also use a shortcut
slash command to quickly add blocks or use the More options on any of the block’s
toolbar to add a block. You can also [move blocks](https://wordpress.org/documentation/article/moving-blocks/)
or search for a block in your post or page.

## 󠀁[How to add blocks using the Block Inserter](https://wordpress.org/documentation/article/adding-a-new-block/?output_format=md#what-is-the-inserter)󠁿

There are three ways to add a block using the **+** icon (also called the **Block
Inserter**).

 1. Block inserter icon in the top toolbar
 2. Block inserter icon to the right of an empty block
 3. Block inserter icon in between blocks

![Three ways to add a block using the block inserter icon](https://wordpress.org/
documentation/files/2019/06/inserting-block-options-1024x515.png)

### 󠀁[Using the Block inserter icon in the top toolbar](https://wordpress.org/documentation/article/adding-a-new-block/?output_format=md#using-the-block-inserter-icon-in-the-top-toolbar)󠁿

Click on the Block Inserter **+** icon in the top toolbar in the [WordPress block editor](https://wordpress.org/documentation/article/wordpress-editor/).

You can find a list of all the [blocks](https://wordpress.org/documentation/article/blocks/)
available in the [WordPress block editor](https://wordpress.org/documentation/article/wordpress-editor/).
The most frequently used blocks are listed at the top (based on your [Preference](https://wordpress.org/documentation/article/preferences-overview/#blocks)
settings). Hovering over each block will show you a brief description and preview
of the block.

You can scroll down the list to find blocks in categories, like Text, Media, Design,
Widgets, Layout, Theme, or Embeds, You also find third-party blocks from installed
plugins.

Once you find the block, drag and drop it into the block editor.

#### 󠀁[Adding Block Patterns using the top-toolbar inserter](https://wordpress.org/documentation/article/adding-a-new-block/?output_format=md#adding-block-patterns-using-the-top-toolbar-inserter)󠁿

[Block Patterns](https://wordpress.org/documentation/article/block-pattern/) are
a collection of predefined blocks that you can insert into pages and posts and then
customize with your own content. Using a Block Pattern is an easy way to create 
beautiful layouts that combine different blocks to produce professional designs.

You can open the Patterns tab to view collections of patterns within a specific 
category like **Featured**, **Call to Action**, **Pages**, and so on, or click the**
Explore** **all patterns** button at the bottom of that section to open the patterns
in a new, larger, window.

Click on any pattern once and it will be added to your page at the location of your
cursor.

#### 󠀁[Adding Media using the top-toolbar inserter](https://wordpress.org/documentation/article/adding-a-new-block/?output_format=md#adding-media-using-the-top-toolbar-inserter)󠁿

The media tab allows you to view and add to the page images you have used, additionally,
you can also view free media content from [Openverse](https://openverse.org/). You
can also open your media library using the button at the bottom of the tab.

![Opening the media tab to add media content to the site](https://wordpress.org/
documentation/files/2023/03/Screenshot-2023-03-28-at-16.56.21-878x1024.png)

#### 󠀁[Adding a synced pattern using the top-toolbar inserter](https://wordpress.org/documentation/article/adding-a-new-block/?output_format=md#adding-a-synced-pattern-using-the-top-toolbar-inserter)󠁿

if you have synced patterns, you will see Synced patterns tab in a form of an icon
as shown below.

![Reusable block tab on the inserter toolbar ](https://wordpress.org/documentation/
files/2019/06/resuable-block-1024x472.png)

When you click on the tab you should be able to view and add to the page all the
synced patterns you have on the site.

WordPress 6.3 renamed Reusable Blocks to Patterns. A synced pattern will behave 
in exactly the same way as a reusable block.

### 󠀁[Using the Block Inserter icon to the right of an empty block](https://wordpress.org/documentation/article/adding-a-new-block/?output_format=md#inserter-right-of-an-empty-block)󠁿

Click on the Block Inserter **+** icon to the right of an empty block. If the **
+** icon isn’t displayed first click on the placeholder text.

Clicking the Block Inserter **+** icon will open a modal window with a list of the
most frequently used [blocks](https://wordpress.org/documentation/article/blocks/)
you can also search for a block you would like to use. You can click on top of the
block to want to use.

You can also press the Enter/Return on your keyboard after selecting a block to 
create a new empty block, and click the + Block Inserter to the right of the empty
block.

Select a block from the list or click on the “Browse all” button to get a list of
all the [blocks](https://wordpress.org/documentation/article/blocks/) available 
in the [WordPress block editor](https://wordpress.org/documentation/article/wordpress-editor/).

![The block inserter modal window](https://wordpress.org/documentation/files/2019/
06/add-block.png)

When you pick the option to browse all, a larger window of the blocks available 
will opened.

![The top-toolbar inserter on the page editor](https://wordpress.org/documentation/
files/2019/06/browse-all-blocks-1024x589.png)

### 󠀁[Using the Block inserter icon in between blocks](https://wordpress.org/documentation/article/adding-a-new-block/?output_format=md#using-the-block-inserter-icon-in-between-blocks)󠁿

When you hover over the gap between two blocks, you will notice a horizontal blue
line appear with a **Block Inserter** **+** icon. You can click on this icon to 
open a modal window with a list of the most frequently used [blocks](https://wordpress.org/documentation/article/blocks/).

## 󠀁[How to add blocks using the slash command](https://wordpress.org/documentation/article/adding-a-new-block/?output_format=md#slash-command)󠁿

You can quickly add a block to your post or page using the slash command. This shortcut
will help with your writing flow with fewer interruptions searching for a block.

Begin by adding a new paragraph block by pressing Enter or Return on your keyboard.

Then hit the forward-slash (“/”) key followed by the block name. For example: `/
image` or `/heading`.

![Add a block using the slash command](https://wordpress.org/documentation/files/
2022/07/Screen-Shot-2022-07-20-at-2.14.23-PM.png)

Add a block using the slash command

## 󠀁[How to add blocks using the More option on a block’s toolbar](https://wordpress.org/documentation/article/adding-a-new-block/?output_format=md#3-dot-more-options-menu-from-the-block-toolbar)󠁿

Finally, on any selected block’s Block toolbar, click on the three-dot icon and 
choose “insert before” or “insert after” to add a new block before or after the 
selected block.

![Add a block using the More options in a block toolbar](https://wordpress.org/documentation/
files/2022/07/Screen-Shot-2022-07-20-at-2.35.21-PM.png)

Add a block using the More options in a block toolbar

## 󠀁[How to add blocks within nested blocks](https://wordpress.org/documentation/article/adding-a-new-block/?output_format=md#how-to-add-blocks-within-nested-blocks)󠁿

You can easily add blocks within blocks that allow nesting such as Group block, 
Row block, or Stack block.

Select the Group block, Row block, or Stack block. You will find the Block Inserter**
+** icon to the bottom right of the group of blocks. Click the Block Inserter **
+** icon to quickly add a new block to the nested group.

## 󠀁[How to add blocks using the block directory](https://wordpress.org/documentation/article/adding-a-new-block/?output_format=md#how-to-add-blocks-using-the-block-directory)󠁿

You can also discover and install third-party blocks from within the WordPress block
editor using the [WordPress block directory](https://wordpress.org/documentation/article/block-directory/).

To search the WordPress block directory, use the Block Inserter **+** icon on the
top toolbar in the WordPress block editor and search for available blocks.

WordPress first runs a search on the available blocks that come with WordPress. 
If it’s unable to find any block that meets the criteria, it starts searching the
block directory and gives you a list. Click on any from the list to install the 
third-party block.

The block directory search functionality is only available to WordPress users who
have permission to install plugins. If you add a third-party block from the block
directory, the corresponding WordPress plugin will be installed on your site.

## 󠀁[How to search for blocks](https://wordpress.org/documentation/article/adding-a-new-block/?output_format=md#searching-for-blocks)󠁿

When you click the Block Inserter **+** icon to insert a new block, you can use 
the **search box** at the top to search for blocks.

Type in a block name or a keyword for example, `"image"` or `"heading"`. Then a 
list of blocks that fit the search term will show up in the modal window. You can
also see a preview of the block below the list of blocks.

Select the desired block with the mouse click, tap, or arrow keys.

![Search for a block](https://wordpress.org/documentation/files/2019/06/search-block-
from-the-inserter-20220513.png)

Search for a block

When you use the [slash command](https://wordpress.org/documentation/article/adding-a-new-block/?output_format=md#slash-command)
to add a block, you get an auto-suggested list of blocks based on what you start
typing. You can select from the list or keep typing until you find the desired block.

## 󠀁[How to move blocks](https://wordpress.org/documentation/article/adding-a-new-block/?output_format=md#moving-blocks)󠁿

For information on how to move blocks, check out this article: [Moving blocks.](https://wordpress.org/documentation/article/moving-blocks/)

**Changelog**

 * 2024-04-23
    - Added missing ALT texts to a couple of images
 * 2023-03-28
    - Updated images and videos for 6.2
    - Added information about adding patterns, media and reusable blocks
 * 2022-08-07
    - Removed the Moving block section to a separate page.
 * 2022-07-20
    - Updated for 6.0 with content, videos, and screenshots
    - Added section for nested block and block directory
    - Added ALT tags for the images
 * 2020-06-04
    - Corrected several typos.
    - Changed Inserter right of an empty block to the left of an empty block.
    - Removed Inserter between blocks section
    - Improved slash command option
    - Changed date format in the changelog
 * 2019-12-21
    - Added summary paragraph on the top
    - Added a short video to demonstrate the search box of the inserter modal
    - Tightened up the language a bit.
 * 2019-12-20
    - Updated graphics with a 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? How could it be improved? 󠀁[Cancel reply](https://wordpress.org/documentation/article/adding-a-new-block/?output_format=md#respond)󠁿

[Log in to submit feedback](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fdocumentation%2Farticle%2Fadding-a-new-block%2F&locale=en_US).
If you need support with something that wasn't covered by this article, please post
your question in the [support forums](https://wordpress.org/support/forums/).

First published

June 20, 2019

Last updated

April 23, 2024