# 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. Canonical: https://patternpaste.com/pattern/post-query-grid.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: group, paragraph, post-author-name, post-date, post-featured-image, post-template, post-title, query, query-no-results Keywords: posts, blog, query, query loop, articles, grid, news, latest ## Variations (2) ### Six openings (the default) Identical markup in every theme. Six of your newest posts on your page ground, three across, each featured image inset in a mat with the hairline running past it into the type. The rules are currentColor, so they follow your text wherever your theme puts it. The posts, pictures, bylines and dates are read from your site; the ones in this preview are our sample content. ### Night feed Identical markup in every theme. The colour axis, done the only way the contract guarantees: the whole run inverts to your contrast with your base on it, and the mat rules follow the type because they are currentColor. Every theme has both slugs, so this arrives everywhere. Same query, same six posts. --- ## This one queries your posts **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. ## 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. ## Links, and why the title is not one **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. ## 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`. ## The variation **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. ## Notes - 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 is a recent core block, and a pattern using it shows a buyer on an older WordPress a broken block. - 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.