WordPress Block Editor – Content Area

This tutorial is part of our series WordPress Gutenberg: The Ultimate Guide For Non-Technical WordPress Users.

***

The WordPress block content editor interface is divided into three main sections:

1. Editing Toolbar
2. Content Area (you are here)
3. Settings Section

In this tutorial, you will learn how to use the Content Area section of the WordPress block editor to add content to your posts and pages.

For a complete understanding of how to use the WordPress block editor, see the other tutorials in this series:

• How To Use WordPress Blocks
• How To Use The WordPress Block Editing Toolbar
• How To Use The WordPress Block Editor Settings Section

***

WordPress Block Editor: Post/Page Content Area

In the WordPress block editor, you add content to your posts and pages in the Content Area.

The Content Area is the same for WordPress Posts…

And WordPress Pages…

In fact, the only difference between the content editor of a Post and a Page are the features found in the Settings section.

If you need help understanding the main differences between WordPress Posts and Pages (and when to use which type), see this tutorial: WordPress Posts vs WordPress Pages Explained

Creating Content In WordPress With Blocks

With the WordPress block editor (Gutenberg), all content is added to your posts and pages using blocks.

This tutorial provides a brief overview of working with blocks. For a comprehensive tutorial on using Blocks and links to in-depth tutorials on using specific blocks with the WordPress content editor, go here: WordPress Content Editor – How To Use Blocks

Working With Blocks

Everything you create for your post or page in the content area is done using blocks.

When you create a new post or page in WordPress, your Content Area will be empty, except for the page or post title area (‘Add title’) and a block placeholder (”Start writing or type / to choose a block).

The Title area is a required block in any new post or page you create.

Click inside the title area field and type or paste in your Post or Page title.

If you would like to start creating a new post or page by adding content other than text (e.g. an image or a quote), then begin by selecting a different block from the Add Block tool (also called the Block Inserter tool).

You can search for a block in the Add Block/Block Inserter tool by scrolling through the list or type a forward slash (/) followed by the name of the block to bring up a list of specific blocks with that name.

If you begin a new post or page by typing in text into the ‘placeholder’ field, WordPress will automatically convert the area into a Paragraph Block.

Hit the ‘Enter’ key inside a Paragraph Block to create a new Paragraph Block.

You can change anything and everything at any time in the Content Area of your posts or pages.

You can:

• Add new blocks (before or after existing blocks).
• Change existing blocks into other block types.
• Edit the content inside blocks.
• Reorder blocks.
• Group blocks together.
• Configure block settings.
• Configure post or page settings.

Let’s go step-by-step through some of these functions: (Note: these are also covered in this tutorial: How To Use Blocks.)

How To Add A Block To A WordPress Post Or Page

Add A Block From The Editing Toolbar Using The Add Block Tool

Click on the Add Block tool [+] in the Editing Toolbar to bring up a list of all the available blocks that you can add to your content.

Select (or search and select) a block from one of the Add Block tool’s menu sections.

The block you have selected will be inserted below your existing content.

After inserting a block into your post or page content, you can easily reorder, rearrange, or reposition your blocks using ‘move up’ or ‘move down’ arrows.

You can also place the block wherever you like in your post or page content by dragging and dropping blocks to rearrange your content layout.

Use either of these methods to position the block where you like in your content.

Add Block Tool – Content Area

You can also add new blocks to your content inside the Content Area.

Hover over the area below your existing content and click on the Add Block/Inserter tool icon [+].

Add A Block From Within An Existing Block

You can add blocks from within existing blocks in one of the following ways:

• Add a block from the Add Block/Inserter tool below an existing block.
• Add a block from the More Options menu in the block editor.

Add A Block From The Add Block Tool Below/Above An Existing Block

Hovering below or above an existing block brings up the Add Block/Inserter tool.

To add a new block to your content using this method:

1. Hover your cursor above or below an existing block.
2. Click on the ‘Add Block’ tool icon [+]
3. Select an available block from the tool’s menu section.

Add A Block From The ‘More Options’ Menu In The Block Editor

As mentioned in the How To Use Blocks tutorial, every block comes with its own Block Editor including various settings and options you can configure to further customize or format the content or function of the block.

Regardless of the block type you are using, you can click on the ellipsis icon (3 vertical dots) inside the Block Editor to bring up the More Options menu.

To add a new block to your content using this method:

1. Click inside an existing block
2. Click on the ‘More Options’ menu
3. Select where to add the block (e.g. insert before or after existing block)
4. After a new block placeholder has been inserted into the content, you can then select a new block from the Inserter tool.

How To Change Block Types

Depending on the type of block you are using, you can convert blocks into other block types as follows:

1. Click inside the block
2. Select the ‘Change block type’ tool
3.  Select one of the available blocks in the Transform To: menu
4. Your block will automatically convert to the new block type you have selected.

For more information about using specific block types and what other types of blocks these can be changed into, see the list of block tutorials at the end of this page: How To Use Blocks

How To Duplicate Blocks

To duplicate a block:

1. Click inside the block you want to duplicate
2. Click on the ‘More Options’ menu
3. Select ‘Duplicate’ to duplicate the selected block.

How To Delete Blocks

To delete/remove a block:

1. Click inside the block you want to delete
2. Click on the ‘More Options’ menu
3. Select ‘Remove Block’ to delete the selected block.

If you have empty blocks, you can ignore these (they won’t show up on your published posts or pages) or delete them.

To remove an empty block:

1. Click inside the empty block you want to delete.
2. Either:
   • Hit the backspace key, or
   • If you’re deleting a ‘Paragraph’ block and can’t see the ‘More Options’ menu to access the ‘Remove Block’ option, type a few characters into the box. This will make the ‘More Options’ menu visible, then:
     • Click on the ‘More Options’ menu
     • Select ‘Remove Block’ to delete the selected block.

How To Use Reusable Blocks

Reusable Blocks:

• Let you store and reuse content blocks across your site.
• Can be shared with other contributors to reuse across your site.
• Automatically update everywhere on your site when you make changes to the block.
• Can be converted into regular blocks to prevent global changes from being applied throughout your site.

We have created a separate tutorial covering how to create, edit, use, and manage Reusable Blocks here: WordPress Blocks – Reusable Blocks

Congratulations! Now you know how to use the Content Area of your WordPress block content editor.

The next step is to learn about the block editor’s Settings Section.

For more tutorials about using the block editor, go here:

• The WordPress Block Editor (Gutenberg)
• How To Use WordPress Blocks
• How To Use The WordPress Block Editing Toolbar
• How To Use The WordPress Block Editor Content Area (this tutorial)
• How To Use The WordPress Block Editor Settings Section

***

***

***

We are not affiliated, associated, sponsored, or endorsed by WordPress or its parent company Automattic. This site contains affiliate links to products. We may receive a commission for purchases made through these links.