[Library] Writing

Catalogue accessStandard

Post query list

A live Query Loop as a dated index: each post is a ruled row where its date hangs outside the measure in its own left column, with the title and an excerpt set against it. It reads your own posts, so the five newest appear by themselves and stay current; the preview on this page shows sample posts from our demo site, not yours. 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 dated index of your five newest posts: each one a ruled row with the date hanging outside the measure in its own left column, the title beside it and an excerpt under that. It is the real-content twin of post-list, and it inherits that pattern's composition deliberately.

The signature moment

The hanging date column

Inherited from post-list, and restated here because it is the thing being bought. Every title 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 many times their weight. Read down the section and the dates form a second vertical line, 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 one move, and both survive having no colour to work with.

The hang is a two-column row, a narrow date column and a wide content column, not 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 every automated check passes 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 as a caption.
  • 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 guarantees.
  • Your spacing scale. Section padding and the air inside each row are spacing presets.

What it decides for itself

  • Five posts, newest first. perPage is 5, ordered by date descending.
  • Full bleed with its own measure. The section spans the viewport and holds its content to 1240px.
  • The proportion of the hang. 17% for the date, 83% for the content. 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.
  • Rules as row borders, not separators. The index opens with a wide core/separator and every row closes itself with a 1px currentColor border on its own bottom edge, which is how a repeating template can rule itself. The separator carries is-style-wide, because Twenty Twenty-Four renders one without it as a centred 100px stub.
  • The excerpt measure. The excerpt is held to 34rem inside its column by its own constrained group, so each entry is a paragraph someone reads rather than a line someone scans past.
  • Excerpt length. 34 words. WordPress trims longer ones and marks the cut.
  • The type ramp. Titles are a clamp() set tight with negative tracking. 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.
  • An empty state. core/query-no-results carries one line for a site with nothing published yet.

What to change first

  1. The count. perPage is 5 in the Query Loop's settings.
  2. What it asks for. The loop is set to posts, newest first. Filter it to a category, a tag or an author in the block's own panel.
  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. Set on the Post Date block, not typed. It ships as d M Y; the column is 17% wide, so keep whatever you choose short.
  5. The last line. The closing tracked line is optional. Delete it and the final row's own rule still gives the section its bottom edge.
This one queries your posts126 words

This pattern is a core/query loop. The dates, the titles and the excerpts are read from your posts; none of them is typed. post-list is the same index with hand-written entries, which is the right tool for a curated "selected writing" run or for a site whose posts are not in WordPress. This one is the right tool for an index that has to stay in sync with what you publish.

The preview on the product page is our sample content, not yours. A dynamic block renders the site it is in, so the five posts in the stage are the demo posts on our verification install. What you paste is the query; it fills with your writing as soon as it is on your page.

Links, and why the title is not one221 words

Nothing in this index is a link, and that is a measurement rather than an oversight. A tap target has to be at least 44px in its smaller dimension at 390, which is the width a thumb actually works at, and an inline text link is only ever as tall as its line box: a one-line title at 24px is a 26px target and a tracked category line is a 19px one. No block attribute can make an inline link taller without leaving absurd space around the type, so this index ships with nothing in it that claims to be tappable and is not.

The Post Title block carries a Make title a link toggle in its own panel, so turning the titles into links is one click and it is your decision rather than ours. Categories are not offered at all: core/post-terms always renders each term as a link, with no way to turn it off, so there is no category line here at all.

The section still sets its own link colour, once, at the top, to the same contrast chain as its body text. That is defensive: a theme's link colour can be an accent, an accent's luminance is unknowable, and if you do switch the titles on they will be the colour of the type around them.

The variation49 words

Night rows inverts the index: your contrast becomes the ground and your base becomes the type. It moves the colour axis and nothing else, so the query, the hang and the ramp are the base's exactly. The row rules are currentColor and follow the type without being told to.

Notes95 words
  • Core blocks only: group, paragraph, heading, separator, query, post-template, columns, column, post-date, post-title, post-excerpt, query-no-results. No plugin, no script.
  • core/query-total is deliberately absent. It does not exist in WordPress 6.6, which is this catalogue's floor.
  • Every colour is a fallback chain ending on a colour WordPress guarantees; the row rules state no colour at all.
  • Contrast is claimed at 4.5:1 for the dates and the excerpts, and the titles clear the 3:1 large-text floor comfortably, because both are the same contrast on base pair the theme already uses for body text.
Back to the library

Continue exploring

Next in Writing

Explore all 5 Writing patterns