Build Services page: Entry Points and Delivery by the Numbers (LS-1598) by brandonmarshal · Pull Request #55 · lightspeedwp/ls-theme

brandonmarshal · 2026-09-11T10:42:21Z

Summary

Adds two more sections to the Services page: "Entry Points" (You don't have to buy everything at once) and "Delivery by the Numbers" (Twelve years of WordPress engineering). Together with Hero, Linked Decisions, Service Clusters, and Service Tiles from earlier PRs, this covers 6 of the 7 sections on the page — only the closing CTA remains, on a separate stacked branch.

Stacked on #54 — this branch is feature/ls-1598-services-page-batch-3, based off feature/ls-1598-services-page-batch-2.

Entry Points

Added patterns/sections/services-entry-points.php: eyebrow/heading/description on the left, a 2x2 grid of 4 entry-point link cards on the right (Start with discovery, Support review, Migration assessment, AI-readiness discussion), each linking to its corresponding service page.
Reuses the existing Card - Link Row style and core/icon arrow — no new card style or icon needed.

Delivery by the Numbers

Added patterns/sections/services-delivery-numbers.php: a centered eyebrow/heading/description intro followed by 3 centered delivery-scale stats (WordPress depth, Platform launches, Approved client praise).
Reuses the existing Stat Segment style (is-style-stat-segment) — same building block as the Work archive's engagement row — composed centered with the value shown before its label, instead of that pattern's left-aligned label-first order. No new card style needed.
Stat label/description font sizes bumped for readability (label one token up, description to a 16px token).

Mobile/tablet fixes

Entry Points: switched its card grid from a fixed columnCount:2 to minimumColumnWidth (matching the technique already used in work-related-routes.php) — WordPress's native auto-fit grid collapses to 1 column on mobile/tablet on its own, no CSS needed. Fixes a 2-column squeeze that was forcing multi-line text wrap at narrow widths.
Delivery by the Numbers: added a scoped SCSS partial that flips the shared Stat Segment divider from a vertical border-inline-end to a horizontal border-block-end once the row stacks below 782px (WordPress's own columns-stacking breakpoint), with the trailing divider correctly stripped from the last stacked item. Scoped to this section only — the shared stat-segment.json style used elsewhere (Work archive) is untouched.

Test plan

npm run schema:validate — all JSON files pass
npm run patterns:escape — clean, no warnings
npm run security:scan — clean
php -l on both new pattern files — no syntax errors
vendor/bin/phpcs --standard=WordPress on both new pattern files and inc/animations.php — clean
Verified live on a local WP install: both sections render with correct copy/order; Entry Points confirmed 1-column at 380px width with no text wrap; Delivery by the Numbers confirmed horizontal divider on stacked mobile cards and vertical divider on desktop, with no trailing divider after the last item
Manual visual QA in the Site Editor / cross-browser check

Stacks on #54 (LS-1598).

linear-code · 2026-09-11T10:42:24Z

LS-1598

Copilot

🟡 Changes recommended

Unresolved moderate icon-sizing and responsive-layout issues remain, along with contradictory task statuses.

Once you've addressed the issues Copilot identified, you can request another Copilot review.

Pull request overview

Adds the Services page’s Entry Points and Delivery by the Numbers sections, including responsive styling, asset wiring, and documentation updates.

Changes:

Adds entry-point service cards and delivery metrics.
Adds responsive stat-divider styling and build/enqueue integration.
Updates task tracking and changelog entries.

File summaries

File	Summary	Review findings
`src/scss/structural/services-delivery-numbers.scss`	Responsive divider styling	No findings.
`specs/001-services-page/tasks.md`	Task status tracking	Nit (3 votes): T020 and T021 should reflect the added stylesheet and wiring.
`patterns/sections/services-entry-points.php`	Entry-point card grid	Moderate (3 votes): Nest icon dimensions under `style`; increase the grid minimum width to preserve the intended layout.
`patterns/sections/services-delivery-numbers.php`	Delivery metrics section	Moderate (2 votes): Nest the eyebrow icon dimensions under `style`.
`package.json`	CSS build wiring	No findings.
`inc/animations.php`	Asset registration and detection	No findings.
`functions.php`	Editor stylesheet enqueue	No findings.
`CHANGELOG.md`	Release notes	No findings.
`assets/css/services-delivery-numbers.css`	Compiled stylesheet	No findings.

Review details

Files not reviewed (1)

assets/css/services-delivery-numbers.css: Generated file

Suppressed comments (1)

patterns/sections/services-entry-points.php:85

The arrow has the same invalid root-level dimensions attribute, so its requested 14px width is ignored and it will render at the icon default size. Put dimensions.width under style, as in the existing core/icon usages.

							<!-- wp:icon {"icon":"lightspeed/<?php echo esc_attr( $ls_arrow_icon_slug ); ?>","className":"has-text-color","style":{"color":{"text":"var(--wp--custom--color--text--subtle)"}},"dimensions":{"width":"14px"}} /-->

Files reviewed: 8/9 changed files
Comments generated: 4
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 - services-entry-points.php, services-delivery-numbers.php: fix wp:icon dimensions being a sibling of style instead of nested inside it — core/icon serializes dimensions as a block support under style.dimensions, not a root attribute, so the width was being silently ignored and every icon rendered at the 24px default - services-entry-points.php: increase the card grid's minimumColumnWidth from 260px to 340px — at common desktop widths (confirmed live at 1440px) the smaller value let a 3rd card fit per row, breaking the intended 2x2 layout into 3+1 Context - specs/001-services-page/tasks.md: update T020/T021 from N/A to done with the actual files/wiring — they were correctly N/A when the section was first built (no SCSS needed), but the later mobile-divider fix added a real stylesheet, making them stale

Bug fix - services-cta.php: fix wp:icon dimensions being a sibling of style instead of nested inside it — same bug class already fixed on PR #55, the eyebrow dot was rendering at the 24px default instead of 8px - inc/animations.php: load corner-glow.css unconditionally instead of gating it on is_page('services') — services-cta.php declares Inserter: true, so an editor can place it (and this shared class) on any page, where the condition would leave it caught only by the render_block/footer fallback. Same precedent as card-shells/ cta-buttons: cheap enough (~400 bytes) to load unconditionally Cleanup - Use UK-English spelling ("colour"/"colours", "centred") in prose documentation comments in services-cta.php and CHANGELOG.md, matching AGENTS.md's own established convention — CSS property names and values are unaffected, only English prose

Bug fix - services-entry-points.php, services-delivery-numbers.php: fix wp:icon dimensions being a sibling of style instead of nested inside it — core/icon serializes dimensions as a block support under style.dimensions, not a root attribute, so the width was being silently ignored and every icon rendered at the 24px default - services-entry-points.php: increase the card grid's minimumColumnWidth from 260px to 340px — at common desktop widths (confirmed live at 1440px) the smaller value let a 3rd card fit per row, breaking the intended 2x2 layout into 3+1 Context - specs/001-services-page/tasks.md: update T020/T021 from N/A to done with the actual files/wiring — they were correctly N/A when the section was first built (no SCSS needed), but the later mobile-divider fix added a real stylesheet, making them stale

Bug fix - services-cta.php: fix wp:icon dimensions being a sibling of style instead of nested inside it — same bug class already fixed on PR #55, the eyebrow dot was rendering at the 24px default instead of 8px - inc/animations.php: load corner-glow.css unconditionally instead of gating it on is_page('services') — services-cta.php declares Inserter: true, so an editor can place it (and this shared class) on any page, where the condition would leave it caught only by the render_block/footer fallback. Same precedent as card-shells/ cta-buttons: cheap enough (~400 bytes) to load unconditionally Cleanup - Use UK-English spelling ("colour"/"colours", "centred") in prose documentation comments in services-cta.php and CHANGELOG.md, matching AGENTS.md's own established convention — CSS property names and values are unaffected, only English prose

Bug fix - services-entry-points.php, services-delivery-numbers.php: fix wp:icon dimensions being a sibling of style instead of nested inside it — core/icon serializes dimensions as a block support under style.dimensions, not a root attribute, so the width was being silently ignored and every icon rendered at the 24px default - services-entry-points.php: increase the card grid's minimumColumnWidth from 260px to 340px — at common desktop widths (confirmed live at 1440px) the smaller value let a 3rd card fit per row, breaking the intended 2x2 layout into 3+1 Context - specs/001-services-page/tasks.md: update T020/T021 from N/A to done with the actual files/wiring — they were correctly N/A when the section was first built (no SCSS needed), but the later mobile-divider fix added a real stylesheet, making them stale

Bug fix - services-cta.php: fix wp:icon dimensions being a sibling of style instead of nested inside it — same bug class already fixed on PR #55, the eyebrow dot was rendering at the 24px default instead of 8px - inc/animations.php: load corner-glow.css unconditionally instead of gating it on is_page('services') — services-cta.php declares Inserter: true, so an editor can place it (and this shared class) on any page, where the condition would leave it caught only by the render_block/footer fallback. Same precedent as card-shells/ cta-buttons: cheap enough (~400 bytes) to load unconditionally Cleanup - Use UK-English spelling ("colour"/"colours", "centred") in prose documentation comments in services-cta.php and CHANGELOG.md, matching AGENTS.md's own established convention — CSS property names and values are unaffected, only English prose

- Add patterns/sections/services-entry-points.php: "You don't have to buy everything at once." — eyebrow/heading/description on the left, a 2x2 grid of 4 entry-point link cards on the right (Start with discovery, Support review, Migration assessment, AI-readiness discussion), each linking to its corresponding service page - Reuses the existing Card - Link Row style and core/icon arrow — no new card style or icon needed Context - Section background uses surface.card-raised (#E8E8E8) rather than surface.card (used by Service Clusters), since Card - Link Row's own card background is already surface.card — matching the section to that token would make the cards blend into their background

- Add patterns/sections/services-delivery-numbers.php: "Twelve years of WordPress engineering, not a slide-deck claim." — a centered eyebrow/heading/description intro followed by 3 centered delivery-scale stats (WordPress depth, Platform launches, Approved client praise) - Reuses the existing Stat Segment style (is-style-stat-segment) — same building block as the Work archive's engagement row — composed centered with the value shown before its label, instead of that pattern's left-aligned label-first order. No new card style needed. Follow-up - Increased the stat label font size one token up (300 → 400) and the description to 16px (100 → 200) for readability

Bug fix - services-entry-points.php: switch the card grid from a fixed columnCount:2 to minimumColumnWidth, matching the technique already used in work-related-routes.php — WordPress's native auto-fit grid collapses to 1 column on mobile/tablet on its own, no CSS needed. Fixes 2-column squeeze forcing multi-line text wrap at narrow widths. - services-delivery-numbers.php: add a scoped SCSS partial that flips the shared Stat Segment divider from a vertical border-inline-end to a horizontal border-block-end once the row stacks below 782px (WP's own columns-stacking breakpoint), with the trailing divider correctly stripped from the last stacked item. Scoped to this section only — the shared stat-segment.json style used elsewhere is untouched.

…1598)

Bug fix - services-entry-points.php, services-delivery-numbers.php: fix wp:icon dimensions being a sibling of style instead of nested inside it — core/icon serializes dimensions as a block support under style.dimensions, not a root attribute, so the width was being silently ignored and every icon rendered at the 24px default - services-entry-points.php: increase the card grid's minimumColumnWidth from 260px to 340px — at common desktop widths (confirmed live at 1440px) the smaller value let a 3rd card fit per row, breaking the intended 2x2 layout into 3+1 Context - specs/001-services-page/tasks.md: update T020/T021 from N/A to done with the actual files/wiring — they were correctly N/A when the section was first built (no SCSS needed), but the later mobile-divider fix added a real stylesheet, making them stale

Bug fix - services-cta.php: fix wp:icon dimensions being a sibling of style instead of nested inside it — same bug class already fixed on PR #55, the eyebrow dot was rendering at the 24px default instead of 8px - inc/animations.php: load corner-glow.css unconditionally instead of gating it on is_page('services') — services-cta.php declares Inserter: true, so an editor can place it (and this shared class) on any page, where the condition would leave it caught only by the render_block/footer fallback. Same precedent as card-shells/ cta-buttons: cheap enough (~400 bytes) to load unconditionally Cleanup - Use UK-English spelling ("colour"/"colours", "centred") in prose documentation comments in services-cta.php and CHANGELOG.md, matching AGENTS.md's own established convention — CSS property names and values are unaffected, only English prose

coderabbitai · 2026-09-15T14:00:27Z

Warning

Review limit reached

Next included review available in 45 minutes.

Check out review usage here.

View limit details

Limit details: You’ve used the included review currently available.

You've used all free OSS reviews for now. Wait for the free limit to reset to keep reviewing this public repository.

Learn how review limits work.

Review configuration:

⚙️ Run configuration

Configuration used: Path: .coderabbit.yml

Review profile: ASSERTIVE

Plan: Advanced

Run ID: 97868be9-2181-4289-80d9-3d80743c15b8

📥 Commits

Reviewing files that changed from the base of the PR and between d6f948c and 5f2e7fd.

📒 Files selected for processing (9)

CHANGELOG.md
assets/css/services-delivery-numbers.css
functions.php
inc/animations.php
package.json
patterns/sections/services-delivery-numbers.php
patterns/sections/services-entry-points.php
specs/001-services-page/tasks.md
src/scss/structural/services-delivery-numbers.scss

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.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands.}

Bug fix - services-entry-points.php, services-delivery-numbers.php: fix wp:icon dimensions being a sibling of style instead of nested inside it — core/icon serializes dimensions as a block support under style.dimensions, not a root attribute, so the width was being silently ignored and every icon rendered at the 24px default - services-entry-points.php: increase the card grid's minimumColumnWidth from 260px to 340px — at common desktop widths (confirmed live at 1440px) the smaller value let a 3rd card fit per row, breaking the intended 2x2 layout into 3+1 Context - specs/001-services-page/tasks.md: update T020/T021 from N/A to done with the actual files/wiring — they were correctly N/A when the section was first built (no SCSS needed), but the later mobile-divider fix added a real stylesheet, making them stale

Bug fix - services-cta.php: fix wp:icon dimensions being a sibling of style instead of nested inside it — same bug class already fixed on PR #55, the eyebrow dot was rendering at the 24px default instead of 8px - inc/animations.php: load corner-glow.css unconditionally instead of gating it on is_page('services') — services-cta.php declares Inserter: true, so an editor can place it (and this shared class) on any page, where the condition would leave it caught only by the render_block/footer fallback. Same precedent as card-shells/ cta-buttons: cheap enough (~400 bytes) to load unconditionally Cleanup - Use UK-English spelling ("colour"/"colours", "centred") in prose documentation comments in services-cta.php and CHANGELOG.md, matching AGENTS.md's own established convention — CSS property names and values are unaffected, only English prose

…tch-2' into feature/ls-1598-services-page-batch-3

brandonmarshal

Reviewed, also got Zared's approval in a meeting.

* Add Services "CTA" section (LS-1598) - Rename patterns/section-cta.php (empty, unused stub) to patterns/sections/services-cta.php, built out: "Let's scope it properly." — eyebrow, heading, description, and a single button reusing the exact "Request a systems review" button already established in services-hero.php (same label, same link) - Add src/scss/structural/corner-glow.scss: a shared, multi-consumer two-corner gradient glow class (.ls-corner-glow) — colours and opacities are CSS custom properties so future consumers can override them inline instead of duplicating the file - Wire into build/enqueue like the other sections (real is_page('services') condition from the start) Bug fix - Corrected a Figma SVG gradient matrix decode error: the gradient's base circle has r="10" (user-space units), scaled by the matrix's 76.861 — actual radius is 10 × 76.861, not 76.861 alone. Using the scale factor alone produced blobs ~10x too small, reading as hard circles instead of the intended soft, wide wash - Set the CTA panel to a real 800px max width (contentSize, with align:"wide" removed since it was overriding the constraint) * Add Services "CTA" section (LS-1598) - Rename patterns/section-cta.php (empty, unused stub) to patterns/sections/services-cta.php, built out: "Let's scope it properly." — eyebrow, heading, description, and a single button reusing the exact "Request a systems review" button already established in services-hero.php (same label, same link) - Add src/scss/structural/corner-glow.scss: a shared, multi-consumer two-corner gradient glow class (.ls-corner-glow) — colours and opacities are CSS custom properties so future consumers can override them inline instead of duplicating the file - Wire into build/enqueue like the other sections (real is_page('services') condition from the start) Bug fix - Corrected a Figma SVG gradient matrix decode error: the gradient's base circle has r="10" (user-space units), scaled by the matrix's 76.861 — actual radius is 10 × 76.861, not 76.861 alone. Using the scale factor alone produced blobs ~10x too small, reading as hard circles instead of the intended soft, wide wash - Set the CTA panel to a real 800px max width (contentSize, with align:"wide" removed since it was overriding the constraint) * Add CHANGELOG entry for the closing CTA section (LS-1598) * Fix PR #56 review findings (LS-1598) Bug fix - services-cta.php: fix wp:icon dimensions being a sibling of style instead of nested inside it — same bug class already fixed on PR #55, the eyebrow dot was rendering at the 24px default instead of 8px - inc/animations.php: load corner-glow.css unconditionally instead of gating it on is_page('services') — services-cta.php declares Inserter: true, so an editor can place it (and this shared class) on any page, where the condition would leave it caught only by the render_block/footer fallback. Same precedent as card-shells/ cta-buttons: cheap enough (~400 bytes) to load unconditionally Cleanup - Use UK-English spelling ("colour"/"colours", "centred") in prose documentation comments in services-cta.php and CHANGELOG.md, matching AGENTS.md's own established convention — CSS property names and values are unaffected, only English prose * Migrate Services "All Services" eyebrow icon to Core Icon block Bug fix - services-service-tiles.php: replace the last remaining outermost/icon-block instance on the Services page (the "All Services" eyebrow dot) with core/icon referencing lightspeed/dot, matching the block type already used by the other 6 section eyebrows on this page Context - Completes the LS-3229 icon-block migration for this page — PR #50 migrated the hero, linked-decisions and service-clusters patterns, but this file was added later and was missed - The dot now renders visually small/padded like the other eyebrows, matching them exactly — that's expected, not a regression here: the underlying SVG padding is tracked separately in LS-4168 (ls-plugin fix, not a theme change) * Fix CTA button overflow on narrow screens (LS-1598) Bug fix - corner-glow.scss: fix "Request a systems review" button spilling out past the CTA card's rounded border at narrow viewports (confirmed live at 320px) - Root cause: the button's flex-item wrapper had no min-width override, so flexbox's default min-width:auto refused to let it shrink below its white-space:nowrap text width, ignoring the shared core/button max-inline-size:100% rule entirely - Scoped the fix to buttons inside .ls-corner-glow only (min- width:0 to allow shrinking, white-space:normal to let the text wrap) rather than changing core/button's shared styles sitewide, since every other button context has enough room Context - Rebuilt assets/css/corner-glow.css via npm run build:css - Verified at 320px (wraps cleanly, no overflow) and 768px (unaffected, still single-line)

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

brandonmarshal self-assigned this Sep 11, 2026

brandonmarshal added this pull request to stack #52 September 11, 2026 10:43

brandonmarshal mentioned this pull request Sep 11, 2026

Build Services page: closing CTA section (LS-1598) #56

Merged

27 tasks

brandonmarshal requested a lite review from Copilot September 11, 2026 10:44

Copilot started reviewing on behalf of brandonmarshal September 11, 2026 10:44 View session

Copilot AI reviewed Sep 11, 2026

View reviewed changes

Comment thread patterns/sections/services-delivery-numbers.php Outdated

Comment thread patterns/sections/services-entry-points.php Outdated

Comment thread patterns/sections/services-entry-points.php Outdated

Comment thread specs/001-services-page/tasks.md Outdated

brandonmarshal force-pushed the feature/ls-1598-services-page-batch-3 branch from 10cfa4b to 9632b7b Compare September 14, 2026 06:20

brandonmarshal force-pushed the feature/ls-1598-services-page-batch-3 branch from 9632b7b to 9a14a6d Compare September 14, 2026 08:24

brandonmarshal added 6 commits September 15, 2026 15:57

Closed off completed tasks

7bc4e95

Add CHANGELOG entry for Entry Points and Delivery by the Numbers (LS-…

214a63f

…1598)

brandonmarshal force-pushed the feature/ls-1598-services-page-batch-3 branch from 9a14a6d to d2a5f58 Compare September 15, 2026 14:00

Merge remote-tracking branch 'origin/feature/ls-1598-services-page-ba…

5f2e7fd

…tch-2' into feature/ls-1598-services-page-batch-3

brandonmarshal commented Sep 17, 2026

View reviewed changes

brandonmarshal merged commit f3dd7b9 into develop Sep 17, 2026
2 of 4 checks passed

brandonmarshal deleted the feature/ls-1598-services-page-batch-3 branch September 17, 2026 06:48

Navigation Menu

Build Services page: Entry Points and Delivery by the Numbers (LS-1598) - #55

Build Services page: Entry Points and Delivery by the Numbers (LS-1598)#55
brandonmarshal merged 7 commits into
feature/ls-1598-services-page-batch-2from
feature/ls-1598-services-page-batch-3

brandonmarshal commented Sep 11, 2026

Uh oh!

linear-code Bot commented Sep 11, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

coderabbitai Bot commented Sep 15, 2026 •

edited

Loading

Review limit reached

Uh oh!

brandonmarshal left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

brandonmarshal commented Sep 11, 2026

Summary

Entry Points

Delivery by the Numbers

Mobile/tablet fixes

Test plan

Uh oh!

linear-code Bot commented Sep 11, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

🟡 Changes recommended

Files not reviewed (1)

Suppressed comments (1)

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

coderabbitai Bot commented Sep 15, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review limit reached

Uh oh!

brandonmarshal left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

coderabbitai Bot commented Sep 15, 2026 •

edited

Loading