Gutenberg Editor: Block Types

WP Enthusiast

WP Professional

WP Professional Plus

pairSIM WordPress

There are many different types of blocks in the Gutenberg editor. Choosing a block type that matches the content you want is important. See an overview of all the current Gutenberg block types below.

Make sure you are using the Gutenberg editor. If you upgraded to WordPress 5, then your post and page editor will default to use the Gutenberg editor. If you are still using WordPress 4 (or earlier) or have the Classic Editor installed, then your editor will not work with this tutorial.

Inline Elements

The block listed here will be formatted inline with other blocks.

Inline Image

A block that holds an image and formats the image inline with other blocks

Common Blocks

These are popular blocks that most WordPress users use often.

Paragraph

A block that displays text

Image

A block that displays a single image

File

A block that contains a downloadable file. Visitors will be able to download the file directly from the block

Heading

A block that displays a single heading. The heading type can be changed from H1 to H6

Gallery

A block that displays one or more images in a gallery style

Quote

A block that displays a quote. There is a space for a quote and a separate space for the person quoted

List

A block that displays a list. This can be either a numbered or bulleted list

Audio

A block that holds an audio file. This block will automatically be formatted as an audio player, according to your WordPress theme

Cover

A block that displays an image with text that overlays the image

Video

A block that holds a video file. This block will automatically be formatted as a video player, according to your WordPress theme

Formatting

These blocks contain formatting changes for content.

Code

A block that formats the text within it as a code block. Note that this is different than Preformatted blocks.

Preformatted

A block that formats the text in a preformatted text. This replaces the classic editor’s Preformatted text formatting. Note that this is not the same as the Code block.

Custom HTML

A block that holds HTML code that can be used to format content

Pull Quote

A quote that is formatted to really stick out from the text, usually more so than the usual Quote, though this may vary based on your WordPress theme.

Classic

A block that allows you to use the WordPress 4 and earlier classic editor for content within the block

Table

A block that allows you to create a table and populate it with data

Verse

A block that formats a text into a verse format

Layout Elements

These blocks help establish the post or page layout.

Button

A block that contains a clickable button. You may link the button to another page or website

Column

A block that is split into separate columns. You may add new blocks within the separated columns.

Media & Text

A block that displays media on one side and separate content on the other

More

A block that displays a clickable Read More button. If you select the Hide the teaser before the “More” tag option in the right sidebar, it will hide all blocks before it. Your theme must be compatible with the More block to work correctly

Page Break

A block that establishes a breakpoint on the page/post. Any content displayed after the block will appear on a separate page

Separator

A block that displays a separator, such as a line. Formatting will depend on your theme

Spacer

A block that adds whitespace. You can adjust the height of the spacer.

Widgets

Widget blocks hold common widgets available in the Appearance Customizer of the WordPress interface.You can add widget blocks directly to posts or pages. 

Shortcode

A block that lets you add a shortcode

Latest Posts

A block that displays a list of links to your latest posts

Archives

A block that displays links to archival posts, usually separated into months

Categories

A block that displays a list of website categories

Latest Comments

A block that displays the most recent comments on the post

Embeds

There are many embed blocks available. The blocks are named by the website content they embed.

The embed display will reflect the type of content it is pulling from the site. For example, the YouTube embed will display a video player, while a Twitter embed will display tweets.

Embed blocks are available for these sites:

Twitter YouTube Facebook Instagram
WordPress SoundCloud Spotify Flickr
Vimeo Animoto Cloudup CollegeHumor
Dailymotion Funny or Die Hulu Imgur
Issuu Kickstarter Meetup.com Mixcloud
Photobucket Polldaddy Reddit Reverb Nation
Screencast Scribd Slideshare SmugMug
Speaker Deck TED Tumblr VideoPress
WordPress.tv

Reusable

Reusable blocks can be customized and saved so you can easily reuse them. If saved as reusable, the blocks will be added exactly as they were saved, with content and formatting. You can learn about how to add reusable blocks in our article, Gutenberg Editor: How to Create Reusable Blocks.

Updated on February 4, 2019

Was this article helpful?

Related Articles