Build 404 template patterns: hero, related routes, and Display token (LS-2596) - #42
Merged
Merged
Conversation
…ark token (LS-2596) New patterns - Add "Section - 404 Best Next Routes" pattern (patterns/sections/404-best-next-routes.php): eyebrow, heading, and a 5-card grid (Homepage, Pricing, Website packages, FAQ, Contact) using the existing Card - Category style and Phosphor icons - Rebuild patterns/template-404.php in place: faded 404 watermark, heading, description, and Homepage/Search CTAs - Wire both patterns into templates/404.html Tokens - Add custom.color.effect.watermark.brand to theme.json (brand-500) and styles/dark.json (brand-300) for the 404 numeral's tinted background treatment, matching the existing effect.hero.* token pattern Fixes - Use is-style-content-band on the routes section for top/bottom padding, since WordPress core zeroes margin-top on template-part wrappers and blockGap alone can't create space before the footer - Embed real Phosphor "regular" SVG markup in each card's icon-block (house, tag, package, question, envelope-simple) — outermost/icon-block is a static block that requires inline SVG in .icon-container, not just an iconName attribute - Increase the 404 numeral to a responsive clamp() size so it reads larger than all other text on the page Content - Create the FAQ page (/faq/) on the dev site so the FAQ card has a real destination - Link cards to real dev-site URLs (home, /pricing/, /website-packages/, /faq/, /contact/) Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Fix - Replace the effect.watermark.brand token's initial brand-500/brand-300 mapping with the requested colours, added as proper palette presets (brand-450 #3D7DFF light, cta-150 #99EFFF dark) and referenced via var:preset|color|... per design-token-policy.instructions.md
…LS-2596) Fix - Change the wrapper group's layout type from "flow" (not a real core/group layout type) to "default" in patterns/sections/404-best-next-routes.php, which was crashing the block in the editor with a React error boundary
…2596) Fix - Replace the 404 numeral's hardcoded clamp() font-size with a proper typography token: add the "1000" (Display) font-size preset to styles/presets/typography.json (fluid 4.5rem-10rem) and reference it via fontSize:"1000" in patterns/template-404.php Documentation - Add CHANGELOG.md entry for LS-2596 covering the new related-routes pattern, the watermark token/presets, the template-404 rebuild, and the gap/icon/layout-crash fixes made during this branch
brandonmarshal
added
area:theme
There was a problem hiding this comment.
🟡 Changes recommended
The new 404 related-routes section is rendered outside the existing <main> landmark (introduced by the template wiring), which is a semantic/accessibility issue that should be resolved before approval.
Once you've addressed the issues Copilot identified, you can request another Copilot review.
Pull request overview
This PR rebuilds the theme’s 404 experience by replacing the minimal 404 main-content pattern with a more structured hero layout and adding a “best next routes” section, supported by new typography and colour tokens in the theme’s design system.
Changes:
- Rebuilt the 404 main-content pattern with a large “404” display numeral, heading, supporting copy, and Homepage/Search CTAs.
- Added a new 404 related-routes section pattern and wired it into the 404 template.
- Extended design tokens with a new “Display” font-size preset plus new palette entries and a semantic watermark colour token (light + dark mappings).
File summaries
| File | Description |
|---|---|
| theme.json | Adds new palette entries and the effect.watermark.brand semantic colour token used by the 404 numeral. |
| templates/404.html | Adds the related-routes section pattern to the 404 template. |
| styles/presets/typography.json | Adds the 1000 (“Display”) fluid font-size preset used for the 404 numeral. |
| styles/dark.json | Adds the dark-mode mapping for effect.watermark.brand. |
| patterns/template-404.php | Rebuilds the 404 main-content pattern (hero + CTAs) and applies the new tokens. |
| patterns/sections/404-best-next-routes.php | Introduces the “Five useful destinations” section pattern with a 5-card grid. |
| CHANGELOG.md | Documents the additions/changes/fixes for LS-2596 under Unreleased. |
Review details
- Files reviewed: 7/7 changed files
- Comments generated: 2
- Review effort level: Lite
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
…2596) Fix - Move the 404-best-next-routes pattern reference into patterns/template-404.php before </main> instead of templates/404.html, so it renders inside the main landmark like every other template's related-routes section (matches template-work-archive.php's convention) - Add verticalAlignment:"center" to the routes section's eyebrow flex row, matching work-related-routes.php, so the dot icon aligns with the label text
ZaredRogers
approved these changes
Sep 3, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Builds the 404 template's main content out of the placeholder search-field pattern it had before: a hero with a large "404" numeral, a not-found heading, description, and Homepage/Search CTAs, plus a new "Five useful destinations" related-routes section.
Hero
patterns/template-404.phpin place: large 404 numeral, H1 not-found heading, supporting copy, and Homepage/Search CTAs (Go to the homepage->home_url('/'),Search the site->home_url('/?s=')), replacing the previous minimal search-field version.900/4.5rem). Added a new1000("Display") font-size preset tostyles/presets/typography.json(fluid4.5rem-10rem) rather than hardcoding a one-off size in the pattern.effect.watermark.brandsemantic colour token totheme.jsonandstyles/dark.jsonfor the numeral's colour, backed by two new palette presets (brand-450,cta-150) rather than a raw hex orcolor-mix()value in the semantic token, perdesign-token-policy.instructions.md. Both pairings clear the 3:1 contrast minimum for large/decorative text against their canvas colour (light 3.61:1, dark 15.4:1).Related routes
patterns/sections/404-best-next-routes.php: eyebrow, heading, and a 5-card grid (Homepage, Pricing, Website packages, FAQ, Contact) reusing the existing Card - Category style,is-style-link-arrow-accent, andis-style-content-band— no new block/section styles needed. Card icons are inline Phosphor "regular" SVGs (outermost/icon-blockreads its icon from serialized HTML content, not theiconNameattribute alone).templates/404.htmlalongside the existing 404 pattern.is-style-content-bandsupplies that via padding rather than margin, since WordPress core zeroesmargin-topon template-part wrappers, which defeats the rootblockGapsibling rule.core/grouplayout type ("flow"isn't a real layout type; corrected to"default").Content
/faq/) on the dev site so the FAQ card has a real destination; other cards link to existing dev-site pages (/pricing/,/website-packages/,/contact/).Test plan
php -lclean on both changed/new pattern filesvendor/bin/phpcs --standard=WordPress— zero findings on both filesnpm run patterns:escape— clean on both filesnpm run security:scan— clean on both filesnpm run schema:validate— all JSON passesnpm run theme:validate— the one failure (styles/light.jsonmissing) is confirmed pre-existing ondevelop, unrelated to this branchCloses lightspeedwp/tour-operator#1296