Pattern Paste
Subscribe

Core Patterns Blog

FreeStandard

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.

All patterns

Loading patterns…

Theme
Preview size
Look
Twenty Twenty-Five·1280px

Manrope typefacergb(255, 255, 255) ground1280px viewport

Start here

What to change first

  1. The count. perPage is 6 in the Query Loop's settings.
  2. What it asks for. The loop is set to posts, newest first.
  3. The header. The tracked label and the one-line lede sit on a 34rem measure at the left.
  4. The byline. It is a Post Author Name block.
  5. The date format. Set on the Post Date block, not typed.

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.

Theme handoff

What comes from where

From your theme

  • The typeface.
  • Your colours.
  • Your spacing scale.
  • Your featured images, and whatever your theme does to them.

Set by this pattern

  • Six posts, three across, and the count is derived.
  • Full bleed with its own measure.
  • The 3:2 crop, and scale: cover.
  • The mat inset.
  • Titles carry their own explicit text colour
  • An empty state.

Full pattern notes

Why it works, and how it is built

Open a topic for the complete design reasoning, editing guidance and implementation notes.

Design rationaleComposition, intent and nearest alternatives

Overview

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.

Make it yoursVariations and the edits to make first

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.

Theme behaviourInheritance, fixed decisions and contrast

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.
Technical notesBlock mechanics, responsive behaviour and constraints

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.

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.

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.

Questions

Post query grid: common questions

Does Post query grid need a plugin?

No. It is built only from core WordPress blocks (group, paragraph, post-author-name, post-date, post-featured-image, post-template, post-title, query and query-no-results), so it pastes into the block editor with nothing to install.

Will Post query grid match my theme?

Yes. It names no colour or font of its own: every colour, size and space is a preset from your theme, so it takes your theme’s palette and type when pasted.

How many variations does Post query grid have?

2: Six openings and Night feed. Each is its own markup; choose one in the toolbar above the preview before you copy.

Is Post query grid free?

Yes. It is one of 62 free Core Patterns: copy it and it is yours to keep and edit.

Which WordPress version does it need?

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.

The markup

Core block markup and nothing else. Copy it, then paste it straight into the block editor: WordPress reads the delimiters and rebuilds the blocks. This is the file as authored; the copy button on the stage applies the finish you chose there.

5,377 bytes
<!-- wp:group {"align":"full","style":{"color":{"background":"var(--wp--preset--color--base, var(--wp--preset--color--white))","text":"var(--wp--preset--color--contrast, var(--wp--preset--color--black))"},"elements":{"link":{"color":{"text":"currentColor"}},"heading":{"color":{"text":"currentColor"}}},"spacing":{"blockGap":"var:preset|spacing|60","padding":{"top":"var:preset|spacing|80","bottom":"var:preset|spacing|80","left":"clamp(1.25rem, 4vw, 4rem)","right":"clamp(1.25rem, 4vw, 4rem)"}}},"layout":{"type":"constrained","contentSize":"1240px"}} -->
<div class="wp-block-group alignfull has-text-color has-background has-link-color" style="color:var(--wp--preset--color--contrast, var(--wp--preset--color--black));background-color:var(--wp--preset--color--base, var(--wp--preset--color--white));padding-top:var(--wp--preset--spacing--80);padding-right:clamp(1.25rem, 4vw, 4rem);padding-bottom:var(--wp--preset--spacing--80);padding-left:clamp(1.25rem, 4vw, 4rem)"><!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|40"}},"layout":{"type":"constrained","contentSize":"34rem","justifyContent":"left"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"style":{"color":{"text":"var(--wp--preset--color--role-label, var(--wp--preset--color--contrast, var(--wp--preset--color--black)))"},"spacing":{"margin":{"top":"0","bottom":"0"}},"typography":{"fontSize":"clamp(0.9375rem, 1vw, 1rem)","textTransform":"uppercase","letterSpacing":"0.22em","fontWeight":"600"}}} -->
<p class="has-text-color" style="color:var(--wp--preset--color--role-label, var(--wp--preset--color--contrast, var(--wp--preset--color--black)));margin-top:0;margin-bottom:0;font-size:clamp(0.9375rem, 1vw, 1rem);font-weight:600;letter-spacing:0.22em;text-transform:uppercase">Recent writing</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"style":{"spacing":{"margin":{"bottom":"0"}},"typography":{"fontSize":"var(--wp--preset--font-size--medium, clamp(0.9375rem, 1.05vw, 1.0625rem))"}}} -->
<p style="margin-bottom:0;font-size:var(--wp--preset--font-size--medium, clamp(0.9375rem, 1.05vw, 1.0625rem))">Your six newest posts, each one an image inset in its own mat with a hairline drawn beneath it. The rule runs wider than the picture and carries the eye straight into the title under it.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:query {"query":{"perPage":6,"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false,"taxQuery":null,"parents":[]}} -->
<div class="wp-block-query"><!-- wp:post-template {"style":{"spacing":{"blockGap":{"top":"var:preset|spacing|50","left":"var:preset|spacing|50"}}},"layout":{"type":"grid","minimumColumnWidth":"18rem"}} -->
<!-- wp:group {"style":{"spacing":{"blockGap":"0"}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:group {"style":{"spacing":{"blockGap":"0","padding":{"top":"0","right":"var:preset|spacing|40","bottom":"var:preset|spacing|40","left":"var:preset|spacing|40"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group" style="padding-top:0;padding-right:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--40);padding-left:var(--wp--preset--spacing--40)"><!-- wp:post-featured-image {"isLink":true,"aspectRatio":"3/2","style":{"spacing":{"margin":{"top":"0","bottom":"0"}}}} /--></div>
<!-- /wp:group -->

<!-- wp:group {"style":{"border":{"top":{"color":"currentColor","style":"solid","width":"1px"}},"spacing":{"blockGap":"var:preset|spacing|20","padding":{"top":"var:preset|spacing|30","right":"var:preset|spacing|40","bottom":"0","left":"var:preset|spacing|40"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group" style="border-top-color:currentColor;border-top-style:solid;border-top-width:1px;padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--40);padding-bottom:0;padding-left:var(--wp--preset--spacing--40)"><!-- wp:post-author-name {"style":{"color":{"text":"var(--wp--preset--color--contrast, var(--wp--preset--color--black))"},"spacing":{"margin":{"top":"0","bottom":"0"}},"typography":{"fontSize":"clamp(0.9375rem, 1vw, 1rem)","textTransform":"uppercase","letterSpacing":"0.22em","fontWeight":"600"}}} /-->

<!-- wp:post-title {"level":3,"style":{"color":{"text":"var(--wp--preset--color--contrast, var(--wp--preset--color--black))"},"spacing":{"margin":{"bottom":"0"}},"typography":{"fontSize":"clamp(1.375rem, 1.85vw, 1.75rem)"}}} /-->

<!-- wp:post-date {"format":"j F Y","style":{"color":{"text":"var(--wp--preset--color--contrast, var(--wp--preset--color--black))"},"spacing":{"margin":{"bottom":"0"}},"typography":{"fontSize":"clamp(0.9375rem, 1vw, 1rem)","letterSpacing":"0.12em","textTransform":"uppercase"}}} /--></div>
<!-- /wp:group --></div>
<!-- /wp:group -->
<!-- /wp:post-template -->

<!-- wp:query-no-results -->
<!-- wp:paragraph {"style":{"spacing":{"margin":{"top":"0","bottom":"0"}},"typography":{"fontSize":"var(--wp--preset--font-size--medium, clamp(0.9375rem, 1.05vw, 1.0625rem))"}}} -->
<p style="margin-top:0;margin-bottom:0;font-size:var(--wp--preset--font-size--medium, clamp(0.9375rem, 1.05vw, 1.0625rem))">Nothing has been published yet. The first post you write will open this grid.</p>
<!-- /wp:paragraph -->
<!-- /wp:query-no-results --></div>
<!-- /wp:query --></div>
<!-- /wp:group -->
Variation: Night feed
5,633 bytes
<!-- wp:group {"align":"full","style":{"color":{"background":"var(--wp--preset--color--contrast, var(--wp--preset--color--black))","text":"var(--wp--preset--color--base, var(--wp--preset--color--white))"},"elements":{"link":{"color":{"text":"currentColor"}},"heading":{"color":{"text":"currentColor"}}},"spacing":{"blockGap":"var:preset|spacing|60","padding":{"top":"var:preset|spacing|80","bottom":"var:preset|spacing|80","left":"clamp(1.25rem, 4vw, 4rem)","right":"clamp(1.25rem, 4vw, 4rem)"}}},"layout":{"type":"constrained","contentSize":"1240px"}} -->
<div class="wp-block-group alignfull has-text-color has-background has-link-color" style="color:var(--wp--preset--color--base, var(--wp--preset--color--white));background-color:var(--wp--preset--color--contrast, var(--wp--preset--color--black));padding-top:var(--wp--preset--spacing--80);padding-right:clamp(1.25rem, 4vw, 4rem);padding-bottom:var(--wp--preset--spacing--80);padding-left:clamp(1.25rem, 4vw, 4rem)"><!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|40"}},"layout":{"type":"constrained","contentSize":"34rem","justifyContent":"left"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"style":{"color":{"text":"var(--wp--preset--color--base, var(--wp--preset--color--white))"},"spacing":{"margin":{"top":"0","bottom":"0"}},"typography":{"fontSize":"clamp(0.9375rem, 1vw, 1rem)","textTransform":"uppercase","letterSpacing":"0.22em","fontWeight":"600"}}} -->
<p class="has-text-color" style="color:var(--wp--preset--color--base, var(--wp--preset--color--white));margin-top:0;margin-bottom:0;font-size:clamp(0.9375rem, 1vw, 1rem);font-weight:600;letter-spacing:0.22em;text-transform:uppercase">Recent writing</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"style":{"color":{"text":"var(--wp--preset--color--base, var(--wp--preset--color--white))"},"spacing":{"margin":{"bottom":"0"}},"typography":{"fontSize":"var(--wp--preset--font-size--medium, clamp(0.9375rem, 1.05vw, 1.0625rem))"}}} -->
<p class="has-text-color" style="color:var(--wp--preset--color--base, var(--wp--preset--color--white));margin-bottom:0;font-size:var(--wp--preset--font-size--medium, clamp(0.9375rem, 1.05vw, 1.0625rem))">Your six newest posts, each one an image inset in its own mat with a hairline drawn beneath it. The rule runs wider than the picture and carries the eye straight into the title under it.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:query {"query":{"perPage":6,"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false,"taxQuery":null,"parents":[]}} -->
<div class="wp-block-query"><!-- wp:post-template {"style":{"spacing":{"blockGap":{"top":"var:preset|spacing|50","left":"var:preset|spacing|50"}}},"layout":{"type":"grid","minimumColumnWidth":"18rem"}} -->
<!-- wp:group {"style":{"spacing":{"blockGap":"0"}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:group {"style":{"spacing":{"blockGap":"0","padding":{"top":"0","right":"var:preset|spacing|40","bottom":"var:preset|spacing|40","left":"var:preset|spacing|40"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group" style="padding-top:0;padding-right:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--40);padding-left:var(--wp--preset--spacing--40)"><!-- wp:post-featured-image {"isLink":true,"aspectRatio":"3/2","style":{"spacing":{"margin":{"top":"0","bottom":"0"}}}} /--></div>
<!-- /wp:group -->

<!-- wp:group {"style":{"border":{"top":{"color":"currentColor","style":"solid","width":"1px"}},"spacing":{"blockGap":"var:preset|spacing|20","padding":{"top":"var:preset|spacing|30","right":"var:preset|spacing|40","bottom":"0","left":"var:preset|spacing|40"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group" style="border-top-color:currentColor;border-top-style:solid;border-top-width:1px;padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--40);padding-bottom:0;padding-left:var(--wp--preset--spacing--40)"><!-- wp:post-author-name {"style":{"color":{"text":"var(--wp--preset--color--base, var(--wp--preset--color--white))"},"spacing":{"margin":{"top":"0","bottom":"0"}},"typography":{"fontSize":"clamp(0.9375rem, 1vw, 1rem)","textTransform":"uppercase","letterSpacing":"0.22em","fontWeight":"600"}}} /-->

<!-- wp:post-title {"level":3,"style":{"color":{"text":"var(--wp--preset--color--base, var(--wp--preset--color--white))"},"spacing":{"margin":{"bottom":"0"}},"typography":{"fontSize":"clamp(1.375rem, 1.85vw, 1.75rem)"}}} /-->

<!-- wp:post-date {"format":"j F Y","style":{"color":{"text":"var(--wp--preset--color--base, var(--wp--preset--color--white))"},"spacing":{"margin":{"bottom":"0"}},"typography":{"fontSize":"clamp(0.9375rem, 1vw, 1rem)","letterSpacing":"0.12em","textTransform":"uppercase"}}} /--></div>
<!-- /wp:group --></div>
<!-- /wp:group -->
<!-- /wp:post-template -->

<!-- wp:query-no-results -->
<!-- wp:paragraph {"style":{"color":{"text":"var(--wp--preset--color--base, var(--wp--preset--color--white))"},"spacing":{"margin":{"top":"0","bottom":"0"}},"typography":{"fontSize":"var(--wp--preset--font-size--medium, clamp(0.9375rem, 1.05vw, 1.0625rem))"}}} -->
<p class="has-text-color" style="color:var(--wp--preset--color--base, var(--wp--preset--color--white));margin-top:0;margin-bottom:0;font-size:var(--wp--preset--font-size--medium, clamp(0.9375rem, 1.05vw, 1.0625rem))">Nothing has been published yet. The first post you write will open this grid.</p>
<!-- /wp:paragraph -->
<!-- /wp:query-no-results --></div>
<!-- /wp:query --></div>
<!-- /wp:group -->
Back to Core Patterns