WordPress 5.0 Gutenberg Ultimate Guide & Tutorial for 2019

John // Tutorials

10 Comments

April 19  

Whether you are a beginning blogger or a seasoned digital marketing pro, the new WordPress Editor named Gutenberg is a huge milestone and opportunity for everyone to create better content.

But the first time you step into the new Gutenberg editor, it can feel a little clunky or unfamiliar.

By the end of this WordPress Gutenberg Tutorial, however, you will feel right at home and will start to wonder if the day of page builders have come to an end... let's begin.

More...

What is Gutenberg?

Project Gutenberg was the code name used by WordPress to identify their new block editing experience in Wordpress.

The WordPress Gutenberg Editor is the single most drastic change to the editing experience for WordPress in... forever!

The editing canvas has changed from a single huge text area where you can add images and shortcodes to, to being an entirely modular interface full of lego blocks that you can stack together to build beautiful designs on your blog posts or landing pages.

Original WordPress Editor:


WordPress Gutenberg Block Editor

And while the new editor definitely has a sleeker look and looks closer to the end result on the page... why was it important to make this huge transition?

Why did they have to change the WordPress Editor?

WordPress powers around 30% of the internet, so any change they decide to put into the core WordPress package is going to impact millions of website owners. So why force Gutenberg on the world?

Because we need it.

There were some major short comings of the previous editing experience that the new WordPress Gutenberg builder can fix:

  • Made it extremely difficult to change the layout of your content (add 3 columns, add margin, etc)
  • Made it difficult to visualize the content you were creating. You had to constantly preview your content to see if your creation was coming out as intended
  • You couldn't even the your blog post's text in the correct font! You would have to preview the post to see your content in your own selected format

Now as we progress in this Gutenberg WordPress Tutorial, you start to ask yourself the question, "Is Gutenberg a page builder? What does this mean for my current (favorite) page builder?"

Let's address that real quick.

WordPress Gutenberg Editor vs Page Builders

Before you can compare Gutenberg to page builders like Elementor, Divi, and Thrive Architect, we should first get a nice working definition of a page builder:

Page Builders

page builder is a WordPress tool that enables you to build and edit complex layouts for Landing Pages, Sales Pages, Blog Posts, etc - without the need for custom coding.

From that perspective, I would argue that Gutenberg is absolutely a page builder by definition.

But how does it compare to the premium players in the space? Let's look at today, as well as future potential:

Gutenberg WordPress Editor vs Page Builders (Today)

Right now, Automattic and the WordPress community have a long way to go to achieve maturity with Gutenberg. Without adding a few plugins to your kit, the Gutenberg experience is sparse and makes you scratch as you try to figure out how to build the next complex layout for your critical page.

But already there are some incredible plugins that can greatly extend the Gutenberg functionality (see below) that quickly helps Gutenberg remain competitive with page builders.

The future of the WordPress Gutenberg Editor and Page Builders

Page builders have a hard road in front of them. I think the ones that succeed long term will be the ones that find graceful ways of working WITH Gutenberg, instead of trying to replace it entirely.

There will always be certain niches that latch onto a particular page builder:

  • Extremely conversion & data-focused will use Thrive Products
  • The design-obsessed will gravitate to Divi or Brizy
  • And those that want to customize every part of your theme will flock to Elementor.

One of the great advantages of Gutenberg over the existing page builders in the space is the ability to draw on the amazing open source development community of WordPress.

Because of this rich ecosystem, functionality can be added on a daily basis to improve the base functionality of the Gutenberg WordPress Editor. Here are 10 of my favorite Gutenberg plugins that can be added for free in the WordPress repository.

Gutenberg WordPress Tutorial - Building a Home Page (compared to popular page builders)

While you can stare at comparison charts all day long, there's nothing quite as telling as a head to head comparsion where you can truly see the tools in action.

So I decided to run a little experiment and build a standard home page example with each of the popular page builders in 2019:

  • Gutenberg
  • Divi
  • Brizy
  • Elementor
  • Thrive Architect

The result was extremely surprising! You can check out the full page builds and comparisons in this post.

Gutenberg had a very nice showing in the competition. Here is how easily you can create a great looking home page using free Gutenberg Plugins:

https://youtu.be/SgGedes_0JQ

At the end of the day, I was extremely impressed with how quick and responsive Gutenberg, even in its early state, was to build a pretty in depth landing page. It tied for the fastest page load speed test as well, at a mere 1 second to fully load. Very light weight indeed!

At the end of the day, there is no perfect page builder. Each one has certain focuses and makes compromises. But Gutenberg held up well against the best in the business in this build challenge!

You might be wondering how exactly I got Gutenberg to be such a competitive page builder - no fears! Here are 10 essential plugins that greatly increase the builder's functionality - completely free.

10 Essential Plugins to Enhance Gutenberg

One of the best advantages of the Gutenberg WordPress editor (and WordPress in general) is the amazing community of developers who are working tirelessly to improve the functionality of your websites.

Most page builders like Divi and Elementor offer additional developer support, but there is a unique advantage with Gutenberg: It is installed on every wordpress website. That means economies of scale.

There will be more developer support for Gutenberg block than any individual page builder as the platform continues to mature.

Even in the early days of Gutenberg, there are some incredible plugins already available that enhance the functionality of Gutenberg. here are 9 of my personal favorite Gutenberg plugins that help narrow the gap between Gutenberg and other WordPress page builders:

Central Color Palette

Keeping your colors on brand is essential. Unfortunately, the core Gutenberg editor doesn't make this very easy:

But by simply activating the Central Color Palette Plugin, you can now set up ... 

A central color palette!

This allows you to capture and save as many colors as you need for your branding, and access these colors from:

  • The theme customizer
  • Elementor Color Picker
  • Blog Posts built in Gutenberg
  • Basically anywhere you need to pick colors - here's your new palette!

Having this standard color set helps make your website look more professional and clean without a bunch of wasted time referencing hex codes saved somewhere on  your computer (we've all been there!).

Check out Central Color Palette Here.

Toolset Blocks

Toolset Blocks is the only way you can use the Gutenberg editor to create dynamic content without resorting to coding.

You can make your most important blocks (heading, image, post fields etc.) dynamic with Toolset Blocks. This means that when you click on each different post in a custom post type WordPress will pull the correct, relevant information to display to the user - even if they are using the same template.

For example, if you run a travel website you will display a number of vacations. Let’s imagine you have trips to Venice and Paris. When a user clicks on the Venice trip they will want to see information about the Italian city and, likewise, they will want to know about the Champs-Élysées and other sites when they click on Paris. This is possible with dynamic content.

Not only that but you can use Toolset Blocks to control the appearance - colors, spacing, borders etc - of every element on a page. Toolset Blocks also brings you its Container Block which allows you to style together groups of blocks.

Here is what you can create with Toolset Blocks:

  • Templates - build dynamic templates for your custom posts. Each post will have the same layout but will display its own information.
  • Custom lists of content - You can display a list of filtered content (such as gyms which offers yoga classes) and each post can list its own information.
  • A custom search - Use Toolset Blocks to build your search with dynamic blocks so each search result displays its own information.
  • Archives - Display all the previous posts from a custom post type (e.g. all the gyms) and each result displays dynamic content.

Kadence Blocks - Gutenberg Page Builder Toolkit

One of the features I love most about page builders is the ability to quickly import pre-designed layouts. These are great for the "design-challenged" among us (myself included!).

When you get into the Gutenberg editor, you might worry that you designs won't look any good. That is where Kadence blocks comes to the rescue!

Kadence Blocks adds 6 (and counting) unique blocks to your Gutenberg editor toolkit, but the most important one is the "Row Layout" block:

The Kadence block row layout gives you similar design control as Divi, Elementor, and the rest

When you add the block to your canvas, you are presented with easy-to-understand layouts that you can add in with a click.

Want a 3 column layout? No worries. Want a wide middle section and 2 smaller side sections? Got it.

But the real power is hidden inside the Prebuilt library. This brings professionally designed sections into your canvas easily:

These designs all look great, and also serve as an amazing education system. Just import a section in, and you can browse through the settings panel to see exactly how they got that effect just right. Now you are armed with enough design chops to create your own incredible designs!

Advanced Gutenberg

Advanced Gutenberg is a swiss-army knife of additional blocks that can definitely come in handy. 

The company, JoomUnited, is reputable and has created several other plugins, so you know you are in good hands. Take a look at a brief demo of some of their blocks below:

I personally like the Gutenberg Post Summary block that allows you to dynamically place navigation tables throughout your post to help your readers bounce around, like this:

Be sure to check out Advanced Gutenberg!

Advanced Gutenberg Blocks

This plugin currently offers 14 useful blocks to supercharge your posts:

I'm particularly fond of the plugin and website card preview blocks

My two favorite blocks in this pack is the notice block and the plugin block.

If you're like me and like to share your great finds in the wordpress community, there's no easier way than adding a dynamic block that shows the current stats of the plugin you are talking about! It's how each one of these plugins are added to this post - just genius!

The Unsplash and Giphy blocks also look interesting, but require some additional set up that a later recommendation allows you to skip. Read on to find out more!

Checkout out Advanced Gutenberg Blocks for free!

Elementor Blocks for Gutenberg

Elementor has created an elegant solution to a growing problem:

Should I use my page builder, or Gutenberg for this post? With Elementor, you no longer have to choose! Write the content in Gutenberg, and import any special designs you need from Elementor. Problem Solved!

With Elementor Blocks for Gutenberg, you no longer have to choose between the two experiences. Instead, you are now able to create your posts / pages in Gutenberg, and simply import your specifically designed Elementor content in with a few clicks.

This has a ton of uses:

  1. Have a catchy call-to-action to promote your latest product?
  2. Is there an Elementor widget that just doesn't exist yet in Gutenberg? Just import it!
  3. Are your default opt in boxes ugly? It's ok - just design them in Elementor and pull them in!

You get the idea. Here's how it works:

I haven't seen a solution for any other page builder yet, but this seems like a great solution to a very real problem. Great job Elementor team!

So if you are straddling your page builder and the new Gutenberg editor, this plugin will be a great addition to your kit. Get it below!

Gutenberg Blocks - Ultimate Addons for Gutenberg

https://www.youtube.com/watch?v=NWZjCh-GlDE

The Brainstorm Force team is the brainiacs behind the incredibly popular Astra theme. They are known for making well-optimized themes and plugins, so you know this plugin is going to be a treat.

Here are some of the blocks that get added with this lightweight plugin:

  • Section : This is an outer wrap section that allows you to add other blocks within it. You can manage the layout of this section and customize it using options like spacing, background, border and the advanced settings.
  • Multi Buttons : This Gutenberg block allows you to add multiple buttons within a single block. You can add as many as 1 to 5 buttons with a Multi-Button block. Furthermore, it gives you additional settings for every button and allows you to manage spacing and responsive settings too.
  • Advanced Heading : The Advanced Heading block lets you add a combination of a heading and a sub-heading with a separator in between. You can select the heading tag for the heading and manage other settings and customizations too.
  • Post Grid : The Post Grid block fetches the blog posts you may have on your website and displays them in a grid layout. You can customize the order of your posts, and manage settings like the featured image, content, etc.
  • Post Carousel : Wish to create a post slider in which your blog posts appear within a carousel? The Post Carousel block allows you to display posts in a carousel and manage their settings and the content you wish to display within them.
  • Post Masonry : The Post Masonry block fetches the blog posts on your website and displays them in a masonry layout. You can customize the way your posts look and manage settings like the featured image, the content you want to display, etc.
  • Info Box : The Infobox allows you to place an image or icon along with a heading and description within a single block. You can select the image or icon and customize the content within the block.
  • Google Map : The Google Maps block allows you to display locations with zooming options you’ll love to try.
  • Team : The Team block allows you to display your team. Add their picture, name, what they do and links to their social profiles.
  • Content Timeline : The Timeline block lets you create beautiful timelines on your website. This could be useful for displaying company history or progress, list down your personal achievements, roadmap or release cycle for products etc.
  • Social Share : The Social Share block allows you to let users share your content across various social networking sites.
  • Testimonial : The Testimonial block helps your display some amazing client feedback within your website in carousel layout.
  • Icon List : The Icon List block allows you to place an image or icon in a list format. You can pick your favorite icon or image that suits a list to act as a bullet for each list item.
  • Restaurant Menu : The Restaurant Menu allows you can design a nice-looking, easy to manage, Food & Drinks Menu for your website.
  • Post Timeline : The Post Timeline block helps you display the blog posts on your website in an ordered list according to the dates they are published on. You can customize the content seen for each blog post and manage the date, featured image etc.

One standout block in this list is the info box. This single block allows you to quickly create great-looking feature blurbs for your home page that consist of icons, headings, text, and call to action buttons.

You will definitely find a few blocks in this plugin that will be useful in your content marketing.

Stackable - Gutenberg Blocks

Stackable and Ultimate Addons for Gutenberg have a bit of overlap, but there are still plenty of reasons to check them both out.

Stackable offers about a dozen useful blocks for your content.

The video pop up is a great addition to the list, as it allows you to nicely tuck a large video behind a button or icon.

Check out a deep dive walkthrough of some of my favorite blocks within this plugin:

https://www.youtube.com/watch?v=ZaYWIiMxw88&t=4s

Check out Stackable blocks here.

Drop It - Awesome free images and Gifs without leaving your workspace!

I prefer flat graphics, but I know Gifs and stock photos are a great way to spice up your content. Drop it comes to the rescue with the most elegant solution I've seen to import professional photos directly into your posts:

This makes it extremely easy (and fun) to liven up your blog posts with beautiful imagery.

You are also able to directly download the images to your own media library, which makes it easy to add them in as background images - or even pull them in to your favorite page builder (old habits die hard, I know!).

Best part of all? No setup required, just activate, and look for the little water drops at the top of your editing screen! Check out Drop It here.

Qubely Blocks

Made by the same developer of Tutor LMS plugin, Qubely offers extremely advanced functionality for Gutenberg.

The plugin is new, but extremely exciting. Be sure to check out Qubely blocks over the next few months.

Disable Gutenberg Blocks

This probably seems like a strange recommendation - all this time we have been adding Gutenberg blocks... why do we now want to disable them!?

As you add functionality, you will inevitably add overlap. Maybe 2 different plugins offer a "button" block. I recommend you play with the different buttons and decide which one you want to use moving forward.

For the one that you want to put aside, simple head into the Disable Gutenberg Blocks dashboard and disable it.

Doing this will help you:

  • Keep your branding similar on your site (you won't have mis-matched looking buttons)
  • Keep some mental clarity when you need it most - when creating content ("Which type of button am I supposed to use again…?)
  • Save some clutter in your workspace, always a nice to have.

This is a small, harmless plugin, so even if you don't find yourself using it immediately, it's nice to have as an option on your site. Learn More Here.

How to Disable Gutenberg

Not convinced yet? That's ok, and if you have something that is working incredibly well, you may not want to disturb it and jump on the Gutenberg Bandwagon.

Luckily for you, Automattic (and a ton of developers) understand and have created a simple tool to help you disable Gutenberg until it has matured enough and becomes the right solution for you:

Looking at the number of installs and the 5 star review, it's pretty clear that there is still some nervousness around the Gutenberg WordPress Editor, but I expect that trend to change quickly over time.

 7 Essential Keyboard Shortcuts for the Gutenberg WordPress Editor

Call me a dork, but when it comes to blogging and digital marketing, I think efficiency is paramount. That's why I always look for shortcuts in every builder I use.

Here are 6 awesome keyboard shortcuts that you can start using today to enhance your WordPress skills.

Sorry Mac users, I'll be putting down the Windows version of these shortcuts. Nothing personal!

1. Add Blocks quickly with /

You don't need to click the + button every time you want to add new blocks to your post or page. Simply get to a new line, and start typing / and the name of the block you want.

This single command can keep you flowing through your content creation process without every reaching for the mouse.

2. Undo your last action with ctrl + z

This one isn't rocket surgery if you've ever used a computer before, but yes, ctrl + z is still the universal undo button in the new Gutenberg WordPress editor.

It will remove the last single action you did, whether that be typing a sentance, adding a picture, or even removing an entire block.

3. Remove a block quickly with alt + shift + z

This shortcut is easy to confuse with the "undo" shortcut from #2, but it's different in a very cool way.

Let's say you have done a ton of work on your page, but you decide that one block just doesn't belong anymore. That block could be an incredibly complex section, or a single call to action.

Regardless, once you select the block, you can hit alt + shift + z and remove the entire block. This is mainly different from #2 because it will undo whatever block is selected, not just the last action performed. Extremely useful!

4. Add block BEFORE current block with ctrl + alt + t

Don't want to add your content at the bottom of the post? No problem!

When editing your content, whenever you want to add a block before the currently selected block, simply hit ctrl + alt + t, and a brand new block will be added just above.

5. Add block AFTER current block with ctrl + alt + y

You guessed it, the opposite of #4. When you want to insert a block after the currently selected block, a simple ctrl + alt + y will get it done. This is great in the middle of a large post when you want to add content just below your current selection.

6. Duplicate current block with ctrl + shift + d

Design the perfect element and want to use it everywhere? Go nuts by duplicating it with the command ctrl + shift + d.

This can be especially useful for:

  • Feature grids using icon boxes
  • Testimonial sections with a standard format
  • Summary boxes that you like to add at the bottom of every major section.

7. Scrolling through blocks with Tab

As you are quickly creating content, you can easily tab through the menus to get to your content by clicking tab. This can help you stay in the groove while creating content instead of bouncing between mouse and keyboard all the time.

Conclusion

We've covered a ton here, but it's only scratching the surface of what you can do with Gutenberg. If you'd like to learn more, check out my brand new course, Gutenberg Hero - to skip the learning curve and follow click by click until you are an expert in the new world of WordPress!

About the Author

John Whitford is an entrepreneur who has built over 12 profitable online blogs and businesses. He's also the founder of Unbeatable Tech, a data-driven digital marketing company that specializes in sales funnel implementation for both his own businesses and clients alike. John loves to be a beach bum while brainstorming new ideas for marketing strategies, but he's always excited to take on another project!

John

>