WordPress For Non-Techies: Free WordPress Tutorials – WPCompendium.org

WordPress Content Editor Interface – Content Area

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:

***

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.

The Content Area is the same for WordPress Posts…

Post Content Area.

And WordPress Pages…

Page Content Area

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

Post vs Page Settings.

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.

Some of the default blocks available in the WordPress block editor.

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).

New Post Content Area.

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

Post/Page Title area.

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

Using the Post/Page Title area.

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).

Add a block using the 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.

Begin typing text to create a Paragraph block.

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

Hit Enter 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:

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.

Add a block from the Editing Toolbar using the Add Block tool.

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

Select a block from the Add Block menu.

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

A new block is added 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.

Reorder blocks on your post or page content using the block editor’s Move Up and 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.

Reorder your blocks using the Drag and Drop tool.

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

How to move blocks around your content using the up and down arrows and drag and drop tool.

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 [+].

Use the Block Inserter tool to add blocks to your content inside the editor’s Content Area.

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 Tool Below/Above An Existing Block

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

Hover below or above an existing block to display the Add Block 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 new block below an existing block.
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.

Every block includes its own block editor.

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.

Block Editor – 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 add a block from the More Options menu.

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.
You can easily convert existing blocks into other types of blocks.

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.
Duplicate a 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.
Remove a block.

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

Empty blocks don’t display on your published posts or pages.

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.
Removing empty blocks from your content.

How To Use Reusable Blocks

Reusable Blocks:

An example of a reusable block.

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:

***

***

"This is an awesome training series. I have a pretty good understanding of WordPress already, but this is helping me to move somewhere from intermediate to advanced user!" - Kim Lednum

***

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.

For a white label version of this tutorial visit WPTrainingManual.com.