building blocks to create an outcome

WordPress Gutenberg Tutorial: How to Use the New Block Editor

34% of all websites and counting run on WordPress.

This figure doesn’t come off as a surprise because WordPress is free, easy-to-use, and SEO-friendly. It also offers a wide availability of plugins that takes WordPress-powered sites up a notch.

Beyond that, the content management system’s adaptability to changes remains one of its most dependable features. Regularly, WordPress introduces users to updates ensuring that their sites are secure and running smoothly.

One of its latest introductions comes with the release of WordPress 5.0. The update redefined the way you create content as it says goodbye to a classic editor by paving the way for a new one:

WordPress Gutenberg.

In this WordPress Gutenberg tutorial, you will learn all about the block editor. You will learn what it is, why you should use it over the classic editor, how to use it, and more.

WordPress Gutenberg Tutorial: What Is It?

Gutenberg is the new WordPress editor. It takes its name from Johannes Gutenberg. He introduced printing to Europe by inventing a printing press with mechanical movable type.

Unlike the classic editor, Gutenberg lets you create content using blocks. They are elements that you can add on your page.

You can add a block for every image, video, paragraph, and other common content elements. It’s up to you to add the number of blocks you want.

Why Use Gutenberg Over the Classic Editor?

If you’re new to WordPress, then you should be able to transition to using Gutenberg just fine.

However, old WordPress users have a bone to pick with Gutenberg and for good reason.

Matt Mullenweg, thefounder of Automattic (the business behind WordPress), introduced Gutenberg at WordCamp Europe 2017. Around this time a version of Gutenberg had been deployed as a plugin for feedback and to help ease in users to the new publishing experience WordPress is aiming for.

Users were not happy with the plugin, to put it mildly.

It changed everything they love about creating content on WordPress.

The classic editor is similar to Microsoft Word. It’s a text editor that comes with formatting buttons. And it allows you to edit your content via a visual editor.

Classic Editor Appearance

So if you’ve been using Microsoft Word or any document editor all your life, then the classic editor should make you feel right at home.

Later on, I’ll show how Gutenberg works and how it is a drastic departure from the classic editor.

If there’s a way to show you how much the WordPress community rejected Gutenberg, then looking at its plugin rating should give you a good idea:

Gutenberg – WordPress plugin WordPress org

So, going back to the question: why should you use Gutenberg at all?

The answer is really simple:

Gutenberg is here to stay, whether you like it or not.

The more you resist, the more you stay behind as WordPress keeps innovating with the Gutenberg editor.

While this defiant stance of WordPress continues to be met with scrutiny, at the end of the day, Gutenberg will still be there.

Considering the reservations against Gutenberg, the best anyone can do is try it out first.

Play around with the editor and form an informed opinion about it. And while it does change your way of creating content, Gutenberg doesn’t have to be an obstacle.

Once you’ve tried it out for a period, you will notice that it could prove to be better than the classic editor in the long run.

For one, Gutenberg is more responsive and it reacts quickly to any changes via JavaScript compared to the classic editor.

Let’s face it – the classic editor wasn’t enough for most people who want to let their content achieve a desired effect.

With the classic editor, they needed to install a plugin before they can implement a complex type of content. Without a plugin, they’re quite helpless.

At the end of the day, the goal of WordPress with Gutenberg is to help users create useful pages without the use of page builders and other third-party tools that power most WordPress sites.

By simplifying things, WordPress users should be able to crank out more complex and beautiful pages on their site.

But can Gutenberg really do it?

How to Create a New Blog Post or Page Using the Block Editor

Gutenberg may look different from the classic editor. But it doesn’t mean that you have to learn the editing process from scratch.

This block editor is intuitive. It still allows you to do everything you can do in the classic editor.

First up is to create a new blog post or page. You can make this happen the way you normally do.

Just head on over to your WordPress dashboard and click + New on the upper section. To create a new post, choose Post. If you want to create a new page, choose Page.

WP Dashboard Plus New

You can also use the side menu for this. Just choose what you want to create, whether Posts or Pages. Then click Add New.

Posts or Pages

How to Add Blocks

Once you have created a new post or page and also launched the block editor, you can start adding blocks. Just click the plus sign on top of the edit screen.

Click to Add Block

Then you will be presented with the option to add a specific block.

Block Elements

If you don’t have a specific block to add at this point, you can go back to the edit screen. There, you will find default blocks that you can use to create a standard piece of content.

One of your default blocks is your Title block. It’s where you can input your title.

The next is a Paragraph block. It’s where you can enter a paragraph or other pieces of text content.

Title and Heading

These two default blocks should be enough if what you’re aiming for is a simple post or page. If you’re not going for anything but a title and text, you’re all good. But if you want something fancy, then you need additional blocks.

To add another block below these two default blocks, clicking the plus sign will do the trick. And if you want to add a block between your existing blocks, you can do so with the help of the plus sign at the bottom of an existing block.

For example, you want to add a block between your Title and Heading blocks. Therefore, you need to click the Title block first. Then look for the plus sign at its bottom and click it.

Add Block in Between

And as you can see from the result, I added a Paragraph block between my Title and Heading blocks.

Paragraph Block in Between

To start adding content to blocks, just click on one of them. Then write away!

Like this:

Align Bold and Italic

You’re free to customise the content of a block. You can change the block type or style.

You can also use the standard formatting and choose bold and italic texts. And if you want to change the content’s alignment to left, center, or right, it’s up to you.

You can also load more customisation options!

Write Away

How to Add Reusable Blocks

An impressive and unique feature that Gutenberg has over the classic editor is that you can work with Reusable Blocks in the block editor.

This is most helpful to site-owners who usually add snippets to their content pieces. With this, they won’t have to compose the same type of content over and over again.

As their name suggests, you can use these Reusable Blocks over and over again. Once you have saved them in your collection, they become a block type that you can easily add!

To start creating Reusable Blocks, first enter the content you want in a standard block.

Reusable Blocks Content

Then load up more options and select Add to Reusable Blocks.

More Options for Reusable Blocks

Next, name your block. Then hit Save.

Name Reusable Block

To use it, click the plus sign to add a block. This is the normal way you add a block.

Add a Block

Then search for your reusable block according to the name you used earlier. In this case, it’s Untitled Reusable Block.

Next, insert it into the edit screen.

Untitled Reusable Blocks

And as you can see below, it’s there!

New Reusable Block

Common Blocks

How to Add Images

Gutenberg also makes it easy for you to bring media files in.

With the classic editor, you would need to upload a media file to your gallery before you can insert it into your post. Well, that time-consuming approach is gone now thanks to Gutenberg.

To get started, just add an Image block.

Image Block

From there, you can upload an image. You can also retrieve an image from your Media Library. Or you can insert it from a URL.

Upload an Image

You can also go with a ready-made option. As you edit a block, you can see the icon for uploading an image. You can click that!

Image Icon

Want to make this approach even easier? You can simply select a block. Then copy an image and paste it into the edit screen!

This is how it will look like:

Add Image Result

How to Add an Image Gallery

There’s no stopping you, too, if you want to use multiple images in one go. This is going to be a piece of cake for you because a Gallery block is among the common blocks in Gutenberg.

Gallery

From there, you can hit it off by clicking Upload then uploading multiple images. Using images from your Media Library is fine, too.

Upload Gallery Block

After you upload images into a Gallery block, this should be the result:

Add Image Gallery Result

How to Add Lists

Another common block allows you to add lists. Just choose the List block.

List Block

Once the block is added, you can start creating your list.

Just like this:

Add List Result

How to Add Shortcodes

Just like they did wonders for you when you were using the classic editor, shortcodes will still do wonders for you in the block editor. All you need is to add a Paragraph block.

Then you can type the shortcodes you plan on using.

An explicit alternative? You can simply select the Shortcode block under the Widgets category.

Shortcode Block

Here is an example. It’s a shortcode that lets you specify an author.

Add Shortcode Result

Special Content Blocks

And if you want to amp up your post or page with Gutenberg, a way to do this is to use special content blocks.

With the classic editor, sure, it works, too. True, you could figure out a way how to incorporate unique elements such as cover images into your posts or pages. That could be challenging and time-consuming, though.

With Gutenberg? You don’t need to rack your brains or spend a lot of time to make it happen. With the block editor, all you need is to add blocks!

How to Add Cover Images

What’s unique about cover images is that they result in more engaging content. People are more likely to check out your post if it features a cover image.

To begin, go with the Cover block for this.

Add Cover Block

Once you have chosen this block, just upload an image. You can also use one from your Media Library.

Cover Block

The result will look like this:

Cover Image Result

By then, you can have a cover image for your post or page. Another advantage of this block is that it lets you edit your image.

Just head on over to the Cover Settings and Advanced Settings on its right.

How to Create Multi-Column Content

Another special block that you can add in Gutenberg is the Columns block under Layout Elements.

Layout Elements Columns

This is most useful if you want to compartmentalise your content. This block lets you create multiple columns. And it lets you add text into those columns.

Column 1 and 2

Best WordPress Gutenberg Themes

Now that you know your way around Gutenberg, it’s time for you to install a Gutenberg-friendly theme for your WordPress site. Wondering why?

Well, some WordPress themes work seamlessly with the block editor. Unfortunately, you can’t say the same for all WordPress themes.

Installing a Gutenberg-friendly theme is an approach toward a successful web design process. It’s how you can show your brand’s full potential through your site. And it’s how you can make the most out of the block editor.

The best ones are as follows.

Astra

Astra

This stylish WordPress theme optimises your site for speed and performance. Among the things that make it stand out are the starter sites that it features to help you quickly launch what you have.

Thanks to the page builders support, designing your layout or fully customising your template with Astra is possible. It comes with other custom settings for headers and colours, crisp typography, and more!

Divi

Divi

If you want a highly flexible and powerful theme for your site, this is an excellent choice. It features real-time design settings that can instantly help you visualise the kind of design you want for your site’s layout.

What makes it unique is that it also presents you with a click-and-type functionality. Therefore, it lets you add content anywhere on your site.

Divi makes for responsive editing. Plus, it offers pre-built layouts, a design toolkit, content modules, and more!

Genesis Framework

Genesis Framework

Apart from focusing on SEO and your site’s performance, an outstanding feature of this is that it’s a starter theme or framework. With minimal styles, it provides a solid ground that can support you in the process of making your very own WordPress theme.

And as a framework, Genesis Framework can help you spruce up your site on top of using the block editor. All you need is to install different child themes such as Infinity Pro and Parallax.

OceanWP

OceanWP

This Gutenberg-friendly theme presents you with plenty of creative demo sites. It’s responsive and optimised for SEO. It comes with the fastest page loading time, too!

Other than that, what makes OceanWP unique is that it’s eCommerce-ready. Therefore, if you plan on running an online store, this is the theme for you. With it, customising the layout and design of your site is a walk in the park.

GeneratePress

GeneratePress

Aside from speed, this theme’s focus is usability. It features microdata integration that can help you handle your data easily. It is lightweight and responsive, too!

If you’re into using WooCommerce and other well-coded plugins, GeneratePress is an ideal choice. It’s compatible with those plugins, as well as with major page builders such as Elementor!

Best WordPress Gutenberg Plugins

Did you know that outdated plugins are among the factors that can prevent your site from running smoothly? So if you want your site to work well, you need to update your plugins and see to it that they’re compatible with the block editor.

You also need to get your hands on Gutenberg plugins so you can build an awesome site. They can help you create more dynamic pages. Especially if you don’t want to turn to premium page builders, Gutenberg plugins will come to your rescue.

There’s a sea of plugins out there. You can get started with these — they’re the best of the best!

Ultimate Addons for Gutenberg

Ultimate Addons

Do you want additional blocks that have beautiful concepts for your page building? If so, this free plugin is what you want.

Icon Lists and Content Timeline are examples of the blocks that Ultimate Addons for Gutenberg can present you with. It also offers a block that generates a marketing button so you can put in a compelling call-to-action.

And if you’re about to install the Astra theme, this plugin provides built-in support.

Atomic Blocks

Atomic Blocks

Sharing icons and a MailChimp email form can help you expand your reach. Good thing, this plugin has you covered by letting you add blocks with these elements.

Atomic Blocks is also a free plugin. And aside from the notable block types mentioned above, it also features a Section and Layout block, Pricing block, and more. It has a library of more than 10 useful blocks!

Advanced Gutenberg

Advanced Gutenberg Plugin

Professional pages can be yours to create fast and easy with this plugin. It comes with more than 20 additional blocks for Gutenberg.

What gives Advanced Gutenberg an edge is it lets you take advantage of user roles. It comes with advanced control options that allows you to activate blocks according to your user role.

Ultimate Blocks

Ultimate Blocks

Then there’s this plugin that serves a particular user demographic: bloggers. With it, bloggers can engage more audiences with the block types that they can add easily.

Ultimate Blocks features a Table of Contents block, Click to Tweet block, and more! What sets it apart from the other Gutenberg plugins is that it lets you add a Review block. And this type of block is schema-enabled.

Otter Blocks

Otter Blocks

Want to add Google Maps and About Author blocks to your site? If you install this plugin, you can integrate it with other useful programs.

Otter Blocks also features a plugin card style. This design makes it highly convenient for you to choose the blocks you want.

How Do I Disable Gutenberg and Keep the Classic Editor in WordPress?

Inarguably, Gutenberg offers a modern take on content creation. And with the help of this WordPress Gutenberg tutorial, you should be able to use the block editor effectively.

On the other hand, it’s your call whether you want to disregard the block editor and keep the old one.

If you choose to keep the classic editor, you’re not alone.

Many users feel it’s not yet ready. And developers are with them on this.

They think that, at its current stage, Gutenberg still needs work. For one, many themes and plugins have to be redesigned and rewritten for compatibility with the block editor.

To keep the classic editor, you have a couple of options.

Use Disable Gutenberg

The first one is this. It disables the block editor automatically once it’s activated.

This free plugin can disable the block editor for user roles, as well as post types.

First, go to Plugins > Add New. Search for Disable Gutenberg then install and Activate the plugin.

Disable Gutenberg Plugin

Now, go to Settings to configure the plugin’s settings.

Disable Gutenberg General Settings

By default, the Disable Gutenberg plugin will disable the block editor everywhere. This means it will get rid of Gutenberg and replace it with the classic editor every time you create content using your WordPress site. And this means that the change will take effect for all users.

If you have no problems with this, then you should leave the settings as they are.

Disable Gutenberg Settings

But if you do, you need to uncheck the box for Complete Disable.

Complete Disable

Once you do this, additional options will appear. You will be able to select certain user roles for which the block editor should be disabled.

You can disable Gutenberg for Administrator, Editor, Author accounts, and more!

Disable for User Roles

Apart from that, it also allows you to disable certain post types.

Disable for Post Types

After you uncheck all the boxes that apply, finalise the change by hitting the Save Changes button at the bottom.

Use Classic Editor

Another option is this plugin. It also automatically disables Gutenberg.

Like earlier, head over to Plugins > Add New. Search for Classic Editor then install and Activate the plugin.

Classic Editor Activate

Next, go to the Settings category and load up the Writing settings.

Writing Settings

There, look for the option where you can choose the Default editor for all users. Then be sure that the Classic Editor is selected. It’s the default selection because as mentioned, this plugin disables the block editor automatically.

Classic Editor

If you want to use the classic editor for all users, that’s what you should go with. But if you want to give users a bit of flexibility and let them choose which editor to use, this plugin also gives you that option.

Just below it, you can make that happen. In Allow users to switch editors, simply choose Yes or No.

Allow User to Switch Editors

Conclusion

Using Gutenberg may push you out of your comfort zone at first. But if you want to improve your site and adapt with the times, the block editor is worth using.

Remember, Gutenberg’s way of creating content takes some getting used to. If you want to keep the classic editor and manage WordPress the way you usually do, go ahead.

But know this: change is inevitable.

So whether you like it or not, the usual way you create content will change over the course of time. A practical move is to start creating content using Gutenberg and stay ahead of the curve.

As you know, WordPress is always keen on moving forward. It’s always looking to grow its platform and welcome innovation. If you want to head in the same direction, Gutenberg is your ticket.

You can refer to this WordPress Gutenberg tutorial to help you figure out if it’s the right editor for you. If it is, this guide will show you the way, too.

And if you want to take things to the next level, don’t forget to sign up to our free 7-day course that covers WordPress security, performance, and more!

Exclusive 7 Day Course

Defend your site from hackers, improve your website speed, get free uptime monitoring and learn tactics used by WordPress experts

Many thanks for subscribing.

Something's not right.

About Christopher Jan Benitez

Christopher Jan BenitezChris is a professional content marketer and writer. He has helped small businesses achieve their goals by implementing a robust content strategy that emphasises unique selling points and promoting created content using effective online channels and methods.

Leave a Reply

Exclusive 7 Day Course

Defend your site from hackers, improve your website speed, get free uptime monitoring and learn tactics used by WordPress experts

Many thanks for subscribing.

Something's not right.