# 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.

Canonical: https://patternpaste.com/pattern/post-query-list.html
Section: Blog
Access: Free, and free to keep.
Needs: Requires a block theme on WordPress 7.0 to 7.1. Classic themes and page builders are outside our supported setup. Adaptive patterns use the block theme’s colour, spacing and typography presets; styled variations declare their own colours or type.
Blocks: column, columns, group, heading, paragraph, post-date, post-excerpt, post-template, post-title, query, query-no-results, separator
Keywords: posts, query, query loop, articles, index, list, archive, blog

## Variations (2)

### Dated index (the default)

Identical markup in every theme.

Your five newest posts on your page ground, each date hanging in the left margin beside a large title. Your base, your contrast, and every rule in currentColor so the hairlines follow your text wherever your theme puts it. The dates, titles and excerpts are read from your site; the ones in this preview are our sample content.

### Night rows

Identical markup in every theme.

The colour axis, done the only way the contract guarantees: the whole index inverts to your contrast with your base on it, and the rules follow the type because they are currentColor. Every theme has both slugs, so this arrives everywhere. Same query, same five posts, set as dates and titles: the excerpt drops, since WordPress prints it in a paragraph a theme may colour for its light ground.


---

## This one queries your posts

**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.

## 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.

## Links, and why the title is not one

**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.

## 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.

## The variation

**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. The excerpt drops:
`core/post-excerpt` prints its text in an inner `<p>` no block attribute
reaches, so a theme colouring paragraphs for its light ground (the
`wpv-nocontract` fixture) set it near-black on the night ground at 1.14:1.

## Notes

- 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 is a recent core block, and an
  older WordPress shows it as a broken block.
- 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.