Topics
The image below shows you the full admin screen of the WordPress block editor for editing posts and pages.
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
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.
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.
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.
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.
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”.
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.
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.
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