Step by Step Guide to the Gutenberg Builder for WordPress

I think you’ll agree when I say: This whole Gutenberg business is confusing.

Firstly, is the new block editor hard to use or what? I mean, you don’t know where all your favorite tools went. Now, you probably took longer to create a post, right?

Maybe adding a link (affiliate or otherwise) threw you one heck of a curve, and you felt disappointed. Perhaps you had issues adding an image next to your text.

Perhaps you tried adding multiple columns, and things didn’t work out as expected. If that’s not the case, maybe you cannot add your PDF files easily, or you see the dreaded “Update Failed” message severally.

Well, don’t worry anymore; I was in your exact position not long ago, but now I find Gutenberg a thrill to use. There is a learning curve, yes, but by the end of today’s post, you’ll think of Gutenberg differently.

What is the Gutenberg Editor?

If you’re using WordPress 5.0 and above, you must have come across the new and shiny WordPress editor, famously known as Gutenberg.

And just like many other users, you want to use the revolutionary editor, but you’re hesitant because Gutenberg is complicated.

Or perhaps when you first met Gutenberg, various things didn’t work. After all, developers were and are still making themes and plugins compatible with the block editor.

So, you quickly reverted to the Classic Editor, which, BTW, is okay with us. Just keep in mind WordPress won’t support the Classic Editor after 2022. Plus, you’re missing out on all the extra goodies Gutenberg offers.

In terms of functionality, the Classic Editor and Gutenberg do the same thing; you know, both tools help you to create content without coding.

However, we are so used to the old WYSIWYG editor that we find adapting to the new Gutenberg UI a bit alien, if not utterly confusing. At least that’s what I think.

But, what exactly is Gutenberg?

Gutenberg is the new default WordPress editor. It’s unlike the traditional visual/text editor; Gutenberg uses content blocks much like many modern-day page builders.

It ships with more intuitive features than the Classic Editor, meaning you can create rich-media content on the fly. Now, you can whip up extraordinary layouts quickly whether you’re working with WordPress posts or pages.

And with a couple of add-ons, Gutenberg can favorably compete with established WordPress page builders such as Brizy, Elementor, and Divi.

The only drawback is page builders often offer more features because they are primarily page builders! At the same time, Gutenberg is still quite young, and you can only expect the block editor to grow in leaps and bounds.

In today’s post, we shall have an exciting time creating a WordPress post with the Gutenberg editor. I aim to cover every tiny detail and feature so that you can use Gutenberg to create content like the pros.

Are you ready? If so, let’s create that WordPress post.

How to Create a WordPress Post With Gutenberg

If you run a WordPress website, you probably create more posts than pages. In the following section, we create a WordPress post in Gutenberg from scratch. I hope you will have as much fun as I did when testing out Gutenberg.

That out of the way, navigate to Posts > Add New as we highlight in the screenshot below.

Doing so leads you straight to the Gutenberg editor shown below.

Pretty neat, huh? Now, let us roll up those sleeves and get down to business.

Adding a Title

You can’t write a post without a solid title. The good thing is Gutenberg makes it incredibly easy to add a title.

The first block you see is the Title at the top of the document as we detail in the image above. To create a title for your post, type inside the block. Simple as A, B, C.

Need to edit the permalink? You can easily do that in the Title block by clicking the Edit button as shown below.

After adding your title, hit the ENTER key to start a new line. Oh yes, Gutenberg preserves the native navigation you loved in the classic WordPress editor.

Adding a New Paragraph

Hitting the ENTER key creates a new Paragraph block, as shown above. Before you type in any text, the block presents you a couple of options. See the numbered image below for more details.

Notes. You can:

1. Convert the new paragraph block into any other block, e.g., image, heading, cover, gallery, WooCommerce, form, etc.
2. Use the shortcut to change the paragraph block into an image block
3. Change the paragraph block into a heading block, i.e., H2, H3, and H4
4. Transform the paragraph block into a cover image block

For illustration purposes, I will reserve the first paragraph for the post introduction. Once you add some text, a formatting toolbar appears as shown below.

Thanks to the formatting toolbar, you can:

• Covert the paragraph into a verse, quote, heading, list, code, and preformatted text
• Bold, Italicize, strikethrough, and underline content
• Align text left, right, center and justify
• Add a link that can also open in a new tab
• Insert an inline image (yes, it exists!)
• Hide block settings
• Duplicate the block
• Insert a block before or after the current block (in our case, that’s the first paragraph, so were are not adding anything before, only after.) You can add a cover image block before the first paragraph if you so wish because it looks so good
• Edit the block as HTML
• Add the current block to reusable blocks so you can use it in other posts
• Remove the block entirely

You can further customize the paragraph block with the options available in the Block tab found in the sidebar menu as shown below.

A few notes about the above image:

1. Choose the Block tab here to view all block options and settings
2. Select the font size and activate Drop Cap here
3. Add background color to your paragraph. I set it to blue for illustration purposes. You can also customize the text color. In both instances, you can add unlimited custom colors
4. You can add a custom CSS class here, meaning you can add additional CSS styles to your block
5. The blue background and Drop Cap already applied in the Gutenberg editor

The Document Tab in the Sidebar

There is another tab in the sidebar menu; the Document tab as shown below.

Here, the notes for the above image:

1. Click here to toggle to the Document tab
2. Here you can schedule a post, set visibility to either Private or Public, set a post to Pending Review status, choose the post format and create a sticky post
3. The section allows you to edit your permalink
4. You can select or create new categories here
5. Add tags to your post
6. Set featured image
7. Create a manual excerpt
8. Allow comments, pingbacks, and trackbacks

As you can see, you have plenty of options to design a paragraph block (and the whole post) whichever way you desire. By the way, different blocks come with different settings as we’ll learn in a minute.

After the first paragraph, hit the ENTER key again to create a new line (or paragraph block). Now, let us add an image below the first paragraph.

Adding Images in Gutenberg

They say a picture speaks a thousand words, and a blog post without images is, well, drab. To add an image in your WordPress post using Gutenberg, you have a couple of options.

When you hit the ENTER key a few moments ago, you triggered a new paragraph block. Seeing as Gutenberg is intuitive, you can add an image by clicking the plus (+), image or cover icons as we highlight in the image below.

A couple of notes:

1. You can add an image via the plus (+) icons
2. Here, you can add an image easily
3. This option allows you to add a cover image (These are usually bigger than other photos. Plus, you can add text on cover images, BTW)

Go ahead and click any of the plus (+) icons. Next, click the Image tab, as shown below.

Clicking the Image tab loads the Image block shown in the screenshot below.

The Image block allows you to upload an image or add one from a URL or the media library. In the process, you can add alt text (important for SEO), caption, and description via the media screen settings, or the Block sidebar as shown in the following images.

The usual media settings…

…and the Image block settings.

Are you learning something here today? I hope so. Let’s move on.

After adding your image, Gutenberg adds a new paragraph block just below it. You can add whatever you want, but for illustration purposes, I added some text and then a button below that.

How to Add Downloadable Files, e.g. PDF, Images, Videos, etc

Gutenberg makes it incredibly easy to add downloadable files to your WordPress post or page.

In a new Paragraph block, click the plus (+) icon, navigate to Common Blocks and hit the File tab as we highlight below.

Doing so launches the following block:

From the File block, you can upload a new file or add one from your media library. After adding your file, Gutenberg adds a cute Download button automatically as seen in the image below.

You can play around with the options. For instance, you can edit/delete the “Free Gutenberg PDF Checklist” title as well as the Download button. You can add a CSS class to the block and style it whichever way you desire.

Adding a Quote in Gutenberg

Next, let’s add a quote because they are charming, catchy, and help you to drive the point home. In a new line, click the plus (+) sign, navigate to Common Blocks and hit the Quote tab as shown below.

Doing so adds the Quote block in your post as we highlight in the screengrab below.

Notice the quote block settings in the right sidebar above?

To add your quote, type inside the block. Here’s my result.

Looks incredible, right?

Adding Media Embeds in Gutenberg

Gutenberg comes with several blocks to embed videos and other media from 30+ sites such as YouTube, Vimeo, Facebook, SoundCloud, WordPress, Slideshare, and so on.

To embed content, click the plus (+) icon, navigate to Embeds, and choose the site. For instance, I wanted YouTube, as shown below.

Next, copy-paste the YouTube video URL and click the Embed button as shown in the image below.

As soon as you hit the Embed button, Gutenberg coverts the link into a video automatically as we highlight below.

Smooth sailing all the way. Now, let us add a standalone button that’s perfect for creating a call to action (CTA).

How to Add A Button in Gutenberg

You shouldn’t have a hard time adding blocks at this point. Just click the plus (+), and choose your block. It can’t get any easier than that.

So, how do we add a button?

In a new line (or block), click the plus (+) icon, navigate to Layout Elements and click the Button tab as shown below.

Doing so leads you to the Button block as we detail below.

As you can see from the image above, you can edit the button text and add a link. Additionally, you can customize the button via the sidebar menu to the right of the screen.

After a couple of clicks, here is what I got.

By the way, if you use hard-to-read color combinations on your buttons, Gutenberg will promptly let you know. How nice?

How to Add Columns in Gutenberg

With a beautiful button in place, let’s add some columns. I will add two columns, so follow carefully.

Here’s what to do. Click the plus (+) icon, navigate to Layout Elements and click the Columns tab as seen in the image below.

Gutenberg adds two columns by default. See the image below, and remember, I have added content into the columns already.

Which gets me:

Not bad for a few seconds of work. But perhaps you don’t wish to create columns. Maybe you want to display an image next to some text.

Is there a block for that? Yes, there is!

How to Add an Image Next to Text in Gutenberg

Are you looking to add an image next to some text? If so, you will love the following section.

As usual, click the plus (+) icon, navigate to Layout Elements and click Media & Text as shown below.

You should see the Media & Text block, as shown below.

Next, upload your image/video/media or add one from the media library. After that, add your text next to the media, as shown in the image below.

I played around with the Media & Text block, and I came up with the following. Mind you; I managed to squeeze a button in there too 🙂

Oh, that’s the back-end! Let me show you the front-end. Here:

Looks very professional, right? You can certainly imagine how much you can achieve with the Gutenberg editor.

Third-Party Gutenberg Blocks

WordPress developers are keen on making themes and plugins compatible with the Gutenberg editor. A few examples include WooCommerce, Jetpack, and Yoast SEO.

For instance, you can add WooCommerce blocks into your WordPress post. Firstly, you must install and activate WooCommerce.

Next, in a new line, click the plus (+) icon, navigate to WooCommerce and choose whichever block you desire as shown below.

Do you know what this means? It means you can create rich-media and great posts and pages in a matter of minutes.

Other Notable Blocks

We are at over 2,000 words already, and if we keep this up, we will end up writing a whole eBook. My prayer is you can now use Gutenberg without any hiccups.

That out of the way, here is a list of the other available blocks.

• Widgets – You can add content from your widgets into blog posts
• Shortcodes – You can still use native WordPress shortcodes
• Classic – A great block that holds your old content
• More – The block was formerly known as the Read More tag
• Page Break, Separators, Spacers
• Custom HTML, Pullquote, Table
• Gallery and HTML5 audio/video
• And so much more depending on the themes and plugins you use

Aside: Creating a WordPress page is similar to creating a post save for a few minute differences, so we won’t delve into that today.

Quick Gutenberg Hacks & Keyboard Shortcuts

Gutenberg comes with a couple of hacks and keyboard shortcuts that make it even easier to. For instance, if you type “/” inside a paragraph block, it brings up a list of blocks.

You can even select a specific block by typing the title of the block after the backslash (/), e.g., typing “/image” brings up the image block among other image-related blocks. See image below for more details.

Keyboard shortcuts: To view all available shortcuts press SHIFT + ALT + H in Windows and OPT + CTRL + H in Mac.

At the top of the document, you can see the document structure by clicking the (i) icon, as shown below.

Nice. Extraordinarily smooth.

Oh, and by the way, the “Update Failed” error usually happens due to a shaky internet connection 🙂

---

Between you and me, Gutenberg is a fantabulous content editor. Provided you’re willing to learn the ropes; you can reap a lot from the WordPress editor of the future.

Gutenberg is still relatively young, and you can expect it to grow in terms of usability and functionality. It will be a serious force to reckon with in the coming days. Page builders better watch out, or they will run out of business 🙂

We hope our step by step guide to the Gutenberg editor helped you put things into perspective. We believe you can now use the block editor to create content like a pro.

Please share your concerns, thoughts, and questions in the comment section below.