There are many different types of blocks in the Gutenberg Block 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 Block 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:
| YouTube | |||
| WordPress | SoundCloud | Spotify | Flickr |
| Vimeo | Animoto | Cloudup | CollegeHumor |
| Dailymotion | Funny or Die | Hulu | Imgur |
| Issuu | Kickstarter | Meetup.com | Mixcloud |
| Photobucket | Polldaddy | Reverb Nation | |
| Screencast | Scribd | Slideshare | SmugMug |
| Speaker Deck | TED | Tumblr | Videocodess |
| 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.