Skip to content

Migrate homepage patterns to the Core Icon block (LS-3229) - #45

Open
brandonmarshal wants to merge 2 commits into
feature/ls-3229-icon-block-navigationfrom
feature/ls-3229-icon-block-homepage
Open

Migrate homepage patterns to the Core Icon block (LS-3229)#45
brandonmarshal wants to merge 2 commits into
feature/ls-3229-icon-block-navigationfrom
feature/ls-3229-icon-block-homepage

Conversation

@brandonmarshal

Copy link
Copy Markdown
Collaborator

Summary

Replaces outermost/icon-block (third-party "Icon Block" plugin) instances in the homepage patterns with WordPress 7.1's native Core Icon block (core/icon), referencing icons from the lightspeed collection registered in ls-plugin. Second of 5 stacked batches migrating all 38 outermost/icon-block usages across the theme (see LS-3229). Stacked on feature/ls-3229-icon-block-navigation (#44).

Files changed (8 files, 37 icon instances — 35 converted, 2 intentionally skipped)

  • patterns/home-hero.phpdot, special-interests, arrow-right
  • patterns/home-hero-static.phpdot
  • patterns/sections/homepage-cta.phpdot
  • patterns/sections/homepage-featured-work.phpdot
  • patterns/sections/homepage-what-we-build.phpdot, category, cart, puzzle-piece, arrows-clockwise
  • patterns/sections/homepage-where-to-fit.phpdot, house, trending-up, building-office, check ×12
  • patterns/sections/homepage-where-to-start.phpdot, folder converted; 2 instances left as outermost/icon-block (see below)
  • patterns/sections/homepage-why-lightspeed.phpdot, check ×5

Known gap — 2 skipped instances

patterns/sections/homepage-where-to-start.php has two icons with no matching slug in the lightspeed collection yet:

  • "Commercial" card icon — notepad/notebook shape (rectangle, 3 top binding pegs, two horizontal lines). Needs lightspeed/notepad.
  • "Process" card icon — clipboard shape (rounded top clasp, two horizontal lines). Needs lightspeed/clipboard-text.

Per direction from Brandon: rather than sourcing icons one-off mid-batch, these are left untouched and logged in LS-3229's new "Missing icons — cross-batch tracking list" section, to be resolved in a single bulk-sourcing PR to ls-plugin once all 5 batches are complete.

Markup change

Same pattern as Batch 1 — core/icon is dynamic (server-rendered), so every instance collapses to a single self-closing comment, e.g.:

<!-- wp:icon {"icon":"lightspeed/dot","className":"has-text-color","style":{"color":{"text":"var(--wp--custom--color--icon--background)"},"dimensions":{"width":"8px"}}} /-->

Icon mapping verification

Every converted icon was verified by exact-path-matching the source <svg> against the real files in ls-plugin/assets/icons/lightspeed/. One ambiguous duplicate resolved by file context: sparkle.svg/special-interests.svg are byte-identical — home-hero.php uses special-interests per the mapping doc's file attribution (sparkle belongs only to a Batch 5 file).

Test plan

  • outermost/icon-block count matches expected exceptions exactly (2 remaining, both in homepage-where-to-start.php, both intentional)
  • wp:icon instance count matches the verified 35-instance mapping table exactly, per file
  • Every wp:icon JSON attribute payload parses as valid JSON (scripted check across all 8 files)
  • PHP block-rendering test (parse_blocks + render_block via wp eval-file) on all 8 files — zero errors, correct <svg>/.wp-block-icon count per file, including the partial file showing exactly 2 converted + 2 untouched
  • Manual visual QA in the Site Editor and live frontend (light and dark) — pending Brandon's review

Part of LS-3229 (Batch 2 of 5). Next: Batch 3 (Work section) on a branch stacked on top of this one, once this PR is reviewed.

@brandonmarshal brandonmarshal added area:theme Theme & styles (templates, template parts, FSE) comp:block-patterns Patterns library/registration lang:php PHP code priority:normal Default priority for most issues. status:needs-review Awaiting code review labels Sep 9, 2026
@linear-code

linear-code Bot commented Sep 9, 2026

Copy link
Copy Markdown

LS-3229

@brandonmarshal brandonmarshal self-assigned this Sep 9, 2026
@brandonmarshal
brandonmarshal added this pull request to stack #46 September 9, 2026 08:32
@brandonmarshal
brandonmarshal requested a lite review from Copilot September 9, 2026 08:33

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🟢 Approval recommended

The migrations are consistent with existing wp:icon usage in the theme and the only remaining outermost/icon-block instances match the documented intentional exceptions.

Pull request overview

This PR continues the LS-3229 migration by replacing outermost/icon-block instances in homepage-related patterns with the native core/icon block, using lightspeed/* icons registered by ls-plugin, while intentionally leaving two unmatched icons in homepage-where-to-start.php untouched.

Changes:

  • Converted homepage pattern icon markup from inline SVG-based outermost/icon-block to dynamic wp:icon blocks with lightspeed/* slugs.
  • Preserved existing sizing/colour styling by mapping prior width/color into style.dimensions.width and style.color.text.
  • Left exactly two outermost/icon-block instances in patterns/sections/homepage-where-to-start.php as documented due to missing icon slugs.
File summaries
File Description
patterns/home-hero.php Migrates the hero badge/prompt icons to wp:icon (dot, special-interests, arrow-right).
patterns/home-hero-static.php Migrates the hero badge dot icon to wp:icon.
patterns/sections/homepage-cta.php Migrates the CTA eyebrow dot icon to wp:icon.
patterns/sections/homepage-featured-work.php Migrates the section eyebrow dot icon to wp:icon.
patterns/sections/homepage-what-we-build.php Migrates section eyebrow + category-card icons to wp:icon (dot, category, cart, puzzle-piece, arrows-clockwise).
patterns/sections/homepage-where-to-fit.php Migrates section eyebrow + package/checklist icons to wp:icon (dot, house, trending-up, building-office, check).
patterns/sections/homepage-where-to-start.php Migrates section eyebrow dot and the “Proof” card icon to wp:icon, leaving two outermost/icon-block instances intentionally.
patterns/sections/homepage-why-lightspeed.php Migrates section eyebrow dot and checklist check icons to wp:icon.
Review details
  • Files reviewed: 8/8 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.

brandonmarshal added a commit that referenced this pull request Sep 9, 2026
…ration (LS-3720) (#49)

* Fix legacy outermost/icon-block CSS selectors broken by Core Icon migration (LS-3720)

Bug fix
- Add .wp-block-icon alongside .wp-block-outermost-icon-block in
  _menu-motion.scss (mega-menu chevron hover/focus color + reduced-motion)
- Add .wp-block-icon alongside .wp-block-outermost-icon-block .icon-container
  in work-archive-sections.scss (card-link-row hover/focus icon color)
- Both fixes are additive: any not-yet-converted outermost/icon-block
  instance keeps working, core/icon instances now get the same treatment

Cleanup
- Remove dead .site-footer .icon-container svg{fill:currentColor} rule
  from _footer-motion.scss — redundant now that every lightspeed/*
  icon bakes fill="currentColor" into its own path, and WP core's
  default stylesheet already forces .wp-block-icon svg{fill:currentColor}
- Delete assets/css/animations.min.css — stale, unenqueued build
  artifact with no reference anywhere in the codebase

Context
- Found via audit LS-3719, filed as bug LS-3720
- Not stacked on the LS-3229 batch PR chain (#44/#45/#47/#48) since
  none of these files overlap with those diffs; branched off develop

Verification
- npm run build:css run in full; only animations.css and
  work-archive-sections.css changed
- Compiled CSS selector counts verified (4+4 and 2+2 respectively)
- Confirmed zero remaining references to animations.min.css before deleting

* Move mega-menu icon hover colour out of the motion partial (LS-3720)

Bug fix
- Relocate `.is-style-mega-menu-item-default` icon hover/focus `color`
  rule from `src/scss/animations/_menu-motion.scss` to
  `src/scss/structural/_mega-menu.scss`
- Animations partial now only holds the `transition` property and its
  reduced-motion override, per AGENTS.md's motion-only rule for
  `src/scss/animations/**`

Context
- Addresses Copilot review feedback on PR #49: the colour swap is a
  non-motion property and belongs in the structural partial alongside
  the existing `.is-style-mega-menu-item-default` rules
- Rebuilt `assets/css/animations.css` to reflect the change

* Updating CHANGELOG.md
Icon block conversion
- Replace outermost/icon-block with core/icon across 8 homepage files
- Reference lightspeed/{name} icons instead of inline SVG
- Cover 35 of 37 instances (2 skipped, see below)

Icons used
- home-hero, home-hero-static, homepage-cta, homepage-featured-work: dot
- home-hero: special-interests, arrow-right
- homepage-what-we-build: category, cart, puzzle-piece, arrows-clockwise
- homepage-where-to-fit: house, trending-up, building-office, check (x12)
- homepage-where-to-start: folder
- homepage-why-lightspeed: check (x5)

Known gaps
- homepage-where-to-start.php: 2 instances left as outermost/icon-block
  (notepad and clipboard-text shapes have no lightspeed collection match
  yet); tracked in LS-3229's "Missing icons" list for a later bulk pass

Verification
- Zero unintended remaining outermost/icon-block references (2 expected exceptions)
- PHP block-rendering test confirms correct SVG output, no errors
Fix
- homepage-where-to-start.php: converted the "Commercial" and "Process" card icons from outermost/icon-block to core/icon
- Mapped to lightspeed/notepad and lightspeed/clipboard-text, now available after ls-plugin#24

Verification
- php -l passes
- Re-scanned all 8 Batch 2 files: 0 remaining outermost/icon-block instances

Context
- Closes out Batch 2's entry in LS-3229's "Missing icons" tracking list
@brandonmarshal
brandonmarshal force-pushed the feature/ls-3229-icon-block-homepage branch from 154f22f to 2fc3ff6 Compare September 11, 2026 13:39
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

area:theme Theme & styles (templates, template parts, FSE) comp:block-patterns Patterns library/registration lang:php PHP code priority:normal Default priority for most issues. status:needs-review Awaiting code review

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants