The basic unit for adding content in the new WordPress Gutenberg editor is a block. To be more accurate, the block contains the content that you are adding. We will show you how to add a block, move a block, and identify the different blocks that you can add when working with the Gutenberg editor.
Keep in mind that the current release of the Gutenberg editor is still considered a beta version. WordPress recommends not using Gutenberg for a live site. Always create a current backup when making changes to your site so that you can recover your web site if needed.
How to use a Block
Using blocks in the Gutenberg editor involves adding a block, moving a block and then identifying the blocks that you will use when adding content to your page or post.
Adding a Block
The following video shows how you add a block:
The basic steps involved in adding block are:
- Log in to the WordPress Administrator Dashboard
- Open an existing page/post or Add a new page/post
- A new Page or Post begins with a title. If you don’t want a title at the top, then simply leave the field blank. Type in a title if you wish to use one.
- If you wish to Add a block, then hover over the bottom center of the block above where you want to add one. You will see the circled plus sign appear (as shown in the animated gif above). If you are at the end of your existing content you will also see the symbol for adding a block under the last block at the left end. There is also an option add a block in the toolbar at the top of the screen.
- When you click on the circled plus sign to add a block, you will see a pop-up window appear. The blocks that you can add are separated into three areas:
Select the block that you wish to use. Based on the block you have selected a dialog window may appear so that you can add or format your content.
- Once you have completed adding your content, click on Update or Publish in the top right corner to save your changes.
How to Move a Block
After you have added content, you may need to re-arrange the order of the blocks. Follow the steps below in order to move a block.
- Click on the block that you wish to move
- Hover over the arrows to the left of the block
- Click on the up or down arrow depending on you want to move the block.
- Once you have the block in the preferred position, then click on Publish or Update in the top right-hand corner to save your changes.
Identifying the Blocks
There are many different blocks that you can use when adding content to your post or page. Click on the image to the left in order to see the graphic for each block that is available to you. Widgets and Embeds are detailed in the separate associated articles linked at the end of this article. We list them all in the table below:
These are the common block types that are currently available within the Gutenberg editor. Note that all of the blocks include a field to input additional CSS classes so that you add custom formatting to that block as needed. There is also the option to add Widgets and Embeds when adding blocks. For further information please see Adding Widgets in Gutenberg or Using Embeds in Gutenberg. You should now have a good grasp of how to use a block in the Gutenberg editor.