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

Are you scared of the new WordPress block editor? To eliminate that feeling of 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 Gutenberg blocks are the blocks most WordPress users will use

Until recently, the Common Blocks were grouped together. That’s no longer true.

Instead of featuring a Common Blocks section, the block editor inserter now groups blocks by function in these categories:

• Text
• Media
• Design
• Widgets
• Embeds
• Categories added by installed plugins, like Genesis Blocks or Yoast structured data blocks.

Common blocks include:

• Paragraph
• Image
• Heading
• Quote
• List
• Gallery
• Audio
• Cover
• File
• Video

Here’s a quick run through of the Common Blocks in Gutenberg, and what you can do with them. Remember, to adjust a block, display the sidebar by selecting the gear icon in the upper right.

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.

Here’s an example of using the color settings. I’ve chosen one of my brand colors for this text.

And here’s another example, using a background color this time, and changing the text to white so it’s more readable.

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 icon that looks like an award ribbon. Or, just start typing, then change the Paragraph block to a Heading.

To transform it to a different type of block, click the icon on the left, and you’ll see these choices.

Notice one of the choices is Group. We’ll get to that shortly.

Image Blocks

Fortunately, 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

Another Common Gutenberg Block is the list. Create numbered or 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 common 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.

Here’s what it looks like to your readers.

Group

Although not technically a Common Block, I did want to mention the Group Block, which is a new addition with WordPress 5.3. When you apply the Group Block, you can combine several blocks into a single group, which you then can save as a reusable block.

It was formerly available as part of the Genesis Blocks plugin, but WordPress incorporated it into core with the most recent version update.

What do you think you’ll be able to use these Common Blocks for? (I already have some favorites. . .)

Bonus

Want to try out the block editor? You can do that here.

This article was updated after the release of WordPress 5.7, on April 19, 2021.

Other Articles You’ll Enjoy

• Which is the Better Choice, Classic Editor or Gutenberg?
• How to Add a Post to Your Website Using the Gutenberg Editor
• A Video Overview of the Gutenberg Block Editor

---