An Overview of WordPress 5.0 and the New Block Editor

Posted on January 15, 2019 by in WordPress | 57 comments

An Overview of WordPress 5.0 and the New Block Editor

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.

wordpress 5.0 overview

Classic Editor vs. Block Editor

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

wordpress 5.0 overview

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.

wordpress 5.0 overview

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

wordpress 5.0 overview

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.

wordpress 5.0 overview

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

wordpress 5.0 overview

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:

wordpress 5.0 overview

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.

wordpress 5.0 overview

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:

wordpress 5.0 overview

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.

wordpress 5.0 overview

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.

wordpress 5.0 overview

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.

wordpress 5.0 overview

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.

wordpress 5.0 overview

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.

wordpress 5.0 overview

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.

wordpress 5.0 overview

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.

wordpress 5.0 overview

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.

wordpress 5.0 overview

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

wordpress 5.0 overview

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

wordpress 5.0 overview

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

wordpress 5.0 overview

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.

wordpress 5.0 overview

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.

wordpress 5.0 overview

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.

wordpress 5.0 overview

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.

wordpress 5.0 overview

To edit a block, click Manage All Reusable Blocks.

wordpress 5.0 overview

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.

wordpress 5.0 overview

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.

wordpress 5.0 overview

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.

wordpress 5.0 overview

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.

wordpress 5.0 overview

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.

wordpress 5.0 overview

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

wordpress 5.0 overview

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).

wordpress 5.0 overview

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.

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.

wordpress 5.0 overview

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

wordpress 5.0 overview

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

Premade Layouts

Check Out These Related Posts

7 Best Project Management Plugins for WordPress

7 Best Project Management Plugins for WordPress

Posted on October 9, 2019 by in WordPress

Staying organized is one of the most important things you can do when running a business. It doesn’t matter what industry you’re in, skip organization and you’re largely out of luck. There are plenty of tools out there for “getting organized” but figuring out which one is best for your...

View Full Post

57 Comments

  1. looks like Visual editor and Divi have limited days!

    • That’s not how we see it at all. Based on our sales and the trajectory of our development, Divi has never been stronger. As a blog about both WordPress and Divi we would be remiss if we didn’t continue to provide helpful content on WordPress itself.

    • Divi is so much more powerful than the Gutenburg editor. It took WP this long to make an update to the editor and it was not an easy process for them. If you don’t see the value in Divi over the new editor than you haven’t cracked the surface of its capabilities and value

      • I totally agree with you!

    • Very superficial comment. Demonstrates you don’t know Divi at all…

  2. I think this post is going to create a lot of confusion in E.T.’s user base, just like the one on Gutenberg templates did. How can you go into this level of detail about the new block editor *without* discussing the implications of using the new editor versus using Divi to create layouts and content?

  3. Hey Lindsay, great detailed post on Gutenberg. I’m still getting the hang of blocks, but it’s definitely better than the classic editor. Keep it up!

    -Trevor

    • Thanks Trevor! I like it, too – happy with the different layouts I can play with. Would love to see what you’ve been able to create!

  4. Are there any plans to make Divi’s backend builder compatible with WordPress 5.0? I’ve enabled the Classic Editor to keep using Divi for now. Is this a good long term solution?

    • Same same

    • Indeed. Despite whatever criticism one might have regarding the ne block editor, and it does have some nice features, the Divi theme needs to be updated to make it compatible with some of the content width options available for blocks. This could also be the much needed fix for full width content when using the builder with custom post types.

      There are also some quirks evident when using the block editor with Gutenberg that need to be ironed out

  5. I’ve had a poor experience with the Gutenberg/Block Editor thus far. I’ve tried to get a couple of clients on-board with it, and while some of them like it, I find the interface needlessly obtuse and difficult to discover. Not to mention the accessibility issues brought up by Rian Rietfeldt, who resigned from WordPress due to the lack of attention given here.

    As a developer needing to create semi-editable layouts, I find SiteOrigin Editor to be LEAGUES ahead of Gutenberg. For clients who need a simpler interface, Divi fills that role while also providing a LOT more design options. I’ll be installing the Classic Editor in all the sites I develop for the foreseeable future, at least until the WP team takes a good hard look at the usability of Gutenberg and adjusts it. There’s potential, but it absolutely feels like an “alpha” product, not even a beta.

    • Agreed.

      • That’s not okay Guttenberg.
        WHY NO CHOICE possibility of the two.

      • I need to view a good video with sound on how to use this new editor, because this article is just telling me that mastering it it far from simple and it is thus something best avoided. It’s like reading an article on how to use MS Word to someone who has never used Word.

        • Thanks for the feedback, Eric! I personally learn best through these sort of walk-throughs, but there’s a lot going on with the block editor, so I can see how some people would follow along easier with a video.

    • Exactly right..

    • I couldn’t agree more! I consider myself as an advanced user, not a programmer, maybe slightly a designer. I don’t code, but know how to find some online and putting it together to improve my sites.
      But with this new editor I suddendly feel really dumb with it. I don’t get it. First I thought I had a major bug with the new version, but hey no! It’s supposed to look like it’s not finished.
      I hate it when I’m not given a choice and presented with a situation that takes too much time in figuring out (again). That goes against my understanding of progress. Stop stealing my time.

      Please don’t call it Gutenberg, WordPress. That’s an insult to Johannes and invention letterpress.

      Right Chris, it’s very alpha…

      And thanks Divi! I love the Divi theme and the built in editor. The later was the reason why I’ve decided for a lifetime membership. I consider you guys “here to stay”.

    • Good point, and thanks for the comment. With other block editors in the past, I’ve noticed that some clients do have trouble getting the hang of it – maybe it doesn’t look as simple to them as it does to others.

  6. It’s amazing that after all this time and effort Gutenberg fails with WSIWYG, something that Timeworks DTP was doing on GEM – LOL

  7. Gutenberg is still very buggy and for something that is supposed to change the way people publish and make it easier, it falls far short and actually has a large learning curve and is very unintuitive.

    It’s obvious the developers did so in a bubble and did not bother to test the UI with the average user.

    Hopefully, enough people will discover ClassicPress and it will take hold and be the go to replacement for WordPress Developers.

    I would hope to see Divi support it.

    • +1

  8. I think we need to see this in a long term, Gutenberg us like making WordPress again, because it means moving from blog philosophy to website philosophy. By this I mean that we are in the first stage of a bug bug change. I’m confident the platform will evolve and hope they fix first the usability issues.

  9. I use the Divi theme and am not good with all this tech- stuff. NOT HAPPY about being forced to change to Gutenberg and needing a plugin to stay with Classic Editor. What happens to our work if we switch back and forth? I would imagine it might be messy?? I don’t have the time and energy to deal with a mess I don’t understand and no budget to pay a pro to fix things. 🙁

    Not happy.

    • I’m not ready to use Gutenberg either. There’s a simple setting within Divi to “Enable Classic Editor” without a plugin. I recommend that!

      It’s under Divi settings, Builder, Advanced.

      • Thanks for pointing that out Ray!

    • Tracy, I use Divi and a Divi childtheme which have not been affected by Gutenberg. But I LOVE using Gutenberg for my blog posts. I like it much better than the classic editor or even Divi for creating and editing blog posts. I am not technical savvy, either – I know just enough to be dangerous! LOL I hope you will play with it and give it a chance.

      • I find it cumbersome to add multiple images at a time to a blog post
        As a wedding blogger I use lots of images.
        How have you found this

  10. At the moment it is taking me longer to do my blog with the block editor. This is mainly because it doesn’t seem to indent text. So for those paragraphs I have to switch to a Classic block. Hopefully WordPress will rectify this soon.

  11. Looking at stats from a few sources, I discovered:

    75,000,000 websites use WordPress
    About half, 37,500,000 are hosted on wordpress.com, the rest are self hosted
    Of all self hosted WP websites, about a third are updated to the latest version: 12,500,000. These have the block editor.
    Classic Editor boasts more than 2,000,000 downloads.

    Ergo, at least 16% of those who keep WordPress up to date reject Gutenberg.

    I’d say that is significant.

    • I use Disable Gutenberg, which has an additional 100k+ installs.

      But to your point, you’re right that the rejection of the Gutenberg block editor is obvious, and significant.

    • It is significant. Though it is a normal phenomenon when basic things change. In this case clearly to the better (in my opinion…) But since humans usually are heavily accustomed to what they’ve been knowing for long it’ll take some time. By the way one sixth is not really much compared to other cases of “initial jam on change”.

      I think WP is doing an awesome job in order to stay up-to-date and ahead of the competition. And more updates are just around the corner. So let’s see where we’re heading.

      Sincerely
      F.Frank

  12. Hi Tracy,

    If I’m not mistaken the Divi Team is just showing you the editing process as if you were just using wordpress 5. Divi builder and Divi tools in general work on wordpress 5, I am using it on a few sites and it works fine.

  13. Nothing personal, but I’m not a fan of the Gutenberg block editor. At all.

  14. I want to like Gutenberg – it has many great features. I just find it not very intuitive and difficult to navigate. In time, I hope to see it evolve into a more user-friendly interface.

  15. Gutenberg is completely inaccessible. Any user that has any form of disability cannot use Gutenberg. Due to this alone, Gutenberg should be nuked from existence. The addition of this editor was Mullenweg’s way of showing his agenda down all users throats.

  16. The whole transition to the new block editor has really not been handled very well for many reasons and collectively these add up to general dissatisfaction for WordPress users.

    Hubris seems to be one factor here where the editor has been foisted as default when it needn’t have been. A less offensive approach would have been to only enable Gutenberg on new installs with the option to disable its React override, of the old editor, built in. Until 2022 the workings of the TinyMCE editor remain intact and therefore doesn’t need an additional plugin. In fact aspects of TinyMCE will continue to be a part of the new editor beyond that date anyway.

    Crucially though, and more important than the above, are the oversights of the new editor in not addressing in a serious way some of the issues that plagued WordPress for many years.

    The first is standardisation and cross theme/plugin compatibility when it comes to layout. There have been many great page builder solutions available for many years and these have filled a shortcoming of WordPress. The one flaw is that they all have different ways of implementing their page building abilities. Change theme or plugin and you often lose layout and are left with a mess of short codes.

    We are seeing the same issue with Gutenberg. Some plugins like Kadence block offer good layout options but if you deactivate this plugin you are back to the drawing board. Much more though should have gone into the layout possibilities of the new block editor to cater for sections, rows and columns. some basic padding settings should have been added and these elements should be highly responsive across many viewports. An API should have been provided for themes and page builders to hook into these layout structures so that they could add their own interfaces with settings for all sorts of bells and whistles. Change theme/builder and at least your layout would remain intact.

    The other oversight has been the demotion of the text editing feature for html. It is good that you can target a block quickly and get to its html but this can be problematic and buggy resulting in blocks crashing. Code mirror was recently added to WordPress and this needs to be developed further and pushed into more corners of WordPress with a more IDE text editor experience with colour coded syntax highlighting etc. There have been hints that this maybe considered.

    It’s like Matt woke up one morning and panicked because WordPress was falling behind. So in this panic, he searched around for a project to slot into core, without considering what this project should really achieve, operating the whole time in a silo.

  17. Thank you so much for this great tutorial! I really love the new Gutenberg editor but was missing some of these great things you detailed.

    • Thanks so much, Brenda!

  18. why does gutenberg even matter if i use divi builder?

    • This is exactly what I ask myself. I´m honest, I´m not the perfect master … so thank you to DIVI 🙂

  19. I love divi builder, and all the themes and plugins that go with it. The support from the Divi Team is fantastic. I do not think that you will get the same support for the Guttenberg block editor.

  20. The only thing that has bothered me thus far is the fact that I actually needed to disable Gutenberg in favor of the classical WP editor on all sites to ensure things working with Divi.

    Know that ought not to be an issue with Divi but with some specific DIVI plugins enabled I have experienced display and function issues that had to be ironed out by the plugin devs…

    I do have a comment bot Divi in regards to the new WP environment:

    1) I’m not seeing the light in the new Divi backend editor layout. Everything seems middle aligned. Visually, the classic Divi editor simply felt more logical in terms of structure.

    2) one thing that absolutely annoys me: When choosing to edit a Divi page I’m redirected from the backend of a page to the frontend editor to make any changes. Who in their right mind decided to enforce that behavior – is there any way to disable that?

  21. I haven’t given guten a chance yet but this is looking like Divi to me lol. I’m training one of my clients to start utilizing divi to customize their blog post but this could be an easier option for them.

    Thanks for the detailed post! I’m going to activate this on my test site and see what the fuzz is all about…

    When is Divi getting a multisite upgrade in regards to the role editor???

    ET is starting to slow down with the weekly features. Maybe it’s time to look at some multisite features.

    • A little bit more polish and the new block editor would be a light option. I mentioned Kadence above but check out CoBlocks as well, looks interesting.

  22. It’s going to take some time to get used to the new editor – I don’t think it’s that intuitive, especially for clients who want to maintain their own website after it is developed. That’s not to say that it’s bad, just will take more training.

    So I’ve elected to keep using the classic editor until I learn how to use Gutenberg on my practice sites.

    However – I can see how the new editor will work for blog posts, but how about for designing pages? The Divi builder is great for this, and very easy to use. Is there an ET post on this topic?

    Finally – I’d like to know what the plans are to make the Divi builder compatible with Gutenberg. When I first upgraded to WP 5.0, the builder disappeared and I could only get it back by installing the classic plugin. Can I look forward in the near future to using both? I don’t want to abandon Divi – I think it’s much easier and more flexible for designing pages.

  23. Thanks for giving a wonderful post on new WordPress edited called block editor. Classic editor exist in block editor

  24. Well saying that easy to learn or no learning curve involved in Gutenberg editor might be true for existing visual builder users, however being a long-time WP user and dev, I found working with Gutenberg editor still very limited. My guess is WP is focusing more on website layouts rather than blogging anymore, WordPress need to understand that there are currently way better and more powerful visual editors available in market for designing website, however the part where bloggers used WordPress and its classic editor so far for blogging purpose are now being ignored. Last week I had to write on blog-post on a client website with latest WordPress and Gutenberg editor got me same job done in 3 times more the time I could have done it in classic editor – the client had no clue how to post it himself. Well one can say why don’t you install the classic editor than? This is not easy and the case with every customer I deal and situations are always different from case to case. I hope WordPress will focus and utilize their energies in improving the core of WP and make it easy for developers to contribute more by helping them with compatibility, usability and better documentation rather than following some trends to mold the whole WordPress into something that will create so many problems.

  25. I´m lazy .. so I´m using Divi with the classical builder and that is all what I need. Sometimes is the good old way the golden way.
    But: Thank you for your effort.

  26. Nice tutorial. I’m still using the classic editor and Divi, which thankfully eliminates the need for the classic editor plugin. Thanks for that ET. Comparing the block editor to Divi (or any other mature page builder) is hardly fair, considering how long and how many updates it’s taken Divi to reach it’s current iteration. And let’s not forget that Divi still employs those horrible shortcodes which have allowed it to cheat it’s way to faster development. That said, the block editor is version 1 (or phase 1 officially) and probably should have been rolled out as an option, not the default. Then when version 4 (phase 4) rolls around, set it as the default and establish an end of life for the classic editor. But a change of this magnitude is always going to be met with skepticism and push back.

  27. For someone who uses the HTML editor to create and edit WordPress websites, Gutenberg is a large step backward. Looking at the HTML of my web pages with Gutenberg installed looks like that horrible guffed up code that Dreamweaver would generate in the the 90s, or MS Word. It’s much more difficult to wade through all that extra code now to work in HTML view.

  28. Hi there!

    Great overview of WordPress 5.0. I like the block editor for the speed I can create a blog post (especially the way it puts paragraphs into automatic blocks when I paste text in) but love Divi for making it look visually amazing! Are there plans for divi to be able to recognise text blocks as separate rows/modules etc that could be formatted in visual builder, moving forward? as this really would be amazing!

    Thanks so much!

  29. I still like Divi better. Divi is much more friendly and easy to use.

Join To Download Today

Pin It on Pinterest