How to switch from the classic editor to the block editor (Gutenberg)

People who use the classic WordPress editor are wanted at the front desk, thank you. I repeat: People who use the classic WordPress editor are wanted at the front desk.

Seriously, do you still use the classic WordPress editor? Okay, I’m teasing a little. You have every right to do so, if that’s the case.

A few weeks ago, we ran a little poll on X. Of the ten or so responses we received, only “Leolabo” showed himself to be a fan of the classic editor, saying, “I like the classic WordPress, is that a problem?”

The rest of the respondents were on the Gutenberg team, praising the block editor, like “Max,” who declared, “Gutenberg… no going back,” and “WP Expert,” below:

If the classic WordPress editor is still alive and kicking, as WP Expert admits, it seems increasingly outdated in the face of Gutenberg’s rise to power. So why use it today?

What’s the value of switching from the classic editor to the block editor? And, above all, how can you do it without pulling your hair out?

You’ll have the answers to these questions after reading this article.

What is the classic WordPress editor?

The original WordPress editor…

The WordPress Classic Editor is the name given to the original WordPress text editor.

It automatically equipped all fresh new installations of the CMS (Content management system) until the release of WordPress 5.0 in December 2018.

From this major release onwards, all sites running on a version greater than or equal to WP 5.0 use the WordPress block editor, more commonly known as Gutenberg.

Well, there is one exception to this rule. You can still use the classic editor, while running the latest version of WordPress, if you activate the Classic Editor plugin (5M+ active installations).

I’ll come back to this in more detail later in this article.

… based on the TinyMCE editor

For the record, the classic WordPress editor is based on the open-source visual editor TinyMCE.

This allows users to create and edit content in a WYSIWYG (What You See Is What You Get) interface.

TinyMCE’s interface resembles that of a Microsoft Word-type text editor. It enables you to perform basic editing operations, including:

• Writing and formatting text (bold, italics, etc.)
• Defining the alignment of your content (left, right, or centered)
• Adding images, videos, and other multimedia elements
• Integrate HTML links
• Edit HTML code
• Incorporate bulleted or numbered lists
• Define hn tags (h1, h2, h3, h4, etc.) for your different sections

What is the Gutenberg block editor?

Let’s move on to our second character: the block editor. In fact, it’s known by many names: block editor, content editor, or simply Gutenberg.

I’ll give you a detailed introduction in a moment, so stick around.

The default WordPress editor

Gutenberg is the name given to WordPress’ default editor, the one integrated into the CMS Core since the launch of its 5.0 version at the end of 2018.

But more broadly speaking, Gutenberg is first and foremost a project whose purpose is to shape a new editing experience on WordPress.

One of the goals is to make the user experience simpler, more modern, more flexible, and more intuitive than with the TinyMCE editor. In other words, better. 😉

To achieve this, the content editor relies on content elements called blocks. These allow you to shape your layouts, both for your articles and your pages, without touching a single line of code.

You can use blocks to add text, media, titles, lists, and more:

And you can even go one step further and benefit from additional blocks thanks to dedicated plugins.

Content editor and site editor

These blocks are very practical, firstly because they make editing easier. You can add and customize them in just a few clicks, while viewing changes in real time.

Secondly, they allow you to replace a number of older content types, such as shortcodes, which are gradually becoming obsolete.

Last but not least, they are your main asset when it comes to creating entire sites, if you want to (and have the skills to do so).

Indeed, since the release of WordPress 5.9 in January 2022, it’s been possible to create and edit all parts of your site (header, footer, 404 page, article archives, widget zones, etc.) using blocks.

That’s what the Site Editor, previously known as Full Site Editing, is all about.

This brings it closer to the way a page builder works.

So there are two editors to distinguish between when we refer to Gutenberg. This name could mean either:

1. The Content Editor. This is the one that lets you create and customize a blog post or page. You’ll come across it via the menu Post > Add New or Pages > Add New.
2. The Site Editor, for creating a site (using page templates) from A to Z. To use it, go to Appearance > Editor. Note that this menu will only be available if your site is running on a WordPress version greater than or equal to 5.9 AND if you’ve activated a block-based theme (e.g. Twenty Twenty-Four).

The Site Editor is a tool that’s still being developed. If you want to achieve professional layouts, it requires a solid technical knowledge of templating and web design.
If your aim is to create pages and an entire site without coding, you can also turn to a page builder. In both cases, a learning curve is required.

What about the Gutenberg plugin?

To conclude this presentation of Gutenberg, let’s take a look at the plugin with the same name:

This plugin embeds new developments and experiments carried out by contributors within the editor.

Each new major version of WordPress contains several versions of this Gutenberg plugin.

You don’t need to activate it on your site. If your site is running on a version greater than or equal to WP 5.0, Gutenberg will be automatically “installed” on your site.

The Gutenberg plugin will be useful for a specific purpose: testing the latest editor features before they are officially integrated into the WordPress core.

It’s therefore primarily intended for seasoned developers and technicians. If you’d like to try it out, be sure to take proper precautions. Don’t do it on a site in production, or you might break it!

I hope that’s all cleared up for you, and that you now have a clearer picture of these two editors.

Let’s continue with the next part, which will give you a more detailed overview of the differences between the two tools.

Why switch to the block editor?

Let’s take a step back in time. I teased you a little in the introduction to this article, but let’s be clear: everyone is free to do what they want.

If you want to continue using the classic WordPress editor, that’s your choice.

This tool does have a few appealing qualities:

• Its interface is simple and easy to understand.
• It doesn’t require a learning curve (unlike Gutenberg) if you’ve been using the tool for several years.
• It works very well for (very) basic word processing operations. If your customization needs are not too advanced, it can do the job.

On the other hand, if you try to be as objective as possible, you’ll see (with evidence to back it up) that it does have many limitations compared to Gutenberg.

Gutenberg, a more powerful and comprehensive tool

Yes, it’s true. Going from the classic editor to Gutenberg in one fell swoop can be intimidating. You’ll have to familiarize yourself with a new way of working, new menus, and new options.

But frankly, it’s well worth the effort. Just give yourself a few hours to poke around and get used to it.

Then a whole new world opens up. You’ll soon realize that:

• Style customization options are far more extensive than with the classic editor. Everything is done block by block. When it comes to style settings, you have multiple options for changing fonts, colors, alignment, spacing, and so on.

• The interface is more intuitive. Gone is the old-fashioned, uniform mass of text offered by the classic editor. With Gutenberg, the visual hierarchy is clearer, as your content is divided into blocks. Adding them is simple: click on a button to integrate them into your text, and drag-and-drop to move them around.
• You have ready-to-use sections, called block patterns (collections of pre-arranged blocks). You can add them to create your designs even faster.

• You can create a site from A to Z with your own page templates in the Site Editor.
• You get a real-time preview of exactly how your page will look in the front end. What you see on Gutenberg is exactly what your online visitors see.
  With the classic editor, this wasn’t always the case, and you had to open a window in a new tab to get an accurate preview.
• Media management (i.e. images and videos) is simpler and more comprehensive than with the classic editor. You can customize their entire appearance and are not limited to simple alignment management, as is the case with the classic editor.
• Gutenberg optimizes responsive display, while the classic editor does not. Different settings can be configured according to your visitors’ screen size (computer, smartphone, tablet, etc.).
• You no longer need to use complex shortcodes or custom HTML to add features to your content. Just use the right block, and you’re done.
• Gutenberg is all about accessibility.

The list is not exhaustive, but it gives you a good idea of the advantages of Gutenberg over its predecessor.

In short, the user experience and content editing options are richer and more varied with Gutenberg than with the classic editor.

It’s possible to create far more advanced layouts — without coding — than with the classic editor, which remains confined to very basic tasks (pretty much just adding and formatting text and images).

The crucial question of support and maintenance

Switching to Gutenberg is also aligned with the direction of the WordPress CMS.

Since the end of 2018, WordPress has been pulling out all the stops on this project. All the latest developments revolve around it. Gutenberg is the central pillar of the tool that allows you to create your sites today.

In other words, if you want to benefit from the latest features offered by WordPress, and take full advantage of them, Gutenberg is a must.

For example, at the time of writing, WordPress contributors are working on phase 3 of the project: collaboration. In a few months, multiple authors will be able to collaborate in real time on the content editor.

Phase 4, which comes a little later, aims to integrate multilingualism into the WordPress Core.

What about the classic editor? Well, its lifespan is limited, which is a major obstacle to its future use.

Indeed, the Classic Editor plugin, which enables you to activate the old editor on your site, will be maintained just until 2024, “or as long as is necessary,” its description states.

In other words, its future unclear. After all this information, perhaps you’d like to switch to the WordPress block editor?

Just before we move on to a tutorial for how to do that, let’s clear up a small technical point that may be blocking your way.

Is it possible that Gutenberg isn’t active on your site?

Two possible scenarios

Let me guess: you want to use Gutenberg but, shockingly, there’s no sign of this editor in your back office. Only the classic editor is available.

Before you bang your head against your screen, there are two main explanations for this problem.

1. You’re using a major version of WordPress lower than 5.0

Before the release of WordPress 5.0, Gutenberg was not part of the WordPress Core. Logically, you can’t benefit from it if you’re using a version prior to WP 5.0.

To strengthen your site’s security and benefit from the latest WordPress developments and features, you should update your site as soon as possible.

In this case, upgrade to the latest version of WordPress, but take precautions first.

Back up your site (files + database) with a backup plugin like UpdraftPlus.

It’s also wise to update your site on a test environment, to make sure everything’s working properly. To do this, use the Local tool.

2. You’re using the Classic Editor plugin

Now we come to explanation no. 2. In this case, your site is up to date. It’s running on the latest major version of WordPress.

To repeat: this version is superior to WP version 5.0, which includes Gutenberg.

Even so, only the classic editor is available. So here, the “culprit” is our famous Classic Editor plugin, already mentioned several times.

Once active, this plugin restores the classic WordPress editor, which becomes the default editor on your site.

If you work with a service provider or webmaster, for example, they may have installed this plugin. To take advantage of Gutenberg, simply deactivate Classic Editor (instructions in the next section).

However, if you don’t manage your site yourself, check with your service provider before taking action. They may have had a good reason for enabling Classic Editor in the first place. 😉

All set for you? As promised, let’s get down to the practical part of this article. I’ll show you what you need to do to start enjoying WordPress’ block editor.

4 steps to migrate from the classic editor to the block editor (Gutenberg)

Step 1: Prerequisites

To begin with, make sure you apply the following best practices:

• Back up your site so you can easily restore it in the event of a problem. Rely either on a backup plugin like UpdraftPlus, or on an all-in-one maintenance tool like WP Umbrella.
• Update your site to the latest major version of WordPress. Do the same for your plugins and themes. Not sure how to proceed? Check out our dedicated tutorial on the blog.
• Check that the WordPress REST API isn’t blocked (Gutenberg uses this). Some security plugins or snippets may block it for added security.

If your site is already running on the latest major version of WordPress, there’s little chance that switching to Gutenberg will cause your site to crash.
If you’re using a major version released several years ago, it’s best to switch to the new editor on a test site first. A local installation will do just fine. This will allow you to check that everything is working properly. When all is well, you can switch to Gutenberg on your production site.

Step 2: Deactivate the Classic Editor plugin

Have you carried out the above checks? Good. If the WordPress content editor is not yet active on your site, chances are you’re using the famous Classic Editor plugin.

Continue by deactivating it. To do so, go to Plugins > Installed Plugins. Then click on the “Deactivate” link:

If everything works for you, here’s what’s going to happen. Before deactivation, the article editing interface (with TinyMCE) looked like this:

Now, when you edit a page or a post, this is what you’ll see on your screen:

That’s good: Gutenberg is activated and has taken over from the classic editor. It’s now the default editor on your site. But your work doesn’t stop there.

Step 3: Convert your content into blocks

If you visit a post or page created with the classic editor, you’ll see that all content is displayed in a single, classic block. Each element (text, image, etc.) is therefore not split into blocks (and cannot be edited individually).

To overcome this problem, click on the “Convert to blocks” option in the Gutenberg toolbar:

The entire content of the classic block will then be transformed into an individual block. For example, each paragraph will be contained in a “Paragraph” block. The same goes for each of your images or titles.

Do this for all your content (posts and pages).

If you have many articles, this can quickly become tedious. In this case, activate the Convert to Blocks plugin, capable of transforming all the classic blocks in your articles into individual blocks.

Step 4: Check that everything is displayed correctly

Your mission is almost complete. All that’s left is to check that the conversion to blocks has gone smoothly. Meaning: are there any display problems?

To help you, here are a few actions and checks to carry out:

• Go back over each block to ensure that its visual display matches what you’d like it to be. To do this, select a block by clicking on it, then apply the options of your choice in the right-hand side column of the editor.

• Check the conversion of each block. Some blocks may need to be changed (e.g. the “Quote” block to “Highlight Quote”).
• Check that your shortcodes are displayed correctly . If Gutenberg doesn’t support them properly, try copying and pasting them into a “Shortcode” block to see if there’s any improvement.
• Preview converted content in a browser window, to see how it looks on the front end (visible to your visitors).
• Make sure that the conversion of your blocks has had no impact on the responsive display of your content. To do this, use Gutenberg’s “Preview” tool for an initial check.
• Take a look at your images: Check that each alt tag is properly filled in for SEO purposes, but also pay attention to their appearance. For example, you may need to insert margins or borders.

If you come across any errors or bugs, refer to our guide to solving them.

Finally, if you’re used to collaborating with other users on your site, train them to use the content editor. Switching from one editor to another takes a little time and the acquisition of new reflexes.

How to go back to the classic editor

Before concluding, I’d like to make one final point. Put yourself in the shoes of the person who’s just switched to Gutenberg, then wants to go back to the good old classic editor for whatever reason.

So, how do you go about it? The procedure is very simple. Re-enable the Classic Editor plugin in your list of plugins, and that’s it.

By the way, note that you can activate the block editor, while still being able to switch to the Classic Editor at any time (and vice versa).

To do this:

• Activate Classic Editor.
• Check the “Block Editor” and “Yes” boxes in the Settings > Writing menu, then save your changes:

• In your content options, click on “Switch to Classic Editor”:

Once in the classic editor, you can switch back to Gutenberg at any time in the “Editor” box. Simply click on the “Switch to block editor” link:

Conclusion

Well, there you have it: switching from the classic editor to the block editor no longer holds any secrets for you. In the course of this article, you’ve learned more about both editors.

You also know how to switch from one to the other, with all the precautions you need to take to make sure you’re doing things right.

Personally, it took me a while at first, a few years ago, to acclimatize to the arrival of Gutenberg.

Today, I’m a fan of this editor — and so is the whole WPMarmite team — which I find much more intuitive, flexible, and creative than the classic editor.

I wouldn’t go back for anything in the world. So no Classic Editor for me! But perhaps you have a completely different opinion on the subject?

We’d love to hear your thoughts in the comments. We look forward to hearing from you!