How to use the Gutenberg block editor in WordPress

STEP 1

Create a new post or page

Firstly, you’ll need to create a post or page. If you are unsure how to do this, see the following guides.

• How to add a new post in WordPress
• How to add a new page in WordPress

STEP 2
Enter your title

The first block on every new post or page in the title. The title will be the main heading or headline of your page.

To create a title, simply click on the text reading ‘Add title’ and start typing.

STEP 3
Add your first block

After you have added your title, click on the text box beneath, that reads ‘Start writing or type / to choose a block’.

By default the first block is always a paragraph, but should you wish to choose a differrent block, simply click on the + icon, in the top left hand corner of the editor.

Clicking this button will open the block browser, where you and browse or search for the type of block you want to use.

STEP 1
Using the block toolbar

When you add a new block, you can view its toolbar by clicking on it.

The options on the block toolbar will change depending on the type of block you are using.

When your block is a text paragraph, the toolbar options are classic text formatting tools such as text aligment, or formatting the text to be bold, italic or strikethrough.

Clicking on the paragraph icon gives you the option to make more formatting choices, such as converting your text into a heading, a list or a quote.

STEP 2
The toolbar menu

Regardless of the type of block you are using, the toolbar menu is located on the right hand side of the toolbar, and is represented by an icon with 3 dots.

The toolbar menu give you several options, including duplicating the block you are editing, inserting new blocks after or before the block you are editing, or deleting the block you are editing.

Additionally you can ‘Add to Reusable Blocks’, detailed below.

STEP 3
Using the block settings

Additionally when you click on a block, a range of settings appear in the right-hand menu. Again, these setting vary depending on which type of block you are editing.

When your block is a text paragraph, you can choose to toggle a drop cap for the first letter of your paragraph, as well as change the text’s size, colour, background colour. You can also choose to add custom classes to your block.

STEP 4
Rearranging your blocks

If you wish to change the order of your blocks, you can do so by clicking on the block you wish to move, and clicking on either the up or down arrow. You can also click and drag the block into position using the ‘grab’ handle, situated in-between the two arrows.

STEP 1
Save your block

If there is content that you use regulaly across multiple pages, you can save invidual blocks, that can quickly be added to any other page or post you choose.

After you have created the block you wish to save, click on the block, then click on the menu icon on the toolbar. Then choose ‘Add to Reusable Blocks’.

STEP 2
Name your reusable block

You then need to give your block a unique name. Once you have named your block, click the gray button labelled ‘Save’ to save your block.

STEP 3
Reusing your block

When you want to reuse your saved block, simply click on the + icon, in the top left hand corner of the editor to open the block browser.

Then scroll down the various block categories until you see a heading that reads ‘Reusable’ and click on it.

STEP 4
Choose your reusable block

Then simple click on your reusable block and it will be added to your post or page.

STEP 5
Managing your reusable blocks

To manage your reusable blocks, simply click on the option that reads ‘Manage All Reusable Blocks’.

STEP 6
Edit, delete or export your reusable blocks

This will bring up an interface, from which you can delete and edit your blocks, as well as export them so they can be used on other WordPress websites.

Add images, videos, buttons links and lots more

So thats a basic overview of how to use the Gutenberg block editor. For more information on using Gutenberg, see one of the follow guides.

• How to add images and image galleries in WordPress
• How to add links and buttons in WordPress
• How to embed video, audio and other media in WordPress
• How to create custom layouts in WordPress
• How to convert your older posts to Gutenberg blocks