Video: WordPress: How to Use Gutenberg

Gutenberg is the new WordPress text editor. It’s much different than the interface WordPress users are accustomed to, but I think that’s a positive change. If you’ve ever posted an article on LinkedIn or Medium, you’ve used a very similar system.

My prediction is that once you get used to Gutenberg, you’ll like it better than the old Tiny MCE-based editor. The goal of this post is to get you comfortable and ready to learn something new.

First, let’s familiarize ourselves with the main posting interface. It’s slightly different from the classic editor, but this video will give you a quick tour.

Part 1: The WordPress Gutenberg Interface

This video will show you the Gutenberg interface inside WordPress. It introduces the layout and where to find the settings you’re used to.

If you don’t want to watch the video, here’s a screenshot:

WordPress Gutenberg Interface

Starting in the upper left corner the leftmost button, with the plus, is where you click to add a new block. Every bit of content you add to your post is a block. Blocks can be images, lists, video or audio embeds, widgets, or numerous other types of content. You’ll see a drop-down menu that will allow you to select what kind of block you want to add.

Just to the right of the plus icon, there are undo and redo commands. The info link (third from the left) shows your word count, number of headings and the post hierarchy with a helpful outline of your content. At the far right, the three lines are block navigation, which allow you to go quickly to any particular block.

WordPress Gutenberg
The arrow at the left of the block allows you to move the block up to reorder blocks. When there is content below, a downward-facing arrow will appear.

Document and Block Settings

As you look at the right sidebar in the WordPress admin area, you’ll see your Publish button at top. Under that button, you’ll see a menu that includes Document and Block. The Document tab controls post-wide settings; these are the settings you’re already familiar with if you’ve used WordPress. You’ll see Visibility, Publish with a link to backdate or schedule your post, Permalink (the permanent URL of your post), Categories, Tags, Featured Image, Excerpt, and settings for comments and likes.

Choose Block and you’ll be able to edit your block directly. For example, you can add a drop cap to a paragraph, change the color of your background and/or text, and the size of your text. Block settings change with each specific block you use and control only that block.

Caveat: Just because you can doesn’t mean you should. Changing elements like this can make it a pain to edit if you change your mind about color schemes or other styles.

Part 2: Gutenberg Blocks

This video will show you how to use blocks to build your post or page and demonstrate the basic types of blocks.

Remember, blocks are pieces of content you place in your post (or page). For example, this is a paragraph block and the block just above it is a video embed block.

There are several ways to open a new block.

  1. Click the + button in the upper left corner.
  2. Type a return and the cursor will automatically appear below the block you just finished.
  3. Hover over an existing block — you’ll see the plus icon at the top of the block. Click it and a new block will appear above the current one.

The block above is a list block; it automatically formats your content into an unordered (bullet) list or an ordered (number) list. To change the type of block, hover over the top left corner of your current block until you see the two arrows. Click the arrows to change the type of block you’re using.

Image Blocks

Let’s add an image. The image will be full-width (the width of the container, that is), and you can align it however you like. You can also easily add a caption. The block settings in the sidebar let you scale the image by percentage or by typing in pixel dimensions. Don’t forget to add your alt text.

WordPress Gutenberg image block
Add an image block.

Cover Image Block

A cover image block is different from the regular image; you can lay text over the image — ideal if you want to use it for a post heading.

The image block settings give you control over the color overlay — you can change the opacity (it’s 0 on this image) to make the text more readable and you can change the color of the overlay. Use the “fixed background” setting to make the rest of the page appear to scroll over the cover image as you see in this example.

This is a cover image.

Heading Blocks

Heading blocks are just as they seem to be; blocks that format your text as a heading. You’ll choose between headings from H1 to H4. Be sure you follow the hierarchy of the headings: H1 is only for your post title, then H2, H3, etc.

Pullquote Block

Use a pullquote block to emphasize a short statement or quote.

Beth Gramling Sanders

You can set off your pullquote with either top and bottom borders or a solid background. It’s a great way to break up what would otherwise be a gray wall of text.

That’s it for the most basic blocks. I hope you’re beginning to see how easy it is to build your page or post with blocks. It’s easy to rearrange them. You can drag and drop, or use the arrows on the left of the current block to move blocks around.

Part 3: Let’s Have a Little Fun

We’ve got blocks down now, so let’s have a little fun. My friend George Spake introduced me to a cool plugin at our last WordPress meetup.

In case you don’t want to watch the video, here are the block types I covered.

Feature Grid

You’ve seen these on a zillion websites. Add an icon or photo that highlights your features and link to a sales page.

Gutenberg WordPress feature grid
This feature grid can be used to display services, features of a product, or anything else you might dream up.
Here’s what it looks like on your site.

Icon List

The icon list works just like bulleted and number list blocks, except you have a few more options for bullets — a star, a check mark, and an arrow.

Count Up

The Count Up block allows you to enter a number — let’s say you’ve built a new app and you’d like to show how many downloads to date — and this block will automatically count up to your number.

Pricing Box

You need this if you’re selling products on your site. The pricing box allows you to build a modern, mobile-responsive pricing chart. You can vary the number of columns, and, of course, control the colors and copy on the button.

Image Box

The image box block is very cool. Add images and a link and you have a modern and attractive way to navigate to a post, page, or other content. This block adds an overlay that only appears on hover. You control the color and opacity of the overlay.

Image box settings
How it looks live.

Call to Action (CTA) Block

This block is great for an email capture and lead magnet offer. You can describe your offer in the copy and link to your landing page. Add it to your reusable blocks so you can drop it in where you like.

Posts Block

Use this block to insert a grid of posts into a page or post. For a longer post, you could use it much like Related Posts, by adding other posts that might be of interest to readers. You can control how many columns, and display or hide excerpts, author, featured image, post meta and other elements.

I hope you’ve enjoyed getting to know Gutenberg and that you’ll feel less nervous about the change if you’ve been bothered by it. Drop me a comment and let me know if this has been helpful and if you’re using Gutenberg or sticking with the classic editor for now.

Share this post