404 search

A 404 that gives a lost visitor something to do: a working core/search at display size, and three recent posts from a core/query under a rule. It reads top to bottom in three parts, which is what buys the field its size: error-index-rail is the 404 for a page that has to stay short, and this one is for a page that can give the search the whole band.

The search input is set at up to 48px and runs the whole 1240 measure, and the apology is the caption above it. Every other 404 in this catalogue makes a mark out of the number. Here the number is a 13px tracked label, the headline is 38px, the instruction is 18px, and then the largest object on the page is a form control. The scale ramp runs the wrong way on purpose, and that inversion is the whole design: the page stops being an announcement that something is missing and becomes the tool for finding it.

The floor is held at 28px so the field is still the largest thing at 390, where the headline is 24px.

Under it, one currentColor rule, a 13px tracked label, and three dated entries in a grid that reflows from three columns to one. They are unruled, because a ruled index is what error-split does, and because after a rule that long the page has had enough structure.

error-404 is one centred numeral at extreme size and nothing else. error-split is left-aligned, with the numeral huge on one side and a ruled index of destinations on the other, and it deliberately has no search field. This one has no numeral at display size at all, and it is the only 404 in the catalogue that is dynamic: it queries the site it is installed on.

1. The field's ceiling. clamp(1.75rem, 3.6vw, 3rem). It is the signature; lower it and the pattern becomes an ordinary 404 with a search box.
2. The headline and the instruction. Both are ordinary text.
3. The number of entries. perPage on the query. Four still fits the grid.
4. The query's terms. Change postType, or add a category, if your 404 should point at something more specific than "recent".
5. The rule under the field. It is a border-top on the group that holds the entries, not a separator block, and it is the only structure on the page. Delete it and the entries read as a caption to the field rather than as the second thing on it.

• 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. The one 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: 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.

• Full bleed with a 1240px measure, the message held to a 40rem column at the left, the field the full width under it. Measured at 1400 in Twenty Twenty-Four: 753px; at 390: 528px, no horizontal overflow.
• minimumColumnWidth: 22rem on the post template's grid rather than a fixed column count, so three entries become one column on a phone instead of three squeezed ones.
• h1, with its own explicit colour, because a theme's heading element style beats a colour inherited from the wrapping group.
• Three posts, newest first, stated in the query rather than inherited.

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.

Unlike the other dynamic patterns in this batch, 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, paragraph, heading, search, query, post-template, post-date, post-title. No plugin, no script.
• No core/query-total: it is a recent core block, and an older WordPress parses it as core/missing.
• Valid at WordPress 7.0.