Full List Of WordPress Gutenberg Blocks (& How To Add More)

With version 5, the block editor – aka Gutenberg – has brought a shift in creating content in WordPress.

Gutenberg blocks are now the building bricks of posts and pages.

But how many are there, and what do they do?

What this post covers

• Adding and configuring blocks
• Block styles
• Common Blocks
• Formatting
• Layout Elements
• Widgets
• Embeds
• Adding new blocks with plugins

Note that in this post I’ve used screenshots of blocks for illustration, rather than the blocks themselves.

Adding and configuring blocks

You use the Add block button – with the plus icon – to add a new block.

Your Most Used blocks will appear at the top of the list. (Yours will likely differ from the ones below!)

Underneath that, blocks are grouped together by category. Click on a title to reveal the blocks.

A few blocks are “plug and play” but many have further configuration options. These may be:

• within the block itself (e.g. adding a caption)
• via buttons in the Components Toolbar above the block
• through Block Settings in the sidebar.

If you can’t see the Document/Block Settings sidebar, make sure you have toggled on the cog icon, which is at the right of the Editor top bar. The cog should show as white on dark grey.

Block styles

Blocks display using styles from your theme.

Changing theme will affect how blocks look in the editor and on your site.

Some themes are optimised for use with the Block Editor: look for themes on WordPress.org with the Wide Blocks layout and Editor Style feature. Or do a Google search for “Gutenberg ready themes”.

In the examples below, I’m using the Chosen theme.

Common Blocks

Most of these blocks are self-explanatory.

Paragraph

Paragraph is the default for a new block. Pressing the Enter key when you are in one creates a new paragraph block.

Some of the buttons that were in the old post editor have moved to their own blocks, notably:

• Lists – now added via the List block
• Blockquotes – now added via the Quote block
• Insert Read More tag – now added via the More block
• Horizontal line – now added via the Separator block

Toolbar buttons include: align text (left, right or centre), bold, italic, link.

There are hidden buttons under the arrow for Code, Inline Image and Strikethrough.

Block Settings include: set font size, drop cap, change text and background colours.

Image

The block for a single image.

Toolbar buttons include: image alignment, edit the image.

Block Settings include: add/edit alt text, change image size/dimensions. control whether the image links to anything.

Heading

Headings for your posts and pages go in heading blocks.

The default is an H2. Why H2? Because the post or page title is a Heading 1, and that means the first subheading should be a  Heading 2.

Toolbar buttons include: change heading level (only from H1-H4), bold, italic, link.

Block Settings include: change heading level, change heading alignment.

Gallery

Gallery blocks are for multiple images arranged in columns and rows.

You can add captions by clicking on an image and then typing in the Write caption area.

Block Settings include: choose number of columns, crop images, link images to the files or attachment pages.

List

Adding a list will start an unordered list. Pressing the Enter key adds a new list item.

Toolbar buttons include: unordered list, ordered list, outdent list, indent list.

Quote

Quotes and citations go in this block. The quote is written first with the citation underneath.

The display will depend on the theme you use.

Toolbar buttons include: text alignment, bold, italic, link.

Block Settings include: change style from Default to Large.

Audio

Adding an audio file embeds a player into your post or page.

The audio file is not playable in the editor, but is so when the post is previewed or published.

Do add a caption to make it obvious what the audio file is!

Toolbar buttons include: align player, edit audio.

Block Settings include: autoplay, loop, preload.

Cover

Not the most obvious name, perhaps. A cover image is a large image with an semi-opaque overlay and text on top.

Toolbar buttons include: align image, edit media.

Block Settings include: fixed background, focal point picker, overlay colour, background opacity.

File

A link to a downloadable file e.g. a Word document with a Download button.

You can edit the link to the file by typing direct. This doesn’t change the filename.

Toolbar buttons include: align link and/or button, edit file.

Block Settings include: control the link, show/hide the Download button.

Video

This block is intended for videos uploaded to the Media Library.

If you paste in a URL from a video hosted from e.g. YouTube, the block becomes a YouTube embed block.

Toolbar buttons include: change alignment.

Block Settings include: autoplay, loop, muted, playback controls, preload, poster image.

Formatting

Code

One for the geeks, this block shows code snippets without running them.

Classic

This is the Classic Editor as a block; the buttons are identical.

If you install the TinyMCE Advanced plugin you can set an enhanced version of the Classic block as your default block, instead of the Paragraph block. The relevant setting is Make the Classic Paragraph or Classic Block the default block (hybrid mode).

Custom HTML

If you can write HTML you can add it to the Custom HTML block.

Preformatted

Preformatted text is displayed exactly as written, with all spacing and tabs preserved. It’s usually shown in a monospaced font.

See how this works in the example below – the spaces matter!

Toolbar buttons include: bold, italic, link.

Pullquote

The Pullquote is a snazzier version of the Quote block, with different formatting.

Toolbar buttons include: text alignment, bold, italic, link.

Block Settings include: change style from Default to Solid Color.

Table

The Table block is to add simple data tables.

I don’t recommend using this block if you wish to create an accessible table as it does not add the right markup for good accessibility.

Toolbar buttons include: table alignment, add and delete rows and columns, bold, italic, link.

Block Settings include: change style from Default to Stripes, make table cells fixed width, change background colour.

Verse

This is basically a Paragraph block to add poetry to.

The block is supposed to allow you to add extra spacing, similar to the Preformatted block.

However, I found that this worked in the editor but not on the post.

Toolbar buttons include: text alignment, bold, italic, link.

Layout Elements

Button

Using this block adds a call to action button (actually a link styled to look like a button).

You can edit the button text and add a URL that the button goes to when clicked.

Toolbar buttons include: change alignment, bold, italic.

Block Settings include: change style from Default to Outline or Squared, change text and background colour.

Columns

The Columns block provides two equal width columns to enter content. You can have as many as 6.

Content goes in Paragraph blocks, but you can change this to other block types.

This block a bit fiddly to work with; adding or editing columns is not as easy as with a page builder.

Toolbar buttons include: change alignment to wide or full width.

Block Settings include: increase number of columns up to 6.

Media & Text

This block arranges an image or video next to some text in a two column layout.

Use the Stack on Mobile setting to make a one column layout on mobile.

Toolbar buttons include: wide width, full width, show media on left or right, edit media.

Block Settings include: stack on mobile, change background colour.

More

This adds the Read More tag to a post. Learn more about the Read More tag.

Only one of these can be added per post. The option to add the More block is disabled afterwards.

Block Settings include: hide the excerpt on the full content page.

Page Break

A Page Break splits a post into different pages.

The block underneath the page break will be the start of a new page for your visitor. They need to click through to the next page to view the following part of the post.

You might see this or use it on tutorial-type posts consisting of steps, with each step on a new page.

Separator

This adds a short horizontal line to a post.

Block Settings include: change the separator style to a wide line or three dots.

Spacer

The spacer block adds space in between other blocks for aesthetic reasons.

You can adjust the height of a spacer by dragging the blue dot up or down.

Block Settings include: change the spacer height in pixels.

Widgets

Widgets used to be confined to widget areas, commonly the sidebar or footer.

Now the block editor has opened certain widgets up to being added to posts or pages. The list of widgets below correlates well with those in the Appearance > Widgets section: others such as the Custom HTML widget are blocks in their own right.

The widgets I couldn’t find equivalent blocks for are:

• Pages
• Meta
• Navigation menu

A word of caution: most of these apart from the shortcode widget are probably best used in widget areas. Why would you add your latest comments in the middle of another post? It doesn’t make sense. (Though now I’ve said that, I’ve just discovered the Chosen theme doesn’t have widget areas! 🤷)

Furthermore, none of these widget blocks have titles, so if you need a title for one you should add a Heading block above it with the appropriate wording.

Shortcode

Shortcodes are shorthand pieces of code created in themes or plugins which execute some functionality.

In a number of cases they are being replaced by blocks.

For example, a form created by Ninja Forms can be added via a shortcode, or via the Ninja Forms block (which appears in the list of Common Blocks if you have that plugin installed).

Shortcodes won’t show their content in the editor, but will display it on the published post or page.

In the example below, both the shortcode and Ninja Forms block create a Ninja Form, but the form only renders in the editor with the latter block. (On the published post, the form fields are left aligned rather than centre aligned. I suspect this is an issue with the Chosen theme.)

Archives

Shows the months you’ve written posts as a list.

Block Settings include: change archives to a dropdown list, add the number of posts.

Calendar

A calendar display of your posts.

Categories

Your post categories in a list.

Block Settings include: display as dropdown, show hierarchy, show post counts.

Latest Comments

Your latest comments, up to five. Comments are not shown in full.

Block Settings include: change number of comments shown; display avatar, date or excerpt.

Latest Posts

Your latest posts as a list.

Block Settings include: change post order, filter by category, change the number of posts displayed, show post date.

RSS

This widget adds the latest posts as seen in an RSS feed. It is handy if you want to link to the latest posts from another source.

Add the RSS feed URL (usually something like https://website.com/feed/).

You can display the posts as a list or in a grid.

Block Settings include: change number of items; display author, date or excerpt.

Search

Add a search widget to your post or page.

You can change the name from Search and add placeholder text if you wish.

Tag Cloud

Tag clouds show a conglomeration of your tags. The most used tags will appear larger in size than the least used.

If you haven’t created any tags or assigned them to posts the block will say “No terms to show”.

Block Settings include: change taxonomy, display post count.

Embeds

Embeds are links to other sources which add some kind of player or rich content rather than a plain text link.

There are many varieties of Gutenberg blocks for embeds.

Here’s the list:

• Embed – a general block for all types of embed.
• Twitter
• YouTube
• Facebook
• Instagram
• WordPress
• SoundCloud
• Spotify
• Flickr
• Vimeo
• Animoto
• CloudUp
• CollegeHumor
• Crowdsignal
• DailyMotion
• Hulu
• Imgur
• Issuu
• Kickstarter
• Meetup.com
• Mixcloud
• Reddit
• ReverbNation
• Screencast
• Scribd
• Slideshare
• SmugMug
• Speaker Deck
• TED
• Tumblr
• VideoPress
• WordPress.tv

Not all embeds are created equal! The type of URL that can be embedded depends on the service.

For example:

• Facebook page – NO
• Facebook group – NO
• Facebook post – YES (but only shows in the post, not in the editor)

  

• Tweet – YES

  

• Twitter Timeline – YES

• Twitter Hashtag – NO

If a URL can’t be embedded you will see a “Sorry, this content could not be embedded.” message.

In addition, Embed blocks tend not give you any control over the styling of the embedded content.

Adding new blocks with plugins

If there’s still not enough blocks for your liking you can now add even more with plugins.

Many Gutenberg blocks plugins boast a collection of blocks.

Some are souped-up versions of the standard blocks and others are new.

New blocks provided include:

• Accordion
• Call to Action
• Info Box
• Price List
• Table of Contents
• Team Member
• Testimonial

You might find one of these plugins has a block type that saves you from needing a dedicated plugin for the same feature.

Remember though that if you use a plugin to create blocks and deactivate or delete it later, your blocks may not show properly, or at all.

Gutenberg Blocks – Ultimate Addons for Gutenberg

Gutenberg Blocks – Ultimate Addons for Gutenberg is a very popular block plugin with currently over 100,000 installs.

The plugin makers recommend their own Astra theme for use with Gutenberg.

Version tested: 1.13.3

Number of blocks: 22

My favourite blocks are:

Post Masonry Grid

A prettier version of the Latest Posts block with a good number of styling options.

To get the most out of it, add featured images to your posts.

Content Timeline

I haven’t seen a block like this elsewhere. It’s perfect for showing any events over a time period.

Google Map

Thank you plugin developers! They have taken care of the requirement to have a Google Maps API key to insert a map.

This saves you the bother of signing up and having to pay charges if you use a lot of maps. 🙂

As there are limited controls, the block is best for simple maps.

Atomic Blocks – Gutenberg Blocks Collection

Atomic Blocks – Gutenberg Blocks Collection has over 20,000 installs.

They also have their own theme, called Atomic Blocks theme.

Version tested: 1.8.1

Number of blocks: 14

My favourite blocks are:

Pricing

A pricing table for different tiers.

It would be nice to have a “most popular” label to add to a tier.

Testimonial

I like this one as you can add an image to the testimonial as well as customising the text size, text alignment and colours.

Gutenberg Blocks and Template Library by Otter

Gutenberg Blocks and Template Library by Otter has over 10,000 installs.

One notable feature of the Otter plugin is that you can add animated effects to blocks.

Version tested: 1.2.3

Number of blocks: 12

My favourite block is:

Plugin Card

One for the geeks, but it gives a quick lowdown on any WordPress plugin.

I would prefer a link to the plugin’s page on WordPress.org rather than a direct link to the zip file, though.

It would be nice to have some Block Settings, too.

Stackable – Gutenberg Blocks

Stackable – Gutenberg Blocks has over 10,000 installs.

Stackable also have their own eponymous theme which they will send you if you join their email list. In addittion, they have a premium version with more block layouts and features. Stackable Premium demo.

Version tested: 1.15.4

Number of blocks: 23

My favourite blocks are:

Count Up

This block animates statistics for a fun effect.

Feature

Show off product or service features in this multi-column block. Add another block below to make a grid.

Ghost Kit – Gutenberg Blocks and Templates Collection

Ghost Kit – Gutenberg Blocks and Templates Collection has over 1,000 downloads.

The paid Ghost Kit Pro offers extra features like icon packs and gradient backgrounds.

Version tested: 2.4.2

Number of blocks: 19

My favourite blocks are:

Progress

Progress bars to show off your skills.

Instagram

Shows your Instagram feed and data. You need an API key to use it.

Gutenberg Block Plugin – Ultimate Blocks

Gutenberg Block Plugin – Ultimate Blocks has over 1,000 installs.

Version tested: 2.0.0

Number of blocks: 18

My favourite blocks are:

Click To Tweet

This creates a quote which is tweetable by clicking the link. Your Twitter username can be added to the tweet text.

Star Rating

A block to use for rating products or services. You can set the number and colour of stars.

I fixed a display bug in the Chosen theme in the screenshot below – the stars were vertically aligned originally!

The Review block is similar and has schema markup enabled, which is good for SEO.

Countdown

This countdown timer is ideal for time-limited events like promotions. You can add a message to show when the timer has gone down to zero like “Sorry you missed out!”

Summing up

Now that the block editor is established and developers are creating their own blocks, I’m seeing the potential to build some cool stuff. Some block developers have put together ready-made website layouts to put sites together quickly.

Choosing the right theme is important for working with blocks to get the most out of them.

Have you embraced the world of Gutenberg blocks? Have you tried any of the plugins I mentioned? Leave a comment and let me know.

Category: WordPress Tags: block editor, Gutenberg, plugins