• Skip to content
  • Skip to footer
A Bright Clear Web

A Bright Clear Web

A Bright Clear Web - Simple, effective, accessible websites

  • Home
  • About
  • Websites
  • Writing
  • Learn
  • Blog
  • Contact
You are here: Home / WordPress / Full List Of WordPress Gutenberg Blocks (& How To Add More)

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

Posted: June 12, 2019 Updated: June 20, 2024 by Claire Brotherton
10 Comments

Cover image block

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
  • Text
  • Media
  • Design
  • 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.

Commonly used blocks will appear at the top of the list.

most used blocks
Adding a block with commonly used blocks shown

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.

Document and Block Settings

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.

Text

Text blocks

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.

The toolbar for the Paragraph block showing the Rich Text Controls menu
The toolbar for the Paragraph block showing the Rich Text Controls menu

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

Some of the Paragraph block settings
Some of the Paragraph block settings

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.

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.

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.

The Classic block
The Classic block

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).

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!

Message Clear by Edwin Morgan
Message Clear by Edwin Morgan

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.

Table block as seen in Chosen theme
Table block as seen in Chosen theme

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.

Media

Gutenberg blocks for media files.

Media blocks

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.

As of WordPress 5.8, you can add a duotone filter to images.

Image of a clownfish with purple and yellow duotone filter

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.

A Gallery block

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

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.

Cover image block

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.

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.

Media and Text block with an image on the left and large text on the right

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

Toolbar buttons include: change alignment.

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

The File block as seen in Chosen theme
The File block as seen in Chosen theme

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

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

Video

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

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

Design

Design blocks

Buttons

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.

A 3 column layout with the Columns block in Chosen theme
A 3 column layout with the Columns block in Chosen theme

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

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

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

Group

The Group block is a container for related blocks.

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.

Page 2 of a post begins after the Page Break insertion
Page 2 of a post begins after the Page Break insertion

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.

Resizable spacer block

Site Logo

Inserts the site logo within a post or page.

Block Settings Include: show the logo rounded, change logo width, link logo to home page.

Site Tagline

Adds the site tagline.

Block Settings Include: change font size and colour.

Site Tagline block in Chosen theme
Site Tagline block in Chosen theme

Site Title

Adds the site title.

Block Settings Include: change font size and colour.

Archive Title

Adds an archive title e.g. a category archive.

Post Categories

Adds the current post’s categories as clickable links.

Post Tags

Adds the current post’s tags as clickable links.

Widgets

Widgets blocks

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:

  • 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.

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.)

The Shortcode block vs the Ninja Forms block

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.

Custom HTML

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

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 Comments block in the Chosen theme
Latest Comments block in the Chosen theme

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.

Page List

A list of your site’s pages.

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.

The RSS feed block showing posts from A Bright Clear Web

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

Social Icons

Icons linking to your social media profiles.

Block Settings include: add icons, change size and alignment.

Social icons, normal size and left aligned
Social icons, normal size and left aligned

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.

Search

Add a search widget to your post or page.

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

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)
A Facebook post embed
A Facebook post embed
  • Tweet – YES
A Tweet embed in a post
A Tweet embed in a post
  • Twitter Timeline – YES
A Twitter Timeline embed
A Twitter Timeline embed
  • Twitter Hashtag – NO

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

A link to a Facebook group can not be embedded

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.

Spectra – WordPress Gutenberg Blocks (formerly known as Ultimate Addons for Gutenberg)

Spectra – WordPress Gutenberg Blocks is a very popular block plugin with currently over 400,000 installs.

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

Version tested: 2.0.13

Number of blocks: 31

Read more about the Spectra plugin.

My favourite blocks are:

Post 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.

Post Masonry Grid with 6 posts

Content Timeline

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

Content Timeline block showing key dates in the Women's World Cup 2019
Content Timeline block showing key dates in the Women’s World Cup 2019

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.

A Google Maps block showing the location of Codebase

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.

A 3 tier pricing block (Bronze, Silver, Gold) as seen in Chosen theme

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.

A customised Testimonial Block in Chosen theme

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.

A plugin block showing Gutenberg Blocks and Template Library by Otter

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.

Stackable's Count Up Block in the Chosen theme

Feature

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

The Feature Block by Stackable showing different services, in Chosen theme

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.

Ghost Kit Progress Block with 3 progress bars

Instagram

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

Ultimate Blocks

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.

Click To Tweet block seen in Chosen theme

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!

Star Rating block in Chosen theme

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!”

Countdown Block in Chosen theme

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.

Related

Category: WordPress Tags: block editor, Gutenberg, plugins

About Claire Brotherton

Freelance web designer and front end developer based in Edinburgh, Scotland. I love WordPress, code, learning and blogging.

Reader Interactions

Comments

  1. Susie says

    June 13, 2019 at 8:15 am

    Blimey Claire this is amazing!

    I had worked out how to use the blocks I want/need but had not had the time to sit & explore all the features now available.

    Fantastic resource
    thank you

    Reply
    • Claire Brotherton says

      June 13, 2019 at 5:10 pm

      Thanks Susie! Hope you can see the potential of the block system now.

      Reply
  2. Rachel says

    June 14, 2019 at 6:09 am

    Thanks for this! Excellent resource which I can come back to.

    Reply
  3. Peter Müller says

    July 17, 2019 at 8:48 pm

    Thanx a lot for this comprehensive post.

    Have you tried Kadence Blocks (https://www.kadenceblocks.com/)?

    They are my favorite collection, especially the Row Layout block, and while scrolling I was looking forward to reading your opinion, but they weren’t mentioned

    Reply
    • Claire Brotherton says

      July 17, 2019 at 9:12 pm

      Hey Peter, thanks for reading.

      No, I haven’t tried Kadence Blocks – I didn’t come across that one. But it looks like it’s worth trying out.

      I like the range of layouts and it looks easy to change the column widths.

      Worth knowing also that the Gutenberg plugin v 6.0 has improved layouts and flexible columns. I’m not sure when this is coming to Core, though.

      Reply
  4. James says

    October 23, 2019 at 9:47 pm

    Thanks for sharing this tutorial. Can you also please guide me how can I create a block template? I am doing the same using this resource https://wpitech.com/create-wordpress-gutenberg-block-templates/ but it’s giving an error and I am having some programming lines in front end. This is the code
    add_action( ‘init’, function() {
    $args = array(
    ‘public’ => true,
    ‘label’ => ‘News’,
    ‘show_in_rest’ => true,
    ‘template_lock’ => ‘all’,
    ‘template’ => array(
    array( ‘core/paragraph’, array(
    ‘placeholder’ => ‘Breaking News’,

    Reply
    • Claire Brotherton says

      November 3, 2019 at 10:31 pm

      Hi James

      Sorry for the late reply.

      I just tried the code you mentioned on WPITECH’s site, and it worked as expected for me.

      Did you perhaps miss out a bracket or a curly brace when you copied the code?

      I would leave a comment on that post if you’re still having problems.

      There are more tutorials on the same topic here:

      • Using Block Templates with Gutenberg
      • How to Create a Custom Gutenberg Block in WordPress (Easy Way)
      • How to create custom Gutenberg blocks in WordPress
      Reply
  5. Full Stack Developer Course in Chennai says

    August 8, 2022 at 11:24 am

    Greetings of the day, your content about the List Of WordPress Gutenberg Blocks has been given clearly. And also you had added more details about Adding and configuring blocks, Block styles, Text, audio and videos which are very easy to understand and learning. Keep sharing like these stuffs!!!

    Reply

Trackbacks

  1. How to Align Images And Text In WordPress Gutenberg Without Woes | World of WordPress says:
    October 27, 2019 at 1:10 pm

    […] you’re not used to working with blocks, you might want to familiarise yourself with all the Gutenberg blocks […]

    Reply
  2. Neues WorPress.Org Theme für Release 5.3: Twenty Twenty says:
    December 18, 2019 at 8:20 am

    […] sein Vorgänger, Twenty Nineteen, ist das Theme für die Verwendung mit dem Block Editor […]

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Subscribe to Blog via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email. Read my privacy policy.

potted cactus and laptop with code

Footer

Categories

  • Accessibility
  • Blogging & Content Marketing
  • Business
  • Personal
  • Software & Tech
  • Websites
  • WordPress

Top Posts

  • How To Create WordPress Excerpts And Include Links In Them
  • How To Solve WordPress Image Alignment And Text-Wrap Problems
  • Improve Your Divi Website's Reach With Divi Accessibility
  • How To Set Up And Customize Twenty Nineteen Theme
  • Registering a Domain Name with GoDaddy - Step by Step

Let’s Be Social

  • E-mail
  • Facebook
  • LinkedIn
  • Twitter
Copyright © 2014 -2025 A Bright Clear Web
  • Privacy and cookies policy
  • Site map