Kitchen sink

Every element the editor can output, rendered with the theme's tokens. If it looks wrong here, it looks wrong in a real post.

Headings

Heading level 1

Heading level 2

Heading level 3

Heading level 4

Heading level 5
Heading level 6

Text

A paragraph with bold, italic, a link, inline code, highlighted text, deleted and inserted text, a abbr, subscript2, superscript2, small print and a Ctrl + C keystroke.

A second paragraph, so the rhythm between two blocks of prose is visible. It is long enough to wrap onto several lines at any reasonable measure, which is the only way to judge line height and line length honestly.

Lists

  • An unordered item
  • An item with a nested list
    • Nested one
    • Nested two
  • A third item
  1. An ordered item
  2. Another, with nesting
    1. Nested one
    2. Nested two
Definition term
The description that belongs to it.
Another term
Its description.

Quotations

A blockquote carries the voice of someone other than the author, so it needs to read as a genuine aside rather than as emphasis.

Someone, somewhere

The large quote style is a display element, not a paragraph.

Code

// A pre block scrolls rather than wrapping, because wrapping code changes it.
function vocalcom_example( $value ) {
    return array_map( fn( $item ) => strtoupper( $item ), (array) $value );
}

Table

A table caption, describing what the table shows
TokenValueUsed by
--space-mdclamp()Block inner gaps
--color-primary#3538CDButtons, links, focus rings
--radius-lg12pxCards, modals

Separator

Details

A collapsed disclosure

Its content, revealed on click. Native, so it works with no JavaScript.

Buttons

Editor button block

Forms

Alignment

The two alignment classes below map onto the theme's breakout grid rather than escaping with negative margins, so editor-chosen widths land on the same lines as developer-chosen ones.

.alignwide

.alignfull