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

The WordPress Gutenberg Content Editor

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

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

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

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

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.

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 …

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

And this is the WordPress Block Editor (Gutenberg) 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.

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

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

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.

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.

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.

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.

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.

Now you can edit your content using either the block or classic editor.

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

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

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

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

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:

***

"I was absolutely amazed at the scope and breadth of these tutorials! The most in-depth training I have ever received on any subject!" - Myke O'Neill, DailyGreenPost.com

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.