The WordPress Gutenberg Content Editor

Learn about the WordPress Gutenberg content editor interface and its main features in this comprehensive tutorial for non-technical users …

The WordPress Block Editor (Gutenberg)

WordPress Block Editor (Gutenberg)
WordPress Block Editor (Gutenberg)

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

***

In this tutorial, you will learn about using the WordPress Block Editor.

This tutorial provides a background and overview of the block content editor, with links to in-depth tutorials about the editor’s main sections.

Before you begin, we recommend completing the tutorials below to gain a better understanding of the basic features of your website that related to using the WordPress block editor:

Additionally, see these tutorials to learn how to use the main sections of the block editor:

WordPress Block Editor – Background

On December 6, 2018, WordPress released version 5.0.

With this release, WordPress introduced a new and different approach and direction for the WordPress platform.

The introduction of the new WordPress content editor, called Gutenberg (after Johannes Gutenberg, who invented the printing press over 500 years ago) was part of a plan to transform WordPress into something bigger than just a website publishing and content management platform.

As technology changes and evolves, platforms have to change and evolve with it. With the introduction of Gutenberg, WordPress signaled a move toward becoming a platform where users will be able to transform their web presence into anything they want using modular elements and components that aim to:

  • Provide many different types of functions.
  • Integrate seamlessly with anything you have previously built.
  • Be simple to configure, using methods like ‘point and click’, ‘drag and drop’, WYSIWYG (what you see is what you get), selecting options from drop-down menus, etc.

The decision to introduce a completely new content editor generated many heated debates and strong reactions from web developers, users, and members of the WordPress community. Many users still prefer the older and original content editor (referred to as the WordPress Classic Editor). Hence, the reason why WordPress currently provides two content editors.

WordPress Block Editor – Overview

WordPress 5.0, named “Bebo” in honor of Cuban jazz musician Bebo Valdés (October 9, 1918 – March 22, 2013), introduced a new content editor called Gutenberg (named after Johannes Gutenberg, the inventor of the printing press).

Since its original release, many improvements have been made to the Gutenberg content editor (now referred to simply as the WordPress Block Editor).

Welcome to WordPress 5.0
The original Gutenberg block editor has undergone many improvements since it was first released.

Gutenberg aims to simplify the content creation process using ‘blocks’. Hence, why we call it the Block Editor.

WordPress Block editor - Scroling list of default blocks.
WordPress Gutenberg provides a block-based content editor and comes with many default blocks ready for use.

The Block (Gutenberg) editor not only provides greater flexibility and a streamlined editing experience across your site, it is also part of WordPress’ aim to revolutionize the publishing experience by bringing WordPress into line with modern website building trends, methods, and principles allowing websites, applications, page layouts, and web content to be easily assembled with no coding skills required.

As stated on the official WordPress Gutenberg page:

Blocks are a great new tool for building engaging content. With blocks, you can insert, rearrange, and style multimedia content with very little technical knowledge. Instead of using custom code, you can add a block and focus on your content.

(Source: WordPress.org/gutenberg)

The Block editor, then, lets you build pages by inserting different ‘blocks’ of content (e.g. paragraphs, images, quotes, multimedia, etc.) into your posts and pages using simple ‘point and click’ and ‘drag and drop’.

Blocks
Insert Blocks into your content to build your pages.

You can easily rearrange the content on your page by rearranging the order of your blocks.

WordPress Block Editor
Rearrange the order of your blocks.

The video below provides an introduction to WordPress 5.0 and the concept of using Blocks.

Source: https://www.youtube.com/watch?v=72xdCU__XCk

WordPress Classic Editor vs WordPress Block Editor – Which One Should You Use?

The block-based content editor introduces a different way to add, edit, and display content on your site than the previous editor (i.e. the ‘WordPress Classic Editor‘) and allows you to build pages on your site that will look exactly the way you want your pages to look.

Many WordPress users, however, learned to use WordPress using the Classic editor so they find it easier and faster to stick with the editor they are familiar with.

This is the WordPress Classic Editor screen …

WordPress Classic Editor screen
The WordPress Classic Editor screen (Pre-WordPress 5.0 content editor).

And this is the WordPress Block Editor (Gutenberg) screen …

WordPress Block Editor screen
The WordPress Block Editor screen.

As you can see, both editors are quite different. Which editor you should choose to use at the moment depends mostly on your preferences. As you will soon see in the next section below of this tutorial, WordPress currently allows you to use both on your site and switch between editors.

Information

Here are some things you should know to help you decide which editor to use:

  • The Block Editor is part of Gutenberg and it is the default editor shipped with all newer versions of WordPress. It should work with all WordPress themes.
  • Gutenberg doesn’t change how WordPress works. Your site visitors won’t notice anything different. What Gutenberg does, is change the way you interact with WordPress when creating or editing content.
  • The Classic editor is now available only as a plugin (see the next section below).
  • There is an ongoing discussion in the WordPress community about how long the WordPress Classic Editor plugin will continue to be actively supported. The official date is December 31, 2021. After this date, its developers will not automatically discontinue supporting the plugin. Instead, they will review existing developments at the time and decide whether to extend plugin support.

How To Add The WordPress Classic Editor To Newer WordPress Versions

As mentioned earlier, newer versions of WordPress after version 5.0 automatically come with the WordPress Gutenberg block content editor installed and activated by default.

WordPress Block Content Editor
WordPress Block Content Editor

What this means, is that if you try to create or edit any post or page on your site, it will only open in the block editor.

So, for example, if you try to edit a post, you will only see one ‘Edit’ link.

Posts screen - Edit link
If you click Edit, it will open the post using the Block editor.

To access and use both the WordPress Classic editor and the Block editor on your site, you must either have Admin privileges or ask your site’s administrator to do the following:

First, go to the Add Plugins screen (Plugins > Add New) and search for ‘Classic Editor’ in the keyword search field. Install and activate the plugin.

Install the Classic Editor plugin.
Install the Classic Editor plugin.

Once the Classic Editor plugin has been activated, go to your Writing Settings screen (Settings > Writing).

You will see a section called Default editor for all users giving you the choice of selecting either the Classic or Block editor as the default editor for your site.

You will also see a section called Allow users to switch editors on this screen. The default setting for this option is ‘No’.

Note: If you cannot see either of the above sections, make sure that you have installed and activated the Classic Editor plugin on your site.

Writing Settings screen - Editor options.
When you install the WordPress Classic Editor plugin, you will see new editor settings in your Writing Settings screen.

To give users the choice of switching between editors, set the Allow users to switch editors option to ‘Yes’ and save your settings.

Writing Settings screen - Allow users to switch editors section.
Select Yes in the Allow users to switch editors section.

Now, when you go to edit a post or page, you will see the option of editing your content using either the block or classic editor.

Posts screen with links to editing content using the block or classic editor.
Now you can edit your content using either the block or classic editor.

Information

  • When you create a new post or page, the new post or page will open using whichever editor option is selected in the Default editor for all users section of your Writing Settings screen.
  • Your Table of Posts or Pages will also indicate which editor was originally used to create your content.
Table of Posts with editor indicators
When both editors are installed on your site, WordPress lets you know which editor was used to create your content.

To learn more about using the classic editor, see this tutorial: How To Use The WordPress Classic Editor

How To Use The WordPress Block Content Editor

Let’s go briefly through the main sections of the WordPress block content editor. Each of these sections is covered in-depth in other tutorials.

WordPress Block Editor sections.
WordPress Block Editor sections.

WordPress Gutenberg – Block Editor Layout

The content editor is divided into three main sections:

  1. Editing Toolbar
  2. Content Area
  3. Settings Section

Below is a screenshot of the WordPress Block Content editor interface:

WordPress Block Editor
The main sections of the WordPress Block Content editor interface.

Each section contains different features that allow you to perform different functions.

Block Content Editor sections
Block Content Editor sections

The next tutorial in the WordPress Block Editor series covers how to use WordPress content editor blocks.

To learn how to use the different sections of the WordPress Block Editor, see the tutorials below:

WordPress Gutenberg
WordPress Block Editor (Gutenberg)

***

Book photo by Engin Akyurt from Pexels

Click on the links below for in-depth tutorials about using different sections of the WordPress Gutenberg content editor interface:

WordPress Gutenberg Content Editor Interface - Editing Toolbar

WordPress Content Editor Interface – Editing Toolbar

Learn how to use the editing toolbar section of the WordPress Gutenberg content editor ...
Read More
WordPress Content Editor Interface - Content Area

WordPress Content Editor Interface – Content Area

Learn how to use the content area of the WordPress Gutenberg content editor ...
Read More
WordPress Content Editor Interface - Settings Section

WordPress Content Editor Interface – Settings Section

Learn how to use the Settings section of the WordPress Gutenberg content editor ...
Read More

For more tutorials on using the Gutenberg content editor, go here:

***

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

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.
Originally published as The WordPress Gutenberg Content Editor.