This post exists so the Gutenberg Styles snippet can be judged instead of guessed at. Every block below is styled by something — an ACSS 4 class, an ACSS dashboard setting, an Etch chip, or a rule in that snippet. If you change how one of these looks anywhere, this page is where you check that the other side still agrees.
Do not delete this post on the template. On a client site, set it to Draft rather than publishing it. Pairing table and the sync rule: etch-acss-reference.md → WPCodeBox Snippets Architecture → Gutenberg Styles.
Leader paragraph
The leader is the first paragraph of a post: accent font, italic, one text step up from the body. It is an ordinary paragraph block with the class lead — nothing else changes, and screen readers still read it as a paragraph.
Add lead under Advanced → Additional CSS class(es) on the first paragraph (or the first two, if the intro runs long). It is styled from the .gutenberg-content chip, nested — a standalone chip for a class that only lives in post content never compiles.
Headings and flow spacing
The gaps between these blocks are not set here. They come from ACSS 4’s .gutenberg-content, which emits > * + * plus a separate rule per heading level. If heading rhythm looks wrong, the fix is a dashboard setting, not CSS.
An H3, to show the h3 spacing token
Body copy after an H3. The space above that heading should be visibly larger than the space between two paragraphs.
And an H4
Body copy after an H4.
Dividers
Default separator, full width. Colour, thickness and vertical gap all come from ACSS Borders & Dividers; the only custom CSS is the bridge in Global SCSS that attaches those tokens to WordPress’s separator block.
Narrowed with the ACSS width utility width--20. It is a framework class in automatic.css, so it works in written content with no Etch chip and no Global SCSS bridge:
Lists
Default unordered list — chevron bullets, applied to every ul.wp-block-list with no class needed:
- First item in a default list
- Second item, long enough to wrap onto a second line so the hanging indent is visible and you can confirm the bullet does not sit inside the text block
- Third item, with a nested list
- Nested item one
- Nested item two
Ordered list — untouched by the snippet, so this is browser plus ACSS defaults:
- Step one
- Step two
- Step three
Checkmark list, list-check:
- Ticks instead of chevrons
- Marker colour follows
--primary - If these render as chevrons, the modifier has lost the specificity fight
Primary-coloured chevrons, list-chevron-primary:
- Same glyph as the default
- Brand colour rather than body colour
Quotes
A blockquote. The left border and the background tint come from the Gutenberg snippet; the type treatment comes from ACSS’s own blockquote system, which is substantial and already fires on this element.
Attribution line
A pullquote is a different block with different markup. Nothing custom targets it, so this is pure ACSS.
Nobody in particular
Callout boxes
Callout box. Tinted panel with a left accent, for asides and warnings inside written content. Its near-twin on the Etch side is the .short-callout chip — two implementations of one idea, which is exactly the duplication the pairing table exists to keep honest.
Key Takeaways
- The heading is an h2, sized like text-l. It sits right after the h1, so any other level breaks heading order; the size is a chip rule, not a level change.
- The list stays at body size. Takeaways are content, not a footnote.
- It is the same callout box.
callout-boxwrapping alist-checklist — no new class.
Images
Default width, with a caption:
Wide alignment — only works inside a content grid:
Gallery:
Tables
A narrow table fits its column:
| Plan | Billing | Support | Priority queue |
|---|---|---|---|
| Starter | Monthly | ||
| Growth | Monthly | Email and phone | |
| Managed | Annual | Dedicated |
A wide comparison table has to scroll inside its own container, or it makes the whole page scroll sideways. The wrapper below carries table-scroll:
| Model | Rail | Capacity | Seat width | Swivel | Power | Warranty | Lead time |
|---|---|---|---|---|---|---|---|
| Model A | Straight | Standard | Standard | Manual | Battery | Lifetime parts | Days |
| Model B | Straight | Extended | Wide | Manual | Battery | Lifetime parts | Days |
| Model C | Curved | Standard | Standard | Powered | Battery | Lifetime parts | Weeks |
A summary row: add the class table-row--total to the <tr> in the code editor (the table block has no per-row UI). Opt-in, like table--zebra.
| Line | Now | In one year |
|---|---|---|
| Starting balance | $1,800,000 | $1,800,000 |
| Growth | +$90,000 | +$90,000 |
| Withdrawals | -$70,000 | $0 |
| Difference | Baseline | +$105,000 |
FAQ accordion
Native <details> blocks with the class faq-item. ACSS 4 leaves details unstyled, so the marker, summary band and answer padding come from the .gutenberg-content chip. No script; keyboard and screen readers get the disclosure for free. The answer goes inside the block as a paragraph — an empty details is the most common migration bug.
Does the accordion need JavaScript?
No. The browser handles open and close, keyboard focus and the expanded state. The chip only replaces the default triangle with a plus/minus and pads the answer.
Can an answer hold more than one paragraph?
Yes — any blocks can sit inside the details. Keep it to text and lists; a heading inside an answer would join the page outline.
Links in running text
A link inside a paragraph must be distinguishable without relying on colour alone: Lighthouse asks for 3:1 contrast against the surrounding text, or an underline. Content links here stay in the primary hue: --primary-ultra-dark mixed a quarter toward black (no stock primary shade clears 3:1 against this body), which is 3.29:1 against the body grey — an example link — set through ACSS’s --link-color on the .gutenberg-content chip so buttons, cards and the nav keep their own colours. Write link text that names the destination (“view the Form CRS”), never “click here”.
Check at 390px: the wide table should scroll on its own and documentElement.scrollWidth should still equal clientWidth.
Buttons
A bare button block. ACSS 4’s button framework only fires when the block carries a btn--* class, so this one is painted entirely by the Gutenberg snippet:
The same block with btn--primary on it. This one is painted by ACSS and needs no custom CSS at all, which is the preferred shape:
Hover both. If the ACSS one goes transparent, --primary-hover is broken — see the interaction-state check in the migration playbook.
Code
Inline code inside a sentence, so you can see whether the padding and background sit correctly on the line.
const acss = await (await fetch(href)).text();
const has = tok => acss.split(tok).length - 1;Table of contents list
Columns
Left column. The tinted panel and radius come from the Gutenberg snippet, not from ACSS’s card framework — these are not .card elements.
Right column. Check the gap between columns and that they stack cleanly on a phone.
If you add a block type to a client build that is not on this page, add it here too — otherwise the next person auditing the snippet has no way to tell a live rule from a dead one.
Icons
WordPress core ships no icon block. There is no native way to insert one, which is why every example in this section is a Custom HTML block — the only place on this page that needs one.
ACSS 4 does ship a full icon framework, and it is markup-driven, so it works in written content with no chip and no snippet entry. The hook is a data attribute, not a class: data-icon on an svg, an i, or an a. Every modifier below works as a class or an attribute — icon--l and [data-icon-size="l"] are the same thing.
Icons are Lucide v1.34.0 (ISC), inlined verbatim as raw SVG with presentation attributes only — no style block, so nothing collides when several are inlined on one page. This is a fallback, not a new convention. Lucide via etch:svg remains the standard everywhere Etch is available — raw inline SVG is only for Gutenberg content, where etch:svg does not exist. Do not read this section as licence to paste SVG into Etch sections. Paths are copied byte-exact from the Lucide source and must stay that way: never re-encode them, and never run SVGO with convertPathData enabled, which rewrites geometry silently.
Size scale
icon--xs · 12pxicon--s · 16pxicon--m · 32pxicon--l · 64pxicon--xl · 128pxSizes come from --icon-size-xs through --icon-size-xl, set in ACSS Dashboard → Icons. Nothing here is custom CSS.
Boxed and plain
icon--boxed is the closest thing ACSS has to an icon box: padding, border, radius and background around the icon itself, all from --icon-* tokens. icon--plain strips that chrome back off. The third one is wrapped in a link — ACSS ships a:hover [data-icon] states, so the background and colour swap on hover with no CSS from us.
Icon list
- An icon list uses real icons, not a pseudo-element bullet.
- Spacing comes from
--icon-list-gap; icon size from--icon-list-icon-size. - This is the ACSS twin for our
list-checkandlist-chevron-primaryrules in the Gutenberg snippet.
Note this list carries icon-list but not wp-block-list, so the snippet’s chevron ::before never fires and the two systems do not collide. A list typed normally in the editor gets wp-block-list and our chevrons; this one is hand-written HTML and gets ACSS’s icons.
The row layout is ours, and that is not an oversight. ACSS ships seven icon-list rules. The list gets display:flex, flex-direction:column and --icon-list-gap. The icon gets --icon-list-icon-size, flex-shrink:0 and position:relative, so --icon-inline-offset and --icon-block-offset can nudge it against the text. None of them touch the li. And because the base [data-icon] rule makes the svg display:flex — block-level — an icon and its text stack vertically until something makes each row a flex container. That single rule lives in the Gutenberg snippet, annotated with what ACSS does and does not provide. Same shape as the divider bridge: ACSS ships the paint, not always the brush.
Icon callout
callout-box — our own class — with an svg data-icon dropped inside it and a two-line flex wrapper. Markup, not new CSS.Which is the rule for all of this: if an author can reasonably be asked to add the class, use the framework class and write no CSS. If icons in written content become routine, the right home is a block pattern so authors insert it from the inserter — not raw SVG pasted into every post.
