Common Gutenberg Blocks: They Don’t Have to Be Scary

6 min readNov 7, 2019

It’s the season for “ghoulies and ghosties, and long-legged beasties,” but that doesn’t mean you need to be scared of the new WordPress block editor!

To eliminate the scary overwhelm, take a few minutes to get acquainted with the Common Gutenberg Blocks before you start using the block editor.

(And if the block editor is completely new to you, you might want to take a few minutes to watch the overview. It’s a video I prepared to show you how the block editor is laid out. It’ll take the mystery away, I promise.)

The common blocks are the blocks most WordPress users will use the most frequently.

To see them, click the add block icon (the plus sign) on the left.

At the top will be your Most Used blocks. These are the blocks you use most frequently, but when you’re just starting out with Gutenberg they’ll be more generic. So scroll down to the next section, which is the Common Blocks.

They include:

Paragraph
Image
Heading
Quote
List
Gallery
Audio
Cover
File
Video

Here’s a quick run through of the Common Blocks and what you can do with them.

Paragraph

To add a Paragraph, simply start typing. Paragraph is the default block. There are a few adjustments you can make to your paragraph settings.

Select the Block tab on the right, and you’ll see Text Settings, Color Settings, and Advanced.

Text Settings

Choose the size — small, normal, medium, large, or huge. Or specify a size using numbers. You can also use a Drop Cap — the first letter of the paragraph is much larger and drops down into the next line(s). This paragraph is an example of using the drop cap. What do you think?

Color Settings

Use the color settings to select a background color or a text color (or both). Choose from the preselected colors shown, or enter your own custom color.

Advanced

All blocks include the Advanced setting, where you can add a CSS class.

Heading Blocks

Headings get their own block. It’s represented by the letter T in the list. Or, just start typing, then change the Paragraph block to a Heading.

Image Blocks

It’s super easy to add an image.

Depending on your topic, you may end up using this common Gutenberg block more often than any other except the paragraph!

Select the Image Block, then choose an image from the library or upload a new image. Or, just drag and drop the image from your file manager and WordPress will automatically create an Image Block for it.

Gallery Blocks

Gallery Blocks are similar to image blocks, except that you can upload multiple images at once. WordPress will display them in equal columns.

You can specify the number of columns, tell WordPress whether it should crop the images to make them line up, and you can also add a link.

List Block

Create numbered and bulleted lists with the List Block.

Here’s an example of a list created with the bullet List Block.

Bulleted list item 1
Bulleted list item 2

Quote Block

The quote block provides what’s known as a blockquote This is typically a quote from an outside source. Instead of using quotation marks to begin it, use the Quote Block to make it stand out visually from the surrounding text.
This is an example of the Quote Block.

The above is an example of a blockquote created using the quote block‘s default style. Here’s what it looks like if you select the large style.

Audio and Video Blocks

Use these blocks to add audio or video clips from your media library.

While you can use it to add a clip from an external podcast or YouTube, a better choice for those is the Embed block. Best practice would be to use the Audio and Video Blocks for your own content that’s hosted on your WordPress site.

You’ll notice it looks very similar to the Image block. You can upload a file directly, grab it from your Media Library, or insert it from another URL.

The Video Block looks and behaves exactly the same way. It will display controls that let your visitors play, pause, adjust volume, enter fullscreen mode, or download the video.

There are no available additional settings for either of them in the Block tab on the right, except for Advanced CSS.

Cover

Use the Cover Block if you want to display an image or video clip with text over it, like this.

Here’s what it looks like in the editor.

It’s a fast and painless way to create an image for the top of a blog post, for example. You have standard text tools for the text overlay, like italic, bold, the ability to create a link, or a drop cap. You can also change the text color and background color.

You’ll also have some additional image settings. Choose fixed background from the Block settings to achieve a parallax effect, where the image is fixed in the background while the text moves as the reader scrolls up or down.

You can also adjust the focal point of the image, represented by the blue circle.

Add a color overlay over the image, and adjust its opacity for additional special effects. Here’s the same picture with an overlay at 25% opacity.

File Block

The File Block lets you display media files with a Download button. You can show or hide the button, and set it to open in a new tab

Like the image, audio, and video blocks, you can import the file, or use the Media Gallery to locate it. However, you cannot specify an external URL. There are no additional choices in the Block tab, except Advanced.

There are no options to modify the text within the File Block, but you can align to the left, right, or center it.