Find the right block and learn how to use it

Explore if there is a block that suits your content well, how you can easily insert it, and when and how to use it. Learn about accessibility considerations, and see how the block looks given the theme’s styling and your choice of light or dark mode.

Table of contents

---

Text

---

Paragraph Blocks

The Paragraph block is a basic building block that allows you to add text content to a post or page. It is the default block that appears when you create a new post or page.

Besides adding text, the Paragraph block offers various formatting options to customize text content. It lets you make the text bold, italics, and strikethrough. Some examples and their keyboard shortcuts are below:

Bold Ctrl+B

The HTML <strong> element indicates that its contents have strong importance, seriousness, or urgency. Browsers typically render the contents in bold type.

Italic Ctrl+I

The <em> HTML element marks text that has stress emphasis. The <em> element can be nested, with each level of nesting indicating a greater degree of emphasis.

Link Ctrl-K

The <a> HTML element (or anchor element), with its href attribute, creates a hyperlink to web pages, files, email addresses, locations in the same page, or anything else a URL can address.

Highlight

The <mark> HTML element represents text which is marked or highlighted for reference or notation purposes due to the marked passage’s relevance in the enclosing context.

Inline Code Shift + Alt + X

The <code> HTML element displays its contents styled in a fashion intended to indicate that the text is a short fragment of computer code. By default, the content text is displayed using the user agent’s default monospace font.

Keyboard Input

The <kbd> HTML element represents a span of inline text denoting textual user input like tab or enter from a keyboard, voice input, or any other text entry device.

Strikethrough Shift + Alt + D

The <s> HTML element renders text with a strikethrough, or a line through it. Use the <s> element to represent things that are no longer relevant or no longer accurate.

Subscript

The <sub> HTML element specifies inline text which should be displayed as subscript for solely typographical reasons. Subscripts are typically rendered with a lowered baseline using smaller text, like: C₈H₁₀N₄O₂ aka “caffeine.”

Superscript

The <sup> HTML element specifies inline text which is to be displayed as superscript for solely typographical reasons, like “1 m³ = 1 cubic meter”. Superscripts are usually rendered with a raised baseline using smaller text.

Paragraph block documentation

---

Heading blocks /h

While WordPress allows multiple H1 blocks, best practice is to use only one per page — typically the post or page title. You can assign an HTML anchor to a heading, allowing you to link directly to that section.

Heading Levels vs Paragraph Sizes using the Transitional font stack

Heading Levels vs Paragraph Sizes using the Humanist font stack

Heading block documentation

---

List blocks /l

You can use the List Block to create a bulleted or numbered list. In order to add a List Block, click on the add block button and select the List Block.

Unordered lists

The <ul> element is for grouping a collection of items that do not have a numerical ordering, and their order in the list is meaningless. Typically, unordered-list items are displayed with a bullet, which can be of several forms, like a dot, a circle, or a square.

• Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • Vestibulum pulvinar arcu id eleifend eleifend.
  • Suspendisse eu turpis nec magna semper lacinia.
• Nullam sit amet arcu finibus nibh consectetur aliquam
  • Phasellus eget massa fermentum, interdum lectus ac
  • Sed vestibulum tortor et aliquet sodales.

Ordered lists

The <ol> HTML element represents an ordered list of items — typically rendered as a numbered list.

1. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
   1. Vivamus lacinia magna eu maximus blandit.
   2. Nam eget orci ullamcorper, auctor dui sit amet
2. Phasellus at nibh a arcu aliquam ultricies ut at neque.
   1. Curabitur vitae metus laoreet, egestas massa vel
   2. Nulla elementum lectus id est scelerisque, et consectetur.

List block documentation

---

Quote /q

Use the Quote block to easily add a quote to any post or page. Adding quotes can help you highlight great reviews from your audience or phrases that inspire you.

To add the Quote block to a page, click the block inserter (+) to open the block inserter pop-up window and choose the Quote block.

Quote block documentation

Click on the Transform button to convert the Quote block into another block type using the existing content.

You can transform the Quote block into a Paragraph, Columns, Group, or Pullquote block. You can also change the style of the Quote block from Default to Plain.

Quote block documentation

Using the alignment drop-down from the toolbar, you are able to align the Quote block to the left, make it center-aligned, or align it to the right.

---

Code /c

Code block lets you add and display code snippets for others to view. To add the Code block, open the block inserter by clicking the (+) icon in the upper left corner of the editor. After that, look for Code using the search bar and click it to insert the block into the editor.

/***
 * For 'real 'external links, links that open in a new windows
 * (don't), and links pasted into the block editor, append a
 * simple base 64 encoded external link symbol (but skip images)
 **/
body a:is([rel*="external"], [target="_blank"], [data-type="link"]):not( :has(svg, img))::after {
    --mask-image-box: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHhtbDpzcGFjZT0ncHJlc2VydmUnIHN0eWxlPSdmaWxsLXJ1bGU6ZXZlbm9kZDtjbGlwLXJ1bGU6ZXZlbm9kZDtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6MS41JyB2aWV3Qm94PScwIDAgNTAgMTAwJz48cGF0aCBkPSdNNDUgNjZ2MTBtMCAwSDVtMCAwVjM2bTAgMGgxMG0zMCAwTDI1IDU2bTUtMjBoMTVtMCAwdjE1JyBzdHlsZT0nZmlsbDojZTNlM2UzO3N0cm9rZTojZmZmO3N0cm9rZS13aWR0aDo2cHgnLz48L3N2Zz4=");
    margin-inline: .2em;
    width: 1.4ch;
    content: "\2007";
    font-family: monospace;
    background: currentColor;
    mask-size: cover;
    mask-position: center;
    mask-image: var(--mask-image-box);
}

Note: If syntax highlighting like Prism is enabled, add the class lang-css to the Code block for dark mode compatible syntax highlighting. Other languages supported are HTML, PHP, and Apache HTACCESS.

Code block documentation

---

Details /d

The Details block displays a text summary and an arrow button: When you click on the text or the button, the block opens and reveals additional content on the page.

This block provides a way to show or hide content on your site. This can be useful on FAQ pages, showing and hiding detailed event information etc.

Customize the summary — replace the placeholder with your text.

The Summary is customizable by selecting the “Write summary…” placeholder text and adding your own text. By default, the block uses the summary content as its label, similar to how the heading block works.

Content inside the details block are hidden

The additional content are blocks that you place inside the Details block that are hidden until you click on the summary text. Because the content is hidden until you open the block, it is referred to as “hidden content”.

Accessibility tip: use only plain text in summaries

For best accessibility, use only plain text and lists in details, avoid adding links or buttons, as they can confuse users of assisting technologies and may not expand the hidden content as expected.

How to only open one detail element at a time

Identical name attributes of the summary element, enables multiple Details blocks with the same name attribute to be connected, with only one open at a time. In this demo here, we use the name attribute: tips

Auto-closing details is not for everyone

Some users do not appreciate details being closed automatically, and given the extra work it is to ensure the same name attribute on details you might consider just sticking to the defaults: details stays open until closed.

Details block documentation

---

Preformattet /pr

If you wish to add text to a post or page that is displayed exactly as you type it, the Preformatted Block is for you.

Preformattet can be used for ASCII Art, but be careful about accessibility, the WordPress Preformattet block does not offer a figcaption element.

       _    ____   ____ ___ ___      _         _   
      / \  / ___| / ___|_ _|_ _|    / \   _ __| |_  
     / _ \ \___ \| |    | | | |    / _ \ | '__| __|
    / ___ \ ___) | |___ | | | |   / ___ \| |  | |_ 
   /_/   \_\____/ \____|___|___| /_/   \_\_|   \__|

Preformattet block documentation

---

Pullquote /pu

If you want to add emphasis to a piece of text in your post or page, the pullquote block can quickly and easily make short snippets look beautiful.

To add one, click the Block Inserter icon when editing your post or page.

Pullquote block documentation

You can quickly add one by typing /pullquote in a blank paragraph block and then hitting the enter key.

Pullquote block documentation

---

Table /t

Use the Table block to easily create a table in any post or page. To add the Table block to a page, click the Add block button to open the block inserter pop-up window and choose the Table block.

Day of week	Daily deal	Opening hours
Monday	Apples	08–16.00
Tuesday	Bananas	08–17.30
Wednesday	Oranges	09–13.30

Use the edit table option to quickly manage rows and columns. It’s possible to insert a row or column before, insert a row or column after, and delete a row or a column.

Table block documentation

Media

---

Image /i

The image block can be added to a page by clicking on the Add Block button. Alternatively, you can type /image and press enter. The media options panel will load with three options, Upload, Media Library, and Insert from URL.

Image placeholders

The child theme assets folder /assets/placeholders contains examples of images in recommended aspect ratios and resolutions. Here is one:

Logo placeholders

The child theme assets folder /assets/logos/ contains sample logos in SVG with the filenames logo-placeholder-01.svg – 12.svg

---

Gallery /ga

The Gallery block allows you to easily add multiple photos and automatically arrange them in a gallery. You can control the number of columns and the size of the images in the gallery.

The Classic Portrait, Square and Wide formats are standard WordPress aspect ratios. Social Portrait 4:5 is recommended for social media, and Panorama 2:1 is a good for hero sections; these are added by this child theme.

You can transform or change the block to another block, including the Group, Image, and Column blocks. When you change the block type to the Image block, every image in your gallery will be converted into a single image block.

Gallery block documentation

---

Audio /au

Creating an Audio block will allow you to embed a piece of music, podcast, or other sound file right into your page or post. In order to add an Audio block, click on the inserter icon.

Audio files for WordPress with good support, are the open source Vorbis (.ogg) or MP3. With free cross-platform apps like oceanaudio and audacity you can trim, compress and export audio files in either of these formats.

Audio block documentation

Cover /cov

The cover block lets you add an image or video with a text overlay. You can select the Use featured image option to use the featured image, as the cover.

The toggle full height option allows the Cover block to take up the height of the reader’s screen to create an immersive experience.

Cover block documentation

---

Media and Text /me

The media & text block allows you to place an image or video side-by-side with text. To create this layout, click on the block inserter icon to open the block library and select the media & text block.

To add your text, simply start typing in the text box. You will be given the same text editing options as a regular paragraph block. You can also use the block inserter and add other blocks to the content area.

Media & Text documentation

---

Video /vi

Use the Video block to upload and embed video into your post or page. To add the Video block to a page, click the (+) icon to open the block inserter pop-up window and choose the Video block.

The Text tracks option will allow you to display timed text tracks (such as subtitles or captions) when the media is playing. The tracks are formatted in WebVTT format (.vtt files) — Web Video Text Tracks.

Video block documentation

Design

---

Accordion /acc

The Accordion block lets you show content in collapsible sections so visitors can expand just the parts they need. It’s commonly used for FAQs, schedules, or any long page. Each Accordion contains Accordion Item blocks.

Accordion Block Documentation

---

Buttons /bu

To add the Buttons block to a page, click the Add block button to open the block inserter pop-up window and choose the Buttons block. The Buttons block comes with one individual button block by default. You can customize the text, link, and style for this button.

Buttons Block Documentation

---

Columns /col

The Columns Block allows you to insert text, media, and other types of content into columns.

Note: The “Columns Block” is a legacy block for easy access to a column-looking layout. It uses flexbox under the hood, not actual CSS columns, so if that is what you are looking for, you have to insert custom HTML.

Once you add the Columns Block, you can choose a variation to start with (and you can change the number or add more columns later). If you want to use the default variation (50 / 50), you can click on the Skip option at the bottom.

Columns Block Documentation

---

Group /gr

The Group block allows you to group different blocks together and customize them to your liking, including setting custom background colors and spacing.

You can also type /group and hit enter in a new paragraph block to add one quickly. Row and Stack are also types of Group blocks, they just have a different layout style by default.

Group Block Documentation

---

Row /ro

Use the Row block to arrange blocks horizontally. The actual HTML element of the Row block, is a div with display:flexbox.

Flexbox provides a property called flex-direction that specifies which direction the main axis runs (which direction the flexbox children are laid out in). By default this is set to row, which causes them to be laid out in a row in the direction your browser’s default language works in (left to right, in the case of an English browser). Here are three logos in a row:

Click the Change items justification button in the Block toolbar to display the justification drop-down. You can justify the block text to the left, make it center-justified, align it to the right or leave a space between items.

Row block documentation

MDN Web Docs Flexbox article

---

Stack /st

Stack block is one of the container blocks that can be used to nest other blocks vertically. As a container block, it’s possible to transform a Stack block into a Group or Row block without changing the content of the block. The actual HTML element of the Stack block, is also a div with display:flexbox, but here with the flex-direction: column property.

Stack Block documentation

MDN Web Docs Flexbox article

---

Grid /gri

Grid block is one of the container blocks that can be used to organize multiple blocks and adjust the height, width, and position of all blocks inside the container. As a container block, it’s possible to transform a Grid block into a Group, Row or Stack block without changing the content of the block.

Here is a grid with three items.

The Grid block provides Layout settings options to change the number of columns in the Grid block.

• Auto – Automatically the number of columns is defined by the value specified in Minimum column width.
• Manual – The number of columns is set at Columns field.

Grid Block documentation

MDN Web Docs Grid article

---

Separator /se

The separator block creates a break between two blocks of content with a horizontal line. This helps to create a separation between ideas or sections on your post or page.

The actual HTML element is <hr>: The Thematic Break or (Horizontal Rule) element. The <hr> HTML element represents a thematic break between paragraph-level elements: for example, a change of scene in a story, or a shift of topic within a section.

Seperator Block documentation

<hr> element documentation

Tabs /tabs

The Tabs block lets you organize content into separate tabbed sections that visitors click through one at a time, instead of showing everything on the page at once.

Be aware – tabs do not look great when wrapped, so limit them to two or three, use short labels, and be sure always to check on phone devices.

Embeds

---

Embed /em

When you are embedding content, you don’t need to upload the content to your WordPress site. You are creating a link to the content, from within your post or page. Below is an example of a PeerTube video

Embed block documentation

Embed Privacy protects your visitor’s privacy and makes your site faster

---

Pocket Casts /pock

The Pocket Casts Embed block is a variation of the Embed block. The block enables you to insert any Pocket Casts content, such as a podcast page, an episode, and the time position within an episode, into your post or page.

https://pocketcasts.com/podcast/sux-the-sustainable-ux-podcast/2b8b3c50-3d1a-013b-efcc-0acc26574db2/sux-ep-18-world-wide-waste-with-gerry-mcgovern/5ec377fd-bad8-4086-a731-6e1fdde17684

Pocket Casts block documentation

---

Spotify /spot

With the Spotify Embed block, you can embed tracks, podcasts, playlists & albums into your posts and pages. You don’t need a Spotify account to embed a track, podcast, playlist or album.

Spotify block documentation

---

YouTube /you

Using the YouTube Embed block you can include a YouTube video into your post/page with play buttons, so your visitor can stay on your site to watch it. You don’t need a YouTube account to embed a video.

YouTube block documentation

---

Vimeo /vim

Vimeo is a popular video-sharing service. With the Vimeo block, you can embed videos from Vimeo into your WordPress website. You don’t need a Vimeo account to be able to use it. You can only embed public Vimeo videos.

Vimeo block documentation

---

VideoPress /videop

With the VideoPress Embed block, you can embed videos from VideoPress into your posts and pages. You don’t need a VideoPress account to be able to embed them, although the video-sharing option should be enabled.

VideoPress embed documentation

Block editor resources and credits

---

Recommended WordPress plugins

Accessibility Checker by Equalize Digital

Accessibility Checker highlights accessibility issues as you write, giving clear guidance so you can improve usability and create a more inclusive site.

Embed Privacy plugin

Improves GDPR compliance by blocking external embeds such as YouTube, Vimeo, and Spotify until the user actively accepts data sharing via consent.

Lightbox for Gallery plugin

Adds a lightweight Lightbox to Gallery and Image Blocks, automatically loading a modern, dependency-free, and minimalist JavaScript Lightbox experience.

SimpleTOC plugin

Generates a clean, lightweight table of contents block from your headings automatically, offering a no‑frills way to improve navigation.

The Icon Block plugin

A simple Gutenberg block for inserting crisp SVG icons from several bundled sets, giving you lightweight, scalable visuals.