Easy Blog School

Ultimate Guide to Gutenberg Blocks

Have you made the switch to Gutenberg yet? If not, this post will convince you to! Gutenberg is an amazingly powerful WordPress editor that increases productivity and helps you write blog posts in less time.

Ultimate Gutenberg Guide

Gutenberg Blocks: The Basics

If you are brand new to blogging, or if you're a “Classic Editor for Life” type blogger like I was, Gutenberg may seem overwhelming at first. Trust me when I say the learning curve for Gutenberg is actually way less steep than the learning curve for the Classic WordPress Editor.

You can keep things simple, or get a little more complex with custom blocks. This post will walk you through how to use the basic features of Gutenberg as well as some of the add-ons that have made my blogging life 100 times easier.

Related: 7 Ways to Boost Your Blog's SEO

how to add a block in gutenberg

How to add a block in Gutenberg

To add a block, use the + sign with a circle around it. Your most used boxes will pop up first. You can scroll down to other options, or use the search feature.

How to delete a block in Gutenberg

To delete a block, use the 3 dots in the top right corner of the block, or use a keyboard shortcut: CTRL + OPTION + Z on MAC, SHFT + ALT + Z on PC.

How to duplicate a block in Gutenberg

Using the 3 dots on the right again, select the second option: duplicate block.

How to see word count in Gutenberg

wordcount in gutenberg

I discovered this feature by accident, after installing a word counting plugin. If you click on the circled “i”, it will show you how many words you've typed.

Document outline feature

The document outline feature is super helpful! It not only shows your word count at a glance, it shows how many subheadings you have. In addition to these features, you will see a highlight if you need to correct your subheading levels.

Quick tip for new bloggers: your headings should start at H2 (just one), then do H3s (no limit). Under the H3s, you can do H4s if you need further organization.

Gutenberg Blocks

Gutenberg comes with some basic – but really, not so basic because they're awesome – blocks built-in.

Basic Blocks Gutenberg
Common Blocks
Formatting Blocks Gutenberg
Formatting Blocks
Layout Elements Gutenberg
Layout Elements

Common Blocks

  • Paragraph: Regular text (not headings).
  • Image: Add an image. Center or left/right align, add alt text.
  • Heading: H2 is your main heading, H3 is a subheading.
  • Gallery: This is a gallery of images.
  • List: This is a list block. You can use bullets or numbers.
  • Quote: If you're quoting someone, use this block.
  • Audio: Add an audio clip.
  • Cover: This is basically an image with text or a heading as an overlay.
  • File: Add a file for readers to download.
  • Video: Upload a video (I recommend embedding from YouTube instead).

“This is a pullquote.

– Sadie

Formatting Blocks

  • Code: Displays code snippets that respect your spacing and tabs.
  • Classic: Adds the Classic Editor bar to whatever you're editing/working on.
  • Custom HTML: If you need to add some HTML.
  • Preformatted: Add text that respects your spacing and tabs; also allows styling.
  • Pullquote: See above 🙂
  • Table: I LOVE THIS BLOCK! Anyone else remember how difficult it was to code tables?! Seriously the best.
  • Verse: Add poetry or song lyrics. Use special spacing formats.

Layout Elements

Media and Text Gutenberg Block

This is a media & text block.

  • Columns: I used columns above with the images of the blocks. It's like a table but it's only columns.
  • Button: I love buttons! Easy to add buttons and format them.
  • Media & Text: Great block! Add an image with text next to it. Can format the text.
  • More: “Read more”.
  • Page Break: Separate your content into multiple pages.
  • Separator: Separator you can place in between sections.
  • Spacer: Control the blank space between sections.

How to Use Reusable Blocks in Gutenberg

I love reusable blocks! They can be used in so many ways.

If you're a recipe blogger, create a reusable block of all of your recipes of one type. For example, recipes with carrots. When you write any recipe with carrots, use that reusable block to link to related posts.

When you update the reusable block, it is updated globally – across all posts it's being used in! THIS IS A HUGE TIME SAVER! If you've ever had to update 100 posts with a new email opt-in, or new post links, you know how much time this reusable block feature will save!

Gutenberg Keyboard Shortcuts

If you're a fan of keyboard shortcuts, you're going to love Gutenberg! Keyboard shortcuts save time and make you a more proficient WordPress user, which means you can publish blog posts in less time.

Remember, CTRL+OPTION on MAC = SHIFT+ALT on PC.

Keyboard Shortcuts Gutenberg
Gutenberg Keyboard Shortcuts

Ultimate Add-Ons for Gutenberg

You can level up your blogging game with Gutenberg Add-ons or Ultimate Blocks, but they aren't necessary so if the thought of this overwhelms you, skip it. The two plugins overlap a bit on what they offer. I'm going to cover each of them briefly so you can decide which one works for you – or if you want to install them both, like I did.

  • Marketing Button: Button with formatting options.
  • Blockquote: Add content with author details and Twitter Icon button.
  • Advanced Columns: Create advanced columns. Demo here.
  • Post Timeline: Show your posts on a timeline.
  • Post Carousel: Similar to a post grid or 3-column table – display multiple post previews (image and/or text) side by side.
  • Post Masonry: If you like uneven grids.
  • Price List: Would work to compare products or even courses.
  • Icon List: Image with list/features next to it. Similar to “media and text” block, but preformatted to make a list.
  • Testimonials: Add testimonials to your blog.
  • Google Map: Display a Google Map without the need for an API Key.
  • Social Share: Social sharing buttons.
  • Content Timeline: Similar to post timeline, but with content. Would be good for a step-by-step summary of a tutorial or course.
  • Team: Introduce your team members with a photo and blurb about each.
  • Section: Easiest to explain this one with a live demo.
  • Post Grid: Display a category of posts. Perfect for a landing page.
  • Info Box: Use this to list features of a product, or to display selling points for one of your courses or products.
  • Multi Buttons: Multiple buttons with individualized styling options.
  • Advanced Headings: Customize your headings, add a sub-heading, use separator.

Ultimate Blocks for Gutenberg

What I love the most about the Gutenberg add-ons is that these plugins replaces several other plugins I was using.

As you can probably tell, a Table of Contents is a must for all of my blog posts. Click to Tweet is another plugin that is extremely helpful. However, too many plugins can slow your blog down tremendously and the chance of your blog breaking is higher every time you add a plugin. This is especially terrifying if you're not a techie who can fix things when they break.

Tab 1
Tab 2
Tab 3

This is a Tabbed Content block.

This is tab 2.

This is tab 3.

  • Review Block: Perfect for listing features and giving a star-rating to a product.
  • Table of Contents: See any of the posts on this blog to see a TOC in action!
  • Tabbed Content: See above. 🙂
  • Call to Action: See the bottom of this post. 😉
  • Content Toggle: Perfect for FAQ pages or a “related questions” section.
  • Feature Box: List features of a product – perfect for affiliate posts.
  • Notification Box: A highlighted box.
  • Number Box: Formatted side by side boxes. Can use to list features, testimonials, etc.
  • Image Slider: Display several photos in a slider.
  • Content Filter: The best way to explain this one is to have you look at this page. Amazing for “tools we recommend” and “resource” pages.
  • Testimonial: Add testimonials to your blog. Perfect for a sales or landing page.
  • Click to Tweet: Self-explanatory – add some text and your readers can tweet it.
  • Social Share: Buttons for social sharing (Facebook, Pinterest, etc)
  • Countdown: Use to countdown for a sale or product release.
  • Progress Bar: Shows your reader's (or student's) progress.
  • Star Rating: Rate a product.
  • Button (Improved): Advanced button creation.
  • Divider: Place between content sections.

Why Gutenberg?

This post took me about three hours, start to finish, including all of the research I had to do. The same post would have taken me a week to create if I had to code it all in the Classic Editor.

There are drag and drop themes, but those have a learning curve that I haven't taken the time to master – and they're not free like Gutenberg add-ons are. Gutenberg has made me at least twice as productive (if not more like ten times as productive), and I learned as I went.

If you'd like to dive deeper – or would like a video to walk you through everything this post did – check out my call to action box below. 😉

Full Gutenberg Walk-Through (Video)

Take your blog to the next level!

Leave a Reply

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

Subscribe To Our Newsletter

Join our mailing list to receive the latest news and updates from our team.

.

You have Successfully Subscribed!

shares