Move structural CSS into JSON/block supports (LS-2340) - #23
Merged
brandonmarshal merged 10 commits intoAug 13, 2026
Merged
Conversation
Phase 3 Group 1 (LS-2340): moved _mobile-menu-motion.scss and
_home-hero-section.scss's structural rules into styles/**.json,
keeping only what JSON genuinely can't express.
Fixes along the way:
- Accordion rows had mismatched padding/font vs plain link rows —
WordPress wraps JSON styles in :where(), which always loses to a
real Sass rule on specificity. Excluded the new is-style from the
conflicting _details-motion.scss declarations instead (temporary,
removed once Group 5 migrates that file).
- services-mega-menu.html combined two is-style-* classes on one
block; WordPress only renders the first. Merged into one variation
(mega-menu-panel-services.json).
- Mobile Services accordion had inconsistent column widths (markup
bug, not CSS) and, per follow-up request, now switches 2→3 columns
at 650px via CSS grid.
- Removed two JSON files (mobile-menu-brand, mobile-menu-actions)
that mixed genuine JSON-only needs with plain properties that had
no business being anything but inline attributes on a single-use
block.
New: styles/blocks/details/mobile-menu-accordion.json,
styles/blocks/paragraphs/mobile-menu-link-row.json,
styles/sections/menu/mega-menu-panel-services.json
Phase 3 Group 2 (LS-2340): moves _card-motion.scss's structural rules into styles/**.json, keeping only real motion (transitions/transforms/ the accent-gradient @Keyframes) or a confirmed JSON limitation. Two content/registration fixes discovered along the way, unrelated to the CSS migration itself: - inc/portfolio-card-colors.php swapped the WooCommerce card's classname too late in WordPress's render pipeline (on render_block, after core had already generated CSS for the un-swapped name). Moved to render_block_data at priority 9, before core's own variation-detection filter, so the swap is visible when core decides what CSS to generate. - .ls-card__icon-shell promoted from a plain shared className (3 patterns, 5 instances) to a proper JSON style, card-icon-shell.json. Also, after manual QA surfaced it: fixed position/overflow missing from 4 JSON files (dropped when removing the surface-card mixin call — only border/background/shadow/spacing were checked against the mixin's output, not all of it), and added a hover treatment to is-style-card-case-study, which never had one — reused card-category's exact pattern for family consistency. New: styles/sections/cards/card-icon-shell.json
…p 3) Migrates _footer-motion.scss's remaining structural CSS into JSON: nav link underline setup into footer-nav-link.json, missing minWidth into footer-social-icon.json (fixes the circle), notes-badge width inlined onto the single-use pattern. Also fixes two mobile issues found during manual QA: the 3 proof-stat cards (15+/AA/100%) now stay in one row via isStackedOnMobile:false instead of WordPress's default full-width stack, and the 5 nav categories now render 2-per-row via a scoped @media grid (mirroring the existing Services mega-menu accordion pattern) instead of stacking one per row. Also fixes a stat card's wrapping copy ("focus" → "focused").
Moves button-motion's rest-state structural CSS into JSON: the shared button shell and default-fill/outline recipe vars into a new core-button.json css field, Glass Button's background/border/shadow and non-hover edge-highlights into glass-button.json, Button Arrow Compact's rest-state size/shape into button-arrow-compact.json. Inlines the 4 single-use CTA-consultation patterns' on-dark colour pinning and wrapper positioning instead of leaving them in shared SCSS. Only real motion (transitions, hover/focus states, backdrop-filter's required @supports) stays in SCSS. is-style-button-glow-accent left untouched (dead selector, tracked on LS-2341). Fixes a regression caught during manual QA: the new JSON css fields targeted `& .wp-block-button__link`, but core/button's own root selector is already `.wp-block-button .wp-block-button__link` — the double-nested selector never matched, silently dropping position: relative and letting the fill button's ::before reveal escape its container. Corrected to `&`.
… Group 5) Details/Accordion - Rest-state structural CSS (summary layout, marker reset, arrow shape, content spacing) moved into core-details.json - Only real motion stays in SCSS: transitions, arrow rotation, hover/[open]/focus-within states - mobile-menu-accordion's :not() padding exclusion kept as a real (non-:where()) rule on purpose — its own override relies on out-specifying it at equal specificity via source order Header - Inlined header-motion's last 2 mq() call-sites as literal @media breakpoints (nav-toggle, tablet-landscape) - mq mixin now has zero remaining consumers anywhere Left unchanged (confirmed correct) - .site-header__search button/input stays in SCSS — core-search.json applies theme-wide, and a second core/search consumer (template-search.php) uses a different layout that would have wrongly inherited the header's icon-only button styling - is-style-header-icon-button still has 0 consumers (LS-2341)
Link Arrow Accent - Rest-state layout (display/align-items/gap on the link, baseline transform on the arrow glyph) moved into link-arrow-accent.json - Rest colour stays in SCSS rather than JSON's elements.link — it needs the --ls-link-arrow-colour custom-property-with-fallback pattern so the CTA band's on-dark override still works, which the elements schema can't express - Only real motion stays in SCSS: transitions, hover/focus states, the cross-card-hover compound selectors, content: (Sass icon var) Left unchanged (confirmed dead) - is-style-link-underline-accent has 0 consumers — untouched, tracked on LS-2341
…p 7) Inlines every remaining mixin call-site so 3 of 5 mixin files can be deleted outright: - All 8 @include motion.reduced-motion {} call-sites (header, card, footer, text, button, menu-motion x3) → literal @media (prefers-reduced-motion: reduce) {} - button-motion's surface.absolute-fill() → literal position/inset - faq-motion's surface.surface-card() → literal position/overflow/border/background/box-shadow Deletes _mq.scss, _breakpoints-theme.scss, _glass.scss — confirmed zero remaining references anywhere. Also removes the sync:breakpoints tooling (package.json build:css/watch:css, theme-utils.mjs function + CLI case + help text) so the deleted breakpoints file stays gone. _motion.scss and _surface.scss stay for now — their only remaining consumer is gsap/_card-spotlight.scss, a dead file (is-style-card- spotlight has 0 consumers, already tracked on LS-2341) left untouched per instruction.
…p 9)
Duplicate hover consolidation
- New _shared-hover.scss merges 3 groups of previously copy-pasted
hover/motion rules into one shared rule each:
- Circular icon-button hover (header search button, mobile-menu
close button, footer proof-card, footer social-icon)
- Mega-menu-item row hover (Default + Service items)
- Glass @supports blur block (Glass Button + Glass Card)
- Each duplicate removed from its original file, replaced with a
pointer comment
Bug fix (caught in code review)
- Icon-button consolidation had silently swapped :focus-visible for
:focus-within on 2 of 4 merged selectors (header search button,
mobile-menu close button)
- Split back into two rules sharing the same transition/hover values
but keeping each selector's original pseudo-class
Group 8 — enqueue gating
- Investigated inc/animations.php, no code change needed
- Every front-end template needs animations.css via header+footer
template parts, so there's no further gating opportunity beyond
LS-2339
Group 9 — recompile + verify
- Final rebuild, CHANGELOG.md entry added
- LS-2340 acceptance criteria checked off
- animations.css: 2,003 → 1,444 lines
brandonmarshal
added
area:theme
|
Note
|
| Layer / File(s) | Summary |
|---|---|
JSON style contracts styles/blocks/*, styles/presets/*, styles/sections/*, theme.json |
JSON now defines structural styles for buttons, details, cards, menus, links, icon shells, the home hero, and lift animation values. |
Animation and responsive CSS consolidation assets/css/animations.css, src/scss/animations/*, src/scss/gsap/*, assets/css/gsap-animations.css |
Sass and CSS retain motion-specific rules while shared hover behavior, reduced-motion handling, responsive grids, overlays, footer layouts, and rest-state styling move to shared CSS or JSON. |
Template and pattern integration parts/*, patterns/* |
Templates and patterns apply the new accordion, link-row, menu, footer, and card icon-shell styles. |
Block rendering and build tooling inc/portfolio-card-colors.php, package.json, theme-utils.mjs, README.md, .github/*, .agents/*, CHANGELOG.md |
Portfolio classes are updated in render_block_data before core style processing. The breakpoint synchronization command and its documented workflows are removed. |
Estimated code review effort: 4 (Complex) | ~60 minutes
Mergeability Score: ⚪ Minimal · up to c0dd7
The PR moves structural styling into block-support JSON and updates related theme behavior without any supplied evidence of a current correctness or production regression; no actionable merge-blocking risk remains beyond normal checks and review.
🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
| Check name | Status | Explanation |
|---|---|---|
| Description Check | ✅ Passed | Check skipped - CodeRabbit’s high-level summary is enabled. |
| Title check | ✅ Passed | The title clearly and concisely identifies the main change: moving structural CSS into JSON and block supports. |
| Docstring Coverage | ✅ Passed | No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. |
| Linked Issues check | ✅ Passed | Check skipped because no linked issues were found for this pull request. |
| Out of Scope Changes check | ✅ Passed | Check skipped because no linked issues were found for this pull request. |
✨ Finishing Touches 💡 1
🛠️ Fix failing CI checks 💡
- Create stacked PR
- Commit on current branch
🧪 Generate unit tests (beta)
- Create PR with unit tests
- Commit unit tests in branch
feature/ls-2340-phase-3-move-structural-css-into-jsonblock-supports
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.
Comment @coderabbitai help to get the list of available commands.
There was a problem hiding this comment.
Pull request overview
Migrates structural styling from animation Sass into WordPress block-style JSON while retaining genuine motion and unsupported responsive rules in Sass.
Changes:
- Adds and expands reusable JSON block styles for cards, buttons, menus, details and footer components.
- Simplifies Sass mixins and consolidates shared interactions.
- Fixes WooCommerce portfolio colour variation timing and recompiles CSS assets.
Reviewed changes
Copilot reviewed 53 out of 53 changed files in this pull request and generated 16 comments.
Show a summary per file
| File | Description |
|---|---|
theme.json |
Adds shared lift tokens. |
theme-utils.mjs |
Removes breakpoint synchronisation. |
styles/sections/menu/mega-menu-panel-services.json |
Adds Services panel styling. |
styles/sections/home-hero-section.json |
Moves hero structure into JSON. |
styles/sections/cards/glass-card.json |
Adds glass-card rest styling. |
styles/sections/cards/card-solutions.json |
Adds Solutions card structure. |
styles/sections/cards/card-services.json |
Adds Services card structure. |
styles/sections/cards/card-link-row.json |
Adds link-row structure. |
styles/sections/cards/card-icon-shell.json |
Adds reusable icon-shell style. |
styles/sections/cards/card-feature.json |
Adds feature-card structure. |
styles/sections/cards/card-category.json |
Adds category-card structure. |
styles/sections/cards/card-case-study.json |
Adds case-study interaction tokens. |
styles/presets/blocks/core-details.json |
Moves details structure into JSON. |
styles/presets/blocks/core-button.json |
Moves shared button shell into JSON. |
styles/blocks/paragraphs/mobile-menu-link-row.json |
Adds mobile link-row style. |
styles/blocks/paragraphs/link-arrow-accent.json |
Moves arrow-link layout into JSON. |
styles/blocks/paragraphs/footer-nav-link.json |
Adds static underline styling. |
styles/blocks/groups/icon-frame-glow.json |
Moves icon-frame structure into JSON. |
styles/blocks/groups/footer-social-icon.json |
Adds minimum-width styling. |
styles/blocks/details/mobile-menu-accordion.json |
Adds flattened mobile accordion style. |
styles/blocks/buttons/glass-button.json |
Moves glass-button rest styling. |
styles/blocks/buttons/button-arrow-compact.json |
Moves compact-button structure. |
src/scss/gsap/_home-hero-section.scss |
Retains responsive hero overrides. |
src/scss/animations/_text-motion.scss |
Inlines reduced-motion query. |
src/scss/animations/_shared-hover.scss |
Consolidates shared interactions. |
src/scss/animations/_mobile-menu-motion.scss |
Reduces mobile-menu Sass. |
src/scss/animations/_menu-motion.scss |
Adds responsive Services grid. |
src/scss/animations/_link-motion.scss |
Retains link interaction behaviour. |
src/scss/animations/_header-motion.scss |
Inlines header breakpoints. |
src/scss/animations/_footer-motion.scss |
Adds responsive footer grid. |
src/scss/animations/_faq-motion.scss |
Inlines former surface mixin. |
src/scss/animations/_details-motion.scss |
Retains details interactions. |
src/scss/animations/_card-motion.scss |
Removes migrated card structure. |
src/scss/animations/_button-motion.scss |
Removes migrated button structure. |
src/scss/animations.scss |
Loads shared hover partial. |
src/scss/abstracts/mixins/_mq.scss |
Removes media-query mixin. |
src/scss/abstracts/mixins/_glass.scss |
Removes glass mixins. |
src/scss/abstracts/mixins/_breakpoints-theme.scss |
Removes generated breakpoint map. |
patterns/thank-you-consultation.php |
Applies icon-shell variation. |
patterns/footer.php |
Updates footer layout. |
patterns/cta/section-cta-consultation-strip.php |
Inlines CTA wrapper layout. |
patterns/cta/section-cta-consultation-reassurance.php |
Inlines CTA colours. |
patterns/cta/section-cta-consultation-inline.php |
Inlines CTA colours. |
patterns/cta/section-cta-consultation-band.php |
Inlines CTA and link colours. |
patterns/cards/section-card-services.php |
Applies icon-shell variation. |
patterns/cards/section-card-feature.php |
Applies icon-shell variation. |
parts/services-mega-menu.html |
Uses combined Services panel variation. |
parts/mobile-menu.html |
Applies new mobile styles and grid markup. |
package.json |
Removes breakpoint sync scripts. |
inc/portfolio-card-colors.php |
Moves colour switching earlier in rendering. |
CHANGELOG.md |
Documents the migration. |
assets/css/gsap-animations.css |
Rebuilds compiled GSAP CSS. |
assets/css/animations.css |
Rebuilds reduced animation CSS. |
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 6
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (2)
patterns/cards/section-card-feature.php (1)
11-11: 📐 Maintainability & Code Quality | 🟠 Major | ⚡ Quick winAdd
@package ls-themeto both pattern headers.Both files fail the same PHP Code Quality check because their file comments omit the required package tag.
patterns/cards/section-card-feature.php#L11-L11: add@package ls-themebefore the closing*/.patterns/cards/section-card-services.php#L11-L11: add@package ls-themebefore the closing*/.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@patterns/cards/section-card-feature.php` at line 11, Add the required `@package` ls-theme tag before the closing comment marker in the file headers of patterns/cards/section-card-feature.php (lines 11-11) and patterns/cards/section-card-services.php (lines 11-11).Source: Pipeline failures
patterns/footer.php (1)
2-8: 📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick winAdd the required package annotation.
PHPCS fails because this file header lacks
@package. Add@package ls-themebefore the closing docblock.Proposed fix
* Description: Full site footer — editorial notes panel, company summary with proof points, 5-column link grid, and legal/social bottom bar. + * + * `@package` ls-theme */🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@patterns/footer.php` around lines 2 - 8, Add the required `@package` annotation with value ls-theme to the header docblock in the Footer pattern, placing it before the closing comment while preserving the existing metadata.Source: Pipeline failures
🧹 Nitpick comments (6)
src/scss/gsap/_home-hero-section.scss (1)
9-13: 📐 Maintainability & Code Quality | 🔵 Trivial | 🏗️ Heavy liftRestore the shared breakpoint abstraction.
Line 13 hardcodes
767.98px. This can diverge fromtheme.jsonand other responsive rules. Restore the shared breakpoint mixin, or document an approved exception before merge.As per coding guidelines,
src/scss/**/*.scssmust “reuse the shared breakpoint mixin.”🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/scss/gsap/_home-hero-section.scss` around lines 9 - 13, Replace the hardcoded max-width in the `@media` block with the shared breakpoint mixin used by other src/scss rules, referencing the tablet-portrait breakpoint from the centralized configuration rather than duplicating 767.98px. If this section cannot use the mixin, document the approved exception instead.Source: Coding guidelines
src/scss/animations/_mobile-menu-motion.scss (1)
104-112: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueUse logical sizing properties in the new rules.
Lines 105 and 110 use
width. The same file usesinline-sizeandblock-sizeelsewhere, including Line 95 in this change. The coding guidelines require logical properties for directional layout. Switch both toinline-sizefor consistency.♻️ Proposed change
.mobile-menu-actions .wp-block-button { - width: 100%; + inline-size: 100%; } .mobile-menu-actions .wp-block-button__link { display: block; - width: 100%; + inline-size: 100%; text-align: center; }As per coding guidelines: "prefer logical properties for directional layout".
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/scss/animations/_mobile-menu-motion.scss` around lines 104 - 112, Replace the width declarations in the .mobile-menu-actions .wp-block-button and .mobile-menu-actions .wp-block-button__link rules with inline-size, preserving their 100% values and all other declarations.Source: Coding guidelines
src/scss/animations/_button-motion.scss (1)
358-371: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueResidual
.is-style-card-solutions-accentreferences remain here.This PR drops
.is-style-card-solutions-accentfrom_card-motion.scssand documents it as dead with zero consumers (LS-2341). The same class is still present in three:is()selectors in this file: the hover/focus group at Lines 360-361, the arrow hover group at Lines 368-369, and the reduced-motion group at Lines 415-420. The selectors stay inert, so there is no behaviour change. The cleanup is inconsistent across the two partials.Remove the dead class here as well, or record why it stays only in this file.
♻️ Proposed cleanup
&:hover, &:focus-visible, - :is(.is-style-card-solutions, .is-style-card-solutions-accent):hover &, - :is(.is-style-card-solutions, .is-style-card-solutions-accent):focus-within & { + .is-style-card-solutions:hover &, + .is-style-card-solutions:focus-within & { background: var(--ls-button-arrow-compact-background-active); border-color: var(--ls-button-arrow-compact-border-active); } &:hover::after, &:focus-visible::after, - :is(.is-style-card-solutions, .is-style-card-solutions-accent):hover &::after, - :is(.is-style-card-solutions, .is-style-card-solutions-accent):focus-within &::after { + .is-style-card-solutions:hover &::after, + .is-style-card-solutions:focus-within &::after { color: var(--ls-button-arrow-compact-colour-active); }.wp-block-button.is-style-button-arrow-compact .wp-block-button__link::after, .wp-block-button.is-style-button-arrow-compact .wp-block-button__link:hover::after, .wp-block-button.is-style-button-arrow-compact .wp-block-button__link:focus-visible::after, - :is(.is-style-card-solutions, .is-style-card-solutions-accent):hover - .wp-block-button.is-style-button-arrow-compact - .wp-block-button__link::after, - :is(.is-style-card-solutions, .is-style-card-solutions-accent):focus-within - .wp-block-button.is-style-button-arrow-compact - .wp-block-button__link::after { + .is-style-card-solutions:hover + .wp-block-button.is-style-button-arrow-compact + .wp-block-button__link::after, + .is-style-card-solutions:focus-within + .wp-block-button.is-style-button-arrow-compact + .wp-block-button__link::after { transform: none; }Also applies to: 415-420
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/scss/animations/_button-motion.scss` around lines 358 - 371, Remove the dead .is-style-card-solutions-accent selector from the hover/focus rules and the reduced-motion rules in this partial, retaining .is-style-card-solutions behavior unchanged. Update each affected :is() selector in the button motion rules, including the ::after arrow state selectors.src/scss/animations/_card-motion.scss (1)
43-44: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueComments placed inside selector blocks emit empty rulesets into the compiled CSS. Sass hoists a loud comment inside a block to that block's own output, so a block whose only remaining content is a comment still produces a selector with an empty declaration list. Both sites ship dead bytes in
assets/css/animations.css(Lines 271-273 and Lines 1370-1373).
src/scss/animations/_card-motion.scss#L43-L44: move thebackdrop-filternote above the.is-style-glass-cardselector, or change it to a silent//comment.src/scss/animations/_header-motion.scss#L101-L103: move the shared-hover note above the.site-header__searchselector, or change it to a silent//comment.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/scss/animations/_card-motion.scss` around lines 43 - 44, Prevent comments inside selector blocks from generating empty CSS rules: in src/scss/animations/_card-motion.scss lines 43-44, move the backdrop-filter note above .is-style-glass-card or make it a silent comment; apply the same change to the shared-hover note inside .site-header__search in src/scss/animations/_header-motion.scss lines 101-103.src/scss/animations/_menu-motion.scss (1)
106-136: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueThe divider
:nth-childcounts hardcode a six-phase list.
-n + 4at Line 116 and-n + 3at Line 131 both assume exactly six columns, matching$ls-mega-menu-phasesat Line 41. If a phase is added or removed from that list, the dividers land on the wrong rows and no build error occurs.Derive the counts from the same Sass list, or use
:nth-last-childso the last visual row is excluded regardless of the item count.Also note Line 109 uses
var(--wp--style--block-gap)forcolumn-gapwhile Line 110 uses a spacing preset forrow-gap. Confirm that mixing the two is intended.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/scss/animations/_menu-motion.scss` around lines 106 - 136, Update the divider selectors in the mobile-menu-accordion service grid to avoid hardcoded phase counts: derive the relevant counts from the shared $ls-mega-menu-phases Sass list, or use :nth-last-child logic that excludes the final visual row for both two- and three-column layouts. Preserve the existing responsive divider behavior, and verify that the differing column-gap and row-gap custom properties are intentional without changing them unless needed.src/scss/animations/_header-motion.scss (1)
24-30: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚖️ Poor tradeoffThe retired
mqmixin leaves four hand-maintained breakpoint literals. This PR removessrc/scss/abstracts/mixins/_mq.scssand inlines the computed values. Each site now duplicates a number that theme.json owns insettings.custom.layout.break-points, and nothing keeps the two in sync. The coding guidelines require reuse of the shared breakpoint mixin, so confirm this removal is an approved deviation and update the guideline if it is.
src/scss/animations/_header-motion.scss#L24-L30:599.98pxand1023.98px(Line 48) now duplicate thenav-toggleandtablet-landscapeentries.src/scss/animations/_card-motion.scss#L340-L361:781.98pxduplicates thecolumns-stackentry.src/scss/animations/_footer-motion.scss#L130-L141:781pxduplicates the samecolumns-stackentry with a different value.src/scss/animations/_menu-motion.scss#L122-L122:650pxis a bespoke value with no theme.json entry at all.Consider keeping a small Sass map of these values so a single edit updates every consumer.
As per coding guidelines: "reuse the shared breakpoint mixin".
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/scss/animations/_header-motion.scss` around lines 24 - 30, Restore shared breakpoint reuse instead of retaining hand-maintained literals: confirm whether removing the mq mixin is an approved deviation and update the coding guideline if so; otherwise preserve or replace the mixin with a shared Sass breakpoint map sourced from theme.json. Apply the solution to src/scss/animations/_header-motion.scss lines 24-30 and 48, _card-motion.scss lines 340-361, and _footer-motion.scss lines 130-141 for the named breakpoints; also address _menu-motion.scss line 122’s bespoke 650px value by defining or reusing an explicit shared breakpoint.Source: Coding guidelines
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@patterns/cta/section-cta-consultation-band.php`:
- Around line 48-52: Update the CTA styling for the ls-cta-band__actions and
ls-cta-band__button blocks so the custom properties and button text color are
represented in the corresponding core/group and core/button block attributes or
the CTA class contract, rather than only raw inline style attributes. Preserve
the existing dark-theme values and ensure they survive WordPress editor save
operations.
In `@patterns/cta/section-cta-consultation-strip.php`:
- Line 45: Update the Group block wrapper in the CTA consultation strip markup
by removing its inline style attribute, and add position: relative and display:
inline-flex to the .ls-cta-strip__cta-wrap CSS rule so the core/group
serialization remains valid.
In `@src/scss/animations/_faq-motion.scss`:
- Around line 10-18: Add an empty line after the --ls-faq-border-active custom
property and before position in the FAQ motion rule, preserving the existing
declarations and transition styling.
In `@styles/presets/blocks/core-details.json`:
- Line 27: Update the `& > summary:focus` rule in the details block to use
`:focus-visible` and provide a visible outline, preserving keyboard focus
indication without removing it globally.
In `@styles/sections/cards/card-services.json`:
- Line 31: Remove the positioned-anchor rule for .ls-card-services__cta a so its
::before pseudo-element resolves against the positioned card container and
preserves the card-wide CTA hit area. Leave the card positioning and
pseudo-element rules unchanged.
In `@styles/sections/menu/mega-menu-panel-services.json`:
- Line 31: Update the mega-menu panel sizing CSS by changing the max-width rule
to a logical viewport-based maximum and applying border-box sizing so the
horizontal padding defined earlier is included within the limit. Keep the
existing fit-content width and child layout rules unchanged.
---
Outside diff comments:
In `@patterns/cards/section-card-feature.php`:
- Line 11: Add the required `@package` ls-theme tag before the closing comment
marker in the file headers of patterns/cards/section-card-feature.php (lines
11-11) and patterns/cards/section-card-services.php (lines 11-11).
In `@patterns/footer.php`:
- Around line 2-8: Add the required `@package` annotation with value ls-theme to
the header docblock in the Footer pattern, placing it before the closing comment
while preserving the existing metadata.
---
Nitpick comments:
In `@src/scss/animations/_button-motion.scss`:
- Around line 358-371: Remove the dead .is-style-card-solutions-accent selector
from the hover/focus rules and the reduced-motion rules in this partial,
retaining .is-style-card-solutions behavior unchanged. Update each affected
:is() selector in the button motion rules, including the ::after arrow state
selectors.
In `@src/scss/animations/_card-motion.scss`:
- Around line 43-44: Prevent comments inside selector blocks from generating
empty CSS rules: in src/scss/animations/_card-motion.scss lines 43-44, move the
backdrop-filter note above .is-style-glass-card or make it a silent comment;
apply the same change to the shared-hover note inside .site-header__search in
src/scss/animations/_header-motion.scss lines 101-103.
In `@src/scss/animations/_header-motion.scss`:
- Around line 24-30: Restore shared breakpoint reuse instead of retaining
hand-maintained literals: confirm whether removing the mq mixin is an approved
deviation and update the coding guideline if so; otherwise preserve or replace
the mixin with a shared Sass breakpoint map sourced from theme.json. Apply the
solution to src/scss/animations/_header-motion.scss lines 24-30 and 48,
_card-motion.scss lines 340-361, and _footer-motion.scss lines 130-141 for the
named breakpoints; also address _menu-motion.scss line 122’s bespoke 650px value
by defining or reusing an explicit shared breakpoint.
In `@src/scss/animations/_menu-motion.scss`:
- Around line 106-136: Update the divider selectors in the mobile-menu-accordion
service grid to avoid hardcoded phase counts: derive the relevant counts from
the shared $ls-mega-menu-phases Sass list, or use :nth-last-child logic that
excludes the final visual row for both two- and three-column layouts. Preserve
the existing responsive divider behavior, and verify that the differing
column-gap and row-gap custom properties are intentional without changing them
unless needed.
In `@src/scss/animations/_mobile-menu-motion.scss`:
- Around line 104-112: Replace the width declarations in the
.mobile-menu-actions .wp-block-button and .mobile-menu-actions
.wp-block-button__link rules with inline-size, preserving their 100% values and
all other declarations.
In `@src/scss/gsap/_home-hero-section.scss`:
- Around line 9-13: Replace the hardcoded max-width in the `@media` block with the
shared breakpoint mixin used by other src/scss rules, referencing the
tablet-portrait breakpoint from the centralized configuration rather than
duplicating 767.98px. If this section cannot use the mixin, document the
approved exception instead.
🪄 Autofix
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yml
Review profile: CHILL
Plan: Pro Plus
Run ID: c9dcf54d-524b-4a3b-9a4d-01cb4e27bc9f
📒 Files selected for processing (53)
CHANGELOG.mdassets/css/animations.cssassets/css/gsap-animations.cssinc/portfolio-card-colors.phppackage.jsonparts/mobile-menu.htmlparts/services-mega-menu.htmlpatterns/cards/section-card-feature.phppatterns/cards/section-card-services.phppatterns/cta/section-cta-consultation-band.phppatterns/cta/section-cta-consultation-inline.phppatterns/cta/section-cta-consultation-reassurance.phppatterns/cta/section-cta-consultation-strip.phppatterns/footer.phppatterns/thank-you-consultation.phpsrc/scss/abstracts/mixins/_breakpoints-theme.scsssrc/scss/abstracts/mixins/_glass.scsssrc/scss/abstracts/mixins/_mq.scsssrc/scss/animations.scsssrc/scss/animations/_button-motion.scsssrc/scss/animations/_card-motion.scsssrc/scss/animations/_details-motion.scsssrc/scss/animations/_faq-motion.scsssrc/scss/animations/_footer-motion.scsssrc/scss/animations/_header-motion.scsssrc/scss/animations/_link-motion.scsssrc/scss/animations/_menu-motion.scsssrc/scss/animations/_mobile-menu-motion.scsssrc/scss/animations/_shared-hover.scsssrc/scss/animations/_text-motion.scsssrc/scss/gsap/_home-hero-section.scssstyles/blocks/buttons/button-arrow-compact.jsonstyles/blocks/buttons/glass-button.jsonstyles/blocks/details/mobile-menu-accordion.jsonstyles/blocks/groups/footer-social-icon.jsonstyles/blocks/groups/icon-frame-glow.jsonstyles/blocks/paragraphs/footer-nav-link.jsonstyles/blocks/paragraphs/link-arrow-accent.jsonstyles/blocks/paragraphs/mobile-menu-link-row.jsonstyles/presets/blocks/core-button.jsonstyles/presets/blocks/core-details.jsonstyles/sections/cards/card-case-study.jsonstyles/sections/cards/card-category.jsonstyles/sections/cards/card-feature.jsonstyles/sections/cards/card-icon-shell.jsonstyles/sections/cards/card-link-row.jsonstyles/sections/cards/card-services.jsonstyles/sections/cards/card-solutions.jsonstyles/sections/cards/glass-card.jsonstyles/sections/home-hero-section.jsonstyles/sections/menu/mega-menu-panel-services.jsontheme-utils.mjstheme.json
💤 Files with no reviewable changes (4)
- src/scss/abstracts/mixins/_breakpoints-theme.scss
- src/scss/abstracts/mixins/_mq.scss
- src/scss/abstracts/mixins/_glass.scss
- theme-utils.mjs
Block-validation fix (the important one) - Reverted 5 inline-style additions back to class-scoped SCSS: footer notes-badge width, and the 4 CTA-consultation patterns' on-dark button colour pinning + wrapper position/display - core/group and core/button only regenerate their style attribute from registered block attributes on save; none of these custom properties or raw width/position values were ever part of that schema, so the next editor open+save would have silently stripped them and flagged the blocks as invalid Confirmed bugs fixed - footer-social-icon.json: minWidth isn't a supported dimensions key in WordPress core (only minHeight/height/width are) — moved to the css field as min-inline-size instead - _shared-hover.scss: is-style-mega-menu-item-service hover now scoped to .wp-block-paragraph — the same class also applies to the mobile accordion's grid wrapper, so focusing one service row was raising the whole grid's background - card-services.json: removed position:relative/z-index from the CTA link so its ::before stretched-link overlay resolves against the whole card again, restoring the card-wide click area - mega-menu-panel-services.json: added box-sizing: border-box so the padding is included in the 100vw ceiling at narrow viewports Cleanup - Updated 4 docs (README, copilot-instructions, styling.instructions, the styling-auditor agent doc) that still referenced the deleted sync:breakpoints script - Fixed a stylelint blank-line nit in _faq-motion.scss
There was a problem hiding this comment.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
styles/sections/menu/mega-menu-panel-services.json (1)
1-9: 🎯 Functional Correctness | 🟠 Major | ⚡ Quick winRegister the
mega-menu-panel-servicesblock style variation.WordPress auto-discovers block style variation JSON from
/styles/block-styles, not/styles/sections. Move this file to the supported directory or register the variation and merge its style data intotheme.json. The separately enqueued animation CSS can still match the existing class, but the JSON-defined panel and grid styles do not apply.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@styles/sections/menu/mega-menu-panel-services.json` around lines 1 - 9, Move the mega-menu-panel-services block style variation definition from the sections location into the supported styles/block-styles directory, preserving its existing slug, blockTypes, and style data so WordPress auto-discovers and applies the panel and grid styling. Keep the existing is-style-mega-menu-panel-services class unchanged for the separately enqueued animation CSS.Source: Path instructions
🧹 Nitpick comments (1)
src/scss/animations/_footer-motion.scss (1)
156-166: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winUse the shared breakpoint mixin.
Route the 781px footer breakpoint through the existing shared breakpoint mixin. This prevents breakpoint values from diverging across responsive styles.
As per coding guidelines, reuse the shared breakpoint mixin under “Lean, predictable CSS — keep selectors shallow, reuse the shared breakpoint mixin, prefer logical properties for directional layout, and favour
transformoropacityfor motion when possible.”🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/scss/animations/_footer-motion.scss` around lines 156 - 166, Replace the hardcoded 781px media query around .footer-nav-columns with the existing shared breakpoint mixin, preserving the current grid declarations and nested .wp-block-columns behavior within that breakpoint.Source: Coding guidelines
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Outside diff comments:
In `@styles/sections/menu/mega-menu-panel-services.json`:
- Around line 1-9: Move the mega-menu-panel-services block style variation
definition from the sections location into the supported styles/block-styles
directory, preserving its existing slug, blockTypes, and style data so WordPress
auto-discovers and applies the panel and grid styling. Keep the existing
is-style-mega-menu-panel-services class unchanged for the separately enqueued
animation CSS.
---
Nitpick comments:
In `@src/scss/animations/_footer-motion.scss`:
- Around line 156-166: Replace the hardcoded 781px media query around
.footer-nav-columns with the existing shared breakpoint mixin, preserving the
current grid declarations and nested .wp-block-columns behavior within that
breakpoint.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yml
Review profile: CHILL
Plan: Pro Plus
Run ID: 585b3cc7-5fee-46e4-b6f7-d52c5b981762
📒 Files selected for processing (13)
.agents/agents/wordpress-theme-styling-auditor.agent.md.github/copilot-instructions.md.github/instructions/styling.instructions.mdREADME.mdassets/css/animations.csspatterns/footer.phpsrc/scss/animations/_button-motion.scsssrc/scss/animations/_faq-motion.scsssrc/scss/animations/_footer-motion.scsssrc/scss/animations/_shared-hover.scssstyles/blocks/groups/footer-social-icon.jsonstyles/sections/cards/card-services.jsonstyles/sections/menu/mega-menu-panel-services.json
💤 Files with no reviewable changes (1)
- .github/copilot-instructions.md
🚧 Files skipped from review as they are similar to previous changes (6)
- patterns/footer.php
- src/scss/animations/_faq-motion.scss
- src/scss/animations/_shared-hover.scss
- styles/sections/cards/card-services.json
- assets/css/animations.css
- src/scss/animations/_button-motion.scss
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 53 out of 53 changed files in this pull request and generated no new comments.
Suppressed comments (6)
styles/sections/cards/card-icon-shell.json:11
- This new style still puts supported theme JSON properties into one monolithic CSS string. Padding, border radius, background and the nested
outermost/icon-blockcolour have structured owners (spacing,border,color, andblocks["outermost/icon-block"]); keeping them here bypasses WordPress merging and editor tooling. Move supported declarations to those keys and leave only unsupported flex/overflow/SVG rules incss.
styles/presets/blocks/core-button.json:7 core/buttoncustom CSS is emitted against the block’s link selector, not the outer.wp-block-buttonwrapper. This therefore does not replace the removed wrapper-levelmax-inline-size: 100%rules (including the Glass Button rule), so long no-wrap buttons can once again make their wrapper overflow a flex/grid container. Retain the wrapper constraint in Sass or another wrapper-targeted rule.
styles/sections/cards/card-icon-shell.json:9- Existing posts created from these patterns retain only
ls-card__icon-shell; registered pattern markup is copied into post content and is not rewritten when the pattern file changes. Since the structural.ls-card__icon-shellfallback was removed from_card-motion.scss, those existing cards lose their icon padding, border, background and nested icon layout after the theme update. Keep a legacy fallback during migration or provide a stored-content migration.
This issue also appears on line 11 of the same file.
package.json:7
- Removing breakpoint synchronisation leaves several responsive rules hard-coded at
599.98px,767.98px,781.98pxand1023.98pxwhiletheme.jsonstill declares the canonical breakpoints. A later token change will silently desynchronise the compiled CSS. Retain the generated Sass map/synchronisation step, or add validation that fails when these literals diverge.
"build:css": "sass --no-source-map --no-charset --style=expanded src/scss/animations.scss:assets/css/animations.css src/scss/gsap-animations.scss:assets/css/gsap-animations.css",
parts/mobile-menu.html:7
- Customised
mobile-menutemplate parts stored in WordPress retain the oldmobile-menu-accordionclass without this newis-style-*class. Because this PR also removes the legacy plain-class structural CSS, those existing template-part overrides lose their flattened accordion styling after the update. Keep compatibility selectors for the old class or migrate storedwp_template_partcontent.
<!-- wp:details {"className":"mobile-menu-accordion is-style-mobile-menu-accordion","layout":{"type":"default"}} -->
<details class="wp-block-details mobile-menu-accordion is-style-mobile-menu-accordion"><summary>Work</summary><!-- wp:group {"layout":{"type":"flex","orientation":"vertical","flexWrap":"nowrap"}} -->
parts/services-mega-menu.html:2
- Previously customised copies of this template part still contain both style classes. Under the first-variation-only behaviour documented by this PR, WordPress will apply
mega-menu-paneland ignoremega-menu-panel-services; now that the Sass grid fallback is removed, those persisted copies lose the Services grid. Preserve a compatibility rule for the old two-class markup or migrate stored template parts.
<!-- wp:group {"className":"is-style-mega-menu-panel-services"} -->
<div class="wp-block-group is-style-mega-menu-panel-services"><!-- wp:group {"style":{"border":{"bottom":{"width":"1px","style":"solid","color":"var:custom|color|border|card"}},"spacing":{"padding":{"bottom":"var:preset|spacing|30"}}},"layout":{"type":"flex","justifyContent":"space-between","flexWrap":"nowrap","verticalAlignment":"bottom"}} -->
ZaredRogers
approved these changes
Aug 13, 2026
ZaredRogers
left a comment
ZaredRogers
left a comment
Contributor
There was a problem hiding this comment.
Looks good @brandonmarshal
Context
- Flagged in a follow-up Copilot review, not the original PR review
- core-button.json's css field targets core/button's root selector,
which resolves to the link (.wp-block-button .wp-block-button__link),
not the outer .wp-block-button wrapper
- The pre-migration SCSS capped the wrapper itself at
max-inline-size: 100%, so a long, non-wrapping button label couldn't
grow the wrapper past its flex/grid container — that constraint was
lost when the rule moved into JSON
Fix
- Adds .wp-block-button { max-inline-size: 100%; } as its own literal
rule alongside the existing link-scoped rule
- Applied across all 3 affected files:
- core-button.json — default fill variation
- core-button.json — outline variation
- glass-button.json
brandonmarshal
deleted the
feature/ls-2340-phase-3-move-structural-css-into-jsonblock-supports
branch
August 13, 2026 07:13
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
Migrates structural (non-motion) CSS out of
src/scss/animations/**intotheme.json/styles/**JSON block-style partials, across 9 work groups.assets/css/animations.css: 2,003 → 1,444 lines (~28%).Group 1 — Mobile menu + home hero (POC)
_mobile-menu-motion.scss+_home-hero-section.scssstructural CSS to JSON:where()zero specificity,@mediastripped from thecssfield, comma-separated selectors breaking)Group 2 — Card motion
_card-motion.scssstructural CSS to JSON across 12+ card patternscard-banner-tint/badge-brandlockstep pair in sync with their-woocommercevariantsposition: relative/overflow: hiddenregression (Card Services gradient bar rendering outside its rounded corners) and a WooCommerce card render-order bugGroup 3 — Footer + menu
_footer-motion.scssto JSON; left_menu-motion.scssalmost entirely in Sass (confirmed everything in it hits a real limitation)Group 4 — Buttons
_button-motion.scssstructural CSS to JSON (shared shell, Glass Button, Button Arrow Compact)cssfield targeted& .wp-block-button__linkwhen&already was the link, silently droppingposition: relativeand letting a hover reveal escape its containerGroup 5 — Details + header
_details-motion.scss+_header-motion.scssto JSONmq()mixin's last 2 call-sites as literal@mediabreakpointsGroup 6 — Links
_link-motion.scss's one live selector (link-arrow-accent) to JSONGroup 7 — Mixin teardown
_mq.scss,_breakpoints-theme.scss,_glass.scssoutright; inlined every remainingmotion/surfacemixin call-site as literal CSSsync:breakpointsnpm script and itstheme-utils.mjsimplementation_motion.scss/_surface.scssintentionally kept — their only remaining consumer is the deadgsap/_card-spotlight.scss(LS-2341)Group 8 — Enqueue gating
inc/animations.php, no code change — every front-end template needs it via header+footer template parts, so there's no further gating opportunity beyond LS-2339Group 9 — Recompile, duplicate cleanup, and verify
@supportsblur) into a new shared partial,_shared-hover.scss:focus-visiblefor:focus-withinon 2 of 4 merged selectorsCHANGELOG.mdentry, acceptance criteria checked offAlso fixed along the way
inc/portfolio-card-colors.php: WooCommerce card-colour swap now runs onrender_block_datainstead ofrender_block, fixing a render-order bug where the swap happened after WordPress had already decided which CSS to generateDeliberately untouched (tracked on LS-2341)
is-style-button-glow-accent,is-style-header-icon-button,is-style-link-underline-accent,is-style-card-solutions-accent,gsap/_card-spotlight.scss— all confirmed dead selectors/files, 0 consumers.Test plan
npm run build:csscompiles clean with no errorsinc/animations.phpenqueue gating investigated — confirmed already correctly scoped given every front-end template needs it via header+footer template parts; no code change required:focus-visibleto:focus-withinon 2 of 4 merged selectors)prefers-reduced-motion: reduce) spot-checked across affected componentsCloses LS-2340.
Summary by CodeRabbit
New Features
Bug Fixes