Add Free Consultation CTA pattern library (LS-1216)#8
Conversation
- Created `patterns/cta/cta-consultation-band.php` with badge, heading, CTA buttons, and reassurance tiles - Added 4 new colour tokens for fixed-dark surfaces to `theme.json` and `styles/dark.json` - Mapped Phosphor icons: `check`, `chat-circle`, `star`
- Created `patterns/cta/cta-consultation-inline.php` — compact inline CTA card with phone badge, heading, body copy, and button - Created `styles/sections/cta/cta-inline-card.json` — new fixed-dark card shell with accent left border - Added 1 new colour token (`surface.on-dark-card`) to `theme.json` and `styles/dark.json` - Reused existing tokens: `icon.background`, `icon.color`, `text.brand`, `text.on-dark`
- Fixed `cta-consultation-band.php` gradient background — moved from an unsupported raw inline style to `style.color.gradient`, a properly supported block attribute - Reverted icon usage in both patterns from raw inline SVG (silently stripped by WordPress on save) back to `outermost/icon-block`, using only its supported `iconName`/`width`/`color.text` attributes - Corrected `chat-circle` to the valid Phosphor slug `chat`
- Replaced `outermost/icon-block` usage with CSS `mask-image` spans referencing new SVG assets — the plugin's bundled icon library has no matching icons and self-closing authoring conflicts with its `save()` output for icons that do resolve (e.g. `check`) - Added `assets/icons/check.svg`, `chat.svg`, `star.svg`, `phone.svg` - Fixed invalid `style.css` key on the "or see our work" link — moved its custom properties to a plain wrapping `<span>`
- Created `patterns/cta/cta-consultation-strip.php` with icon chip, heading, body copy, and glass-style button - Added `assets/icons/arrow-right.svg` - Reused existing `is-style-glass-card`, `is-style-glass-button`, and `assets/icons/phone.svg` — no new tokens or styles required
- Created `patterns/cta/cta-consultation-reassurance.php` with two-column layout, badge, heading, button, and 3-item reassurance list - Reused existing tokens (`surface.on-dark-card`, `text.brand`, `text.on-dark`, `text.on-dark-muted`, `button.fill.text`) and existing icon assets (`check.svg`, `arrow-right.svg`) — no new tokens or assets - Avoided unverified per-side border JSON for row/column dividers, using plain freeform wrapper elements instead to guarantee no validation errors
- Removed duplicate arrow on cta-consultation-reassurance — theme already renders one automatically for plain buttons - Added hover/focus rule for the cta-consultation-strip arrow, tied to the shared button wrapper, since it sits outside the button's own rich text - Pinned fill-button text/icon colour to `text.on-dark` for cta-consultation-band, cta-consultation-inline, and cta-consultation-reassurance buttons, fixing unreadable hover text on fixed-dark cards - Fixed in `src/scss/animations/_button-motion.scss` (source) and recompiled `assets/css/animations.css` via `npm run build:css`
|
Tick the box to add this pull request to the merge queue (same as
|
|
Warning Review limit reached
Next review available in: 32 minutes Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available. How can I continue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews. How do review limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: Path: .coderabbit.yml Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (5)
Note
|
| Layer / File(s) | Summary |
|---|---|
On-dark color tokens and style config theme.json, styles/dark.json, styles/sections/cta/cta-inline-card.json |
Adds on-dark, on-dark-muted, band-start, band-end, on-dark-card color tokens and a new cta-inline-card component config with color/border/spacing settings. |
CTA button and arrow motion styling assets/css/animations.css, src/scss/animations/_button-motion.scss |
Pins CTA button/fill-button text and icon colors to the on-dark token and adds hover/focus transform behavior for the CTA strip arrow, with reduced-motion overrides. |
CTA Consultation Band pattern patterns/cta/cta-consultation-band.php |
New pattern rendering a gradient CTA band with badge, heading, action links, and three reassurance tiles. |
CTA Consultation Inline pattern patterns/cta/cta-consultation-inline.php |
New inline aside-style CTA card with badge, heading, paragraph, and a single consultation booking button. |
CTA Consultation Reassurance pattern patterns/cta/cta-consultation-reassurance.php |
New two-column pattern with a primary CTA section and a reassurance checklist column. |
CTA Consultation Strip pattern patterns/cta/cta-consultation-strip.php |
New glass-styled horizontal CTA strip with icon, heading, button, and decorative arrow. |
Estimated code review effort: 2 (Simple) | ~15 minutes
Possibly related PRs
- lightspeedwp/ls-theme#4: Both PRs modify theme.json color token structure, affecting the new on-dark/surface tokens consumed by the CTA patterns.
Suggested reviewers: krugazul
🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
| Check name | Status | Explanation |
|---|---|---|
| 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. |
| Description Check | ✅ Passed | Check skipped - CodeRabbit’s high-level summary is enabled. |
| Title check | ✅ Passed | The title accurately summarizes the main change: adding a Free Consultation CTA pattern library. |
✨ Finishing Touches
🧪 Generate unit tests (beta)
- Create PR with unit tests
- Commit unit tests in branch
feature/ls-1216-cta-patterns
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.
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request introduces several new call-to-action (CTA) consultation patterns, including band, inline, reassurance, and strip variations, along with their associated icons, styles, and theme configurations. The review feedback highlights opportunities to improve editor compatibility and maintainability by replacing raw HTML wrappers and inline styles with native Gutenberg blocks and stylesheet rules. Additionally, the feedback recommends standardizing font sizes to use the theme's named presets and adding aria-hidden="true" to a decorative divider span to improve accessibility.
Important
The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.
brandonmarshal
added
comp:block-patterns
- Replaced raw-div dividers in cta-consultation-reassurance with native per-side `border.bottom` block styles, verified against WordPress core's border support - Added missing `aria-hidden="true"` to the decorative divider span - Replaced raw-div button/arrow wrapper in cta-consultation-strip with a native `wp:group`, moving positioning into `src/scss/animations/_button-motion.scss` and recompiling `assets/css/animations.css` - Rejected 2 suggested `fontSize` changes (`x-small`/`large`) — verified against `typography.json` that they aren't real presets in this theme
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
🧹 Nitpick comments (1)
patterns/cta/cta-consultation-reassurance.php (1)
53-103: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueThree reassurance items duplicate identical block structure.
Each item repeats the same group/icon/paragraph markup with only the text content differing. While some duplication is expected in static pattern files, consider whether a shared SCSS class or a simplified structure could reduce the maintenance surface.
🤖 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/cta/cta-consultation-reassurance.php` around lines 53 - 103, The three reassurance items in the CTA pattern repeat the same block/group/icon structure, so simplify this markup to reduce maintenance overhead. Reuse the existing ls-cta-reassurance__item and ls-cta-reassurance__item-icon hooks by moving the repeated border/padding/icon styling into shared CSS/SCSS, and keep the pattern markup focused on the differing paragraph text only. If possible, also collapse any redundant wrapper divs in the reassurance list while preserving the current visual layout.
🤖 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/cta-consultation-band.php`:
- Around line 47-48: The inline arrow colour custom properties on the
`ls-cta-band__actions` wrapper are not preserved by the block save flow. Remove
the `--ls-link-arrow-colour` and `--ls-link-arrow-hover-colour` values from the
markup in `cta-consultation-band.php` and define them in CSS on
`.ls-cta-band__actions` instead so the secondary link keeps its intended arrow
styling.
In `@patterns/cta/cta-consultation-reassurance.php`:
- Line 48: The raw HTML divider and wrapper elements in the consultation
reassurance pattern are breaking the block parser because they are not
represented as blocks. Update the divider in cta-consultation-reassurance.php to
use a wp:html block, and replace the freeform wrapper divs around the grouped
content with wp:group blocks or move the border/padding styling into the
ls-cta-reassurance__item SCSS class so the structure stays nested correctly in
the editor.
In `@patterns/cta/cta-consultation-strip.php`:
- Line 44: The raw <div class="ls-cta-strip__cta-wrap"> wrapper in the CTA
markup is breaking the block parser because it surrounds wp:buttons and wp:html
without a block comment. Update the CTA structure in cta-consultation-strip.php
to use a wp:group wrapper for ls-cta-strip__cta-wrap so the inner blocks stay
nested, and move the inline positioning styles into the SCSS rule for
.ls-cta-strip__cta-wrap.
In `@src/scss/animations/_button-motion.scss`:
- Around line 489-498: The CTA button override in the animation SCSS is forcing
the rest-state text color to the on-dark token, which breaks contrast in dark
mode; update the rules for .ls-cta-band__button, .ls-cta-inline__button, and
.ls-cta-reassurance__button so the default color can remain the mode-appropriate
button text token, and only keep the hover text override via
--ls-button-fill-hover-text, or alternatively also change
--ls-button-fill-background to a dark surface token if you want to preserve the
on-dark text choice.
---
Nitpick comments:
In `@patterns/cta/cta-consultation-reassurance.php`:
- Around line 53-103: The three reassurance items in the CTA pattern repeat the
same block/group/icon structure, so simplify this markup to reduce maintenance
overhead. Reuse the existing ls-cta-reassurance__item and
ls-cta-reassurance__item-icon hooks by moving the repeated border/padding/icon
styling into shared CSS/SCSS, and keep the pattern markup focused on the
differing paragraph text only. If possible, also collapse any redundant wrapper
divs in the reassurance list while preserving the current visual layout.
🪄 Autofix (Beta)
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
Run ID: 8b03cb30-6e32-4a74-8abd-87caa0f94d60
⛔ Files ignored due to path filters (5)
assets/icons/arrow-right.svgis excluded by!**/*.svgassets/icons/chat.svgis excluded by!**/*.svgassets/icons/check.svgis excluded by!**/*.svgassets/icons/phone.svgis excluded by!**/*.svgassets/icons/star.svgis excluded by!**/*.svg
📒 Files selected for processing (9)
assets/css/animations.csspatterns/cta/cta-consultation-band.phppatterns/cta/cta-consultation-inline.phppatterns/cta/cta-consultation-reassurance.phppatterns/cta/cta-consultation-strip.phpsrc/scss/animations/_button-motion.scssstyles/dark.jsonstyles/sections/cta/cta-inline-card.jsontheme.json
- Fixed inline custom properties on cta-consultation-band's `.ls-cta-band__actions` wrapper not being reflected in block JSON, which would break on save — moved to `src/scss/animations/_button-motion.scss` - Fixed WCAG contrast failure (~1.23:1) on CTA fill buttons by also pinning the background to `surface.on-dark-card`, ensuring readable text in both rest and hover states - Recompiled `assets/css/animations.css` via `npm run build:css` - Confirmed 2 other flagged findings were already resolved by the previous review round; skipped 1 low-value nitpick per CodeRabbit's own priority rating
Status update — merging, minor polish to follow separatelyThese 4 CTA patterns are solid and ready to be added to the theme. There are a few small, known cosmetic issues remaining (occasional "Attempt Recovery" edge cases, some icon/logo rendering inconsistencies, and a couple of hover states that aren't fully polished) — these have taken a disproportionate amount of time to chase down fully, so rather than block this PR further, we're merging now and will pick these up in a focused follow-up pass. @ZaredRogers Could you please kindly review this PR and the patterns for me before I merge. |
2 participants
Summary
patterns/cta/:cta-consultation-band(dark gradient hero-style band),cta-consultation-inline(compact inline card with accent border),cta-consultation-strip(glass-panel horizontal strip),cta-consultation-reassurance(two-column card with a reassurance checklist).LightSpeedWP-Design-System, mapping every colour to the closest existing semantic token intheme.json/styles/dark.jsonrather than importing raw Figma hex values.styles/sections/cta/cta-inline-card.json, for the inline pattern's fixed-dark card shell.surface.band-start/end,surface.on-dark-card,text.on-dark,text.on-dark-muted) to boththeme.jsonandstyles/dark.json— needed because these patterns are deliberately dark regardless of the site's light/dark style variation, and no existing token represented "always-dark surface / always-light text" without breaking contrast in the opposite mode.assets/icons/(check,chat,star,phone,arrow-right), rendered inline via<!-- wp:html -->blocks rather than theoutermost/icon-blockplugin.Why not
outermost/icon-blockInvestigated directly against the plugin's installed v2.0.0 source: it only bakes real SVG markup when
iconNamematches its own bundled icon library (WordPress core + social icons — no Phosphor set), and self-closing authoring without a resolved icon produces a mismatch that WordPress's editor flags as "Attempt Recovery." None of the icon names this design needed (chat,star,phone, etc.) exist in that library. Switched to inline SVG viawp:htmlblocks instead, which sidesteps both that validation mismatch and WordPress's stripping of raw<svg>tags in normal block content.Button hover fixes
Found and fixed three hover-state bugs introduced while building these patterns:
text.on-darkfor the three affected buttons (_button-motion.scss, rebuilt vianpm run build:css).Known follow-ups (not in scope for this PR)
thank-you-consultation.phpand the 3 card patterns (card-feature,card-services,card-solutions) use the sameoutermost/icon-blockapproach with icon names that don't resolve in the installed plugin (e.g.check,users,lightbulb,buildings) — same root cause as above, pre-existing, not touched here.fontSizeslugs (x-small,small,medium) that silently fall back to inherited size — this theme's registered presets are numeric (100–900) only. Not a validation error, just a quiet cosmetic gap. Flagged, not fixed, to keep this PR scoped to LS-1216.Test plan
php -lpasses on all 4 new pattern filesnpm run patterns:escape— no escaping issuesnpm run security:scan— passednpm run lint:json— all JSON validtheme.jsonandstyles/dark.jsonassets/css/animations.cssre-verified againstsrc/scsssource (no drift)Linear: LS-1216
Summary by CodeRabbit