WordPress Content Editor Interface – Content Area

Learn how to use the content area of the WordPress Gutenberg content editor …

WordPress Gutenberg Content Editor Interface – Content Area

WordPress Gutenberg - The Ultimate Guide For Non-Technical WordPress UsersThis 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

(WordPress Gutenberg Editor – Content Area)

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

WordPress Post - Content Area

(WordPress Post – Content Area)

And WordPress ‘Pages’ …

WordPress Page - Content Area

(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

(Gutenberg Content Editor Settings: Posts vs Pages)

These differences are explained in the tutorial below:

Important

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

(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

(New WordPress Post)

The ‘Title’ area is a required block …

Post/Page Title Area

(Post/Page Title Area)

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

Add Post/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

(Post/Page Title)

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

Important

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

(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

(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

(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

(‘Add Block’ tool – Editing Toolbar)

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

  • Most used
  • Common Blocks
  • Formatting
  • Layout Elements
  • Widgets
  • Embeds

Important

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

(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

(Block added below existing content)

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

Reorder blocks using 'up' and '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'

(Rearrange blocks using ‘drag and drop’)

Rearranging blocks

(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 – 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:

  • Hide Block Settings
  • Duplicate
  • Insert Before
  • Insert After
  • Edit as HTML
  • Add to Reusable Blocks
  • Remove Block

Block Editor - More Options

(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:

  • Click anywhere inside the block to view the Block Editor.
  • Select the ‘More Options’ menu
  • Click ‘Hide Block Settings’ to hide the ‘Settings’ sidebar from view.
  • Click ‘Show Block Settings’ to display the ‘Settings’ sidebar on your content editor again.

Hide Block Settings

(Hide Block Settings)

Duplicate

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:

  • Click anywhere inside the block to view the Block Editor.
  • Select the ‘More Options’ menu.
  • Click ‘Duplicate’.
  • Edit and/or reposition the duplicated block if required.
  • Save your post or page to update your content.

Duplicate

(Duplicate)

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:

  • Select the block where a new block will be inserted before it.
  • Click anywhere inside the block to view the Block Editor.
  • Select the ‘More Options’ menu.
  • Click ‘Insert Before’.
  • A new block ‘placeholder’ will be inserted above your selected block.
  • Use the ‘Add Block’ tool to select the type of block you want added into the new block placeholder.
  • Save your post or page to update your content.

Insert Before

(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:

  • Select the block where a new block will be inserted after it.
  • Click anywhere inside the block to view the Block Editor.
  • Select the ‘More Options’ menu.
  • Click ‘Insert After’.
  • A new block ‘placeholder’ will be inserted below your selected block.
  • Use the ‘Add Block’ tool to select the type of block you want added into the new block placeholder.
  • Save your post or page to update your content.

Insert After

(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:

  • Click anywhere inside the block to view the Block Editor.
  • Select the ‘More Options’ menu.
  • Click ‘Edit as HTML’.
  • The block content will switch to the HTML editor.
  • To return to the visual editor, select the ‘More Options’ menu again and click on ‘Edit visually’.
  • Save your post or page to update your content.

Edit As HTML

(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:

  • Click anywhere inside the block to view the Block Editor.
  • Select the ‘More Options’ menu.
  • Click ‘Add to Reusable Blocks’.
  • Your block will be stored in the WordPress ‘Blocks’ library.

Add to Reusable Blocks

(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:

  • Select the block you want to remove.
  • Click anywhere inside the block to view the Block Editor.
  • Select the ‘More Options’ menu.
  • Click ‘Remove Block’.
  • Your block will be deleted from your post or page.
  • Save your post or page to update your content.

Remove Block

(Remove Block)

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

Hide options

(Hide options)

Important

How your content will look after publishing depends on:

  • The WordPress Theme you are using (and its theme styles)
  • Block settings, options, and configurations.
  • Additional plugins you have installed on your site.
  • Integrations with other applications,
  • Customizations, etc.

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.

WordPress Gutenberg - Making WordPress Easier For Non-Techies

***

"This is AMAZING! I had learnt about how to use WordPress previously, but this covers absolutely everything and more!! Incredible value! Thank you!" - Monique, Warrior Forum

Recommended Video Courses For WordPress Users

WordPress SEOWordPress SEO

In this WordPress SEO training series you will learn how to optimize your WordPress site and how to craft website pages and blog posts that will help you get better search engine rankings and improve your traffic results.

More info: WordPress SEO

Recommended Video Courses For WordPress Users

WordPress 101: How To Use WordPressWordPress 101: How To Use WordPress

Learn how to unlock the power of the WordPress content management system (CMS) using the many powerful features inside your WordPress administration area.

More info: WordPress 101: How To Use WordPress

Recommended Video Courses For WordPress Users

Build A WordPress Site ... Fast!Build A WordPress Site ... Fast!

Need a new website or blog in a hurry?

This video course shows you how to quickly install and configure a WordPress website or blog on your own domain name and be up and running in no time!

More info: Build A WordPress Site ... Fast!

Recommended Video Courses For WordPress Users

How To Create Engaging PresentationsHow To Create Engaging Presentations

Learn how to create beautiful and engaging presentations that will help you sell more products and services online.

More info: How To Create Engaging Presentations

Recommended Video Courses For WordPress Users

WordPress Traffic & User EngagementWordPress Traffic & User Engagement

Learn how to drive more targeted traffic to your website and discover ways to improve user engagement with your business online.

More info: WordPress Traffic & User Engagement

Recommended Video Courses For WordPress Users

Why Your Business Needs WordPressWhy Your Business Needs WordPress

Learn about the unique features, benefits, and advantages of using WordPress to start or grow your business online.

More info: Why Your Business Needs WordPress

Author: Martin Aranovitch

Martin Aranovitch is the founder of WPCompendium.org and the author of The Small Business Digital Manager. WPCompendium.org provides hundreds of FREE tutorials that show you how to use WordPress to grow your business online with no coding skills required! Get our FREE "101+ WordPress Tips, Tricks & Hacks For Non-Techies" e-course with loads of useful WordPress tips!

Originally published as WordPress Content Editor Interface – Content Area.