One column of seven native core/details rows running the full 1240 measure, ruled above the first, between every pair and below the last. The question sits at display size across the whole width. The answer steps in from the left and holds a short reading measure inside it. There is no second column, no label rail and no card: the width, and what is done with it, is the design.
The signature moment
The step
Every other FAQ in the library divides the band vertically and then fills the halves. This one refuses the division and makes the section's left edge do the work instead. A question begins at the band's left edge and runs as far as it needs to; its answer begins one indent further in and stops well short of the right. So the left edge alternates, question, indent, question, indent, all the way down, while the rules stay full width and hold the whole thing square.
That is the density collapse as well as the composition. Nothing sits between a 38px question and a 17px answer, and the indent is what tells the eye which of the two it is looking at before it has read a word. Take the indent away and the section is a long list of headings; take the short measure away and the answers run 110 characters and nobody finishes one.
What it inherits from your theme
- Typeface. No font family is stated anywhere, in the base or the variation.
- Palette. The ground and every piece of text are your
baseandcontrast, each written as a fallback chain ending on a colour WordPress itself guarantees. No accent slug appears in any rung. - The rules. They are
core/separatorblocks with no colour of their own, so they take your theme's separator style: a 1pxcurrentColorrule in both Twenty Twenty-Four and Twenty Twenty-Five, a 2pxcurrentColorrule in a theme that styles nothing. They cannot blank, because a colour is never named. - Spacing scale. The band's padding, the air inside each row and the gap under the header are core spacing presets.
What it decides for itself
- The step, which is the design and the one thing to leave alone.
- The 36rem measure on the answers, and the indent that scales with the viewport and closes on a phone.
- Proportion. Questions at
clamp(1.3125rem, 2.6vw, 2.375rem)with -0.02em tracking in a 45px line band; answers at 16 to 17px on a 1.7 line height; the header's eyebrow at 14 to 15px with 0.24em tracking above a headline atclamp(2rem, 4vw, 3.25rem). - Row rhythm. Every row zeroes its own margins and carries its air as padding, and the separators are zeroed too, so the rules butt against the rows and the run reads as one ruled document rather than a stack of items.
What you change first
- The copy. Seven questions and seven answers. Keep a question under about 28 characters so it holds one line at 390px, and keep an answer to two or three sentences; at 70 characters a line, four sentences is a paragraph nobody opens twice.
- The number of rows. A row is a separator followed by a details block. Copy or delete the pair. Keep the closing separator so the run ends on a rule.
- Which question starts open. Move
"showContent":trueand the matchingopenon the<details>tag to whichever question you most want read, or delete both and ship the run closed. - The indent. The two numbers in
clamp(0rem, 12vw - 3rem, 10rem)set how far the answers step in and how early the step disappears. Set it to0remand you have a plain full-width FAQ, which is a different and quieter section. - The header. If your page already has a title, delete the header group and the section starts on its first rule, which still reads as intended.
Why this is the only single-column FAQ95 words
faq-ledger hangs topic labels in a margin against a list. faq-list puts the ask in a header column against a compact list. faq-cards is a wall of bordered boxes with nothing collapsed. faq-spotlight promotes one question to display size and packs the remaining eight into a grid. All four divide the band. faq-measure is the answer to a different question, which is what to do when there is nothing to put beside the questions and the page is a support page rather than a sales page. Take it when the FAQ is the whole page.
Mechanics worth knowing489 words
core/detailsis core, and it is safe at the 6.6 floor. The block landed in WordPress 6.3 and itssave()output is unchanged across the matrix. Thenameattribute that powers exclusive accordions arrived later and is not used here.- The indent is padding, not margin.
core/paragraphsupports only top and bottom margins, so amargin-leftwould be an attribute the block's ownsave()never writes and the buyer's editor would mark the block invalid the first time it is opened. The step ispadding-leftinstead, which is fully supported and lands on the same pixels. - The indent closes itself on a phone. It is
clamp(0rem, 12vw - 3rem, 10rem), so it is 120px on a wide desktop, about 50px at 820, and exactly zero below roughly 480px, where an indent would be stealing a seventh of the measure from an answer that has none to spare. - The measure is bounded by the row, not by the viewport. The answer's
padding-right: max(0rem, 100% - 36rem)resolves its percentage against the row's own width, so the answer is 36rem wide wherever the row is wider than that and full width wherever it is not. With the indent taken off as well, a 1240px band gives about 68 characters and an 820px one about 77. It was 46rem until the measure was rendered and counted: the indent shrinks faster than the band does, so the widest measure is at 820 and not at 1280, and the answers ran to 100 characters there while reading fine on the desktop they were authored on. - A question must hold ONE line at 390. The
line-height: max(45px, 1.15em)that makes a closed row a 44px tap target applies per line, so a question that wraps on a phone opens a 45px gap inside itself with nothing to flag it. The questions floor at 21px, which puts the budget at about 28 characters; the longest here is 27. Fix a long question by shortening the question, never by loosening the line box. - The rules are
core/separatorblocks carryingis-style-wide. Without that class Twenty Twenty-Four narrows a separator to a centred 100px stub, which is a full-width rule that silently is not one. - The header holds its own measure with a nested constrained group, not with a
padding-righton a direct child of the band. The padding trick puts the block's left edge in the wrong place inside a constrained layout, and because the width still comes out right, nothing flags it. - The first question ships open (
showContent: true). A section whose every row is shut shows a visitor nothing about what is inside it, and shows you nothing in a preview either. - The disclosure marker is the browser's. It cannot be restyled from block attributes, and CSS that no block attribute can express lives in the companion plugin rather than in a pattern, so the triangle stays.
The variations58 words
- Open measure. Every row ships open. One idea moves and it is the composition: with all seven answers visible the step repeats down the whole section and the page reads as a document, which is what a support page wants and what a sales page does not. Colours, sizes, indent and copy are identical to the base.
Contrast85 words
Every pair is your contrast on your base, in the base and in Open measure alike, which is the pair your theme already ships body copy on. The headline and the questions are large text (21px and above at every width) and are claimed at 3:1. The eyebrow and the answers are body text and are held to 4.5:1. The rules are structural marks with no colour of their own and carry no text. Measured per theme against the resolved values, not the authored chains.
The markup
Core block markup and nothing else. Copy it, then paste it straight into the block editor: WordPress reads the delimiters and rebuilds the blocks.
Fetching the markup…
Variation: Open measure
Fetching the markup…