Everything You Need to Know About WordPress 5 and the Gutenberg Editor

On December 6, 2018, WordPress unleashed its 5.0 version, including its revolutionary Gutenberg editor. After more than a year of waiting and worrying about the new version, the WordPress community wasn’t too thrilled with the timing of the release, and there were some serious (and valid) questions about the software’s stability.

Here we are a month later, and I wanted to share my experiences with both WordPress 5 and Gutenberg. After playing it safe for a month and waiting for the bugs to be worked out, I’ve made the switch to version 5 (5.0.2 to be exact), and I want to encourage you to do the same.

Bottom line? The initial kinks have been worked out, so the time to upgrade is now. Furthermore, Gutenberg’s block-type editing process is a total powerhouse. I’m super-excited about the increased functionality, and I think you will be, too.

Below, I’m going to tell you everything you need to know to make the transition smoothly and easily. I’ll also walk you through some Gutenberg basics, showing you how to get started, style text, add tables, and more.

By the end of this post you will know everything you need to get started.

Trust me. The writing process is about to get easier, and your future posts are going to have a whole new look that your visitors will love.

(See how I styled that text? Gutenberg let me do it with just three clicks!)

Let’s get to it.

What is WordPress 5?

The 5.0 was a major update for WordPress, and there was significant controversy surrounding its release. Users expressed deep concern the developers were rushing the new version through, bugs and all.

Now that the dust has settled and major bugs have been fixed, I want to call your attention to a few things:

Changes in code: There were some major code changes on the back end. Although this won’t actually affect your front-end experience, many plugin and theme developers have had to adapt their code and release new versions as well.

Block-based editing: This is major. The all-new Gutenberg editor is designed to simplify the process of adding, changing, and styling content. This is a huge change for WordPress users; the new editor represents a whole new way of handling content. You’ll learn more about Gutenberg below.

New theme: With the updated 5.0 version, WordPress introduced a new theme called Twenty Nineteen. I’ve temporarily activated Twenty Nineteen on this site, so you can experience the new look firsthand and see if you want to use it.

Should I upgrade my site?

Yes. If you haven’t yet been automatically upgraded by your host, you should go ahead and upgrade manually.

You might be concerned about making the switch, and I understand your hesitation. After all, if you’ve got a good thing going, why risk having something go wrong? But keeping your WordPress up-to-date is essential for security reasons. Plus, there’s a chance your themes and plugins may stop working properly if you don’t upgrade.

A major word of caution, though. Back up your site before upgrading. Any time you update to a new version of WordPress, there’s a possibility that doing so could corrupt or break part of your site. And if that happens, a backup could save you a lot of heartache.

To ensure the switch goes smoothly and your site keeps humming nicely, make sure your theme and plugins are also updated to their latest versions.

What is the Gutenberg editor?

And now we get to the exciting part.

Gutenberg is the new editing interface for WordPress. It’s a block-based system that will completely change the way you interact with content.

It’s going to make writing an easier, richer, and more satisfying experience, enabling you to create fabulous looking posts.

What are blocks?

Gutenberg “blocks” are individual pre-built units that you can work with on a page.

Each block has intuitive settings that are designed for use with the type of content you’re working with. There are blocks for all types of content, including paragraphs, headings, lists, images, columns, tables, and buttons.

You can drag and drop individual blocks, creating precisely the layout you want. You can also save and reuse blocks of content, and drag and drop media (such as images) from your desktop to your document.

It’s not difficult to master the basics of Gutenberg, and once you’re comfortable with it, you’ll love the increased flexibility it gives you.

Should I use the new editor?

Yes. The new editor is easy to learn, it’s fun to use, and it offers some great features that the old editor doesn’t.

With Gutenberg, for example, you can easily create tables, fancy images, and other types of content that were previously too difficult for non-techies to deal with. Below you’ll find my instructions for creating tables and images. See for yourself how straightforward the new editing process is.

Compared to the previous editor, Gutenberg is a lot easier to use. For example, from now on your draft will now look exactly like your post. While I’m typing this post, here is what I see:

With the exception of shortcodes (see below), this looks exactly like the published post will, so there is no need for me to ‘preview’ it in order to see what the real article will look like. The draft is identical to the final result.

Other features are easy to access. If you’re typing a document, you can click on the ‘content structure’ item on top of the editor (it looks like a circle with an ‘i’ in the middle). You’ll instantly get information about word count and the structure of your content. Here’s mine:

What if I don’t want to make the switch?

When you upgrade to WordPress 5, Gutenberg will become your default editor.

However, you’ll still have the option to use the old editor if you prefer. You can do that by going to your WordPress settings in the left admin menu. Select ‘Writing,’ and check the ‘Class Editor’ button.

But I urge you give the new editor a try. I, too, was concerned about making the switch, but I’m loving Gutenberg’s incredible functionality.

If you’re not yet sure, I urge you to take Gutenberg for a test run here. Get familiar with the visual building-block concept. Play with it a little, so when you make the switch on your blog, you’ll understand how it works and feel comfortable using it.

Now that I’ve shared my excitement about the new editor, I want to show you the basics, so you can hit the ground running and start using it with confidence.

How do I use the new editor?

When you add a new post or page, the first thing you will be asked to do is add a title. Type it straight into the title area as follows:

Below the title, you will see what is called a paragraph block. It will contain a message that says: “Start writing or type / to choose a block”.

When you start typing text in the paragraph block, this message will disappear, and the text you type will show up as you type it:

Congratulations! You just created your first block 🙂

As you write, you’ll notice that icons appear on top of the block. These icons allow you to align the paragraph, bold or italicize text, or add links.

On the right side of the screen you will find settings that allow you to change the color and size of the font. You can even change the background color!

Here’s what it looks like:

Once you are done writing that first paragraph, you can start adding additional blocks to your content.

How to add a block (using an image block as an example)

There are many ways to add blocks to your draft. One way is to click on the + sign on the top left of your editor and select the type of block you’d like to add.

You have the option to choose from the following:

• paragraph
• image
• list
• heading
• table
• columns
• buttons
• embeds (for embedding YouTube videos, Twitter tweets, etc)
• and a lot more…

If you want to get even fancier, you can add custom block types with new plugins created especially for Gutenberg. For example, with the Stackable Gutenberg blocks, you can add a grid of blog posts, pricing tables, cards, and more!

Let’s say you want to add an image block, you can do so by clicking on the + sign and selecting ‘Image’:

You can then select the image you’d like to add from the media library or upload one from your computer. A toolbar that appears on top of the image will allow you to align it as you wish. On the right side of the page, you will have the ability to change the size of the image and the ‘alt’ text (that’s the text that shows up when you hover over the image).

Another way to add blocks (using a heading as an example)

You can also add blocks by clicking on the + symbol right on the top border of an existing block. This will add a new block of your choosing right above it. Watch how I add a heading above an image:

In this example, I added a heading block. You can select whether you want the heading to be an H2, H3 or H4, and you can format it as you wish.

My favorite way to add blocks 

The easiest and most intuitive way to add a block is to put your cursor where you want the block to be added, and then hit the ‘return’ key.

Here you can see how I add a new paragraph block right after an existing one, simply by hitting the ‘return’ key:

If you are looking to add a different kind of block (not a paragraph), you can type a slash (‘/’) at the beginning of your text. A dropdown box will open up, allowing you to pick a different type of block.

Take a look at how I add a list block this way:

Another way to accomplish the same thing is to hit the ‘return’ key. Then hover over the new block, and click on one of the icons that show up:

There are special icons for images, headings, and lists. And if you want another type of block, you can click on the + icon.

Easy and quick.

How to remove a block

If you’ve accidentally added a block you don’t want, or if you have changed your mind about an existing block, you can highlight it and click on the ‘backspace’ or ‘delete’ keys.

Another way to remove a block is to click on it, and then click on the three vertical dots that show up above it. Then you can select ‘Remove block’ and it will disappear:

You can also change an existing block from one type to another.

So, let’s say I have a paragraph block that I’d like to change to a heading block.

Instead of removing the paragraph and adding the heading, I can simply change the paragraph to a heading, by clicking on the top left icon in the block’s toolbar:

How to move a block

You can move a block by dragging it to a new location or by clicking on the up and down arrows located on the upper-left side of the block:

That is all you need to know to get started. But here’s more:

What are the most important tricks for me to know?

As an affiliate of Amazon (or other online stores) and as a student of mine, there are certain things that you definitely want to know how to do.

The most important ones are covered below. I’ll be happy to discuss more advanced tricks in the future.

How to highlight text and change the font size & color

Changing the color or font of select pieces of text is a great way to make your content more engaging and easier to read. In addition, highlighting text helps draw attention to important bits of information.

In the past, you needed to use a special plugin in order to accomplish this. Now this ability is built into the paragraph block, so it’s easier than ever to format your text as you wish:

Simply select the font size and color settings that you want, and you’re done.

How to align images

To make your posts more engaging and professional looking, you will want them to include images. But at times, you may want to align those images within the text so they don’t take up too much space.

There are two ways to do this.

First, you can use the Media + Text block, which allows you to place images and text side by side.

The disadvantage of this block is that it doesn’t wrap the text around the image. If you want wrapping to take place, then first you’ll need to create an image block like I showed you above:

Then, you’ll be able to adjust the size and alignment of the image:

Sometimes, when you do that, you’ll get a paragraph block to show up beside the image. Most of the time, though, I’ve noticed that the paragraph block doesn’t show up. What you can do in that case is create a paragraph block above the image and move it down.

Here’s yet another animated gif to show you what I mean:

By the way, this cow is by far my favorite image on this site…

How to add links and make them “nofollow”

You can highlight any text, then click on the link icon to turn it into a link. If you click on ‘link settings’, that will enable you to set the link so it opens in a new window.

Here’s a cool trick: You can copy a url and paste it over any text. That will turn the text into a link with the fewest clicks possible.

Affiliate marketers who want to add the nofollow attribute to their link can either use a plugin for this, or edit the HTML by clicking on the three vertical lines on the top of the block and selecting ‘edit as HTML’:

Note how I added the text rel=”nofollow” to the link in order to make it nofollow. If you don’t know what this means, don’t worry about it. Just move on:

How to add tables

I am often asked by my students how to add tables to a blog post.

Now, with the table block, you can easily do this without needing an extra plugin. All you have to do is add the table block, select the number of columns, and start typing!

How to use shortcodes

Shortcodes are words or phrases that you place in square brackets. These words or phrases get translated to something else by a plugin.

For example, if you follow Digital Worth Academy or Constant Profits Club, you know how helpful the table of contents plugin is. In order to add a table of contents to a post, you use a shortcode that looks like this: [ toc ]

With the new editor, you can use the shortcode in exactly the same way as you did before. Simply enter it into a paragraph block, and the table of contents will show up.

If you’d like, you can also use a special block called ‘shortcode’. Both approaches work.

What if the new editor doesn’t play nicely on my site?

If you find that you are having problems with the Gutenberg editor, you might have a compatibility issue. Whether images are not aligning properly, paragraphs are looking weird, or you are seeing any other unexpected behavior, it’s possible that your theme or one of your plugins is not 100% compatible with WordPress 5 yet and needs to be updated.

The only way to find out which one of your plugins (or theme) is causing your issue is to temporarily disable them all and then try the editor again.

If you find that this solves your problem, you will then need to enable the theme and plugins one by one until the editor stops working properly again. At that point, it will be clear that the last plugin (or theme) you added is the culprit. You’ll need to contact the appropriate support team and let them know. Hopefully, they’ll get it fixed for you.

What else would you like to know?

Despite my initial hesitation about this entirely new editing platform, I’m thrilled with Gutenberg. No doubt, it’s a total game changer. Thanks to the folks at WordPress, content creation will never be the same again.

I’ve been thinking of writing about some of the advanced features Gutenberg offers. Let me know in the comments below what you’d like to see next?

(And tell me what you think of the new theme, Twenty Nineteen!)

Did you like this post?

Sign up to my mailing list and I will teach you how to earn an income online from affiliate marketing:

Name:

Email:

Jump in and see what Gutenberg can do for you. I think you’ll agree that it’s a big improvement that will help you create cleaner, fresher, more visually attractive posts. Enjoy the experience!