-
+
+
@@ -52,7 +52,7 @@
-
+
diff --git a/patterns/sections/phase-services-in-phase.php b/patterns/sections/phase-services-in-phase.php
index 9d6ff5f..248ba09 100644
--- a/patterns/sections/phase-services-in-phase.php
+++ b/patterns/sections/phase-services-in-phase.php
@@ -5,30 +5,15 @@
* Categories: featured
* Block Types: core/pattern
* Description: Shared "Services in the [Phase] phase" section for all six lifecycle phase pages.
- * Unlike the other phase sections, this one needs no per-page copy edits at all: it detects the
- * current page by slug (same technique as phase-journey-nav.php) and renders only that phase's
- * service cards from the single $ls_phase_services_by_phase map below, whose labels/descriptions/
- * URLs/icons are kept in sync with the master list in services-service-tiles.php. Each card reuses
- * the shared is-style-card-service-tile shell (background/border/radius/padding — not overridden
- * here, since that style is also used by ~16 other patterns sitewide) and the shared
- * is-style-link-arrow-accent CTA treatment, but does NOT reuse the shared ls-icon-well-brand icon
- * well: that class is a fixed, non-phase colour used elsewhere, so this pattern renders its own
- * smaller, phase-accented circular icon well locally instead (same border/radius/colour-mix
- * technique already used by phase-hero.php's own badge). Cards render in a left-aligned flex row
- * (layout.selfStretch:"fixed" per card, the native WP mechanism also used by
- * phase-journey-nav.php's label/items split) rather than core/columns, since a single service
- * (e.g. Discover, which has exactly one) would otherwise stretch a lone core/column to the row's
- * full width. Main heading uses H3 (not H2) to close a pre-existing H2→H4 heading-level skip on
- * this section (H2 eyebrow-adjacent heading straight to H4 card titles) rather than only to
- * shrink it visually — this section's own explicit fontSize/level attributes are local to this
- * file only; no shared heading style exists sitewide to avoid touching. The CTA link's phase
- * accent is set via src/scss/structural/phase-services-in-phase.scss, scoped by the
- * page-slug-{phase} body class (see inc/phase-page-body-class.php) rather than an inline custom
- * property, for the same block-validation reason documented in phase-journey-nav.scss.
- *
- * IMPORTANT — insert this as a live reference, not a flattened copy: like phase-journey-nav.php,
- * the phase-detection below only re-evaluates per request if this stays a live
- * `` reference block.
+ * The section shell below is static and phase-agnostic; the phase-dependent heading and service
+ * cards are rendered by the ls-theme/phase-services dynamic block (see
+ * blocks/phase-services/render.php) — CodeRabbit's requested fix (PR #64): that block's render.php
+ * holds the phase → services map (labels/descriptions/URLs/icons, kept in sync with the master
+ * list in services-service-tiles.php), reads the current page via block context rather than
+ * get_queried_object(), and re-runs on every real request regardless of whether this surrounding
+ * pattern stays a live `wp:pattern` reference or gets flattened by the editor — a dynamic block's
+ * render callback isn't affected by pattern flattening the way PHP baked directly into a pattern's
+ * own stored content is.
* Keywords: phase, discover, create, build, launch, grow, evolve, services, cards, section
* Viewport Width: 1280
* Inserter: true
@@ -36,181 +21,9 @@
* @package ls-theme
*/
-$ls_phase_services_by_phase = array(
- 'discover' => array(
- array(
- 'label' => __( 'Discovery', 'ls-theme' ),
- 'description' => __( 'Stakeholder workshops, audits, scoping and feasibility — the evidence layer that comes before design or build.', 'ls-theme' ),
- 'url' => '/services/discovery/',
- 'icon' => 'search',
- ),
- ),
- 'create' => array(
- array(
- 'label' => __( 'Content', 'ls-theme' ),
- 'description' => __( 'Content modelling, editorial workflow and governance that holds up at scale.', 'ls-theme' ),
- 'url' => '/services/content/',
- 'icon' => 'file-text',
- ),
- array(
- 'label' => __( 'Design', 'ls-theme' ),
- 'description' => __( 'Design systems, accessible patterns and Figma→WordPress parity. Already a deeper page.', 'ls-theme' ),
- 'url' => '/services/design/',
- 'icon' => 'paint-brush',
- ),
- ),
- 'build' => array(
- array(
- 'label' => __( 'Development', 'ls-theme' ),
- 'description' => __( 'Block themes, WooCommerce, integrations and platform refactors built for long-term health.', 'ls-theme' ),
- 'url' => '/services/development/',
- 'icon' => 'code',
- ),
- array(
- 'label' => __( 'Migrations', 'ls-theme' ),
- 'description' => __( 'Audits, mapping and redirects that take legacy platforms apart without losing traction.', 'ls-theme' ),
- 'url' => '/services/migrations/',
- 'icon' => 'arrows-left-right',
- ),
- ),
- 'launch' => array(
- array(
- 'label' => __( 'Hosting', 'ls-theme' ),
- 'description' => __( 'Managed environments that match the platform, the workflows and the support model around it.', 'ls-theme' ),
- 'url' => '/services/hosting/',
- 'icon' => 'cloud',
- ),
- array(
- 'label' => __( 'Performance', 'ls-theme' ),
- 'description' => __( 'Core Web Vitals, caching, query review and template optimisation against real production data.', 'ls-theme' ),
- 'url' => '/services/performance/',
- 'icon' => 'gauge',
- ),
- array(
- 'label' => __( 'Security', 'ls-theme' ),
- 'description' => __( 'Audits, hardening guidance, monitoring and recovery planning that reduces risk before incidents.', 'ls-theme' ),
- 'url' => '/services/security/',
- 'icon' => 'shield',
- ),
- array(
- 'label' => __( 'Training', 'ls-theme' ),
- 'description' => __( 'Role-specific training and reference materials that move teams from dependency to confidence.', 'ls-theme' ),
- 'url' => '/services/training/',
- 'icon' => 'graduation-cap',
- ),
- ),
- 'grow' => array(
- array(
- 'label' => __( 'Support', 'ls-theme' ),
- 'description' => __( 'Maintenance, incident response and quiet improvement so platforms keep getting easier to run.', 'ls-theme' ),
- 'url' => '/services/support/',
- 'icon' => 'lifebuoy',
- ),
- array(
- 'label' => __( 'SEO', 'ls-theme' ),
- 'description' => __( 'Technical SEO, internal linking, schema and the publishing discipline that supports visibility.', 'ls-theme' ),
- 'url' => '/services/seo/',
- 'icon' => 'chart-line-up',
- ),
- array(
- 'label' => __( 'Accessibility', 'ls-theme' ),
- 'description' => __( 'Audits, remediation and the semantic structure that helps WCAG 2.2 AA stick over time.', 'ls-theme' ),
- 'url' => '/services/accessibility/',
- 'icon' => 'wheelchair',
- ),
- array(
- 'label' => __( 'Email marketing', 'ls-theme' ),
- 'description' => __( 'Journey planning, consent flows and the connection between email and the WordPress platform behind it.', 'ls-theme' ),
- 'url' => '/services/email-marketing/',
- 'icon' => 'envelope',
- ),
- ),
- 'evolve' => array(
- array(
- 'label' => __( 'AI', 'ls-theme' ),
- 'description' => __( 'AI-readiness reviews, governance and workflow planning — practical use without messy adoption.', 'ls-theme' ),
- 'url' => '/services/ai/',
- 'icon' => 'special-interests',
- ),
- ),
-);
-
-$ls_current_phase_slug = '';
-$ls_services_queried_obj = get_queried_object();
-if ( $ls_services_queried_obj instanceof WP_Post ) {
- $ls_current_phase_slug = $ls_services_queried_obj->post_name;
-}
-
-$ls_phase_labels = array(
- 'discover' => __( 'Discover', 'ls-theme' ),
- 'create' => __( 'Create', 'ls-theme' ),
- 'build' => __( 'Build', 'ls-theme' ),
- 'launch' => __( 'Launch', 'ls-theme' ),
- 'grow' => __( 'Grow', 'ls-theme' ),
- 'evolve' => __( 'Evolve', 'ls-theme' ),
-);
-
-$ls_active_phase_label = isset( $ls_phase_labels[ $ls_current_phase_slug ] ) ? $ls_phase_labels[ $ls_current_phase_slug ] : __( 'Discover', 'ls-theme' );
-$ls_active_services = isset( $ls_phase_services_by_phase[ $ls_current_phase_slug ] ) ? $ls_phase_services_by_phase[ $ls_current_phase_slug ] : $ls_phase_services_by_phase['discover'];
-$ls_service_rows = array_chunk( $ls_active_services, 4 );
-$ls_active_phase_slug = isset( $ls_phase_services_by_phase[ $ls_current_phase_slug ] ) ? $ls_current_phase_slug : 'discover';
-$ls_phase_accent = 'var(--wp--custom--color--phase--' . $ls_active_phase_slug . ')';
?>
-
-
-
-
-
- $ls_row ) : ?>
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/src/scss/structural/button-phase.scss b/src/scss/structural/button-phase.scss
index a6f52f0..7d3319e 100644
--- a/src/scss/structural/button-phase.scss
+++ b/src/scss/structural/button-phase.scss
@@ -52,7 +52,7 @@
aspect-ratio: 1;
transform: translate(-50%, -50%) scale(0);
border-radius: 50%;
- background-color: var(--wp--custom--color--phase--discover-on-dark);
+ background-color: var(--ls-phase-accent-on-dark);
opacity: 0;
z-index: -1;
}
diff --git a/src/scss/structural/phase-hero.scss b/src/scss/structural/phase-hero.scss
index 6b6b43f..dc87cf5 100644
--- a/src/scss/structural/phase-hero.scss
+++ b/src/scss/structural/phase-hero.scss
@@ -10,10 +10,8 @@
* blog-hero.scss: an inline `style="background:..."` always wins the cascade over any external
* stylesheet's background-image, so the two can't coexist on this block.
*
- * Hardwired to phase.discover-on-dark rather than a CSS custom property — this file only needs to
- * serve the Discover hero today. When Create/Build/Launch/Grow/Evolve heroes are built, either
- * duplicate this file per phase (fast, proven-safe) or generalise it to a shared --ls-phase-accent
- * custom property at that point, once it's clear which is actually needed — not guessed now.
+ * The radial glow reads var(--ls-phase-accent-on-dark), set per phase by the page-slug-{phase} body
+ * class in phase-journey-nav.scss, so it follows whichever phase page the hero is on.
*/
.ls-phase-hero {
position: relative;
@@ -21,7 +19,7 @@
background-image:
linear-gradient(color-mix(in srgb, var(--wp--custom--color--text--on-dark) 2%, transparent) 1px, transparent 1px),
linear-gradient(90deg, color-mix(in srgb, var(--wp--custom--color--text--on-dark) 2%, transparent) 1px, transparent 1px),
- radial-gradient(60% 50% at 50% 22%, color-mix(in srgb, var(--wp--custom--color--phase--discover-on-dark) 14%, transparent) 0%, transparent 70%),
+ radial-gradient(60% 50% at 50% 22%, color-mix(in srgb, var(--ls-phase-accent-on-dark) 14%, transparent) 0%, transparent 70%),
linear-gradient(158deg, var(--wp--custom--color--surface--band-start) 0%, var(--wp--custom--color--surface--band-end) 100%);
background-position: 0 0, 0 0, 0 0, 0 0;
background-repeat: repeat, repeat, no-repeat, no-repeat;
@@ -29,21 +27,24 @@
}
/*
- * Breadcrumb (Discover Hero): reuses the existing .ls-breadcrumbs-on-dark class name from
+ * Breadcrumb (phase hero): reuses the existing .ls-breadcrumbs-on-dark class name from
* blog-hero.php, but NOT its `a` colour fix — that rule lives in blog-hero.scss/blog-hero.css,
* which is only enqueued on the Blog archive template (see the is_page_template() condition in
* inc/animations.php's ls_theme_get_effect_styles()), so it never loads on this page at all. Left
* unstyled, "Home" fell back to the sitewide global link colour (bright cyan in the active dark
* style variation) instead of a muted grey. The fix below is scoped to `.ls-phase-hero` — this
* file's own already-page-scoped selector — so it can never affect the Blog archive's identical
- * class name or any other page.
+ * class name or any other page. The current-page crumb reads var(--ls-phase-accent-on-dark)
+ * (src/scss/structural/phase-journey-nav.scss), set per phase by the page-slug-{phase} body class,
+ * rather than the single phase.discover-on-dark token this was originally hardwired to when only
+ * Discover existed.
*/
.ls-phase-hero .ls-breadcrumbs-on-dark a {
color: var(--wp--custom--color--text--on-dark-muted);
}
.ls-phase-hero .breadcrumb_last {
- color: var(--wp--custom--color--phase--discover-on-dark);
+ color: var(--ls-phase-accent-on-dark);
}
/*
diff --git a/src/scss/structural/phase-journey-nav.scss b/src/scss/structural/phase-journey-nav.scss
index a8535bc..7160c90 100644
--- a/src/scss/structural/phase-journey-nav.scss
+++ b/src/scss/structural/phase-journey-nav.scss
@@ -83,6 +83,19 @@
* `.is-active`-style rule) because the selector needs both the current page's body class AND the
* matching step's own modifier class to agree on which one item lights up.
*/
+// JSON limitation: a page-level custom property keyed off a conditional body class has no
+// theme.json equivalent — see AGENTS.md Theme-First Approach. `--ls-phase-accent-on-dark` is the
+// shared source of truth for every permanently-dark, phase-coloured element sitewide (phase-hero's
+// pill/breadcrumb, button-phase-primary/outline) so none of them need to hardcode a single phase's
+// colour the way they did before only Discover existed. Same fallback as this file's own
+// --ls-phase-item-accent above: falls back from a phase's "-on-dark" token (only
+// phase.discover-on-dark exists yet) to the phase's normal token.
+@each $ls-phase in discover, create, build, launch, grow, evolve {
+ body.page-slug-#{$ls-phase} {
+ --ls-phase-accent-on-dark: var(--wp--custom--color--phase--#{$ls-phase}-on-dark, var(--wp--custom--color--phase--#{$ls-phase}));
+ }
+}
+
@each $ls-phase in discover, create, build, launch, grow, evolve {
body.page-slug-#{$ls-phase} .ls-phase-journey-nav__step--#{$ls-phase} {
.ls-phase-journey-nav__link a {
diff --git a/styles/blocks/buttons/button-phase-outline.json b/styles/blocks/buttons/button-phase-outline.json
index a6076e5..a34f119 100644
--- a/styles/blocks/buttons/button-phase-outline.json
+++ b/styles/blocks/buttons/button-phase-outline.json
@@ -6,14 +6,14 @@
"blockTypes": [
"core/button"
],
- "description": "Outline pill CTA pairing Button - Phase Primary on the phase-page heroes and CTAs. Uses the exact same horizontal padding token (spacing|40) as Button - Phase Primary so both buttons share one spacing system — this one simply reads wider because its label is longer, not because of a mismatched padding scale. Rest state: transparent background, thin phase-colour border, phase-colour text, no arrow glyph — deliberately arrow-free (this is the secondary/lower-emphasis action; only Primary carries an arrow). On hover: a centre-out circle reveal (adapted from the 'Flow Button' component, https://21st.dev/@xubohuah/components/flow-button) fills the button, the border fades to transparent, text flips to a contrasting colour, and the corners tighten slightly — none of that depends on an arrow, so it works cleanly without one. All hover-dependent CSS lives in src/scss/animations/_button-motion.scss, since a bare :hover in a style JSON's css field is silently stripped by WordPress. Same on-dark-constant reasoning and 'hardwired to Discover for now' note as button-phase-primary.json.",
+ "description": "Outline pill CTA pairing Button - Phase Primary on the phase-page heroes and CTAs. Uses the exact same horizontal padding token (spacing|40) as Button - Phase Primary so both buttons share one spacing system — this one simply reads wider because its label is longer, not because of a mismatched padding scale. Rest state: transparent background, thin phase-colour border, phase-colour text, no arrow glyph — deliberately arrow-free (this is the secondary/lower-emphasis action; only Primary carries an arrow). On hover: a centre-out circle reveal (adapted from the 'Flow Button' component, https://21st.dev/@xubohuah/components/flow-button) fills the button, the border fades to transparent, text flips to a contrasting colour, and the corners tighten slightly — none of that depends on an arrow, so it works cleanly without one. All hover-dependent CSS lives in src/scss/animations/_button-motion.scss, since a bare :hover in a style JSON's css field is silently stripped by WordPress. Same on-dark-constant reasoning and var(--ls-phase-accent-on-dark) source as button-phase-primary.json.",
"styles": {
"color": {
"background": "transparent",
- "text": "var:custom|color|phase|discover-on-dark"
+ "text": "var(--ls-phase-accent-on-dark)"
},
"border": {
- "color": "var:custom|color|phase|discover-on-dark",
+ "color": "var(--ls-phase-accent-on-dark)",
"radius": "var:preset|border-radius|500",
"style": "solid",
"width": "1px"
diff --git a/styles/blocks/buttons/button-phase-primary.json b/styles/blocks/buttons/button-phase-primary.json
index a7ec53a..e2dd3e3 100644
--- a/styles/blocks/buttons/button-phase-primary.json
+++ b/styles/blocks/buttons/button-phase-primary.json
@@ -6,10 +6,10 @@
"blockTypes": [
"core/button"
],
- "description": "Pill CTA for the phase-page heroes and CTAs (Discover, and eventually Create/Build/Launch/Grow/Evolve). Background/text stay constant across the light/dark style variation toggle, matching the on-dark token family — the hero itself is permanently dark, so this can't use the sitewide button.fill tokens, which flip colour with the variation. Stays filled at all times (approved design decision). Uses the exact same horizontal padding token (spacing|40) as Button - Phase Outline so both buttons share one spacing system and only their content — not an artificial equal-width rule — determines each one's width. The arrow is a normal inline flex item after the label (gap-based spacing, not an absolutely-positioned overlay) with a small hover nudge; earlier attempts at an absolutely-positioned enter/exit arrow swap needed ever-larger padding just to keep the arrow clear of the text and were reverted for exactly that reason — do not reintroduce that approach. Border-radius tightens slightly on hover, matching Button - Phase Outline's own hover treatment. Rest state (colour, shape, arrow glyph) lives here; the hover states live in src/scss/animations/_button-motion.scss, since a bare :hover in a style JSON's css field is silently stripped by WordPress. Currently hardwired to phase.discover-on-dark rather than a CSS custom property — narrowed to what Discover actually needs now; generalise to a shared --ls-button-phase-accent custom property (set by whichever hero uses it) once a second phase page needs this same style, rather than guessing at that shape today.",
+ "description": "Pill CTA for the phase-page heroes and CTAs (Discover, Create, Build, Launch, Grow, Evolve). Background/text stay constant across the light/dark style variation toggle, matching the on-dark token family — the hero itself is permanently dark, so this can't use the sitewide button.fill tokens, which flip colour with the variation. Stays filled at all times (approved design decision). Uses the exact same horizontal padding token (spacing|40) as Button - Phase Outline so both buttons share one spacing system and only their content — not an artificial equal-width rule — determines each one's width. The arrow is a normal inline flex item after the label (gap-based spacing, not an absolutely-positioned overlay) with a small hover nudge; earlier attempts at an absolutely-positioned enter/exit arrow swap needed ever-larger padding just to keep the arrow clear of the text and were reverted for exactly that reason — do not reintroduce that approach. Border-radius tightens slightly on hover, matching Button - Phase Outline's own hover treatment. Rest state (colour, shape, arrow glyph) lives here; the hover states live in src/scss/animations/_button-motion.scss, since a bare :hover in a style JSON's css field is silently stripped by WordPress. Background reads var(--ls-phase-accent-on-dark) (src/scss/structural/phase-journey-nav.scss), set per phase by the page-slug-{phase} body class, rather than the single phase.discover-on-dark token this was originally hardwired to when only Discover existed.",
"styles": {
"color": {
- "background": "var:custom|color|phase|discover-on-dark",
+ "background": "var(--ls-phase-accent-on-dark)",
"text": "var:custom|color|text|on-light"
},
"border": {