Skip to main content
                      WordPress made easy with the drag & drop Total WordPress Theme - now 30% OFF!Learn More

                      Step by Step Guide to the Gutenberg Builder for WordPress

                      Last updated on:
                      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?

                      wordpress gutenberg editor

                      You’re looking at Gutenberg, the default WordPress block 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.

                      creating a new post in gutenberg

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

                      wordpress gutenberg editor

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

                      Adding a Title

                      adding a new title in gutenberg

                      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.

                      edit post permalink in gutenberg

                      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

                      new paragraph block in gutenberg

                      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.

                      new paragraph block options gutenberg

                      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.

                      gutenberg paragraph formatting toolbar

                      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.

                      gutenberg sidebar options for paragraph block

                      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.

                      paragraph block sidebar document tab

                      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

                      adding a new image 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.

                      adding a new image in gutenberg editor

                      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.

                      adding images in gutenberg

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

                      gutenberg image block

                      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…

                      wordpress media settings

                      …and the?Image block settings.

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

                      adding downloadable files in gutenberg

                      Doing so launches the following block:

                      gutenberg file 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.

                      adding file in gutenberg

                      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.

                      adding quotes in gutenberg

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

                      gutenberg quote block settings

                      Notice the quote block settings in the right sidebar above?

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

                      gutenberg quote

                      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.

                      gutenberg youtube embed

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

                      gutenberg youtube embed block

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

                      embedded youtube video in gutenberg

                      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.

                      adding buttons in gutenberg editor

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

                      adding buttons in gutenberg editor

                      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.

                      gutenberg button example

                      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.

                      columns tab gutenberg editor

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

                      gutenberg columns in wordpress editor

                      Which gets me:

                      gutenberg columns frontend

                      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.

                      media and text gutenberg block

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

                      media and text block in gutenberg

                      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 ??

                      media and text block in full action

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

                      media text block in gutenberg

                      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.

                      woocommerce gutenberg blocks

                      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.

                      gutenberg backlash shortcut

                      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.

                      gutenberg document structure

                      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.

                      Article by Freddy WPExplorer.com author
                      Subscribe to the Newsletter

                      Get our latest news, tutorials, guides, tips & deals delivered to your inbox.

                      3 Comments

                      1. Stefan

                        “Gutenberg is complicated.” – that’s what most of the clients say but to be honest, with the number of block-enabled plugins it will be the main page builder on the market in a few years, surpassing even the Elementor..

                        • Kyla Avatar Kyla

                          Yup – that’s pretty much our reasoning for jumping on the guten-train ?? if we’re going to be stuck with it, might as well accept it and try to make it easier for folks!

                      2. YayMovies

                        Gutenberg thrilling to use. Has a learning curve, yes!!! but after going through today’s post i found it interesting, Now i realized that Gutenberg is different.

                      Leave a Reply

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

                      Learn how your comment data is processed by viewing our privacy policy here.
                      狼天天狼天天香蕉免费