Fix legacy outermost/icon-block CSS selectors broken by Core Icon migration (LS-3720) - #49
Merged
brandonmarshal merged 3 commits intoSep 9, 2026
Conversation
…ration (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
brandonmarshal
added
area:theme
There was a problem hiding this comment.
🟡 Changes recommended
It introduces/keeps a non-motion color hover/focus rule in src/scss/animations/_menu-motion.scss, which conflicts with the repo’s “motion files must be motion-only” convention.
Once you've addressed the issues Copilot identified, you can request another Copilot review.
Pull request overview
This PR updates theme SCSS selectors so icon hover/focus colour treatments continue to work during the ongoing migration from the legacy outermost/icon-block markup to WordPress Core core/icon (.wp-block-icon). It also removes a stale compiled CSS artefact and refreshes the compiled CSS outputs.
Changes:
- Add
.wp-block-iconto the relevant hover/focus selector sets while keeping legacyoutermost/icon-blockselectors for any remaining instances. - Remove a footer-specific SVG fill rule deemed redundant.
- Rebuild compiled CSS outputs and delete
assets/css/animations.min.css.
File summaries
| File | Description |
|---|---|
| src/scss/animations/_menu-motion.scss | Extends mega-menu icon hover/focus selectors to include .wp-block-icon. |
| src/scss/structural/work-archive-sections.scss | Extends card link-row icon hover/focus selectors to include .wp-block-icon. |
| src/scss/animations/_footer-motion.scss | Removes the footer .icon-container svg { fill: currentColor; } rule. |
| assets/css/animations.css | Rebuilt compiled CSS reflecting the SCSS changes. |
| assets/css/work-archive-sections.css | Rebuilt compiled CSS reflecting the SCSS changes. |
| assets/css/animations.min.css | Removes a stale minified build artefact. |
Review details
Files not reviewed (2)
- assets/css/animations.css: Generated file
- assets/css/work-archive-sections.css: Generated file
- Files reviewed: 4/6 changed files
- Comments generated: 1
- Review effort level: Lite
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
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
ZaredRogers
approved these changes
Sep 9, 2026
brandonmarshal
deleted the
feature/ls-3720-fix-icon-block-css-selectors
branch
September 9, 2026 11:51
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
Fixes SCSS selectors that style icons by targeting the old
outermost/icon-blockplugin's rendered markup classes (.wp-block-outermost-icon-block,.icon-container) instead of WordPress 7.1's Core Icon block output (a single.wp-block-iconwrapper directly around the<svg>, no nested container div). Asls-thememigrates tocore/icon(LS-3229), these selectors silently stopped applying, breaking hover/focus colour transitions.Found via a repo-wide audit (LS-3719); this PR covers the audit's remaining open items (2–5). Item 1 (
card-shells.scss) was already fixed separately, on PR #48's branch.Not stacked on the LS-3229 batch PR chain (#44 → #45 → #47 → #48) — none of these 6 files overlap with any batch PR's diff, so this fix doesn't need to wait on all four batch reviews to merge in order. Based directly on
develop.Files changed (6)
src/scss/animations/_menu-motion.scss— added.wp-block-iconalongside.wp-block-outermost-icon-blockfor the mega-menu item hover/focus icon-colour transition and itsprefers-reduced-motionoverridesrc/scss/structural/work-archive-sections.scss— added.wp-block-iconalongside.wp-block-outermost-icon-block .icon-containerfor the card-link-row hover/focus icon coloursrc/scss/animations/_footer-motion.scss— removed the dead.site-footer .icon-container svg{fill:currentColor}rule (redundant: everylightspeed/*icon already bakesfill="currentColor"into its own path, and WP core's default stylesheet already forces.wp-block-icon svg{fill:currentColor}globally)assets/css/animations.css— rebuilt from sourceassets/css/work-archive-sections.css— rebuilt from sourceassets/css/animations.min.css— deleted (stale, unenqueued build artifact — confirmed zero references anywhere in the codebase, no.min.cssstep exists in the build scripts)Both selector fixes are additive, not replacements — any not-yet-converted
outermost/icon-blockinstance (see LS-3229's "Missing icons" tracking list) keeps working exactly as before.Test plan
--style=expanded(no Sass deprecation warnings)npm run build:cssrun (not just the two targeted files) — confirmed onlyanimations.cssandwork-archive-sections.csschanged, no unintended blast radius elsewhere in the theme's compiled outputanimations.csshas 4 occurrences each of.wp-block-outermost-icon-block/.wp-block-icon(base transition, hover, focus-within, reduced-motion);work-archive-sections.csshas 2 each (hover, focus-within); the dead.icon-container svgrule confirmed removedassets/css/animations.min.cssanywhere in the codebase before deleting it.is-style-mega-menu-item-default .wp-block-iconwill match every icon in a mega-menu row (e.g.menu-item-card.php's icon-well badge, not just the trailing chevron) — confirmed this is identical breadth to the existing.wp-block-outermost-icon-blockselector it's paired with, not a new regressionCloses LS-3720