| WordPress

So you're excited about using WordPress’s new Gutenberg editor.

Gutenberg is a great tool that offers flexibility and easy creative options. But what happens to all the posts and pages you have already created on your WordPress sites? Will your content look the same after you enable Gutenberg? And how easy is it to take advantage of all the new features?

I'll answer those questions in this blog post.

First things first: on the front-end of the website, all your content looks exactly the same as it did before.

The changes you see when using Gutenberg will only be visible when you're editing content. After upgrading to Gutenberg you will see all the existing content laid out in a plain white block, with the label "Classic" in a light grey bar at the top. 

classic

By clicking on ‘Classic’ you will bring up a toolbar very similar to what was available in the old wysiwyg editor.

How to Convert Existing Blog Posts to Gutenberg

By using this toolbar you have access to all of the functionality of the previous editor, although it is laid out a little differently. For example, there is no longer an "Add Media" button. If you want to add media to this block, you click on the button with the camera and musical note. This will take you to the familiar "Add Media" screen.


About the new Classic block in Gutenberg

The new editor treats your old content as a text block. You can add new blocks above or below the existing content:

You can access Gutenberg’s block system by clicking on the three vertical dots on the right-hand side of the toolbar:

The new block comes with the block toolbars, both above it, and on the right-hand sidebar, while your old content keeps the classic toolbar.


Converting Your Old Content to New Blocks

You don't have to leave your old content in the "Classic" block. You can also convert the old content to the new block formats by clicking on the "Convert to Blocks" item from the drop-down menu that appears when you click on the three vertical dots. 

Gutenberg will do its best to guess the type of block your content needs.

In this example below, it has converted the text on the left-hand side into a text block and the image on the left into an image block.

Below this section was an embedded Google map, and Gutenberg again correctly converted this into an HTML block:

If you find that the wrong type of block has been used for your content, you can click on the far left button of the block toolbar to convert the type of block.


Help! I'm not ready for Gutenberg yet!

If you are not ready to use Gutenberg, you can disable it with the Classic editor plugin.

  • Go to Plugins > Add new.
  • Search for "Classic Editor" and install.
  • Go to Settings > Writing.
  • Select "Classic Editor" in the "Default editor for all users" option.

This is a one-click solution and will remove the editor from all posts and pages, but you can allow editors to choose their own editor.

From the Pages and Posts listings, you can select the editor you wish to use from below the item’s title:


Conclusion

Gutenberg’s conversion of existing pages and posts into blocks is nicely done. It is easy to add on new blocks but if you prefer to stay with the Classic Editor, you can easily do so by installing the plugin.


About the author

Born in Zambia but living now in Cape Town, South Africa, Libby Young started out as a journalist. She taught herself HTML when the company where she was an sub-editor made the transition from CD-Rom to the web 20 years ago. Since then she has developed content-rich websites using a variety of open source content management systems.