Every block, once
每一种区块，各出现一次
A sampler page built for AIBlog that shows every block kind the renderer knows, once each, so a designer can see the whole vocabulary in one place.
AIBlog
2026.09
Structure is what survives a redesign.
This page is a sampler. Each kind of block the AIBlog renderer knows appears here once, so a designer can see the whole vocabulary in one place and switch the Theme menu to watch each block change its face without changing its content. The photographs are abstract placeholders generated by a script; their descriptions were written by hand. Nothing on this page is a real project figure except the counts of the vocabulary itself.
The renderer emits structure,
a theme decides the rest;
a block keeps its id
through every regeneration.
What a block is
A block is a typed unit of content with a stable id. The composer chooses the kind, the validator checks it against the family's allow-list, the renderer emits the contract markup, and the theme styles it. The list of kinds is short on purpose.
- lead: the opening statement, once per page
- p: an ordinary paragraph
- h: a sub-heading; the renderer chooses the level
- verse: a stanza kept line by line
- note: a short aside with a tone the composer chooses
Composed.
The model emits the block with its kind and fields, photos by manifest number.
Validated.
Deterministic code checks every field against the schema and the family's allow-list; anything else is refused.
Stored.
Photo numbers become placements; the block gets its id, or keeps the one it had.
Rendered.
The contract markup is emitted with class hooks for the theme and data attributes for the editor.
We stopped worrying about the layout. We paste, we look, we publish.
- Family
- showcase
- Type
- case study
- Kinds shown
- twenty-one
- Photographs
- eight placeholders
- Themes
- four
- 21
- block kinds
- 4
- theme packs
- 2
- locales
- 1
- DOM contract
| Group | Kinds | Editable in place |
|---|---|---|
| Text | lead, p, h, verse, note, code | yes |
| Lists | ul, ol, faq, timeline, people, stats | yes |
| Emphasis | quote, facts, table, signoff | yes |
| Photographs | fig, sheet | photos and captions |
| Links | link, cta | yes |
| Structure | break | no |
Ada Placeholder
Mentor
Wrote the descriptions of the photographs by hand.
Lin Placeholder
Editor
Composed this page through the composer and changed one caption in place.
Sam Placeholder
Designer
Checked every block under all four themes.
- 2026.09.09
Eleven core kinds
lead, p, h, verse, ul, ol, quote, facts, table, fig, sheet, carried over from the first client site.
- 2026.09.10, morning
video, link and cta
Registered but opt-in per family.
- 2026.09.10, evening
faq, timeline, note and code
Plus page references for links.
- 2026.09.11
people, stats, signoff and break
And the quote role variant.
- How do I style a kind?
- Override tokens on the document root first; reach for the kind's class hooks only when a token cannot express the design.
- Can a client add a kind?
- No. Kinds are registered in code and allowed per family in the configuration. The client's editor only changes words and pictures.
- What happens to an unknown kind?
- The validator refuses it and one repair turn asks the composer to try again within the vocabulary.
allowedBlocks: ["lead", "p", "h", "quote", "facts", "fig", "sheet", "faq", "timeline"]Start a site of your own — read the getting started guide.
Getting startedComposed late one evening, edited once in place, published from the same screen.
The AIBlog composer
On behalf of Cyphia Solutions
2026-09-11
- Block vocabulary
- Renderer
- Theme packs
- Documentation