WordPress Gutenberg tutorial: Get ready for new editor

WordPress Gutenberg editor is currently hot topic in the community of world’s largest CMS.

Official announcements have set WordPress 5.0 as the version in which Gutenberg will become the default editor. According to plan, it should happen later this year. Right now, Gutenberg is in the final stages of testing and bug fixes.

On the other hand, this kind of forced adoption of new editor has caused a significant rift in user’s community. Right from the start, WordPress Gutenberg has received mixed reviews, ranging from complete disappointment to kudos and ovations. People are reporting various bugs and problems with Gutenberg, ranging from theme and plugin incompatibilities to missing functionality and being unable to use it completely.

Like it or not, Gutenberg is coming to WordPress sooner rather then later. So, the best you can do is embrace this change and get your site ready. In this post, I will show you the steps you should take to prepare your site for Gutenberg and how to start using the new editor.

What is Gutenberg and why should you care?

All right, first a little background for the uninitiated.

Gutenberg is a new WordPress editor, aiming to replace existing (classic) editor that has been around for a long time. It is based on a concept of blocks, which are meant to make it easy to add complex pieces of content to a page. Block should enable some functionality that is today achieved by shortcodes, custom HTML or plugins.

How to prepare your WordPress site for Gutenberg?

Let’s face it, Gutenberg is gonna be a huge change for WordPress. Experience so far has shown that even small updates to WordPress can break some functionality for many websites. And with the kind of change Gutenberg is, you can expect even more trouble. So, it’ better to   prepare in advance and make sure your site is ready.

In the next few section, I’ll walk you over the procedure you can use to make sure that your website or blog is ready for Gutenberg.

Step 1: Back everything up

wordpress gutenberg backup siteI am sure you do a regular backup of your site, right? Well, if you don’t, now is the perfect time to start.

When doing a huge update like Gutenberg, it is essential to have a backup copy of working site to fall back on if things go bad. And since you run WordPress site, you get a ton of plugins that can do backups for you automatically.

If you still don’t have a backup for your site, go and make one before we start. If you don’t know what plugin to choose for backup, go with Updraft Plus. I’ve written about it in the post about essential plugins for your WordPress site, because it’s my plugin of choice for backups.

With Updraft Plus, you can make backup copy of your entire site with a single click

Simply click the Backup Now button, and Updraft Plus will create a backup of your site in a few seconds. By default, backup will be held on the same  server as your site, but it would be better to configure upload to external storage service, like Amazon S3 or Google Drive.

With your site backed up, we  can now get on the next step of testing Gutenberg.

Step 2: Create staging site

Staging site is like a test environment for your live site. It is an exact copy of your site, with all the settings, posts and content as your live site. The only difference is that only you can see it.

You can use staging site to test new plugins and themes, try out various configuration settings , play around with layouts. Basically, anything you want without your live site. It is perfect for testing significant changes to your site, like Gutenberg editor.

So, how do you create staging site? There are a lot of different options, but the easiest would be to install WP Staging plugin. This plugin allows you to create staging sites on any platform with a single click.

Creating staging site with WP Staging is a piece of cake. When you install the plugin, simply go to  WP Staging->Sites/Start in your main WordPress menu. After that, click on the button “Create new staging site” and follow instructions, like in the image bellow:

Simply enter a name for your staging site and click “Start Cloning” button. Plugin will start creating your new staging site.

There are also options to choose what database tables and files you want to include in your staging site, but I suggest you don’t mess with this. You want to have exact replica of your live site for staging. I suggest you only change these settings if you don’t have enough disk space for complete staging site.

Step 3: Install Gutenberg on staging

Now that we laid down preparatory work, it’s time to get dirty and install Gutenberg. Before we begin, make sure you are working on  your staging site, not the live one. You can easily distinguish, since WP Staging changes the color of your admin bar to orange, like in this screenshot:

This is the screenshot of dashboard for WordPress version 4.9.8, which includes so called Try Gutenberg callout. This is simply a button which allows you to install Gutenberg directly from Dashboard. You can simply click on this button and your site will start using Gutenberg editor.

If you don’t have this version of WordPress, or you have disabled this feature, you can simply install Gutenberg from WordPress plugin repository, like any other plugin.

Step 4: Inspect your site

Now is the time to make sure your site works correctly with Gutenberg. While all sites are different and have different requirements and functionality, so different things should be checked, there are some common items that should be verified for all sites. These might include:

  • Verify that page and post layout is without defects, ie. the same as it was before installing Gutenberg
  • Make sure that all plugins related to front end work. These might include short codes, forms, popups, tracking codes (ie. Goole Analytics), social sharing buttons and so on
  • Check that plugins which add meta boxes to editor still work correctly
  • Try editing some old posts with Gutenberg, update them and check if they show up correctly
  • Try to create and publish new posts or pages and make sure that they work as expected

If all these checks turn out fine, you can assume that your site is pretty much Gutenberg-ready. If you feel confident that Gutenberg will work, you can now move it to your live site. At this point, you have two options:

  1.  Delete your staging site, install Gutenberg on your live site, and continue from there. You should be pretty much safe if everything worked fine on your staging site, but do keep a backup at hand
  2. Keep using your Gutenberg on your staging site for a while, maybe creating some content with it and playing around. If you want to eventually move your changes to live site, you can use WP Staging Pro to have your changes seamlessly integrated with your live site

If you were following this complete procedure, you should have pretty good idea about whether Gutenberg will work for you at this point. Just keep in mind that having good backup is essential at this point, so you can revert your site back to working condition if needed.

WordPress Gutenberg editor tutorial

Assuming Gutenberg works on your site and you start using, question is, what now? What’s such a big deal about it and what can you do with it?

The fact is, Gutenberg has quite different philosophy compared to standard editor. It may take you some time to get used to it and unleash it’s full potential. At first, you might feel a little frustrated or intimidated, but shouldn’t take you long to figure things out.

In the rest of this post, I will walk you through basic functionality of Gutenberg and how you can get started using it.

Getting around Gutenberg user interface

Gutenberg’s user interface is quite similar to the classic editor. This should help you make the transition easier. This screen shot show Gutenberg editor in it’s full glory:

You’ll notice that I’ve annotated parts of  this screenshot to make it easier to explain what is what. Let’s take a closer look:

  1. When you install Gutenberg, it will add new submenu to WordPress admin menu. This me u contains a link to demo post made with Gutenberg. It’s the one shown in the screenshot and it showcases almost all possibilities of Gutenberg
  2. The little “+” sign  is for adding  new block to your post. Gutenberg comes with a set of predefined blocks that provide common functionality for most content creation needs. In the future releases, more block will be added, and can also be created by third party developers. When you click the plus sign, you get a list of blocks from which you can select block to add.
  3. Standard undo/redo buttons similar to ones in classic editor.
  4. Content structure tool gives you high-level overview of current content. For example, it shows word count in the post, number of blocks and headings. It also gives you a structure of headings, so you can jump on specific part of the document by clicking on the heading. This is especially useful when writing long form content
  5. Controls for saving draft, preview and publishing are now in the Gutenberg toolbar. I find it much more convenient to have them here, especially for preview. For example, when writing long post with classic editor, you had to scroll all the way up to preview button from the bottom of the post. Having preview button floating here gives you much easier access.

As you can see in the screen shot, right-hand side bar is still present, and is similar to the classic editor one. But one new change is that, if you click “Block” tab, you will get some additional details about currently selected block.

Also, if you need more screen real estate, you can hide right sidebar by clicking gear icon in upper right corner.

Working with blocks in Gutenberg

In Gutenberg, blocks are basic building blocks for your content. Unlike classic editor, which was basically just a glorified text processor, blocks in Gutenberg allow rich and visual editing experience for your posts and pages. This means that instead of treating your post like a text document, you treat it like a collection of pieces which can contain different media types: text, images, video, audio and so on.

In addition, you can set different layouts for different sections of your page. For example, you can have 2-colums layout in one part of post, single column in another and tabular layout in another part. With classic editor, you had to use various plugins and short codes  to achieve something like that.

In this part of the tutorial, we’ll go through different block types available in Gutenberg and see how best they can be used.

Post title and slug in Gutenberg

Although not exactly a block, post title has an important place in Gutenberg editor. Just like in classic editor, you start your post by writing a title.

As you can notice in the video above, Gutenberg does not have dedicated UI section for editing the slug, like classic editor does. Instead, you need to click inside title editing box, and then you get the popup which allows you to change post slug. Of course, this depends on type of permalinks you set up for your site.

After you have the title in place, it’s time to start editing content. We’ll now go through the Gutenberg Demo post and  see what kind of blocks we have at our disposal.

Cover image block

Cover image is an image with text overlay option. It allows you to set any image and write text over it.

When you click the block to select it, additional tools and options will pop up. On the top of the block, you can see the controls for alignment of image itself, and alignment of the text relative to the image. For example, if you choose to align text left, it will jump to the left side of the image.

On the right sidebar, you can notice additional controls for cover image properties. You can change opacity of the background image, and whether it is fixed or moves with the scrolling. Following video demonstrates these features.

You can notice how scrolling changes when you select or un-select fixed background, and how you can change appearance of the text when you change appearance.

One thing that is not possible at the moment is to change text color or font, but it is being worked on and will be added in future releases. It is, however, possible to set text (or part of it) to bold, italic or even make it a link.

Write text in paragraph blocks

Paragraph block in Gutenberg is something that is most similar to classic editor. As the name suggests, it contains the single paragraph of text, with some simple formatting options.

As you can see, at the top of the block, you can set alignment for the paragraph, just like in classic editor. You can also set bold, italic or strike through styles for some or part of the text, or insert links.

On the right sidebar, you have even more control over your paragraph. You can set font size, background color or text color. There is also Drop Cap option, which makes first letter of paragraph larger, like in this screenshot. It is nice effect to use in some circumstances.

Note that this block contains only one paragraph. If you press Enter, Gutenberg will automatically create new paragraph block after current one.

Separate parts of the content with headings

Heading block is another common block in Gutenberg. You probably guess that it allows you to insert heading in your content. But, it also adds some new capabilities not present in classic editor.

When you click on the heading block, additional options will appear on the top and in the right sidebar. You will first notice that top toolbar allows you to set only 4 sizes o headings, but in sidebar you can set all six, just like in classic editor.

You can also set the styles for text, either whole heading or individual words. Available styling options are bold, italic or strike through text, as well as adding links. And you can also set heading alignment in sidebar.

One very useful option is ability to set anchor text for heading. With this, you can link to heading from another part of the page, which is very useful if you write long content. In classic editor, you had to fiddle with code to achieve that, so this is quite an improvement.

Handling images with image blocks

Images are important part of the content, and WordPress has always had good support for including them. With Gutenberg, manipulating images has become even easier, because you get instant  feedback of all your changes.

Unlike classic editor, you can edit all aspects of image appearance right in the editor. There’s no need to go into media library.

Let’s start with caption. You can simply click in the space under the image and write the caption you want. You can also style the caption text anyway you want and also add links.

In the sidebar, you can set image alt text (useful for search engines) and customize it’s size. There are predefined percentages available, bu t you can also set any size you want.

Finally, there are alignment buttons in the top toolbar. They allow you to set image in the center of your content, or have text wrapped left or right of it. Unfortunately, this part is not quite intuitive.

Since Gutenberg editor has fixed width, it’s not as wide as your theme can allow your content to be. That’s why, even if you set image to be aligned left, it is not immediately visible. You will need to go to preview mode to see how your content will actually look. For example, this is how content in previous image will look like in reality:

 

As you can see, image is really aligned left, and text is shown to the left of the image, as expected. Hopefully, this is a bug in Gutenberg that will be solved soon, because it can lead to quite a confusion. Other then that, image handling is done really well.

Add even richer media with image galleries

When you need to add multiple related images to a a post, image gallery can come in handy. With classic editor, you needed separate plugin or shortcode to support that, but Gutenberg adds support for image gallery out of the box.

You can write caption for each  image right in the gallery. If you look at the side bar, you can select how many columns you want to have. Gutenberg will expand each image in the last row to fill entire space if there are not enough images to fill each slot.

Image Gallery block provides only basic functionality, and is quite limited compared to dedicated gallery plugins. However, if all you need is basic functionality, you can ditch your dedicated plugin and have one less thing to update.

Use buttons for calls to action

Another new block introduced with Gutenberg is button. This is one more useful item for which you needed a plugin before, but now comes out of the box.

To be honest, editing options for buttons are pretty limited. You can change text style, text color and background color, and that’s about it. For more advanced buttons, you will still need dedicated plugins. But, I expect that WordPress developers will add more options to button as the time goes by.

Granted, these buttons are just glorified links, and the only thing you can do with them is link to another page. Bu, they are a good for calls to action for your readers, and even in this basic form, beat links for that.

Layout your content with columns

If you ever wanted to have your content in 2 or 3 columns with the default editor, you needed a plugin for it. With Gutenberg, you get a dedicated block just for that. This screen shot shows content in two columns side by side.

You can add any type of block in each column. In this example, we have left column containing paragraph and heading, while the right one contains button and paragraph.

In the sidebar, you can change the number of columns you want to have by simply moving the slider.

One drawback with columns is that they all have the same width. So, if you want to have two columns with 60%-40 width ratio, you can’t at this point. But, this block in still in beta development stage, and this issue should be addressed in future releases.

Use tables for data driven content

If your posts contain a lot of data that need to be summarized or compares, nothing ca beat tables for that. Gutenberg comes with table block for precisely  this purpose. With table block, you can add arbitrary number of  rows and columns. You can easily add or remove rows and columns, and also adjust their size, like shown in this animation:

Although this feature totally blows classic editor out of the water, you can’t not notice that table options are quite limited. For example, you can’t customize borders, highlight rows or columns, add captions etc. So, if you need advanced table options, you are still better of using dedicated plugin for it.

Advanced options with custom HTML

If you need to do some fancy or weird content customization, you might have the need to dive into HTML code. With classic editor, you had no choice but to go to text mode and type your HTML there. This was messy because it’s difficult to find HTML you type in the WordPress generated content. SO, if you ever needed to update your HTML, it wasn’t really pleasant experience.

For this purpose, Gutenberg provides HTML block. You can type any HTML code in this block, and you get instant syntax highlighting and code completion. Although pretty basic, this still beats fiddling with the classic editor. For example, this is how a simple HTML block would look like:

And this is how the final result would look like rendered on the page:

HTML block is great when you need to do something uncommon in your post which can be accomplished easily with HTML. It’s better then getting another plugin just for that. And, paired with reusable blocks, it’s great tool to have (more about reusable blocks later).

HTML block also has a preview tab which lets you see how the block will look like right in the editor. This is extremely handy while you are writing your HTML code.

Reuse your block anywhere

One particularly useful feature of Gutenberg is that you can create your own blocks and reuse them anywhere on your pages. For example, you can create blocks with specific background, text color and layout and use them in multiple places in your content. This saves you time and effort.

HTML blocks we mentioned in previous section are perfect example. So, let’s see how we can turn our HTML into reusable block.

When you click on the block, a menu appears on top right corner. Click “Add to reusable blocks”, and enter the name for your block. After that, you will have the block available for insert anywhere in the document.

You can also remove the block from reusable blocks, but be careful if you do this, because it will remove the block from all the places it was added to.

Reusable blocks is one of the coolest features in Gutenberg and one you will probably use a lot as you get used to Gutenberg editor.

Fall back to classic editor

If you are still not convinced about Gutenberg, or simply prefer the old editor, don’t worry! Classic editor is a block in Gutenberg.

You can still write most of your posts using this block. But, it has it’s limitations. For instance, it’s currently impossible to insert images or media in this block. It should be possible in future releases, but for now it’s not supported.

Should you switch to Gutenberg?

So far, we’ve gone through the steps you should do before trying out Gutenberg, and we also covered some of it’s basic functionality. Now, the questions is: should you move your site to Gutenberg?

In my opinion, you should. If your site did not show any errors while you were trying it out, chances are pretty good it will work out OK. And since Gutenberg will become the default editor pretty soon, you should start getting used to it.

If you still want to keep using the classic editor, even after Gutenberg release, you can do that. Just install classic editor plugin from WordPress repository. This way you can keep using old editor without problems.

Final word

Gutenberg seems to be the future of WordPress, whether we like it or not. Although it does not feel quite polished, I pretty much like how it looks so far. With continued development, I feel it can be a great improvement over the classic editor.

I would very much like to hear your experiences with Gutenberg. Did you like it or not, and why? Did it cause problems with your site’s theme and plugins?

Also, did you find this post helpful? Does it provide enough details about the subject? Did you feel you learned more about Gutenberg then you already knew? Will it tempt you to try out Gutenberg?

Please feel free to comment and let me know what you think!

1 thought on “WordPress Gutenberg tutorial: Get ready for new editor”

  1. Hi thank you so much for sharing such a great information, im looking forward to join your community for more posts like this. Stay blessed and keep up the good work.

Leave a Comment

Your email address will not be published. Required fields are marked *