Block Exemplar

Gutenberg Block Exemplar

A QA reference page that exercises every core text, media, and design block in nearly every meaningful variation. If something on this page looks broken, the theme is broken.

Table of contents

1. Headings
2. Paragraphs
3. Lists
4. Quotes & pullquotes
5. Verse, code, preformatted
6. Tables
7. Footnotes & details
8. Buttons
9. Separators & spacers
10. Images
11. Galleries
12. Covers
13. Media & text
14. Audio, video, file
15. Embeds
16. Custom HTML
17. Columns
18. Groups, stacks, rows, grids
19. Complex composition

1. Headings

Heading levels h1 through h4 — the four levels Tailwind Typography ships sizes for, and the four levels `core/heading` exposes after the theme’s clamp filter. h5/h6 are intentionally absent from the picker and from this fixture.

Heading level 1 — body H1 (rare in posts)

Heading level 2 — section heading

Heading level 3 — subsection heading

Heading level 4 — minor heading

H2 centered

H3 right-aligned

H2 with tracking & uppercase transform

H2 colored with the primary palette token

H3 with background, padding, and contrasted text

2. Paragraphs

This is a default paragraph at the body font size. It contains a standard inline link, some bold text, some italic text, and a code span. It should wrap at the theme’s content width and inherit body line-height.

This paragraph has a drop cap. Theme styles must size the first letter substantially larger than the body and float it left so the surrounding text wraps around it. Drop caps are a meaningful regression target because the float interaction is brittle and breaks easily when typography tokens change.

Paragraph aligned left (the default, but with the explicit class applied).

Paragraph aligned center. The width of the paragraph is the column it sits in; only the inline text axis is centered.

Paragraph aligned right.

Small font-size paragraph (preset: small).

Medium font-size paragraph (preset: medium).

Large font-size paragraph (preset: large).

Extra-large font-size paragraph (preset: x-large).

Paragraph with primary text color from the palette.

Paragraph with primary background and base text color (inverse palette pairing).

Paragraph with custom inline color, background, padding, and border-radius — exercises the style.* pathway end-to-end.

Paragraph with custom italic, weight 500, tracking, and a relaxed line-height — exercises the style.typography pathway.

Long paragraph for line-height and content-width regression. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Maecenas faucibus mollis interdum. Donec ullamcorper nulla non metus auctor fringilla. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec id elit non mi porta gravida at eget metus. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Maecenas sed diam eget risus varius blandit sit amet non magna.

3. Lists

Unordered list (default disc)

• First item with a link and bold text.
• Second item that wraps onto multiple lines so we can see the hanging indent of long content. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
• Third item with a nested list:
  • Nested item A
  • Nested item B with another nested list:
    • Doubly-nested item
  • Nested item C
• Fourth (top-level) item.

Ordered list (default decimal)

1. First numbered step.
2. Second numbered step.
3. Third numbered step.

Ordered list — custom start, reversed, lower-roman

10. Counts down from x in lower-roman.
11. Second item.
12. Third item.

Mixed nested list — ordered inside unordered

• Top-level bullet
  1. Numbered child A
  2. Numbered child B
• Another top-level bullet

4. Quotes & pullquotes

Quote (default style)

The best way to predict the future is to invent it. Long-form quote that may wrap onto multiple lines so we can verify the citation rule against the bottom of the block.

Alan Kay

Quote (plain style)

Plain-style quotes drop the visual rule. The block looks like ordinary running text but is still semantically a blockquote, so screen readers announce it correctly.

QA Notes

Quote with multiple paragraphs and a list

First paragraph of a multi-paragraph quote. Quotes can contain any block, which is why the inner-blocks rendering must be exercised.

Second paragraph of the same quote.

• Even a list can sit inside a quote.
• That list still inherits quote styling.

Composed Source

Pullquote (default)

Pullquote (solid color style)

Pullquote (wide alignment)

5. Verse, code, preformatted

Verse

Whose woods these are I think I know.
His house is in the village though;
He will not see me stopping here
To watch his woods fill up with snow.

The woods are lovely, dark and deep,
But I have promises to keep,
And miles to go before I sleep,
And miles to go before I sleep.

Code

function exemplar( $value ) {
    if ( ! is_array( $value ) ) {
        return new WP_Error( 'invalid', 'Expected array.' );
    }

    return array_map(
        static fn( $item ) => sanitize_text_field( $item ),
        $value
    );
}

Preformatted

Preformatted text retains    every    space
and every
line break exactly       as written.

Useful for ASCII diagrams:

    +-----+      +-----+
    |  A  |---->|  B  |
    +-----+      +-----+

6. Tables

Default table with header, body, footer, and caption

Striped table style

Wide-aligned table with fixed-width columns

7. Footnotes & details

Paragraph with footnote refs

WordPress core ships a Footnotes block as of 6.3¹. Inline footnote markers link down to the footnotes block at the bottom of the post² and back-link returns to the originating reference.

Details (single)

Details (open by default, with rich content)

// Code block inside details
const opened = true;

Stacked details (FAQ pattern)

8. Buttons

Single button — fill, outline, link styles

Buttons — alignment via flex layout

Button widths (25 / 50 / 75 / 100)

Button — palette colors and custom radius

Button with custom typography & opens-in-new-tab

9. Separators & spacers

Separator (default)

Separator (wide line)

Separator (dots)

Separator (custom color)

Spacers — small, medium, large

↓ small spacer (24px) ↓

↓ medium spacer (64px) ↓

↓ large spacer (128px) ↓

End of spacers section.

10. Images

Image — default (no alignment)

Image — left aligned (text wraps)

Surrounding paragraph that should wrap around the left-aligned image to its right. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Maecenas faucibus mollis interdum. Donec ullamcorper nulla non metus auctor fringilla. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec id elit non mi porta gravida at eget metus. Nulla vitae elit libero, a pharetra augue.

Image — right aligned (text wraps)

Surrounding paragraph that should wrap around the right-aligned image to its left. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Maecenas faucibus mollis interdum. Donec ullamcorper nulla non metus auctor fringilla. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Image — center aligned with caption

Image — wide aligned

Image — full aligned (edge to edge)

Image — rounded style

Image — custom border, radius, and aspect ratio

Image — linked to URL

Image — lightbox enabled (click to expand)

11. Galleries

Gallery — 2 columns, cropped

Gallery — 3 columns, with captions

Gallery — 4 columns, uncropped, wide aligned

Gallery — 6 columns, full aligned, link to media file

12. Covers

Cover — image background, dim overlay, centered content

Image cover with dim overlay

Min height 420px. Content positioned center-center.

Primary CTA

Cover — image background, colored overlay (primary), top-left content

Top-left aligned content

Wide alignment. Primary overlay at 60% dim. Notice how content sits in the top-left corner of the cover.

Cover — gradient overlay, no image, full alignment

Cover — fixed background (parallax) with focal point

Cover — repeated background

Cover — viewport-height tall, content bottom-right

Hero-style cover

80vh tall. Content anchored bottom-right.

13. Media & text

Media on left (default)

Media on the left

Default split — media on the left, body on the right. Stacks vertically on narrow viewports.

Media on right, vertically centered

Media on the right

Same block flipped, with content vertically centered relative to the media. Useful when text is shorter than the media.

Media & text — image cropped to fill, vertically aligned bottom

Crop-to-fill media

Image fills the media half completely, cropped according to the focal point. Content anchored to the bottom of its half.

Media & text — wide aligned, custom media width 33%

Asymmetric split

Body takes two-thirds of the wide-aligned width; media takes one-third on the right. The grid-template-columns inline style drives the ratio.

Multiple paragraphs of body content stack inside the content half. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

14. Audio, video, file

Audio with caption

Video with poster & caption

Video — wide aligned, autoplay disabled, muted, loop

File with download button

File without download button

15. Embeds

YouTube — default 16:9 responsive

YouTube — wide aligned with caption

Twitter / X embed

16. Custom HTML

17. Columns

Two equal columns

Three equal columns

Four equal columns

33 / 66 split with images

Body takes the larger column

33/66 splits are the canonical asymmetric layout. Useful for portrait images alongside a body block.

25 / 25 / 50 split

Vertical alignment — top / center / bottom

Columns — disabled mobile stacking

18. Groups, stacks, rows, grids

Group — default constrained layout

Group — background color, padding, full alignment

Group — flex row (Row variation)

Group — flex stack (Stack variation)

Group — grid layout (3 columns)

Group — auto-fit grid (minimum column width)

19. Complex composition

The final section combines blocks the way real authors do — nesting, alignment, and styling all interacting at once.

Hero with nested CTA stack

A cover containing a constrained group containing a heading, paragraph, and button row.

Get started

Learn more

Image-and-body split

A two-column row with rounded image on the left and body block on the right. Bullet list and CTA below.

• Feature one
• Feature two
• Feature three

Read the case study

End of exemplar. ↑ Back to top