Lead over the recent row

The newest post opens the section across the full measure with a wide 21:9 picture, a byline and an excerpt; the three behind it sit under it as a row of three ruled date-and-title columns with no picture at all. One plate holds both, opened and closed by hairlines. It is the posts section for a page that has nothing else on it.

post-grid weights six openings identically and post-list weights five rows identically. This one does not, and the hierarchy IS the composition. The lead is a 21:9 band of photograph running the whole 1240px with a 60px headline under it; the three behind it are a tracked date and a 22px title apiece and nothing else. There is no middle term and there is no second picture.

The 21:9 crop is the reason this composition exists rather than the other. At full measure a 16:9 picture is 700px tall and pushes the headline off the first screen; 21:9 is 530px, wide enough to read as a banner and short enough that the date, the byline and the headline arrive with it. A lead beside a rail can afford a squarer crop because it is only 62% of the measure. A lead that has the whole width cannot, and that is the trade this pattern makes deliberately.

Every rule in it is currentColor: the plate's top and bottom edges and the hairline above each of the three columns. Nothing states a colour, so the whole device survives an inversion or a recolour without a single value being restated.

1. Which post leads. The loops are date-ordered. To pin a piece, set the lead loop to a category of one, and give the row loop the same offset arithmetic.
2. The row's length. Three is what the grid fits at 1240px with an 18rem minimum. Four fits if you drop the minimum to 14rem, at the cost of a title that breaks three times.
3. 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.
4. The crop. 21:9 is set on the Post Featured Image block. 16:9 is the obvious alternative and it will cost you about 170px of height at full measure.
5. The excerpt. 32 words on the lead, none in the row. That gap is the hierarchy.
6. The date format. Set on each Post Date block. Both ship as j M Y.

• The typeface. The pattern states no font family anywhere. The lead's headline is a clamp() and the ramp between it and the row 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. The section sets its own link colour once, at the top, to the same contrast chain as its body text.
• Your spacing scale. The plate's padding, the gap between the lead and the row, the grid's gutters and the air inside an entry are spacing presets.
• Your featured image, and whatever your theme does to it.

• 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.
• The excerpt keeps a reading measure. The picture and the headline run the full width, but the excerpt sits in a nested constrained group at 34rem and is left aligned, so the copy is never a 1240px line of text.
• 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 row's date-then-title, so both parts of the section scan the same way.
• No picture at all in the three. The row 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. The lead is an h2 and the three are h3, so the section is one level of outline rather than four siblings.
• An empty state on each loop, so a site with one post or none still renders a section rather than a blank plate.

This pattern is two core/query loops reading the same posts. The lead asks for one post; the row 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 left of the row.

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.

core/columns stacks to one column below 782px and does nothing at all between 1240 and 783, which for three short entries is a row that is either three or one with no step between. The row here is a core/post-template with layout: {"type":"grid","minimumColumnWidth":"18rem"}, so the browser fits as many 18rem columns as the measure allows: three at 1240, two around 820, one on a phone. The hairline above each entry is a border on the entry's own group, so it travels with the entry into whatever row it lands in and the strip is ruled correctly at every one of those widths.

The picture is the link; the title is not. A tap target has to be at least 44px in its smaller dimension at 390, and an inline text link is only ever as tall as its line box: a one-line title at 22px is a 24px target. 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; the link colour is already set to the colour of the type around them.

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.

• Core blocks only: group, paragraph, 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 does not exist in WordPress 6.6, which is this catalogue's floor.
• 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.