New Gutenberg WordPress Editor Tutorial: Must Know Basics (2019)

Should we be freaking out with the new Gutenberg Update?

This is a major update to WordPress. A new editor has been introduced as part of the Core files in WordPress. This replaces the old TinyMCE editor. Here we will take a look at the WordPress 5.0 Gutenberg update, implications, and tips.

What is this WordPress Gutenberg editor?

The Gutenberg editor is the new editor for WordPress, it works very similarly to pre-existing page builders such as WPBakery, Visual Composer, Beaver Builder, Divil Builder, Elementor, Themify, Thrive Architect, and SiteOrigin.

It uses a system of “blocks” which basically divides all the content into these smaller chunks of content, each of which has individual functions and settings.

When you create a new post, you are presented with a simple-looking editor only containing an Add title and text field that displays “Start writing or type / to choose a block.”

At first glance, it looks like there aren’t many options in there and you might even start freaking out wondering what in the heck has WordPress done.

How can I use it?

Well, it replaces the previous editor, and so far I can start seeing the benefits. It takes a little while to get used to, but if you play with it a solid couple of hours or so, you will quickly pick it up as it is not very complicated to use. It includes many options that combine some of the functionality of widgets, plugins, page builders, themes, shortcodes and HTML into a simplified element: a block.

This essentially gives you, the editor, more flexibility when creating content. Theoretically speaking, it will make you rely less on some essential functions that you would otherwise have to access outside the editor via a plugin, or custom HTML for example.

You now have more power to make a better and more interesting page with the use of blocks. Just take a look at our list of blocks below so you can get an idea.

Some of the Gutenberg Editor Cons

Other third-party page builders may clash with Gutenberg.

The new WordPress Gutenberg Editor is not compatible with some of the third party page builders out there, or should I say…Some of the page builders out there are NOT compatible with Gutenberg.

For example, the WPBakery Page Builder craps out and disappears almost completely when you update to WordPress 5.0! Yes, you heard right, “almost completely” meaning it still partially works. The Backend Editor stops working; it doesn’t even show up. But you can still use it to build pages using the Front-end Editor. And of course, you can always do some edits using the new “Classic” block from Gutenberg. Though going this route, you will quickly find out it’s not the friendliest way to edit content with all the gibberish you will see (shortcodes added by WPBakery before you updated your WordPress to version 5).

Some non-technical people may have trouble getting used to it

While some WordPress newcomers may find it somewhat easy to work with, the new block-based editor can be a little confusing to people used to the old editor. It’s a slightly different paradigm to be creating content with these so-called “blocks.” However, the learning curve is not so big that they can quickly adapt with a few hours’ worth of continuous use.

Plugins and themes may encounter compatibility issues.

There are a ton of themes and plugins out there. And this may quickly become an issue. Developers have to get their butts to work, and I mean a lot of work.

WordPress Gutenberg Editor Pros

Cleaner look and fewer distractions

The simplified look and feel helps you laser-focus on the content and gives you less distractions. You now have the option to hide the Settings area that used to be on the right of every post as well as a Full Screen option that also completely hides the default WordPress dashboard menu options on the left side of the screen.

What if you want to update to WordPress 5.0 but are not ready to use the new Gutenberg editor?

If you haven’t had a chance to use the new editor, you can still access the now called “WordPress Classic Editor” via a plugin here: https://wordpress.org/plugins/classic-editor/

This will help you continue to use WordPress with the previous editor in case you come across compatibility issues with plugins or functionality that may rely on the old editor.

Using the Classic Editor plugin, Administrators can select the default editor for all users and can allow users to change their own default editor.

When you enable the option to allow users to switch editors, you will also see this in the Posts and Pages screen.

The Classic Editor plugin was officially created by WordPress and is scheduled to keep maintained until 2022.

The Blocks

The following is a list of blocks per the new WordPress 5.0 Release.

Common Blocks

1. Paragraph
2. Heading
3. Image
4. Quote
5. Gallery
6. List
7. Audio
8. Cover
9. File
10. Video

Formatting

1. Custom HTML
2. Classic
3. Preformatted
4. Pullquote
5. Code
6. Table
7. Verse

Layout Elements

1. Button
2. Columns
3. Media & Text
4. Separator
5. More
6. Page Break
7. Spacer

Widgets

1. Shortcode
2. Archives
3. Categories
4. Latest Comments
5. Latest Posts

Embeds

1. Embed
2. Twitter
3. YouTube
4. Facebook
5. Instagram
6. WordPress
7. SoundCloud
8. Spotify
9. Flickr
10. Vimeo
11. Animoto
12. Cloudup
13. CollegeHumor
14. Dailymotion
15. Funny or Die
16. Hulu
17. Imgur
18. Issuu
19. Kickstarter
20. Meetup.com
21. Mixcloud
22. Photobucket
23. Polldaddy
24. Reddit
25. ReverbNation
26. Screencast
27. Scribd
28. Slideshare
29. SmugMug
30. Speaker Deck
31. TED
32. Tumblr
33. VideoPress
34. WordPress.tv

Reusable

Blocks that you have marked as reusable and can use across your blog/website. What’s cool about these is not only that they are internally stored for future and ongoing use, but if you have added these on multiple posts or pages, you only have to change it in one place, and all instances will be instantly updated, you will then see the changes across anywhere you have inserted a reusable block you created.
The only drawback is that you have to open an existing post or page to see all your custom reusable blocks as there is no other way to access them from the WordPress Dashboard.

Tips

Create custom Reusable blocks for things that you will repeat throughout your website

For example, you can create a custom paragraph with a link to your Opt-in page where you are giving out a free ebook. You can then use this on the bottom of your relevant blog posts with a single click. Any time you need to update the link or the information in it, you won’t have to worry about changing it in every page you added it in, only update the Reusable block and Voila! You’re done!

Increase user experience by making your page look good

By making use of the new features like Drop Cap, Pullquote or Separator. This is especially useful when you have big guides like this one, it makes it easy and pleasing to read thereby increasing the user experience a bunch.

Create a Reusable block made of multiple blocks

I was creating a Call to Action block, it involved a Paragraph block and also a button. Although you can theoretically use the Custom HTML or Classic block, the Custom HTML doesn’t lend itself to the visual preview as all you see is the HTML code when editing your content. And the Classic block doesn’t make it any easier to preview the button either.
So the way is to combine multiple blocks. You can do this by selecting multiple blocks by pressing the Shift key. The blocks will turn blue. Now you just click on the 3 dots on the top-right of the selection and select Add to Reusable Blocks:

Add to reusable blocks:

This is why you may want to install the Classic Editor Plugin

I would recommend installing the Classic Editor Plugin, this way it gives you the option to use the Block or Classic Editor. You may find out that one of your favorite plugin does not function correctly with Gutenberg. So until there is better support to address this issue, or developers get up to speed updating the plugin, you may be stuck for a while bouncing back and forth between editors.