The WordPress Block Editor (Gutenberg)
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 relate to using the WordPress block editor:
- WordPress Posts vs WordPress Pages Explained
- How To Create A Post In WordPress – Part 1
- How To Create A Post In WordPress – Part 2
- How To Edit and Delete Posts In WordPress – Part 1
- How To Edit and Delete Posts In WordPress – Part 2
- How To Create Pages In WordPress
- How To Edit And Delete Pages In WordPress
Additionally, see these tutorials to learn how to use the main sections of the block editor:
- How To Use WordPress Block Editor (Gutenberg) Blocks
- How To Use The WordPress Block Editor Content Area
- How To Use The WordPress Block Editing Toolbar
- How To Use The WordPress Block Editor Settings Section
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, technology platforms must also change and evolve to remain useful and relevant to users.
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).
Gutenberg aims to simplify the content creation process using ‘blocks’.
Hence, why we call it the Block Editor.
The Block (Gutenberg) editor not only provides greater flexibility and a streamlined editing experience across your site, but 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’.
You can easily rearrange the content on your page by rearranging the order of your blocks.
The video below introduces 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…
And this is the WordPress Block Editor (Gutenberg) screen…
As you can see, both editors are quite different. Which editor you currently choose to use depends mostly on your preferences.
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:
- 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.
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.
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.
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.
To give users the choice of switching between editors, set the Allow users to switch editors option to ‘Yes’ and save your settings.
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.
- 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.
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 Gutenberg – Block Editor Layout
The content editor is divided into three main sections:
Below is a screenshot of the WordPress Block Content editor interface:
Each section contains different features that allow you to perform different functions.
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:
- How To Use The WordPress Block Editor Content Area
- How To Use The WordPress Block Editing Toolbar
- How To Use The WordPress Block Editor Settings Section
***
Book photo by Engin Akyurt from Pexels
Updated: April 8th, 2023