This post exists for one reason: to put every kind of block on a single page so you can see exactly how your styles render. If something looks wrong here, it looks wrong everywhere. Treat it as your visual regression page.

This is a plain Paragraph block. It contains italic text, bold text, bold italic, strikethrough, inline code, and an inline link so you can confirm link color, underline, and hover states.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Lists

• Top-level item
• Item with a nested list
  • Nested child item
  • Second nested child
• Back to the top level

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

Quote and Pullquote

This is a Quote block. It usually carries a left border, italic type, and a large decorative quotation mark. A second line lets you check spacing inside the quote.

Attribution line

A Pullquote is the loud cousin of the quote, bigger and centered, meant to interrupt the reading flow.

Design note

Code and Preformatted

.gutenberg .wp-block-quote {
  margin: var(--sp-xl) 0;
  border-left: 2px solid var(--color-black);
  font-style: italic;
}

Preformatted block.
Whitespace      is preserved exactly.
Line breaks too.

Table

Plan	Price	Best for
Starter	$0	Hobby sites and testing
Growth	$19	Small business blogs
Scale	$49	High-traffic publishers

---

Image

Click to expand the Details block

Hidden content lives here until the summary is toggled. Useful for FAQs.

Roses are red,
    indentation is kept,
line breaks stay put,
    the Verse block never forgets.

That spacer added vertical space above this line with no content. It is the last block in the showcase.