[Library] Editorial

Catalogue accessStandard

Content columns

A long-form editorial section held to a strict reading measure, with a narrow sidenote rail hanging outside it: each note sits under its own hairline beside the paragraph it annotates, and drops beneath that paragraph on a phone. States no colour and no font of its own.

View
Before you copy
Open in a new window

Identical markup in every theme. Manrope typeface rgb(255, 255, 255) ground 1280px viewport

A long-form editorial section: an intro, four movements of body copy held to one strict reading measure, and a narrow rail of sidenotes hanging outside that measure. No cards, no boxes, no drop caps and no custom CSS. Everything is a core/group, core/columns, core/paragraph, core/heading or core/separator.

The signature moment

Hanging marginalia

The body copy never widens. It is set at a fixed 33rem measure and stops there however wide the section gets, and the space that opens up to the right of it is not padding: it is a rail, 15rem across, where each note hangs beneath its own hairline level with the top of the paragraph it annotates. The rules march down the right-hand side of the article like ticks on a ruler, so a reader can see at a glance which paragraphs carry a note and which do not, without a single marker interrupting the sentences themselves.

The scale does the rest. Body copy runs 17 to 20px on a 1.75 line height; the notes are 15 to 16px on 1.55, each introduced by a 13px uppercase index tracked at 0.18em; the eyebrow and the byline that frame the section are 14px at the same weight. Four sizes and one rule per note is the whole vocabulary, which is what makes it survive a theme that supplies neither colour nor typeface.

What it inherits from your theme

  • Typeface. No font family is stated anywhere. The heading, the body, the notes and the indices all take whatever your theme sets, and the pattern was drawn to hold its proportions in a serif face and a sans one.
  • Palette. The ground is your base and the text is your contrast, each written as a two-rung fallback chain ending on a colour WordPress itself guarantees (base to white, contrast to black), so the section paints in a theme with a full palette and still paints in a theme with none.
  • Every rule in the section. The five hairlines, the four in the rail and the two closing the article, are core/separator blocks stating no colour at all, so they take your theme's separator style and cannot blank: currentColor in Twenty Twenty-Four and Twenty Twenty-Five, and a 2px currentColor rule in a theme that styles nothing.
  • Spacing rhythm. Section padding, the space between movements, the space between paragraphs and the space under each hairline are core spacing presets, so the article breathes at your scale rather than ours.

What it decides for itself

  • The measure, at 33rem, and the rail, at 15rem, both in rem and never in vw. This is the pattern. Widen the measure and the rail stops hanging outside anything; drop the rail and this is a column of text.
  • The gutter, at 2.5rem. It has to be wide enough that the note reads as outside the measure rather than as a second column of the same article.
  • Proportion. Body at clamp(1.0625rem, 1.45vw, 1.25rem) on 1.75; notes at clamp(max(0.9375rem, 15px), 1.05vw, 1rem) on 1.55; lede at clamp(1.125rem, 1.7vw, 1.375rem) on 1.55; heading at clamp(1.875rem, 4.2vw, 3.125rem) on 1.05 with -0.025em tracking. The vw terms size type, which is what vw is good at; none of them sizes a box.
  • A px guard under every small size. The eyebrow and the byline are max(0.875rem, 14px) and the note indices are max(0.8125rem, 13px), so a theme that shrinks the root font size cannot push fine print under the floor where it stops being readable on a phone. The rem term still leads, so a theme that grows the root still scales them; the px term only ever stops a fall. Measured: at a flat 13px the byline fell under the 14px body floor at 390 in all four themes, because at 37 characters it counts as copy to be read rather than as an incidental label.
  • The note index. A tiny uppercase Note 01 rather than a superscript marker, because a superscript needs a link to be worth anything and this pattern carries no interactivity.

What you change first

  1. The copy. Four movements of one or two paragraphs each, four notes. The article is about reading measure because that is what the pattern is for; replace all of it.
  2. The count. A movement is one core/columns row. Copy a whole row to add one, delete a whole row to remove one, and keep the note column populated: an empty column is not an empty rail, it is an invalid block.
  3. A paragraph with nothing to annotate. Put it in the text column of the row above or below rather than making a row for it, or the rail grows a gap where a rule should be.
  4. The note length. Keep a note to two sentences. The rail is 15rem, roughly 33 characters a line, so a long note runs down past its paragraph and the alignment that makes the device work stops being visible.
  5. The byline. The closing line is a placeholder set at the same size as the eyebrow that opens the section; they are a matched pair, so change both or neither. Keep it at or above 14px whatever you write there: the moment a line runs past about thirty characters it stops being a label and becomes something a visitor is expected to read.
How the notes align beside their paragraphs, with no CSS to do it with212 words

Each movement is its own core/columns row. That is the entire mechanism, and it is the reason the pattern is four rows rather than one two-column layout with all the copy on the left and all the notes on the right.

A columns row lays its children out from a shared top edge, so the note column's first block starts at exactly the same y as the text column's first block. Put one annotated passage in the text column and its note in the note column, and alignment is structural rather than something a stylesheet has to arrange. The note's hairline is the first block in the rail column, so it lands on the top edge of the paragraph's first line box: a rule tucked against the ascenders, which is what makes the note read as attached to that paragraph rather than as the start of a parallel column.

The single-row alternative was rejected on purpose. One row containing four paragraphs and four notes would align only the first pair, drift further apart with every paragraph whose length differs from its note, and, worse, would put every note at the bottom of the article the moment the row stacked. Binding one note to one row costs nothing and makes both problems impossible.

The measure, and why it cannot run away428 words

The reading measure is flex-basis: 33rem on the text column, and the section contains no vw width anywhere. The band's own contentSize is 50.5rem, which is exactly 33rem of text plus a 2.5rem gutter plus 15rem of rail, so the spread fills its container at the width it was drawn for and shrinks proportionally below it.

Why that is safe in a theme nobody has measured: characters per line is column width divided by glyph advance, and glyph advance scales with font size. Every width in this pattern is in rem and every font size is a clamp() whose floor and ceiling are in rem, so a theme or a user that changes the root size scales the column and the letters in the same proportion and the character count does not move. A width in vw breaks precisely that link: the column follows the viewport, the type does not, and the measure drifts every time the window changes. That is the defect that cost faq-list a round, and it is the one thing in this file that is not a taste question.

The numbers, for the widest case. At 1280 the text column is 528px and the body lands at 18.6px, which is 55 to 60 characters in the faces these themes ship. The worst case the arithmetic allows is the body clamp at its 17px floor in a condensed face with a 6px average advance, and 528 divided by 6 is 88: still inside the 95-character limit, in a theme with a face nothing here has seen. The intro lede and the heading live in the full 50.5rem band rather than in the column, and each sits in its own nested core/group with a constrained layout (contentSize 33rem for the lede, 42rem for the heading) and justifyContent: left, so they are capped at those widths, pinned to the band's left edge, and line up with the body below.

An earlier version used padding-right: max(0rem, 100% - 33rem) on the block itself, and that was a defect. The padding resolves correctly, but a paragraph is content-box, so the padding sits outside the layout's max-width: the block grew to the band's full width and the layout's centring put its left edge at the band's padding edge, 246px left of the body column at

  1. Measured on the rendered preview: heading and lede at `left: 50px, width:

1300px, the body at left: 296px. The width was right, so nothing flagged it. The trick is still sound inside a column, where nothing centres the block; faq-list` uses it that way.

What happens at 390285 words

Below 782px core forces every .wp-block-column to flex-basis: 100% !important at 0-3-0, which nothing a pattern can emit will beat, so the rows stack. That is the intended behaviour here and the pattern is authored for it: isStackedOnMobile is deliberately left at its default rather than turned off, because a 15rem rail sitting beside a 33rem column inside a 342px phone screen would be two ribbons of three words each.

What a hanging note becomes when there is no margin to hang in: an interleaved note, still ruled, still smaller, still attached. Because each note lives in the same row as the passage it annotates, stacking puts it immediately beneath that passage and immediately above the next one. It keeps its hairline, which now runs the full width of the phone and reads as a break in the flow of the article; it keeps its uppercase index, which is what tells a reader this is an aside rather than the next paragraph; and it keeps its smaller size, since every size here is a clamp() with a rem floor rather than a percentage of anything.

The mobile answer is therefore not a fallback. It is the same relationship drawn with the only geometry a phone has, and the reason it works is the same reason the desktop alignment works: the note is bound to a paragraph, not to the article.

There are no links and no buttons in this section, so there is no tap target to clear 44px. That is a design decision as much as a convenience: an editorial section that ends in a call to action is a landing page, and a page built from this catalogue already has cta-band for that.

Contrast105 words

Every pair in the section is your contrast on your base, which is the pair your theme already ships body copy on. The heading carries that colour explicitly rather than inheriting it, because a theme's heading element style beats an inherited group colour and that is how a headline ends up invisible. The heading is large text and clears 3:1; the lede, the body, the notes, the indices and the byline are all body text and are held to 4.5:1. The hairlines are structural marks in currentColor and carry no text of their own. No accent slug appears in any rung anywhere in the file.

Back to the library

Continue exploring

Next in Editorial

Explore all 10 Editorial patterns