What is the WordPress Gutenberg editor?

It's the source of a significant evolution, even a revolution. It works with blocks. It's used without coding. And you most likely use it to write your articles and pages.

Do you have it? This is the Gutenberg editor for WordPressWith it, you can do almost anything. Provided you know how to use it. Which isn't so simple, as this editor is full of hidden features and constantly offers new options.  

By the end of this practical guide, you'll know everything about how Gutenberg works. And you'll be able to use it like a pro, thanks to our detailed tutorials and handy tips.

What is Gutenberg WordPress?

Gutenberg is the WordPress text editor. It's based on the principle of "blocks," content elements that users use to write and customize the design of posts and pages on their WordPress site. It replaces the older, classic WordPress text editor, called TinyMCE.

With Gutenberg, "the overall objective The goal is to simplify the experience of first-time WordPress users – for those who write, edit, publish, and design web pages, presents the FAQ dedicated to the text editor. The editing experience is designed to give users a better visual representation of what their article or page will look like when they press the Publish button. »

Thanks to this, as you will see in detail in this article, All your changes to the appearance and text of your content types are visible in real time., as soon as a change is made.

In this respect, Gutenberg on WordPress can be likened to what is called a WYSIWYG editor (What You See Is What You Get(What You See Is What You Get).

Did you know? The name of WordPress's Gutenberg editor is a reference to Johannes Gutenberg, the 15th-century inventor of the printing press. This invention, revolutionary at the time, also resonates and finds a parallel in WordPress. In fact, the introduction of Gutenberg is considered "one of the most significant changes made to WordPress in several years."

What is the Gutenberg plugin?

This major change, in fact, took shape from 2017 onwards, before an official launch in December 2018, with the release of version 5.0 of WordPress.

Since that date, the Gutenberg editor has been present by default on versions 5.0 and later of CMS (Content Management System, Content Management System) the most used in the world.

In principle, you should therefore be using Gutenberg on your website – even if you don't realize it. Indeed, at the time of writing, the latest major version of WordPress was 6.1.

However, There is also a Gutenberg plugin, available on the official WordPress plugin directory (Repository, in English).

This plugin contains the latest developments, options, and experiments from Gutenberg.Once validated, they then appear within each new major version of WordPress.

You can find a list of all the Gutenberg versions included in each new major version of WordPress. on this page.

You might be wondering: Do I need to install the Gutenberg editor on WordPress? To be perfectly clear: if your website is running on a version higher than WordPress 5.0, you do NOT need to activate the Gutenberg plugin in your administration interface (back office).
Gutenberg is already installed on your site by default. If you'd still like to experience Gutenberg's latest features and innovations early, you can install and activate the extension, but definitely not on your live site. Use a staging site or a local site for testing this plugin..

What are the different phases of Gutenberg's evolution on WordPress?

Although it has been running on WordPress since late 2018, the WordPress Gutenberg "project" is in ongoing development and constant evolution, as indicated on his roadmap (Gutenberg roadmap).

Four phases mark its existence:

1. Phase 1: Facilitating editing for users. 
2. Phase 2 : PersonalizationGutenberg allows you to completely modify all parts of your site, from the header to the footer (and not just articles and pages). This is the phase we are in at the time of writing (November 2022).
3. Phase 3: CollaborationGutenberg will allow for the co-creation of content "in a more intuitive way".
4. Phase 4: MultilingualismThe text editor will be implemented by default for multilingual sites.

How does Gutenberg work on WordPress?

The blocks, the fundamental base

As you saw a little earlier, Gutenberg goes hand in hand with a central concept: the famous "blocks".

Gutenberg's overview page explains that "blocks are content elements that you can move around." They "allow you to build your own custom posts and pages without any coding knowledge."

Each piece of content within the editor is a block (a kind of container-type section). For example:

• a paragraph; 
• a title;
• an image;
• a video;
• a button etc.

Each block can be edited and customized by users without touching a single line of code. (HTML, PHP, etc.). All this is presented visually, with an immediate rendering of your changes:

Articles, pages, and even an entire website!

At its launch in 2018, Gutenberg only worked on articles and pages. 

In the meantime, the publisher has come a long way. Since the release of WordPress 5.8 in July 2021, the WordPress widget editor works, for example, with content elements (blocks).. 

If you go to Appearance > Widgets, in the menu of your administration interface, you will see that it is possible to insert blocks (sections) into the widget areas offered by your theme (e.g., sidebar, footer, etc.):

But wait, you haven't seen everything yet. Since the release of WordPress 5.9 in early 2022, The Gutenberg editor on WordPress now allows you to create and customize entire sites with blocks !

This is what's called the Site Editor (formerly known as Full Site Editing, FSE). With this project, blocks are now used to edit all parts of your site, not just your articles and pages.

With the website editorUsers can now manage elements normally controlled by their WordPress theme (header, footer, 404 page, article archives, etc.) using a unique concept: the Gutenberg block.

To take advantage of this, there are at least two prerequisites: 

1. Your site must run on at least WordPress version 5.9If so, you will be able to access the full site editing via Appearance > Editor;
2. You must use a block-based theme (block based theme(in English). This is the case, for example, with Twenty Twenty Three, the default theme included with WordPress 6.1. For your information, you will find a list of block-based themes on the official WordPress directory.

If you're new to WordPress and/or have limited technical knowledge of web development and web design, we don't recommend using Full Site Editing at this time. There are still few compatible themes, and you need a solid overall understanding to create a professional and functional website using only Gutenberg blocks in WordPress.

What is the difference between Gutenberg and a page builder like Divi or Elementor?

Gutenberg allows you to edit an entire website? That might ring a bell. Understand: page builders (page builders).

Like the WordPress text editor, page builders like Elementor or Divi BuilderTwo of the most famous of these allow you to design a website from scratch, giving you complete control over all aspects and options. 

However, the publisher Gutenberg has not yet reached their level of options and creative possibilities.For example, the Divi Builder or Elementor offers website and page templates (templates) ready to use that you only have to activate with one click.

Gutenberg is slowly approaching this with his block compositions (block pattern), but he is far from being able to compete at that level.

Furthermore, at present, We believe it's easier to fully edit a website using a page builder, especially if you're a beginner..

We still need to give the Site Editor time so that Gutenberg can compete with page builders (even if the creation experience is totally different).

In summary, if you have to choose between Gutenberg or the Elementor extension – yes, it's technically an extension – for create a WordPress websiteFirst, ask yourself about your technical level.

If you have a good foundation in WordPress, as well as in web design, start with a compatible theme. Full site editing remains possible.

Otherwise, rely on Gutenberg to write and edit your articles, or even certain pages that don't require much graphic design (e.g., the Contact page). And focus on a page builder for more advanced layouts.

After this detailed general presentation, which has laid the groundwork, let's move on to the practical part.

You will now learn how to use Gutenberg on WordPress, and will become completely independent very quickly.

How to use Gutenberg: a step-by-step guide

How is the Gutenberg interface organized on WordPress?

To start using Gutenberg, go either to Articles > Add, or to Pages > Add. 

Choose based on the type of content you want to create. For the purposes of this test, I'm opting for an article.

By default, the editing interface is divided into 3 sections for users:

1. A top bar (number 1 on the screenshot), with quick access buttons, such as the one to insert a block (section), for example.
2. A side bar (sidebar, number 2), which contains settings on the item and the blocks you are going to add.
3. A content area (number 3), in the center of the page. It contains all the blocks that you will add, as you go along.

How do I add Gutenberg blocks?

To add a block to your article, click the blue "+" icon at the top of the page. This will open a menu in the form of a sidebar with 6 categories of content elements (blocks): 

1. texts, with (among other things) the Paragraph, Title, Quote, List blocks etc.
2. Media offers Image, Gallery, Audio, Video, etc. blocks
3. Design list of blocks allowing the insertion of buttons, columns, a separator etc.
4. Widgets displays the old default WordPress widgets, which have become blocks (remember).
5. Theme It lists blocks for adding a logo, a navigation menu, a list of your articles, a login form for your website, etc. The choice of blocks will vary depending on the theme you are using.
6. Embedded ContentHere you will find blocks to add content (via a simple link). embed(embedded) from platforms like YouTube, Twitter or Spotify.

In total, WordPress offers nearly a hundred blocks natively. To integrate one into the body of your page, you can either: 

• drag and drop (drag and drop) at the location of your choice;
• click on itIn this case, it will automatically be added below the last block (section) you just included.

Once you have added content within your block, a toolbar allows you to make initial edits, if needed.

For example, within this Title block, you can: 

• modify its alignment and width;
• change its heading level (h2, h3, h4 tags etc);
• add bold or italics to it;
• insert a hyperlink;
• access finer settings to copy, duplicate, group or even lock the block in question.

The introduction is interesting, but rest assured, it is possible to go much further in terms of customizing the visual appearance of a block.

How do I customize the style of a block?

As soon as you add a block, settings specific to that block become available in the right sidebar of the WordPress Gutenberg editor.

The number and type of settings vary depending on the block you add.

For example, the Title block essentially offers settings for typography (size, weight) and text color.

Now, look, it's very different with the Image block. Here, there are no settings related to typography (which makes sense). Instead, the editor lets you adjust:

• the style of the image (rounded or default);
• the border of the image.

Want to change the style of your image? Simply click on the relevant setting, choose your preferred option for your image, and see the result immediately:

How to use block compositions?

So far, we've talked about individual blocks. But the Gutenberg WordPress editor still has more up its sleeve and has other surprises in store for its users. 

If you don't want to start from scratch, You can also insert what are called block compositions (block pattern, in English).

Simply put, it's a ready-to-use template containing several blocks. Their number varies depending on the theme you use.

To get an overview of what you have available, click on the "+" button, the same one you already used to add a block (section).

You will see a "Compositions" tab. A drop-down menu allows you to filter the compositions by category, making your search easier:

In the example below, we will add the "Pricing Table" composition. If we break it down, we can see that it contains several blocks, arranged in 3 columns: 

• A column block, then;
• A Title block;
• A paragraph block;
• A separator block;
• A list item block;
• A button block.

This can save you valuable time if you were planning to add a pricing formula. Of course, the template is customizable to your liking, without touching the code.You can modify everything, from the text to the colors. And nothing prevents you from adding your own blocks to each composition.

You can access more compositions on the official directory provided by WordPressDevelopers from all over the world publish their block patterns there, which you can either download or copy and paste directly into your content. 

How to use reusable blocks?

If you feel like you want to take the block pattern will help you increase your productivity, and this is also the case with another key feature of Gutenberg: reusable blocks (reusable blocks).

With this option, you can create a custom block or composition and reuse it wherever you want on other pages or articles (content type) of your WordPress site.

We can imagine quite a few use cases with reusable blocks. This can be very useful, for example, for creating calls to action that encourage people to contact you..

Calls to action that you can then scatter in strategic locations on your site… without having to create them each time.

To set up your model – your reusable block – it's very simple: 

• Select the block of your choice from the menu. For example, we'll choose the Button block. But you can also use the Image block, the Title mode, etc. Basically, whichever one you want.
• apply the style and content settings of your choice;
• click on the three small dots, at the level of the editing toolbar, then on "Create a reusable block";
• Finish by giving your reusable block a name.

This feature is now available in the block insertion tool, under the "Reusable" tab:

To go further with reusable blocks and benefit from an administration interface with more options for configuring them, use the extension Reusable Blocks Extended.

How do I use the WordPress site editor?

So far, the bulk of our presentation has focused on using the Gutenberg WordPress editor on your content types (posts and pages).

If you're using a block-based theme, you can also take advantage of Gutenberg to edit all parts of your site. To do this, go to Appearance > Editor.

You will land on your website/blog's homepage. The editor works the same way as for your articles and pages.

You can add blocks and compositions via the insertion tool, then edit them in the right sidebar.

However, there are some specific features:

• mode Website editorYou have control over editing your header and footer. by clicking on the relevant area;
• You can add pre-built page templates. (blog, 404, archives etc). To do this, click on the icon representing the WordPress logo, in the top left corner;
• thanks to the Global Styles editing interface (Global Styles), you can modify the overall style of your site in its entirety (colors, typography, layout), without having to modify each block one by one. You can even apply a style to each block of your choice, so that it is reflected across all blocks of the same type on your site.

How do I disable Gutenberg?

At this point, Gutenberg should be much more familiar to you. You might also be so fed up with it that you miss the old TinyMCE editor. 

If you are using WordPress 5.0 (or a higher version), Please note that it is possible to disable Gutenberg by enabling the Classic Editor extension (Classic publisher).

Maintained by the WordPress development team, this plugin "reinstates the previous classic WordPress editor and its editing screen", specifies its description on the official extensions directory. 

However, the Classic Editor plugin may not be immortal. Its maintenance is currently planned until 2024 at the latest, or perhaps even a little longer. "if necessary".

10 plugins to extend the capabilities of the WordPress editor

With Gutenberg, the realm of possibilities opens up considerably. With it, you discovered that it was possible to create entire WordPress sites from scratch.

Because it is malleable and extensible by nature, many developers in the WordPress ecosystem are taking advantage of the opportunity to offer their own plugins, capable of extending and improving its capabilities.

Thus, there are dozens and dozens of plugins that offer their own catalog of blocks for the text editor.

But also, for some of them, templates and other block compositions.

Most of the time, with these kinds of plugins, You benefit from additional design and layout optionscompared to what WordPress offers natively. 

These plugins also offer blocks that you don't find by default on WordPressYour creative and layout possibilities are therefore greater, without you having to touch the code. 

Here are some Gutenberg block plugins that are among those downloaded from the official extensions directory:

• CoBlocks ;
• Spectra ;
• Cadence Blocks ;
• Otter ;
• Generate Blocks ;
• Stackable ;
• getwid ;
• Ultimate Blocks.

Besides that, there are also less "catch-all" extensions (without the pejorative connotation) including The goal is to offer a simple block to perform a specific operation. 

For example, the extension Map Block for Google Maps allows you to add a Google Maps to your content, using a Gutenberg block.

The same principle applies to the plugin. Smart Slider 3which adds a slider to your pages and articles.

You're familiar with how Gutenberg works on WordPress. And you even have a nice selection of plugins to use to take advantage of additional features!

Finally, discover some practical tips to be more productive with the WordPress text editor. 

6 tips for working more efficiently with Gutenberg on WordPress

Use keyboard shortcuts

Are you a fan of Ctrl + Z (for PC users), or Cmd + Z (for Mac users)? Well, good news, it also works on Gutenberg!

Did you go a little too fast when adding a block, content, layout or anything else? Immediately go back with a simple Ctrl + Z or Cmd + Z.

Another very useful tip regarding keyboard shortcuts: you can insert a block by adding a slash (/), without having to use the insert tool:

Finally, you can access a list of keyboard shortcuts suggested by the text editor by clicking on the 3 small dots, in the top right corner of the editor.

Take advantage of the "View" mode options in the WordPress editor

If you are used to writing content, you know that concentration is very important to be productive and efficient.

Working without distractions can be a real plus, and that's what Gutenberg offers through the options in its "View" mode.

To access it, click on the three small dots in the top right corner of your editing window (you know, by now). You will then be able to activate the following modes:

• Full screen modeIn this case, you will no longer see the WordPress admin menus and you will focus on your layout;
• Highlight Mode, which highlights only the block you are currently working on;
• Top toolbar modeIn this case, the latter, and all its options, will be displayed at the top of the screen at all times.

Create columns in one click with Gutenberg on WordPress

With Gutenberg, blocks stack one below the other by default. Of course, you can rearrange them as you wish by dragging and dropping them up or down in your article or page.

For more advanced layouts, it is possible to group several blocks on the same "line", presenting them in the form of columns.

For this, there's a dedicated block, simply called Column. Once you've added it, You can choose from 6 types of columnsThen add the block(s) of your choice to each column:

Add your images by dragging and dropping them from your computer

To enhance your columns, you might need an image. If it's located on your computer desktop, You can integrate it into your content with a simple drag-and-drop action (without having to add an image block)..

Thanks to this, you no longer need to download the image in question to your Media Library.

However, don't forget to give your image a clear title beforehand, and then fill in its attribute. , once you have added it to Gutenberg. This is important for optimizing the SEO of your WordPress site.

Easily integrate link anchors

While Gutenberg has an HTML code editor – admittedly not very user-friendly – ​​to allow you to modify your content types (articles, pages, etc.), one of the strengths of the text editor is that it can be used without… coding. 

With him, Adding a link anchor becomes child's play, without having to manipulate HTML.. 

To do this, follow this short Gutenberg tutorial dedicated to WordPress. First, create an anchor on the title of your choice.

Select it, then give it the name of your choice (e.g., my-anchor) in the "Advanced" section of the Title block:

Finish by creating an anchor link on the text of your choice. This link will redirect to the title to which you added the previous anchor.

Proceed by selecting the text of your choice, then add a link containing the name of your anchor, preceded by the # symbol (e.g., #my-anchor):

Add links using copy-paste

Finally, note that Gutenberg makes it easy to add videos, tweets, images, or audio by pasting the link to the source you're interested in.This is referred to as a link. embed (embedded link).

This works, for example, if you want to add a YouTube video to your content. WordPress's Gutenberg editor will automatically create a block and display a preview of the video, as shown below:

WordPress also offers a list of sites from which you can add embedded links, which include for example Amazon Kindle, DailyMotion, Spotify, TikTok, Ted, Vimeo etc.

Summary

WordPress's Gutenberg text editor is a constantly evolving tool. Launched in 2018 and initially limited to posts and pages, it has gained many new features over time.

Today, it even allows you to design an entire WordPress site thanks to the central concept of blocks, without touching the code (HTML, CSS, JavaScript etc.).

Throughout this guide dedicated to Gutenberg on WordPress, you have notably discovered:

• how Gutenberg works;
• how to use it, thanks to mini-tutorials focused on practical application;
• about ten extensions to expand its functionality;
• Tips for being more productive with this text editor.

Because creating content – ​​or even an entire site – with Gutenberg requires technical skills, the MaintenanceWP team can support you in your various projects. 

Available 7 days a week, our team can offer you a tailor-made solution that will meet your needs with speed, professionalism and efficiency. Contact us for more information.