Index beside the field

A 404 in two columns. The apology, the headline, one line of instruction and a working core/search hold a 60% column; the site's three most recent posts stand beside them in a rail, closed off by a vertical hairline and ruled entry by entry. It is the 404 to take when the page has to stay short.

One vertical hairline down the inside edge of the second column is the only structure in the section, and it does all the work. The recent posts are not a footer under the message and not a grid across the foot of the page; they are a rail standing beside it, and the rule is what says so. Every entry then hangs under a horizontal rule of its own, so the rail reads as a ruled column rather than as three loose items, and the first of those rules meets the vertical one at the top corner.

The consequence is the composition. Because the entries have taken the width they need, the field can only run as wide as the words above it, which makes it a tool sitting inside a message rather than the message itself. The page reads as two parts, "here is what happened and here is the search" against "here is what is new", and neither half has to be read before the other.

Every rule is currentColor, so it is exactly the colour of the text beside it on any ground the theme gives it, and it cannot resolve to nothing.

error-search stacks the same material in three parts and makes the field the largest object on the page, running the whole 1240 at up to 48px. This one turns the page through ninety degrees: the field is held to 24 to 36px inside a 60% column, and what it buys with the height it saves is the rail. error-404 is one centred numeral and nothing else. error-split is a huge numeral against a ruled index of destinations, and deliberately has no search field at all.

1. The split. 60/40. Push it to 65/35 if your recent titles are short, and no further: below about 30% the dates and the titles begin to wrap against each other.
2. The headline and the instruction. Both are ordinary text.
3. The number of entries. perPage on the query. Four fits the rail at 1400 and adds roughly 90px of height.
4. The query's terms. Change postType, or add a category, if the rail should point at something more specific than "recent".
5. The label over the rail. "Recently published" is the only thing naming what the second column is. If you change the query, change it too.

• The typeface. No font family is stated.
• Your colours. The band asks for base and the type for contrast, both ending on a colour WordPress guarantees. Every rule is currentColor.
• The field itself. Its border, its background and its submit button are your theme's form styling, and the pattern deliberately states no colour on the search block. Measured on the base: a text colour stated on core/search is copied onto the SUBMIT BUTTON as well as the input, and Twenty Twenty-Four had already given that button a contrast background, so a contrast chain painted the magnifier the same colour as the button behind it, ratio 1.0. What this pattern states on the search block is its size and nothing else.
• The post titles' link colour. The entries state the contrast chain on the link as well as the text, so a theme's link colour does not arrive in the rail as a fourth colour.

• Full bleed with a 1240px measure, split 60/40 with the gutter on the spacing scale.
• The field's ceiling, dropped for the narrower column. clamp(1.5rem, 2.6vw, 2.25rem), against the base's clamp(1.75rem, 3.6vw, 3rem). At 60% of 1240 the base's ramp puts three or four words on a line of placeholder and leaves the submit icon crowding the column edge.
• h1 with its own explicit colour, because a theme's heading element style beats a colour inherited from the wrapping group. It takes the x-large rung as a chain rather than display type: the headline is hierarchy here, not the composition.
• Three posts, newest first, stated in the query rather than inherited.
• The rail's rules are borders, not separator blocks. The vertical one is a border-left on the column and each horizontal one is a border-top on an entry group, which is why the post template carries a zero block gap: the rules butt against the padding and the rail reads as one table.
• Where it stacks. Core stacks columns below 782px, so on a phone the message and the field arrive first and the rail follows. The vertical rule stays on the left edge of the entries, where it reads as a margin mark rather than as a seam, which is the reason it was left in place rather than dropped.

The field searches your content, and the three entries are your three most recent posts, dated. The preview on the product page is our preview site's seeded writing. Nothing in the pattern names a post.

Like error-search, this one needs no post context: the query states its own terms rather than inheriting a template's, which is right for a 404 because a 404 has no query to inherit. So it renders wherever it is pasted, and it belongs in the 404 template.

• Core blocks only: group, columns, column, paragraph, heading, search, query, post-template, post-date, post-title. No plugin, no script.
• No core/query-total: it does not exist at WordPress 6.6 and parses as core/missing there.