Post query list: WordPress Block Pattern, Pattern Paste Canonical: https://patternpaste.com/pattern/post-query-list.html Core Patterns (https://patternpaste.com/patterns/) Blog (https://patternpaste.com/patterns/posts/) Free Standard # 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. ## All patterns Search patterns Loading patterns… Start here ## What to change first - The count. perPage is 5 in the Query Loop's settings. - What it asks for. The loop is set to posts, newest first. - The section head. "Writing" and the sentence under it set the register for the whole index. - The date format. Set on the Post Date block, not typed. - The last line. The closing tracked line is optional. 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. Theme handoff ## What comes from where ### From your theme - The typeface. - Your colours. - Your spacing scale. ### Set by this pattern - Five posts, newest first. - Full bleed with its own measure. - The proportion of the hang. - Rules as row borders, not separators. - The excerpt measure. - Excerpt length. - The type ramp. - 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 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. Make it yoursVariations and the edits to make first ### What to change first - The count. perPage is 5 in the Query Loop's settings. - 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. - 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. - 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. - 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
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. Theme behaviourInheritance, fixed decisions and contrast ### 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. Technical notesBlock mechanics, responsive behaviour and constraints ### 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. ### 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. ### 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. Questions ## Post query list: common questions Does Post query list need a plugin? No. It is built only from core WordPress blocks (column, columns, group, heading, paragraph, post-date, post-excerpt, post-template, post-title, query, query-no-results and separator), so it pastes into the block editor with nothing to install. Will Post query list 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 list have? 2: Dated index and Night rows. Each is its own markup; choose one in the toolbar above the preview before you copy. Is Post query list 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. Back to Core Patterns (https://patternpaste.com/patterns/) ### Free pattern Copy it and paste it straight into the block editor. It is yours to keep and edit. Read the markup #### Pair with Editorial Article footer The close of an article: a portrait of the author beside their name, the biography under both inside a currentColor slip held to the middle half of the measure, and the previous and the next post hanging off the two outer edges so the section reads as a doorway rather than a footer. The name, the biography and the two neighbours are dynamic core blocks, so they are the post's own and the preview here is sample data; the portrait is an ordinary image block you swap for your author's own. The previous and next links only resolve on a single post template, which is where this pattern belongs. (https://patternpaste.com/pattern/article-footer.html)Header Nav bar A header bar on one line: a heavy, tightly tracked wordmark at the left edge against tiny widely tracked links at the right, one solid action beside them, and a hairline under the whole bar. The links are your WordPress menu, a core navigation block that folds to a menu button on a phone so the bar stays one line. Compact by construction, so it reads as the top of a page and never as a hero. States no colour and no font of its own. (https://patternpaste.com/pattern/nav-bar.html)Footer Footer booking fold A local-business footer drawn as an open fold: a broad field puts a display sign-off above the address, grouped hours and contact links; a narrower booking corner begins lower, enclosed by a heavy top edge and two sides. One closing rule joins both parts to the useful and legal links below. The two fields stack in reading order on a phone. States no colour and no font of its own. (https://patternpaste.com/pattern/footer-booking-fold.html) #### Before you paste 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. How we test patterns (https://patternpaste.com/how-we-test/) ## Specifications Section Blog Access Free Plugin None, core blocks only Variations 2 Colour From your theme Type From your theme Motion None Blocks column, columns, group, heading, paragraph, post-date, post-excerpt, post-template, post-title, query, query-no-results, separator Presets color 5, spacing 6, font-size 2 WordPress 7.0+ Continue exploring ## Next in Blog Explore all 7 Blog patterns (https://patternpaste.com/patterns/posts/) Shot in Twenty Twenty-Five Blog No plugin needed ### 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. Blog Preview pattern (https://patternpaste.com/pattern/post-query-grid.html) Shot in Twenty Twenty-Five Blog No plugin needed ### Posts cover front page A newspaper front page set on one photograph: a heavy veil of your theme's contrast colour over the picture, a masthead ruled across the top, the lead story low in the left two thirds with a kicker, a display headline that links to the post, a standfirst and a byline, and a ruled right column headed "Also in this issue" listing three more stories between hairlines. Blog Preview pattern (https://patternpaste.com/pattern/posts-cover-front-page.html) Shot in Twenty Twenty-Five Blog No plugin needed ### Post featured lead Two Query Loops read as one section: the newest post opens at display size with its featured image, its byline and an excerpt, and the three behind it sit in a rail beside it as ruled date-and-title lines with no picture at all. Blog Preview pattern (https://patternpaste.com/pattern/post-featured-lead.html)