Gutenberg-Guide

WordPress Gutenberg Tutorial: A Guide for Website Operators

If you're thinking about building a website with WordPress , you've probably heard of Gutenberg . Gutenberg is the editor for WordPress , which was released with version 5.0. 

Since its initial release, the WordPress block editor has added features like block grouping and block patterns. It’s main claim to fame, however, is that it allows you to edit posts and pages much more visually than the standard WordPress editor could.

WordPress Gutenberg Tutorial: A Guide for Website Operators

This guide includes:

  • What Gutenberg is
  • A full WordPress Gutenberg tutorial for developers
  • A breakdown of various Gutenberg features

After reading this guide, you should have a solid understanding of how to make use of the WordPress block editor’s new features to create professional layouts for your websites.

WordPress 5.6 is finally here!

The latest version of WordPress focuses on layout and design: a brand new Theme, additional layout options for posts and sites and block patterns for your entire website. You can find all the details in the official release note and in the WordPress field guide.

What’s New About the Gutenberg Block Editor

Before we dive into the WordPress Gutenberg tutorial, let’s spend some time discussing what Gutenberg is. 

Gutenberg replaces the TinyMCE editor and allows you to use content blocks to add text, images and other media to your posts and sites . The classic TinyMCE editor was text-based - and limited new users who had no coding skills. 

While HTML knowledge wasn’t strictly necessary to use the classic editor, you often had to go into the HTML view to make changes. Otherwise, you’d need to install a separate plugin to add simple features to your website, like tables or image galleries.

WordPress Gutenberg Tutorial: A Guide for Website Operators

With Gutenberg, you can design your website with visuals rather than text. The WordPress Gutenberg block editor lets you easily add blocks of content to your pages and posts. There are blocks for images, paragraphs and almost any other element you might want on your website.

WordPress Gutenberg Tutorial: A Guide for Website Operators

Gutenberg is now the standard WordPress block editor, and it comes with many blocks out-of-the-box. You can also add WordPress plugins that will give you even more blocks to easily embed various features into your posts and pages. 

WordPress Gutenberg tutorial

When you're building websites, it never hurts to simplify your workflow. Gutenberg can save you a lot of time. So it's high time we took a closer look at the WordPress block editor. First, let's go over the basics of Gutenberg together.  

How to Use Gutenberg

  1. Create a new blog post in WordPress as usual. 
  2. Click the blue plus sign in the upper lefthand corner. 
  3. Select the block you want to insert in your post. 
  4. Adjust the block’s settings within the post draft. 
  5. Rearrange your blocks by dragging and dropping them.

That’s all there is to it! But understanding how each block works, customizing and grouping them requires a bit more explanation. Let’s get to that now with the rest of our WordPress Gutenberg tutorial. 

In-Depth User’s Guide to the Gutenberg Block Editor 

With the basics out of the way, let’s dive into the WordPress block editor’s specifics. When you first load a page or a post editor screen with Gutenberg, the editor looks pretty empty — even more than the classic editor because the traditional menu options are missing. That’s ok. The first step is to add some blocks. 

1. Add Blocks to Your Post

To add a block to your post, press the + sign in the upper lefthand corner of the post draft. A new block will have a small set of menu options overlaid on top of it. 

We’ll focus on the main menu first, then discuss how to make more adjustments with the secondary menu later.

WordPress Gutenberg Tutorial: A Guide for Website Operators

You can browse the block types or use the search bar to find the desired block type. Then add a block by typing "/" and the block type. For example, if you want to insert an image, you would type "/image".

There are many blocks available, including:

  • Paragraphs
  • Images
  • Headings
  • Listen
  • Tables
  • Separators
  • Gallery
  • Buttons
  • Videos
  • Audio files 

If you have plugins with custom blocks installed, these will also appear in this list. 

Alternatively, you can add a block by clicking on the black plus sign: This appears when you click in the draft where it says: "Write something or type to block selection". 

WordPress Gutenberg Tutorial: A Guide for Website Operators

Or you can follow the instructions of the text and type "/" to select from a drop-down list of options.  

WordPress Gutenberg Tutorial: A Guide for Website Operators

2. Rearrange Your Blocks

You can move blocks around with the arrows on the block itself or by pressing the dots in between the arrows and dragging and dropping the blocks to where you want them to appear.

WordPress Gutenberg Tutorial: A Guide for Website Operators

You can move blocks around with the arrows on the block itself or by pressing the dots in between the arrows and dragging and dropping the blocks to where you want them to appear. 

The simplicity of arranging your blocks is one of the best features of the Gutenberg block editor. It saves you time on fixing coding mistakes and you don’t have to rely on copy and paste to get the job done.

3. Adjust Your Block’s Style Settings

The next step in our WordPress Gutenberg tutorial is learning about the style settings menu. In some cases, a few options will appear near the block when you click on it. For instance, when editing a paragraph block, some familiar options pop up right above it. 

WordPress Gutenberg Tutorial: A Guide for Website Operators

However, a secondary menu will also appear on the right site of the screen. Click on the "Settings" tab.  

WordPress Gutenberg Tutorial: A Guide for Website Operators

The style setting options you can adjust will depend on the block. For instance, the paragraph block’s settings look different from the image block’s settings:

WordPress Gutenberg Tutorial: A Guide for Website Operators

The style settings menu makes it super easy to customize the blocks within your posts. Again, unlike with the Classic Editor, you don’t have to worry about making changes to an image’s caption and messing up the formatting of the text below it. 

Make Reusable Gutenberg Editor Blocks

Now we’re moving into the pro-tip section of the WordPress Gutenberg tutorial. Save yourself a lot of time and effort by saving blocks to be reused on future posts, pages, and other WordPress websites.

WordPress Gutenberg Tutorial: A Guide for Website Operators

Reusable blocks are useful when you have elements that need to be regularly added to a specific page or post type. 

Let's say you write movie reviews, and have a spreadsheet that displays your rankings for each movie. You want it to always look the same, with specific styling and the same number of columns and rows. If you create a reusable block, you can save a considerable amount of time by recreating it for each post. 

Saving styling and various element attributes can also be a real time-saver on buttons. 

Let's say you need the same CTA (call-to-action) in every post you write. To create a reusable button, start by going through the typical process of adding a button block. Adjust the styling and text until it looks the way you want.  

WordPress Gutenberg Tutorial: A Guide for Website Operators

Then click on the three dots in the block menu and select Add to reusable blocks

WordPress Gutenberg Tutorial: A Guide for Website Operators

Here, you can give your new block a name. 

WordPress Gutenberg Tutorial: A Guide for Website Operators

If you want to reuse this block, go to the "Regular Blocks" menu, switch to the "Reusable" tab and select your saved block. 

WordPress Gutenberg Tutorial: A Guide for Website Operators

You can also export reusable blocks for use on other websites. Just click on the three dots next to the block, select Export as JSON and download the file. 

WordPress Gutenberg Tutorial: A Guide for Website Operators

Then, to add an exported reusable block to another WordPress site, go to the Reusable tab in the Blocks menu and select Manage All Reusable Blocks

WordPress Gutenberg Tutorial: A Guide for Website Operators

This opens a more traditional looking section in the WordPress Dashboard where you can manage all the reusable blocks you have created. 

If you have saved reusable blocks from other websites, you can upload them by clicking Import from JSON. Once you've done this, you should be able to access them as usual from the Reusable tab in the Blocks menu. 

Put Your Blocks in Groups

The next pro-tip piece of our WordPress Gutenberg tutorial is all about grouping blocks together. When you put two or more blocks in a group, you can adjust and manipulate them as though they are a single block. 

For example, you can group a social media call-to-action block with a block that contains social sharing icons. You can also group a paragraph block with a button block to create a standard CTA that you can insert at the end of your posts. 

To create a block group using the Gutenberg Block Editor, select all the blocks you want to group. Then click on the layered icon on the left site of the small menu overlay:

WordPress Gutenberg Tutorial: A Guide for Website Operators

A new menu will appear labeled "Transform to", click Group. That's it. Now you can move and adjust these blocks as if they were one. 

You can still make changes to the settings for each individual block. For instance, you can add text to a paragraph block and change what it looks like. 

If you want to ungroup blocks, select the group and then click on the three dots in the overlay menu. Scroll down and click Ungroup.

WordPress Gutenberg Tutorial: A Guide for Website Operators

This feature also works with reusable blocks. After grouping blocks, you can save them as reusable blocks by performing the same procedure outlined earlier. 

Using Block Patterns in the WordPress Block Editor

With WordPress Block Patterns you can create and share predefined block layouts. With Block Patterns you can create complex layouts with a few mouse clicks.

To access Block Patterns, click the same plus sign you used to access the Block menu. Select the Patterns tab. 

WordPress Gutenberg Tutorial: A Guide for Website Operators

At first glance, Block Patterns look similar to reusable blocks. However, block patterns are the closest thing to the ability to create entire sites in Gutenberg the closest. 

With block patterns, you can add full layout sections to your posts or pages with a single click. They’re ideal if you want to create and save a layout for use across multiple posts. 

The WordPress block editor comes with several pre-made patterns, which include:

  • Multiple columns of text
  • Side-by-side buttons
  • Custom headers
  • Quotes with images
WordPress Gutenberg Tutorial: A Guide for Website Operators

Another advantage of Block Patterns is that they allow you to more easily switch between the Themes switch between them. Since your formatting is bound in the blocks themselves, it is not affected by another Theme . 

If you want to create your own block patterns manually, this requires some programming skills. In the development manual, they are called predefined block layouts

Creating Block Patterns from scratch requires the use of the Block Application Programming Interface (API). However, the Plugin Block Pattern Builder can help. 

WordPress Gutenberg Tutorial: A Guide for Website Operators

Adding Additional Blocks To Gutenberg

Before we move on from this WordPress Gutenberg tutorial, you should know there are several plugins out there that let you add even more kinds of blocks to the editor, including:

  • Table of contents
  • Price lists
  • Google Maps
  • Contact forms

There is an official WordPress block directory where you can find and add additional blocks for Gutenberg . 

WordPress Gutenberg Tutorial: A Guide for Website Operators

The original plan was to create a subdirectory for single block Plugins. Instead, the current directory is a subsection of the standard Plugin directory of WordPress with a searchable list of block-based Plugins. 

Full Website Editing in Gutenberg

At the moment, Gutenberg does not yet allow full website editing. However, the WordPress development team is making great progress towards this goal, including the addition of block patterns. 

There is currently an experimental version of Twenty Twenty Themes, which uses full website editing and embraces the idea of a block-based Themes

As the WordPress block editor now stands, you can create fully customized, block-based layouts, but only for posts and pages. Once full website editing comes to Gutenberg, widgets will become redundant and users will have complete control over every layout element, including headers, sidebars and footers. 

Although the Gutenberg Block Editor is not yet a full-fledged WordPress page builder, it is well on its way to becoming one. In the meantime, Block Patterns, as explained above in the WordPress Gutenberg Block Tutorial, provide a feature set very close to that of a full website editor. 

Disadvantages of the Gutenberg editor 

Though Gutenberg is a useful tool that has changed the way many interact with and build content in WordPress, it’s not without its drawbacks. 

For instance, when Gutenberg was first being rolled out, it was quite buggy. Most of that has been ironed out. 

However, one thing that is not a bug is the fact it’s still incompatible with many themes. So if you want to use a specific theme and you like its design, it’s likely you won’t be able to customize it or use Gutenberg within it. Often, if you try, the result is, quite simply, a mess. 

Now, Gutenberg is compatible with some themes but not enough to boast of widespread compatibility. 

Another problem that Gutenberg brings to the table is the fact that it doesn't offer the same flexibility as the classic editor. Sure, Gutenberg eliminates some of the idiosyncratic formatting problems that occur with the classic editor - but unfortunately you are limited in the type of sites you can create. 

Since broader theme customization options aren’t yet available with Gutenberg, you’re kind of stuck with whichever Gutenberg-compatible themes are available and which blocks and block plugins are available. 

The resources available for using Gutenberg are growing at a steady pace, but a theme builder it is not. Yet. 

Ultimately, Gutenberg is the ideal choice for those who are either already accustomed to page builders or purely visual editors and want to maintain that experience or who focus on content alone and want the design part to be a drag-and-drop effort. 

Final Thoughts: WordPress Gutenberg Tutorial Guide 

The Gutenberg editor is now a part of WordPress core and the development team behind WordPress has big plans for it. Eventually, you’ll be able to use Gutenberg to create navigation menus, build full website layouts and it’ll be compatible with even more themes. 

Until then, you can make the most of the features the WordPress block editor currently offers and create visually appealing posts and pages without knowing a line of code — which is a pretty good deal, if you ask us. 

So go ahead: use the tips in our WordPress Gutenberg tutorial and start customising the content of your website. And make sure your website is running at optimal speed with a WordPress website hosting plan from Raidboxes with optimal speed. 

WordPress Gutenberg editor: Your questions

What do you think of the WordPress Gutenberg editor? What questions do you have for Maddy? Feel free to use the comment function. You want more tips about WordPress ? Then follow us on Twitter, Facebook or via our newsletter.

Did you like the article?

Your rating helps us improve our future content.

Post a comment

Your email address will not be published. Required fields are marked with *.