WordPress 5.0 was released on December 6th, 2018, replacing the classic content editor with the new block editor, also referred to as Gutenberg.

The easy-to-learn, user-friendly block editor has a lot of options for people who want more flexibility over their design. Improvements were made on the back end to help ease and streamline design, which creates better-looking content for the viewer. The block editor has also solved some annoying design issues that came along with the classic editor. The almost-non-existent learning curve is good news for WordPress newbies, but the block editor also speeds up the process for pros.

A WordPress 5.0 overview wouldn’t be complete without talking about the new default theme, Twenty Nineteen. This theme is specifically made to work with the block editor. Newbies should experiment with the Twenty Nineteen theme to get a well-rounded experience. You can always switch to another theme once you’re ready to create something that’ll go live.

an-overview-of-wordpress-5-0-and-the-new-block-editor An Overview of WordPress 5.0 and the New Block Editor

Classic Editor vs. Block Editor

The classic editor was a text editor that resembled Microsoft Word in terms of its formatting buttons.

an-overview-of-wordpress-5-0-and-the-new-block-editor An Overview of WordPress 5.0 and the New Block Editor

The pillars of this WordPress 5.0 overview are the content blocks. The new editor uses content elements in blocks to add content to your post, design the layout and easily move the blocks around however you want.

an-overview-of-wordpress-5-0-and-the-new-block-editor-1 An Overview of WordPress 5.0 and the New Block Editor

There are blocks for all sorts of content, including audio, images and galleries, lists, paragraphs, and videos.

an-overview-of-wordpress-5-0-and-the-new-block-editor-2 An Overview of WordPress 5.0 and the New Block Editor

If you can’t find what you’re looking for in the native editor, there are plugins you can install, too, like Advanced Gutenberg, Atomic Blocks and Stackable. You’ll be able to access blocks for creating a post slider, adding testimonials and featuring content.

Getting Started with the Block Editor

If this is your first WordPress 5.0 overview, it’s important to know that you’ll have the option to test the new block editor or stick with the classic editor.

an-overview-of-wordpress-5-0-and-the-new-block-editor-3 An Overview of WordPress 5.0 and the New Block Editor

Even if you do update (which we recommend), there’s still a way to use the classic editor through 2021.

an-overview-of-wordpress-5-0-and-the-new-block-editor-4 An Overview of WordPress 5.0 and the New Block Editor

When you use the block editor for the first time, there’ll be a walkthrough to help you learn the ropes.

If you switch to the block editor and then decide to switch back, hover over Plugins on the left sidebar and click Add New. Search for “Classic” on the top right. This is the plugin you want to install:

an-overview-of-wordpress-5-0-and-the-new-block-editor-5 An Overview of WordPress 5.0 and the New Block Editor

Click Install Now, then Activate. Now, when you go to your posts, you’ll see the classic editor. To switch back to the block editor, go to Plugins and then click Deactivate under Classic Editor. Now you’ll see the block editor when you go to a post.

Benefits of the Block Editor

The block editor makes it easier to create aesthetically-pleasing, modern posts, and you can go heavy on the multi-media if you want. According to WordPress, other benefits include doing more with fewer plugins, having your website work across all devices and screens, and creating blog posts that closely resemble your website.

The classic editor required you to install a plugin for certain content types, like tables. With the block editor, these content types come standard.

an-overview-of-wordpress-5-0-and-the-new-block-editor-6 An Overview of WordPress 5.0 and the New Block Editor

If you create websites for clients, the block editor lets you create a custom, reusable block. Clients can then add content on their own without damaging the look of the website.

There are benefits for developers, too:

an-overview-of-wordpress-5-0-and-the-new-block-editor-7 An Overview of WordPress 5.0 and the New Block Editor

Using the Block Editor

In this part of our WordPress 5.0 overview, we’ll go through the basics of how to use the block editor when creating a post. You can also use the block editor to create a page.

Create a New Blog Post

Go to Posts in the left sidebar, then click Add New. That will bring up a blank blog post page with the block editor. It doesn’t look like much yet, but you’ll quickly see how to use it.

Adding and Arranging Blocks

The first block, which is standard on every post, is the title. Just click Add Title to start typing.

an-overview-of-wordpress-5-0-and-the-new-block-editor-8 An Overview of WordPress 5.0 and the New Block Editor

an-overview-of-wordpress-5-0-and-the-new-block-editor-9 An Overview of WordPress 5.0 and the New Block Editor

To get to the block below the title, which is a text block, you can either click it with your mouse or use the tab key.

You don’t have to use text here, though. Click either the plus sign in a circle on the left side or one of the icons on the right side, which symbolize table, photo and text.

an-overview-of-wordpress-5-0-and-the-new-block-editor-10 An Overview of WordPress 5.0 and the New Block Editor

Clicking the plus sign on the left brings up the most used blocks and a search bar to find one that isn’t listed. Scroll down to see blocks grouped by category, too.

an-overview-of-wordpress-5-0-and-the-new-block-editor-11 An Overview of WordPress 5.0 and the New Block Editor

You can also add a block between two blocks. Hover over the block below where you want to add a block and move your cursor to the top center of the block. A plus sign will appear, letting you add a block here the same as you do elsewhere.

an-overview-of-wordpress-5-0-and-the-new-block-editor-12 An Overview of WordPress 5.0 and the New Block Editor

Alternatively, you can click on any block and then open the advanced settings in the toolbar. You’ll have the option to add a block either above or below the block you’re currently on.

an-overview-of-wordpress-5-0-and-the-new-block-editor-13 An Overview of WordPress 5.0 and the New Block Editor

If you want to rearrange the order of the blocks, hover over the block, which will show up and down arrows. Note that you can’t move a block above the headline at the top of the post.

an-overview-of-wordpress-5-0-and-the-new-block-editor-14 An Overview of WordPress 5.0 and the New Block Editor

If you want to know what type of block you’ve added, clicking on it will show the type of block on the top right.

an-overview-of-wordpress-5-0-and-the-new-block-editor-15 An Overview of WordPress 5.0 and the New Block Editor

Customizing Your Blocks

Let’s add text to the first block under the headline. As you start typing, a toolbar will pop up. There are also several settings on the right for further customizing the text. I enlarged the font, made it bold and white, and gave it a black background.

an-overview-of-wordpress-5-0-and-the-new-block-editor-16 An Overview of WordPress 5.0 and the New Block Editor

I then decided to remove the text and add a photo instead.

an-overview-of-wordpress-5-0-and-the-new-block-editor-10 An Overview of WordPress 5.0 and the New Block Editor

Just like with the text, you can access a toolbar and settings specific to this type of media.

an-overview-of-wordpress-5-0-and-the-new-block-editor-17 An Overview of WordPress 5.0 and the New Block Editor

Also, there are advanced toolbar sidebar settings you can play with. Access them by clicking the three vertical dots.

an-overview-of-wordpress-5-0-and-the-new-block-editor-18 An Overview of WordPress 5.0 and the New Block Editor

If you prefer to have this toolbar at the top of the editor, click the three vertical lines on the top right of the page and then check Top Toolbar.

an-overview-of-wordpress-5-0-and-the-new-block-editor-19 An Overview of WordPress 5.0 and the New Block Editor

If you want to get rid of the sidebar customization options, click Hide Block Settings in this menu. This will give you cleaner interface to work with.

an-overview-of-wordpress-5-0-and-the-new-block-editor-20 An Overview of WordPress 5.0 and the New Block Editor

Creating Reusable Blocks

When you create a block that you love or that you know you’re going to use over and over, you can save it. Click the block, open the advanced toolbar settings and choose Add to Reusable Blocks.

an-overview-of-wordpress-5-0-and-the-new-block-editor-21 An Overview of WordPress 5.0 and the New Block Editor

You can then title the block and save it. When you want to insert the saved block into a post, add a block as normal, scroll to the bottom of the menu and select Reusable. This will show all of the blocks you’ve saved and let you add them to your post.

an-overview-of-wordpress-5-0-and-the-new-block-editor-22 An Overview of WordPress 5.0 and the New Block Editor

To edit a block, click Manage All Reusable Blocks.

an-overview-of-wordpress-5-0-and-the-new-block-editor-23 An Overview of WordPress 5.0 and the New Block Editor

Removing Reusable Blocks

Let’s say you create a reusable block that you no longer want saved. Opening the toolbar settings gives you the option “Remove from Reusable Blocks.” However, choosing this doesn’t just un-save the block from Reusable Blocks, it removes the block from this post and any posts or pages it’s on.

an-overview-of-wordpress-5-0-and-the-new-block-editor-24 An Overview of WordPress 5.0 and the New Block Editor

Choosing Manage All Reusable Blocks also doesn’t give you the option to un-save the block as reusable while still keeping it in your posts.

For now, the safest bet is to keep all of your reusable blocks, even if you don’t use them anymore. You can rename them something like, “Unused 1” and “Unused 2” for organization.

Deleting Content Blocks

To delete a block, just click on it and press delete on your keyboard. You can also pull up the advanced settings and click Remove Block. What you don’t want to do is what I accidentally did: think you’re still clicked on a block and choose Move to Trash on the right sidebar – this trashes the entire blog post.

an-overview-of-wordpress-5-0-and-the-new-block-editor-25 An Overview of WordPress 5.0 and the New Block Editor

Helpful Blocks to Check Out

The new block editor makes it much easier to add certain types of content that the classic editor struggled with. We wanted to make sure our WordPress 5.0 overview talked about three blocks that solve previous design problems.

Buttons

Before, adding a button meant either using a plugin or writing HTML. Now, you can choose the Button block, add your text and a link, and customize the colors and style.

an-overview-of-wordpress-5-0-and-the-new-block-editor-26 An Overview of WordPress 5.0 and the New Block Editor

Multiple Columns

This may be my favorite block because you can create side-by-side content or a magazine-style post. The Columns block lets you make two columns, which you can then add all types of content to: images, lists, text, etc.

an-overview-of-wordpress-5-0-and-the-new-block-editor-27 An Overview of WordPress 5.0 and the New Block Editor

Columns are separated into blocks, just like the rest of the post. By clicking on the plus sign, you can decide what type of content you want there.

an-overview-of-wordpress-5-0-and-the-new-block-editor-28 An Overview of WordPress 5.0 and the New Block Editor

I added headers to both columns, created a list on the left and then added green font with a drop cap on the right.

an-overview-of-wordpress-5-0-and-the-new-block-editor-29 An Overview of WordPress 5.0 and the New Block Editor

Side-by-Side Image and Text

One thing that was always a pain with the classic editor was formatting text next to an image. The block editor has a block specifically for that, called Media & Text (if you search for it, use the ampersand – writing “and” doesn’t bring it up).

an-overview-of-wordpress-5-0-and-the-new-block-editor-30 An Overview of WordPress 5.0 and the New Block Editor

You can add an image and then text next to it, and the size of the text will change depending on how much is written per line. You can edit this in the sidebar settings if you want.

an-overview-of-wordpress-5-0-and-the-new-block-editor-31 An Overview of WordPress 5.0 and the New Block Editor

Document Options and Publishing

Since the right sidebar now includes block customization options, you may wonder where the metadata settings went. Just click Document on the top to access them.

an-overview-of-wordpress-5-0-and-the-new-block-editor-32 An Overview of WordPress 5.0 and the New Block Editor

Certain plugins will show up above the this menu. For example, my Yoast SEO plugin is accessible here.

30-1 An Overview of WordPress 5.0 and the New Block Editor

In Conclusion

In this post we’ve shown you how to use WordPress 5.0’s new block editor. If you’d like to go a bit deeper, check out this article on how to create Gutenberg templates. And of course, be sure to check back every day for more WordPress tutorials and resources. If you have any questions about today’s post, please drop us a line in the comments below.

Featured Image via supercaps / shutterstock.com

SEO News and More

SEO News and More

Share This