Post featured lead: WordPress Block Pattern, Pattern Paste Canonical: https://patternpaste.com/pattern/post-featured-lead.html Core Patterns (https://patternpaste.com/patterns/) Blog (https://patternpaste.com/patterns/posts/) Catalogue access Standard # 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. It reads your own posts, so the lead changes the moment you publish; 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 - Which post leads. The loops are date-ordered. - The rail's length. Three is what fits beside a 16:9 lead. - The section label. "From the journal" is a tracked paragraph above the plate; delete it and the plate's top rule still opens the section. - The excerpt. 32 words on the lead, none in the rail. - The date format. Set on each Post Date block. The signature moment ## One post at display scale against three at caption scale post-grid weights six openings identically and post-list weights five rows identically. This one does not, and the hierarchy IS the composition: a 16:9 picture and a 48px headline on 62% of the measure, against three entries on the other 38% that are a tracked date and a 20px title and nothing else. There is no middle term. One rule runs across both halves at the top and another closes them at the bottom, so the two densities are held inside one plate and read as a ranking rather than as two sections that happen to be adjacent. Theme handoff ## What comes from where ### From your theme - The typeface. - Your colours. - Your spacing scale. - Your featured image, and whatever your theme does to it. ### Set by this pattern - One and three. - Full bleed with its own measure - 62/38. - A meta line, not a trailing date. - The 16:9 crop on the lead, and no picture at all in the rail. - Titles carry their own explicit text colour - An empty state on each loop 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 The newest post opens the section at display size with its picture; the three behind it sit in a rail beside it as ruled date-and-title lines with no picture at all. It ranks its entries laterally, which is what makes it the one to take where the section shares the page with something else; post-lead-stack is the same ranking turned through ninety degrees, for a section that has the page to itself. ### The signature moment: one post at display scale against three at caption scale post-grid weights six openings identically and post-list weights five rows identically. This one does not, and the hierarchy IS the composition: a 16:9 picture and a 48px headline on 62% of the measure, against three entries on the other 38% that are a tracked date and a 20px title and nothing else. There is no middle term. One rule runs across both halves at the top and another closes them at the bottom, so the two densities are held inside one plate and read as a ranking rather than as two sections that happen to be adjacent. Every rule in it is currentColor: the plate's top and bottom edges and the hairline above each rail entry. Nothing states a colour, so the whole device survives an inversion or a recolour without a single value being restated. Make it yoursVariations and the edits to make first ### What to change first - Which post leads. The loops are date-ordered. To pin a piece, set the lead loop to a category of one, and give the rail loop the same offset arithmetic. - The rail's length. Three is what fits beside a 16:9 lead. Four fits if you drop the lead's excerpt. - The section label. "From the journal" is a tracked paragraph above the plate; delete it and the plate's top rule still opens the section. - The excerpt. 32 words on the lead, none in the rail. That gap is the hierarchy. - The date format. Set on each Post Date block. Both ship as j M Y. Theme behaviourInheritance, fixed decisions and contrast ### What it inherits from your theme - The typeface. The pattern states no font family anywhere. The lead's headline is a clamp() and the ramp between it and the rail is the design. - 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 guarantees. - Your spacing scale. The plate's padding, the gap between the halves and the air inside a rail entry are spacing presets. - Your featured image, and whatever your theme does to it. ### What it decides for itself - One and three. perPage 1 with no offset, then perPage 3 offset by 1. Change one and you must change the other, or a post shows up twice. - Full bleed with its own measure, held to 1240px. - 62/38. The lead needs a picture at a readable size and the rail needs a title to break at most twice. Below 782px core stacks them, and the lead is first, which is why the lead is the left column and not the right. - A meta line, not a trailing date. The lead's date and author sit on one flex row above the headline, in the same order as the rail's date-then-title, so the two halves scan the same way. An earlier draft put the lead's date last and it read as a fourth line of the excerpt. - The 16:9 crop on the lead, and no picture at all in the rail. The rail is the counterweight; give it thumbnails and the ranking disappears. - Titles carry their own explicit text colour, because a theme's heading element style beats a colour set on a wrapping group. - An empty state on each loop, so a site with one post or none still renders a section rather than a blank plate. Technical notesBlock mechanics, responsive behaviour and constraints ### This one queries your posts This pattern is two core/query loops reading the same posts. The lead asks for one post; the rail asks for three with an offset of one, so it starts where the lead stopped and no post appears twice. Publish, and the lead becomes the new piece and the old lead drops to the top of the rail. The preview on the product page is our sample content, not yours. A dynamic block renders the site it is in, so the four posts in the stage are the demo posts on our verification install. What you paste is the pair of queries. ### Links, and why the title is not one The picture is the link; the title is not. 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 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, columns, column, query, post-template, post-featured-image, post-author-name, post-title, post-excerpt, post-date, 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, and no rule in the pattern states a colour at all. - Text never sits on a photograph. The picture carries atmosphere and the headline sits on your page ground beneath it. Questions ## Post featured lead: common questions Does Post featured lead need a plugin? No. It is built only from core WordPress blocks (column, columns, group, paragraph, post-author-name, post-date, post-excerpt, 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 featured lead match my theme? Choose by variation. Lead and rail takes your theme’s palette; Teal and ivory brings its own colours. How many variations does Post featured lead have? 2: Lead and rail and Teal and ivory. Each is its own markup; choose one in the toolbar above the preview before you copy. Is Post featured lead free? It is included with a subscription, with every Core Pattern and variation. 62 Core Patterns are free to copy without one. 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. 7.9KB of core-block markup, 12 blocks (column, columns, group, paragraph, post-author-name, post-date, post-excerpt, post-featured-image, post-template, post-title, query, query-no-results), 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/) Featured images come from your own posts. The preview uses sample content. ## Specifications Section Blog Access Subscription Plugin None, core blocks only Variations 2 Colour From your theme or its own palette Type From your theme or its own type Motion None Blocks column, columns, group, paragraph, post-author-name, post-date, post-excerpt, post-featured-image, post-template, post-title, query, query-no-results Presets color 5, spacing 7, font-size 1 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 ### 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 grid A run of writing as three openings across: each is a 3:2 image frame inset in its own mat, a hairline drawn beneath it that runs wider than the picture, and under the rule a tracked kicker, a title set tight and a date. Blog Preview pattern (https://patternpaste.com/pattern/post-grid.html) 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)