Post list: WordPress Block Pattern, Pattern Paste Canonical: https://patternpaste.com/pattern/post-list.html Core Patterns (https://patternpaste.com/patterns/) Blog (https://patternpaste.com/patterns/posts/) Catalogue access Standard # Post list An illustrated article index: a cropped WordPress photograph and tracked date sit in a narrow left column, beside a large title and short standfirst. Hand-written core blocks let you replace every picture, date and title without setting up a query. ## All patterns Search patterns Loading patterns… Start here ## What to change first - The entries. They are ordinary paragraphs and headings. - The titles' links. The pattern ships without links, as everything in this catalogue does. - The section head. "Writing" and the sentence under it set the register for the whole index. - The date format. They are text, so "14 Mar 2026" can become "2026.03.14" or "March 14" without touching anything else. - The last line. The closing tracked line is optional. The signature moment ## The hanging date column The signature is the date column hanging outside the measure. Every title in the list 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 fifteen times their weight in the page. Read down the section and the dates form a second vertical line of their own, 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 the same move, and both survive having no colour to work with, which is the point of this catalogue. Theme handoff ## What comes from where ### From your theme - The typeface. - Your colours. - Your spacing scale. - The rules. ### Set by this pattern - Full bleed with its own measure. - The proportion of the hang. - The standfirst measure. - The type ramp. - Rules top and bottom of every row. 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 run of articles as a dated index. Five entries, each a ruled row carrying a date, a title and one line of standfirst, under a short section head. It is built to sit in the middle of a page, between other sections: it states its own ground and its own vertical padding, so it does not borrow air from whatever is above or below it. ### The signature moment: the hanging date column The signature is the date column hanging outside the measure. Every title in the list 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 fifteen times their weight in the page. Read down the section and the dates form a second vertical line of their own, 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 the same move, and both survive having no colour to work with, which is the point of this catalogue. The hang is built from a two-column row, a narrow date column and a wide content column, not from 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 nothing flags 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 entries. They are ordinary paragraphs and headings. Replace the five dates, titles and standfirsts with yours, then delete a row or duplicate one: a row is a columns block and the separator under it, so copy both. - The titles' links. The pattern ships without links, as everything in this catalogue does. Select a title and link it to the post. - 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. They are text, so "14 Mar 2026" can become "2026.03.14" or "March 14" without touching anything else. Keep them short: the column is 24% wide and a long format wraps. - The last line. The closing tracked line is optional. Delete it and the final rule still gives the section its bottom edge. ### The variation Night index inverts the section: your contrast becomes the ground and your base becomes the type. It moves the colour axis and nothing else, so the composition, the ramp and the hang are identical to the base's. 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. In a serif theme the dates read as a printed masthead line and in a geometric sans they read as a caption; both were the intended outcome. - 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 itself guarantees. Nothing here can resolve to nothing. - Your spacing scale. Section padding and the air inside each row are spacing presets, so a theme with a generous scale gets a looser index and a tight one gets a denser one. - The rules. Every hairline is a core separator with no colour of its own, so it takes currentColor and follows your text. Invert the section and the rules invert with it, without being told to. ### What it decides for itself - Full bleed with its own measure. The section spans the viewport and holds its content to 1240px, so it is a section rather than another column of body text. - The proportion of the hang. 24% for the photograph and date, 76% for the content, with a spacing preset between them. 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. - The standfirst measure. The standfirst is held to 34rem inside its column rather than running the full width of the row, so each entry is a paragraph someone reads rather than a line someone scans past. - The type ramp. Titles are a clamp() set tight, with negative tracking and a line-height just above 1. 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. - Rules top and bottom of every row. The list closes with a rule as well as opening with one, so the section has a bottom edge when the thing below it is on the same ground. Technical notesBlock mechanics, responsive behaviour and constraints ### This is a static list, not a query The entries are hand-written core blocks. This pattern does not use the query loop and does not read your posts. Every date, title and standfirst is text you edit in the editor like any other paragraph, which is deliberate: it is what makes the pattern copy-paste markup that works in a page, a template part or a post, on any theme, with nothing installed and nothing configured. That makes it the right tool for a curated run of pieces, a "selected writing" block on a home page or an about page, or a list on a site whose posts are not in WordPress at all. It is the wrong tool for an archive that has to stay in sync with what you publish; that is core's Query Loop, and it is a different product with a different job. ### Notes - Core blocks only: group, paragraph, heading, separator, columns, column. No plugin, no script, nothing to keep updated. - Every colour is a fallback chain ending on a colour WordPress guarantees. - Contrast is claimed at 4.5:1 for the dates and the standfirsts, and the titles clear the 3:1 large-text floor comfortably at any viewport, because both are the same contrast on base pair the theme already uses for body text. - Each separator carries is-style-wide. Without it Twenty Twenty-Four renders a separator as a centred 100px stub instead of a rule, and nothing reports it. ### Included photographs Each date column opens with a 4:3 WordPress sample photograph. The pictures travel in the copied blocks and stack above their dates on a phone. Replace them alongside the article titles and update the alt text. The night index keeps the same photos. Image credits (https://patternpaste.com/image-credits/). Questions ## Post list: common questions Does Post list need a plugin? No. It is built only from core WordPress blocks (column, columns, group, heading, image, paragraph and separator), so it pastes into the block editor with nothing to install. Will Post 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 list have? 2: Dated index and Night index. Each is its own markup; choose one in the toolbar above the preview before you copy. Can I use my own images? Yes. Sample images stay in the copied blocks. Replace them in WordPress; pasting does not upload them to your Media Library. Is Post list free? It is included with a subscription, with every Core Pattern and variation. 62 Core Patterns are free to copy without one. 18KB of core-block markup, 7 blocks (column, columns, group, heading, image, paragraph, separator), and nothing else: paste it into the block editor and it becomes editable blocks wearing your theme. Subscribe to copy it, £49 a year (https://patternpaste.com/account/#plan) What you copy is yours forever. Not for you? We refund within 14 days. Back to Core Patterns (https://patternpaste.com/patterns/) Catalogue access ### £49 a year All patterns, variations and theme downloads. What you copy is yours forever. Not for you? We refund within 14 days. Subscribe, £49 a year (https://patternpaste.com/account/#plan) Sign in (https://patternpaste.com/account/) Everything you copy is yours to keep, forever, on any site; access to the rest of the library runs while you subscribe. Not for you? Tell us within 14 days of a payment and we refund you. After that, cancelling stops the next renewal and access runs to the end of the year you have paid for. Prices are in pounds and are the full price in the UK, the US and eleven other countries; elsewhere the checkout adds your local VAT or sales tax. The terms name every country. #### 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/) Sample images stay in the copied blocks. Replace them in WordPress; pasting does not upload them to your Media Library. Video variations need your own clip. Image credits (https://patternpaste.com/image-credits/). ## Specifications Section Blog Access Subscription Plugin None, core blocks only Variations 2 Colour From your theme Type From your theme Motion None Blocks column, columns, group, heading, image, paragraph, separator Presets color 5, spacing 6, font-size 3 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 ### Lead over the recent row Two Query Loops read as one section, turned through ninety degrees: the newest post runs the full measure with a wide 21:9 picture, a byline and an excerpt, and the three behind it sit under it as a row of three ruled date-and-title columns with no picture at all. Blog Preview pattern (https://patternpaste.com/pattern/post-lead-stack.html) 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 ### 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. Blog Preview pattern (https://patternpaste.com/pattern/post-query-list.html)