Migrate Services patterns to the Core Icon block (LS-3229) - #50
Open
brandonmarshal wants to merge 10 commits into
Open
Migrate Services patterns to the Core Icon block (LS-3229)#50brandonmarshal wants to merge 10 commits into
brandonmarshal wants to merge 10 commits into
Conversation
Hero - Add patterns/hero/services-hero.php: breadcrumb, eyebrow, heading, description, and primary/secondary CTAs - Add wrapped row of all 14 service tags, colour-coded by lifecycle Phase (Discover/Create/Build/Launch/Grow/Evolve) to match the mega menu convention, each linking to its real /services/ page - Add decorative "Services / Lifecycle" preview card reusing the existing is-style-glass-card shell Tokens & assets - No new colour tokens, font sizes, or global styles required — reuses existing semantic tokens and presets throughout - Source fresh Phosphor "regular" icons, embedded as real SVG markup Validation - php -l, patterns:escape, security:scan, and phpcs --standard=WordPress all pass clean on the new pattern
Layout fix - Fix breadcrumb-to-badge gap reading too tight by bumping the eyebrow badge's top margin from spacing|20 to spacing|30 Service pill styling - Switch pill label text to neutral text.default, keep icons phase-coloured for lifecycle-phase association - Add a subtle phase-tinted background and phase-tinted border to each pill (colour-mix over existing phase tokens) - Increase pill padding for a larger, more substantial pill - Add hover/focus-within state: stronger background/border tint, translateY(-1px), subtle shadow - Add a :focus-visible outline ring for keyboard accessibility New structural stylesheet - Add src/scss/structural/services-hero.scss for the pill interactive states (no block-supports equivalent exists for hover/focus-visible), wired into build scripts and the bundle-detection/enqueue system the same way as other hero bundles (inc/animations.php, functions.php editor styles) Context - Rest-state pill colours are set inline per instance (each pill mixes its own phase token); hover/focus overrides need !important to beat that inline specificity, documented in the stylesheet
…598) - Add patterns/sections/services-linked-decisions.php: six-step process pill row (Discover/Create/Build/Launch/Grow/Evolve) matching the site's lifecycle-phase colours, linking to new /services/ phase pages - Neutral pills with phase-only badge, hover/focus-within states, :focus-visible outline - Fix whole-pill click target on both hero and Section 1 pills — only the text was clickable before; anchor now stays position:static so its ::before overlay sizes against the full pill, not just the text - Add src/scss/structural/services-linked-decisions.scss for the states/pseudo-elements JSON can't express, wired into build/enqueue - Correct services-hero.scss's CSS-limitation comments to AGENTS.md's exact format
- Add patterns/sections/services-service-clusters.php: "Five ways the work groups together" — 5 cluster cards in an asymmetric 3+2 layout, each with an icon well, index number, description, and a footer row of clickable tag links to the existing individual service pages - Add styles/sections/cards/card-cluster.json: new shared card shell (no existing one fit — background and single-link behaviour differ from Card - Category) - Add src/scss/structural/services-service-clusters.scss for the tag hover states, wired into build/enqueue like the other sections Fixes - Equal card height via dimensions.minHeight:100%, footer tags pinned to the bottom via margin-top:auto - Fix a real bug: second card row's blockGap was nested outside spacing instead of inside it, silently using WordPress's default gap instead of matching row 1 - Distinguish the section's background from Section 1's using the existing surface.card token (matches homepage-what-we-build's established alternating-section convention)
…on-block-services
Icon block conversion
- Replace outermost/icon-block with core/icon across 3 Services files
- Reference lightspeed/{name} icons instead of inline SVG
- Cover all 47 instances (15 + 6 + 26), zero remaining outermost/icon-block
Icons used
- services-hero: dot, search, file-text, paint-brush, code,
arrows-left-right, cloud, gauge, shield, graduation-cap, lifebuoy,
chart-line-up, wheelchair, envelope, special-interests
- services-linked-decisions: dot, arrow-right
- services-service-clusters: dot, search, paint-brush, code, rocket,
question, arrows-left-right, cloud, graduation-cap, lifebuoy,
sparkle, chart-line-up, arrow-right, file-text
Structural change
- These 3 files use PHP arrays/loops to render icons dynamically
(per-service, per-cluster, per-step), unlike the static per-instance
blocks in Batches 1-4
- Converted PHP icon arrays to store lightspeed/{name} slugs instead of
raw SVG, and rewrote loop templates to emit wp:icon dynamically
- Removed now-unused $ls_step_arrow_icon / $ls_arrow_icon SVG variables
- sparkle/question used here vs special-interests/help elsewhere for
the same shapes — file-specific disambiguation, consistent with
earlier batches
Verification
- Zero remaining outermost/icon-block references across all 3 files
- PHP block-rendering test (including loop execution) confirms correct
SVG output and slug resolution, no errors
brandonmarshal
added
area:theme
Documents PR #50 per this repo's changelog convention.
There was a problem hiding this comment.
🟢 Approval recommended
The icon migrations and CSS selector updates are consistent, appropriately escaped, and appear to preserve hover/focus behaviour for both legacy and Core Icon markup without introducing regressions.
Pull request overview
This PR completes the migration of the Services page patterns from the third‑party outermost/icon-block to WordPress’s native Core Icon block (core/icon), using lightspeed/{name} icons, and updates existing theme CSS so hover/focus icon colour treatments work for both legacy and Core Icon markup during the transition.
Changes:
- Converted dynamically-rendered Services pattern icons (PHP arrays + loops) to emit
<!-- wp:icon ... /-->blocks usinglightspeed/{slug}icon names. - Updated mega-menu and Work archive hover/focus selectors to target both
.wp-block-outermost-icon-blockand.wp-block-icon, and kept motion-only concerns in animation partials. - Removed a redundant footer SVG fill rule and deleted the stale compiled
assets/css/animations.min.cssartefact; refreshed compiled CSS outputs accordingly.
File summaries
| File | Description |
|---|---|
| src/scss/structural/work-archive-sections.scss | Extends icon hover/focus styling to include .wp-block-icon alongside legacy icon markup. |
| src/scss/structural/_mega-menu.scss | Adds structural hover/focus colour rules for both legacy and Core Icon wrappers. |
| src/scss/animations/_menu-motion.scss | Keeps only transition timing, now applied to both legacy and Core Icon selectors. |
| src/scss/animations/_footer-motion.scss | Removes footer-specific SVG fill rule from the motion partial. |
| patterns/sections/services-service-clusters.php | Converts cluster and tag icons from inline SVG to lightspeed/{slug} and outputs Core Icon blocks in loops. |
| patterns/sections/services-linked-decisions.php | Replaces dot/arrow icons with Core Icon blocks; removes raw SVG helper variable. |
| patterns/hero/services-hero.php | Converts the per-service icon array from inline SVG to slugs and outputs Core Icon blocks in the hero loop. |
| CHANGELOG.md | Documents the Services icon migration and the related CSS/artefact clean-up. |
| assets/css/work-archive-sections.css | Updated compiled CSS reflecting the new .wp-block-icon hover/focus selectors. |
| assets/css/animations.min.css | Removes a stale compiled minified artefact. |
| assets/css/animations.css | Updated compiled CSS reflecting the SCSS changes (icon hover selectors, footer rule removal, etc.). |
Review details
Files not reviewed (2)
- assets/css/animations.css: Generated file
- assets/css/work-archive-sections.css: Generated file
- Files reviewed: 9/11 changed files
- Comments generated: 0
- Review effort level: Lite
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
Context - Documents the Services page hero, linked-decisions, and service-clusters patterns added in PR #51
# Conflicts: # CHANGELOG.md # inc/animations.php # package.json
brandonmarshal
added this pull request to stack #52
September 10, 2026 05:51
…29-icon-block-services # Conflicts: # CHANGELOG.md
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
Replaces
outermost/icon-block(third-party "Icon Block" plugin) instances in the Services page patterns with WordPress 7.1's native Core Icon block (core/icon), referencing icons from thelightspeedcollection registered inls-plugin. Fifth and final batch migrating alloutermost/icon-blockusages across the theme (see LS-3229). Stacked onfeature/ls-1598-build-services-page— a separate stack from the other four batches, since these 3 files only exist on that unmerged branch.Files changed (3 files, 47 icon instances — all converted, no gaps)
patterns/hero/services-hero.php— 15 instances: eyebrowdot+ a dynamic loop of 14 per-service icons (search,file-text,paint-brush,code,arrows-left-right,cloud,gauge,shield,graduation-cap,lifebuoy,chart-line-up,wheelchair,envelope,special-interests)patterns/sections/services-linked-decisions.php— 6 instances: eyebrowdot+arrow-right(rendered 5× via a step loop)patterns/sections/services-service-clusters.php— 26 instances: eyebrowdot+ 5 cluster icons (search,paint-brush,code,rocket,question) + 10 per-tag icons + 10 trailingarrow-righttag iconsStructural difference from Batches 1–4
These 3 files render icons dynamically via PHP arrays and loops (per-service, per-cluster, per-step) rather than one static
outermost/icon-blockinstance per icon. Converted each PHP array to store barelightspeed/{name}slugs instead of raw inline SVG, and rewrote the loop templates to emit<!-- wp:icon {"icon":"lightspeed/<?php echo esc_attr( ... ); ?>",...} /-->per iteration — the same PHP-interpolated-block-comment technique already used elsewhere in these files for per-instance colour. Removed the now-unused$ls_arrow_icon/$ls_step_arrow_iconraw-SVG variables.sparkle/questionare used here for two shapes that are byte-identical tospecial-interests/helpused elsewhere in the theme — same icon artwork, intentionally distinct slugs, disambiguated per-file (consistent with thetrend-up/trending-upprecedent from Batch 1).Also included: LS-3720's CSS fix
This branch merges in
develop(which includes LS-3720's fix for legacyoutermost/icon-blockCSS selectors) so the Services icons get correct hover/focus treatment, sincefeature/ls-1598-build-services-pagepredates that fix.Test plan
php -lclean on all 3 changed filesnpm run patterns:escape— all 3 changed files pass clean (10 pre-existing issues elsewhere in the repo, unrelated to this branch)npm run security:scan— passes cleanoutermost/icon-blockcount is 0 across all 3 files (scripted check)parse_blocks+render_blockviawp eval-file, executing the PHP loops) on all 3 files — zero errors, icon/svg counts match expected totals (15, 6, 26) exactly, and everylightspeed/{name}slug referenced in source resolves correctlyCloses LS-3229