An Overview of WordPress 5.0 and the New Block Editor

January 15, 2019

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 Theme Builder Layout

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 Theme Builder Layout

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 Theme Builder Layout

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 Theme Builder Layout

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 Theme Builder Layout

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 Theme Builder Layout

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 Theme Builder Layout

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 Theme Builder Layout

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 Theme Builder Layout

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 Theme Builder Layout

an-overview-of-wordpress-5-0-and-the-new-block-editor-9 Theme Builder Layout

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 Theme Builder Layout

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 Theme Builder Layout

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 Theme Builder Layout

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 Theme Builder Layout

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 Theme Builder Layout

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 Theme Builder Layout

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 Theme Builder Layout

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

an-overview-of-wordpress-5-0-and-the-new-block-editor-10 Theme Builder Layout

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 Theme Builder Layout

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 Theme Builder Layout

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 Theme Builder Layout

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 Theme Builder Layout

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 Theme Builder Layout

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 Theme Builder Layout

To edit a block, click Manage All Reusable Blocks.

an-overview-of-wordpress-5-0-and-the-new-block-editor-23 Theme Builder Layout

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 Theme Builder Layout

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 Theme Builder Layout

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 Theme Builder Layout

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 Theme Builder Layout

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 Theme Builder Layout

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 Theme Builder Layout

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 Theme Builder Layout

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 Theme Builder Layout

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 Theme Builder Layout

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

30-1 Theme Builder Layout

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

Share this article:
 

eHost-square-ad Theme Builder Layout

We’re listening.

Have something to say about this article? Share it with us on Facebook, Twitter or LinkedIn:

SHARE IT HERE:

Related Posts

10-divi-ui-kits-for-your-web-design-toolkit Theme Builder Layout

10 Divi UI Kits for Your Web Design Toolkit

Divi UI kits are a different type of layout. They can include full pages, but rather than only providing a full-page design they mostly focus on one thing, such as headers, footers, sections, and specific modules. They often provide more detail in styling for a module...

inserting-special-characters-into-the-block-editor Theme Builder Layout

Inserting Special Characters Into the Block Editor

For users of the Classic WordPress editor who often needed to insert special characters into their posts, life was once simple. Click the “Ω” button in the editor to open a modal with a list of characters not found on a standard keyboard. The user then only needed to...

Get ALL Your SEO, WordPress & Divi News

Join Our Daily Roundup

SEO News and More

SEO News and More

Subscribe ToThe Weekly SEO Trade News Updates

Get the latest SEO, SEM and SMM marketing intel, tips and tricks from one of the best SEO Gurus online. 

Every Tuesday morning we send out an aggregated email listing all new posts on SEO Trade News.

Excellent! Now check your email to confirm your subscription.