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

WordPress Content Editor Interface – Content Area

WordPress Gutenberg Content Editor Interface – Content Area

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


As discussed in this tutorial, the WordPress Gutenberg content editor interface consists of three main sections:

  1. Editing Toolbar
  2. Content Area (this section)
  3. Settings Section

In this tutorial, you will learn about the ‘Content Area’ section of the editor.

For tutorials on the other sections of the Gutenberg content editor interface, go here:

WordPress Editor: Post/Page Content Area

In WordPress, content is added to your posts and pages in the Content Area …

(WordPress Gutenberg Editor – Content Area)

The Content Area is the same for WordPress ‘Posts’ …

(WordPress Post – Content Area)

And WordPress ‘Pages’ …

(WordPress Page – Content Area)

The only difference between the content editor of a ‘Post’ and a ‘Page’ are the features found in the ‘Settings‘ section …

(Gutenberg Content Editor Settings: Posts vs Pages)

These differences are explained in the tutorial below:

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

The WordPress Gutenberg Block Editor

With the WordPress Gutenberg editor, all content is added to your posts and pages using blocks …

(WordPress Gutenberg Content Editor – Blocks)

The section below provides a brief overview of working with blocks. For a comprehensive and in-depth tutorial on using Blocks, go here:

Working With 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 and a ‘block’ placeholder …

(New WordPress Post)

The ‘Title’ area is a required block …

(Post/Page Title Area)

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

(Add Post/Page Title)

After publishing, you will be able to view and edit your Post/Page title and edit your Post/Page permalink

(Post/Page Title)

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

If you want to start with something other than text when creating a new post or page (e.g. an image or quote), then begin by selecting a new block …

(Start creating content with a new block …)

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‘ …

(Or begin typing to create a Paragraph Block)

Hitting the ‘Enter’ key inside a Paragraph Block creates a new Paragraph Block …

(Hit ‘Enter’ when typing to create a new Paragraph Block)

You can change anything and everything at any time on your post or page by adding or changing blocks, editing the content inside these blocks, and configuring block settings.

How To Add A Block To A WordPress Post Or Page

Clicking on the ‘Add Block’ (+) tool brings up a list of all the available blocks that you can use …

(‘Add Block’ tool – Editing Toolbar)

The ‘Add Block’ tool contains a ‘Search’ field and several menu sections:

To learn more about the block types found in each of these sections, go here:

After clicking on the ‘Add Block’ tool, select (or search and select) a block from one of the ‘Add Block’ menu sections …

(Select a block from the ‘Add Block’ menu)

The block you have selected will be inserted where your cursor is positioned in the Content Area (or below your existing content if your cursor is not inside the Content Area) …

(Block added below existing content)

You can reorder, rearrange, or reposition blocks using ‘move up’ or ‘move down’ arrows …

(Reorder blocks using ‘move up’ and ‘move down’ arrows)

You can also place the block wherever you like by dragging and dropping blocks to rearrange your content layout …

(Rearrange blocks using ‘drag and drop’)

(Rearranging blocks)

Block Editors

Depending on the type of block added to your post or page, blocks will have their own ‘Block Editor’ with various settings and options you can configure to further customize or format the content or function of the block.

For example, below is a screenshot of the Block Editor of a Paragraph Block …

(Block Editor – Paragraph Block)

Block Editor Settings

Every block type has its own settings and options. To learn more about each block type, see our How To Use Blocks tutorial.

Block Editor Settings – More Options

A common element of block editors is the ‘More Options’ section, which includes the following standard settings:

(Block Editor – More Options)

Hide Block Settings

Hiding block settings lets you work on your content free of distractions (i.e. (‘Distraction-Free’ Mode).

To hide block settings:

(Hide Block Settings)


This setting lets you create and add an identical copy (i.e. a clone) of any selected block into your content.

To duplicate a block:


Insert Before

This setting lets you insert a new block into your content above the block you are currently working on.

To insert a block above your selected block:

(Insert Before)

Insert After

This setting lets you insert a new block into your content below the block you are currently working on.

To insert a block below your selected block:

(Insert After)

Edit as HTML

Normally, you view, edit, and format your content using a visual editor. This setting lets you view and edit the block’s HTML code.

To view and edit the block’s HTML code:

(Edit As HTML)

Add to Reusable Blocks

This setting lets you store a customized block that can be reused anywhere you like on your site.

To save your reusable block:

(Add to Reusable Blocks)

For more details on creating, editing, using, and managing Reusable Blocks, see the tutorial below:

Remove Block

This setting lets you remove a block from a post or page and delete content that you no longer need.

To remove a block from your post or page:

(Remove Block)

To hide the ‘More Options’ menu, click on the menu icon …

(Hide options)

How your content will look after publishing depends on:

Congratulations! Now you know how the Content Area of your WordPress Gutenberg content editor works and how to use its features, settings, and options.

The next step is to learn about the Settings Section of the WordPress Gutenberg Content Editor Interface.


"These tutorials have so much information and are easy to understand. If you use WordPress or plan to in the future these will help you with everything you need to know." - Valisa (Mesa, Arizona)