[Library] Writing

Catalogue accessStandard

Post query grid

A live Query Loop as three openings across: each post is its featured image inset in a mat, a hairline drawn beneath it that runs wider than the picture, and under the rule the post's author, its title and its date. It reads your own posts, so the six 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

Three openings across the page, six of them, read live from your own posts. It is the real-content twin of post-grid: same mat, same over-wide hairline, same type ramp. The only difference is where the words come from, and that difference is the whole product.

The signature moment

The mat rule tying image to type

Inherited from post-grid on purpose, and worth restating because it is what you are buying. Each opening is a mat: the featured image is inset from the column's edges, and a 1px hairline is drawn beneath it that runs wider than the picture, out to the full width of the column. The author, the title and the date sit under that rule, inset by the same margin as the image above them.

At a glance the section is three hard horizontal strokes with pictures floating above them, which is what makes six posts read as six pieces rather than as a grid of thumbnails. The rule is currentColor, so it cannot resolve to nothing and it follows your text colour wherever your theme puts it. That is why the inversion in the variation restates no colour at all.

What it inherits from your theme

  • The typeface. The pattern states no font family anywhere.
  • Your colours. The ground asks for base and the type asks for contrast, the two slugs every stock block theme defines, each ending on a colour WordPress itself guarantees. Nothing in the section can blank.
  • Your spacing scale. Band padding, grid gaps and the mat inset are all spacing presets, so a theme with a generous scale gets a roomier grid.
  • Your featured images, and whatever your theme does to them. Twenty Twenty-Four rounds their corners; that is inheritance working.

What it decides for itself

  • Six posts, three across, and the count is derived. core/post-template is in grid layout with a minimum column width of 18rem rather than a fixed column count, so the row is three at desktop, two on a tablet and one on a phone with no media query anywhere. A fixed count of three was the first draft: it held three columns at 820, which left each title a fifteen-character ribbon.
  • Full bleed with its own measure. The section spans the viewport and holds its content to 1240px.
  • The 3:2 crop, and scale: cover. Whatever proportion your featured images are, the row stays level.
  • The mat inset. The image is padded away from the column edges and the rule is not. This asymmetry is the pattern; remove it and you have a caption.
  • Titles carry their own explicit text colour rather than inheriting it, because a theme's heading element style beats a colour set on a wrapping group.
  • An empty state. core/query-no-results carries one line for a site with nothing published yet, so the section is never a blank band.

What to change first

  1. The count. perPage is 6 in the Query Loop's settings. Multiples of three fill the desktop row exactly; anything else leaves a gap at the end.
  2. What it asks for. The loop is set to posts, newest first. Filter it to a category, an author or a tag in the block's own panel; nothing in the composition depends on the filter.
  3. The header. The tracked label and the one-line lede sit on a 34rem measure at the left. Delete either and the grid still reads.
  4. The byline. It is a Post Author Name block. Delete it if your posts have one author; the rule still ties the picture to the title.
  5. The date format. Set on the Post Date block, not typed. It ships as j M Y.
This one queries your posts163 words

This pattern is a core/query loop. It asks WordPress for the six newest posts and renders each one's featured image, its author, its title and its date. Publish a post and it appears here; nothing is typed and nothing goes stale. post-grid is the same composition with hand-written entries, for a curated run or a site whose writing does not live in WordPress. Pick by whether you want a list that maintains itself.

The preview on the product page is our sample content, not yours. A dynamic block renders the site it is in, so the six posts, the six photographs, the bylines and the dates you can see in the stage are the demo posts on our verification install. What you paste is the query, and the query fills with your writing the moment it lands on your page. This is the same honesty the catalogue already applies to a paid preview's resolved colours: the preview shows the composition, not the contents.

Links, and why the title is not one231 words

The picture is the link; the title is not. Every interactive element here is held to 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 the pattern ships the featured image as the tap target, where the box is the picture and there is nothing marginal about it.

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 the meta slot carries the post's author instead, which is real post data and is not a target.

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 variation59 words

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

Notes103 words
  • Core blocks only: group, paragraph, query, post-template, post-featured-image, post-author-name, post-title, post-date, 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, and a pattern using it shows the buyer a broken block there.
  • Every colour is a fallback chain ending on a colour WordPress guarantees, and the hairline states no colour at all: it is currentColor.
  • Text never sits on a photograph here. The pictures carry atmosphere and the type sits on your page ground beneath them, so no featured image can make a title hard to read.
Back to the library

Continue exploring

Next in Writing

Explore all 5 Writing patterns