Migrate navigation mega-menus to the Core Icon block (LS-3229) - #44
Merged
Merged
Conversation
brandonmarshal
added
area:navigation
There was a problem hiding this comment.
🟢 Approval recommended
The changes are a straightforward, consistent block swap with no remaining outermost/icon-block usage in the modified files and no functional regressions evident in the updated markup.
Pull request overview
This PR migrates the navigation mega-menu icon markup away from the third-party outermost/icon-block to WordPress Core’s core/icon block, using the lightspeed/* icon collection registered in ls-plugin, reducing theme coupling to a plugin-provided block implementation.
Changes:
- Replaced all
outermost/icon-blockinstances in the affected mega-menu template parts withwp:iconblocks referencinglightspeed/*icons. - Updated the shared menu item card pattern to use
wp:iconfor both the placeholder icon and chevron. - Preserved existing sizing and colour intent via
style.dimensions.widthand text colour styles where previously applied.
File summaries
| File | Description |
|---|---|
patterns/menu/menu-item-card.php |
Swaps the pattern’s placeholder icon + chevron to Core Icon block equivalents. |
parts/about-mega-menu.html |
Replaces About mega-menu item icons/chevrons with wp:icon using lightspeed/*. |
parts/insights-mega-menu.html |
Replaces Insights mega-menu item icons/chevrons with wp:icon using lightspeed/*. |
parts/mobile-menu.html |
Migrates mobile Services lifecycle phase dots to wp:icon with per-phase colours. |
parts/pricing-mega-menu.html |
Replaces Pricing mega-menu item icons/chevrons with wp:icon using lightspeed/*. |
parts/services-mega-menu.html |
Migrates Services per-phase dots and chevrons to wp:icon with per-phase colours. |
parts/solutions-mega-menu.html |
Replaces Solutions mega-menu item icons/chevrons with wp:icon using lightspeed/*. |
parts/work-mega-menu.html |
Replaces Work mega-menu item icons/chevrons with wp:icon using lightspeed/*. |
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.
5 tasks
brandonmarshal
added this pull request to stack #46
September 9, 2026 08:32
5 tasks
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 nav files
- Reference lightspeed/{name} icons instead of inline SVG
- Cover all 81 instances: mega-menus, mobile menu, menu-item-card pattern
Icons used
- about-mega-menu: lightbulb, rocket, shield, trend-up, seal-check, wheelchair
- insights-mega-menu: cube, brain, arrows-clockwise, tray, palette, book
- pricing-mega-menu: stack, building-office, archive, trending-up, calculator, seal-check
- solutions-mega-menu: credit-card, newspaper, brain, chat, cart, airplane-tilt, palette
- work-mega-menu: folder (x2), puzzle-piece, cart, database, quote
- mobile-menu, services-mega-menu: dot (per lifecycle phase) + chevron-right
- All mega-menus, menu-item-card: arrow-right (chevron)
Verification
- Zero remaining outermost/icon-block references across all 8 files
- PHP block-rendering test confirms correct SVG output, no errors
- Manual QA in Site Editor and live frontend, light and dark
brandonmarshal
force-pushed
the
feature/ls-3229-icon-block-navigation
branch
from
September 11, 2026 12:26
fefcb7f to
d013eeb
Compare
Collaborator
Author
|
Reviewed and approved by Zared in our meeting on Friday, 11 September 2026 — his review just wasn't logged as a formal GitHub approval on this PR. |
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 every
outermost/icon-block(third-party "Icon Block" plugin) instance in the navigation mega-menus with WordPress 7.1's native Core Icon block (core/icon), referencing icons from thelightspeedcollection registered inls-plugin. First of 5 stacked batches migrating all 38outermost/icon-blockusages across the theme (see LS-3229).Files changed (8 files, 81 icon instances)
parts/about-mega-menu.html—lightbulb,rocket,shield,trend-up,seal-check,wheelchair+ 6×arrow-rightchevronparts/insights-mega-menu.html—cube,brain,arrows-clockwise,tray,palette,book+ 6×arrow-rightchevronparts/mobile-menu.html—dot×6 (one per lifecycle phase — Discover/Create/Build/Launch/Grow/Evolve, each its own phase colour)parts/pricing-mega-menu.html—stack,building-office,archive,trending-up,calculator,seal-check+ 6×arrow-rightchevronparts/services-mega-menu.html—dot×6 (per-phase) +chevron-right×5 (all phases except Evolve, which had no trailing arrow in the original either)parts/solutions-mega-menu.html—credit-card,newspaper,brain,chat,cart,airplane-tilt,palette+ 7×arrow-rightchevronparts/work-mega-menu.html—folder×2,puzzle-piece,cart,database,quote+ 6×arrow-rightchevronpatterns/menu/menu-item-card.php—folder(36px placeholder icon) +arrow-rightchevronMarkup change
core/iconis a dynamic (server-rendered) block, unlike the staticoutermost/icon-block. Every instance collapses from a two-div/inline-SVG block to a single self-closing comment, e.g.:No
flipHorizontal/rotationattributes were needed — none of the chevron instances had a non-zero transform in the original markup.Icon mapping verification
Every icon assignment was verified by extracting each source
<svg>and exact-path-matching against the real files inls-plugin/assets/icons/lightspeed/, rather than relying on the icon-sourcing mapping document alone (which undercounted actual occurrences). Two ambiguous cases were confirmed directly:lightspeed/trend-upandlightspeed/trending-upare intentionally distinct slugs for a byte-identical shape — disambiguated by file context (about-mega-menu→trend-up,pricing-mega-menu→trending-up).lightspeed/paletteandlightspeed/brainwere corrected from an earlier, backwards manual identification — confirmed against the actual collection files as source of truth.Test plan
outermost/icon-blockcount is 0 across all 8 changed files (scripted check)wp:iconinstance count matches the verified 81-instance mapping table exactly, per filewp:iconJSON attribute payload parses as valid JSON (scripted check across all 8 files)parse_blocks+render_blockviawp eval-file) on all 8 files — zero errors, correct<svg>/.wp-block-iconcount per filelightspeedcollection pickerPart of LS-3229 (Batch 1 of 5). Next: Batch 2 (Homepage) on a branch stacked on top of this one.