This article provides examples of every type of Gutenberg block, illustrating how each one appears and functions. You’ll also find quick explanations of their settings and variations to help you make the most of the editing blocks.

Jump to section

Paragraph

When to use:
For any normal paragraph text.

How to use:
Use the toolbar for formatting options such as bold, italic, and adding links.

Heading

When to use:
For grouping and structuring the page information.

How to use:
Change the heading level by clicking the H2 option in the toolbar.

Accessibility notes:

  • Headings are for structure, not style.
  • Don’t use headings just to emphasize text.
  • Avoid using H1 (the page title already uses that).
  • Maintain hierarchy (e.g. use H3 only under H2).

Image

When to use:
To add an image to the content.

How to use:
Click Upload to select an image.
Use the Alignment icon in the toolbar to align left, right, center, or full width.

List

When to use:
For bulleted or numbered lists.

How to use:
Use the toolbar to switch between bullet or number styles.

Table

When to use:
For tabular information.

How to use:
Add a table and adjust options with Table options (add/remove rows or columns).
In the Settings Panel, enable Header section for better readability.

Accordion

When to use:
For FAQs or sections with expandable details.

How to use:
Click Add Accordion section.
Edit the header (green bar), then add text inside (format like a paragraph).
On the published page, the text is hidden until the header is clicked.

Tagged Content / Events

When to use:
To display cards for content or events with a specific tag.

How to use:
In the Settings Panel, enter the tag name exactly.

Quote

When to use:
For emphasizing quotes or excerpts.

How to use:
Enter the main quote, and optionally add a citation (who said it or the source).

Cards [Experimental]

When to use:
To display a group of content or custom cards.

How to use:
Add Content cards (auto-filled by ID/type) or Custom cards (manually defined).
Click the + button to add more cards.

Link Tiles

When to use:
For large, clickable tiles with background images.

How to use:
Click Add link tile.
Enter the title directly on the tile, then configure settings in the panel on the right.