[Library] Writing

Catalogue accessStandard

Post list

A run of articles as a dated index: each entry is a ruled row where a tiny widely-tracked date hangs outside the measure in its own left column, with a large title and a one-line standfirst set against it. Hand-written entries in core blocks, not a query loop, so a buyer edits the dates and titles as text. States no colour and no font of its own.

Variation View
Before you copy
Open in a new window

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

A run of articles as a dated index. Five entries, each a ruled row carrying a date, a title and one line of standfirst, under a short section head. It is built to sit in the middle of a page, between other sections: it states its own ground and its own vertical padding, so it does not borrow air from whatever is above or below it.

The signature moment

The hanging date column

The signature is the date column hanging outside the measure. Every title in the list starts at the same left edge, and the dates sit out to the left of it in a column of their own, tiny, uppercase and widely tracked against titles set fifteen times their weight in the page. Read down the section and the dates form a second vertical line of their own, an index running beside the writing rather than a label stuck on top of it. That is a scale collision and a structural mark in the same move, and both survive having no colour to work with, which is the point of this catalogue.

The hang is built from a two-column row, a narrow date column and a wide content column, not from padding on a block inside the band. Padding would give the right width and the wrong position: a padded block grows to the band's full width and re-centres, and nothing flags it while the left edge drifts out of line with its neighbours.

What it inherits from your theme

  • The typeface. The pattern states no font family anywhere. In a serif theme the dates read as a printed masthead line and in a geometric sans they read as a caption; both were the intended outcome.
  • Your colours. The ground asks for base and the type asks for contrast, the two slugs every stock block theme defines, each falling back to a colour WordPress itself guarantees. Nothing here can resolve to nothing.
  • Your spacing scale. Section padding and the air inside each row are spacing presets, so a theme with a generous scale gets a looser index and a tight one gets a denser one.
  • The rules. Every hairline is a core separator with no colour of its own, so it takes currentColor and follows your text. Invert the section and the rules invert with it, without being told to.

What it decides for itself

  • Full bleed with its own measure. The section spans the viewport and holds its content to 1240px, so it is a section rather than another column of body text.
  • The proportion of the hang. 17% for the date, 83% for the content, with a spacing preset between them. Below 782px core stacks the two, so on a phone the date sits directly above its title, still tracked and still tiny, and the row keeps its meaning without a media query.
  • The standfirst measure. The standfirst is held to 34rem inside its column rather than running the full width of the row, so each entry is a paragraph someone reads rather than a line someone scans past.
  • The type ramp. Titles are a clamp() set tight, with negative tracking and a line-height just above 1. The dates are the opposite decision: at or above 15px, wide tracking, uppercase. Nothing sits in between them, which is what makes the collision read.
  • Rules top and bottom of every row. The list closes with a rule as well as opening with one, so the section has a bottom edge when the thing below it is on the same ground.

What to change first

  1. The entries. They are ordinary paragraphs and headings. Replace the five dates, titles and standfirsts with yours, then delete a row or duplicate one: a row is a columns block and the separator under it, so copy both.
  2. The titles' links. The pattern ships without links, as everything in this catalogue does. Select a title and link it to the post.
  3. The section head. "Writing" and the sentence under it set the register for the whole index. Keep the heading to a single line at this ramp.
  4. The date format. They are text, so "14 Mar 2026" can become "2026.03.14" or "March 14" without touching anything else. Keep them short: the column is 17% wide and a long format wraps.
  5. The last line. The closing tracked line is optional. Delete it and the final rule still gives the section its bottom edge.
This is a static list, not a query138 words

The entries are hand-written core blocks. This pattern does not use the query loop and does not read your posts. Every date, title and standfirst is text you edit in the editor like any other paragraph, which is deliberate: it is what makes the pattern copy-paste markup that works in a page, a template part or a post, on any theme, with nothing installed and nothing configured.

That makes it the right tool for a curated run of pieces, a "selected writing" block on a home page or an about page, or a list on a site whose posts are not in WordPress at all. It is the wrong tool for an archive that has to stay in sync with what you publish; that is core's Query Loop, and it is a different product with a different job.

The variation60 words

Night index inverts the section: your contrast becomes the ground and your base becomes the type. It moves the colour axis and nothing else, so the composition, the ramp and the hang are identical to the base's. Inversion is the one colour move that arrives in every theme, because base and contrast are the only slugs every block theme defines.

Notes96 words
  • Core blocks only: group, paragraph, heading, separator, columns, column. No plugin, no script, nothing to keep updated.
  • Every colour is a fallback chain ending on a colour WordPress guarantees.
  • Contrast is claimed at 4.5:1 for the dates and the standfirsts, and the titles clear the 3:1 large-text floor comfortably at any viewport, because both are the same contrast on base pair the theme already uses for body text.
  • Each separator carries is-style-wide. Without it Twenty Twenty-Four renders a separator as a centred 100px stub instead of a rule, and nothing reports it.
Back to the library

Continue exploring

Next in Writing

Explore all 5 Writing patterns