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.
WordPress Block Editor – FAQs
Here are frequently asked questions about the WordPress block editor:
What is the WordPress block editor or Gutenberg?
The WordPress block editor, also known as Gutenberg, is a modern content editor introduced in WordPress version 5.0. It allows users to create content using blocks, each representing a different type of content element such as paragraphs, images, videos, and more.
What are the benefits of using the WordPress block editor?
The block editor offers a more intuitive and flexible editing experience compared to the classic editor. It allows for easier content creation and customization through the use of blocks, enabling users to create rich and dynamic layouts without the need for custom code.
Can I still use the classic editor instead of Gutenberg?
Yes, you can install the Classic Editor plugin to continue using the old editor interface if you prefer it over Gutenberg. This plugin allows users to switch between the block editor and the classic editor seamlessly.
Are there any disadvantages or challenges with using the WordPress block editor?
Some users may find the block-based editing paradigm of Gutenberg to be initially confusing or restrictive. Additionally, compatibility issues with certain themes and plugins may arise when using the block editor, requiring updates or adjustments.
How can I address compatibility issues with themes and plugins in Gutenberg?
To resolve compatibility issues with themes and plugins in Gutenberg, it’s essential to ensure that all themes and plugins are updated to their latest versions. Developers often release updates to ensure compatibility with the latest version of WordPress and its block editor. Additionally, reaching out to theme or plugin developers for support can help resolve specific compatibility issues.
Can I extend the functionality of Gutenberg with additional blocks?
Yes, Gutenberg supports the addition of custom blocks through plugins or custom development. There are many third-party plugins available that provide additional blocks for various purposes, such as contact forms, testimonials, and sliders. Developers can also create custom blocks tailored to specific needs using the Gutenberg Block API.
The WordPress Block Editor is constantly being updated. Where can I keep up with the latest changes?
WordPress is continually being updated with new features, bug fixes, and improvements. The best place to go to find out what’s new with every new WordPress version release is our WordPress Updates section. You’ll find an organized overview of what’s new, useful links to official WordPress documentation, and video tutorials.
***
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: July 5th, 2024