Add flatten-proof phase colour and a phase-services dynamic block (LSA-132)

CHANGELOG.md

@@ -7,6 +7,17 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ---
 
+## [Unreleased] — Add flatten-proof phase colour and a phase-services dynamic block (LS-4179)
+
+### Fixed
+
+- Phase page colour (hero buttons, breadcrumb "current page" text) no longer goes black/white when a phase section's pattern is flattened by the block editor, and no longer stays hardcoded to Discover's green on the other five phase pages. Added `--ls-phase-accent`/`--ls-phase-accent-on-dark` custom properties (`src/scss/structural/phase-journey-nav.scss`), set per phase via the existing `page-slug-{phase}` body class, so colour is resolved by CSS on every request instead of being computed in PHP or baked into a pattern's stored content. `styles/blocks/buttons/button-phase-primary.json`, `button-phase-outline.json`, `src/scss/structural/button-phase.scss`, and `src/scss/structural/phase-hero.scss` were hardwired directly to Discover's token — swapped all four to the new shared property.
+- `patterns/sections/phase-services-in-phase.php` selected its "Services in this phase" cards via `get_queried_object()` inside the pattern's own PHP, which only re-evaluates while the pattern stays a live `wp:pattern` reference, falling back to Discover's services once flattened. Moved that selection into a new `ls-theme/phase-services` dynamic block (`blocks/phase-services/`), which resolves the current phase from block context at real render time and isn't affected by pattern flattening.
+
+([#72](https://github.com/lightspeedwp/ls-theme/pull/72))
+
+---
+
 ## [Unreleased] — Refine Phase Where To Go Next section to match prototype (LS-4179)
 
 ### Changed

blocks/phase-services/block.json

@@ -0,0 +1,11 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 3,
+	"name": "ls-theme/phase-services",
+	"title": "Phase Services",
+	"category": "text",
+	"description": "Renders the current lifecycle phase page's \"Services in this phase\" heading and service cards. Implements CodeRabbit's request-time rendering fix for patterns/sections/phase-services-in-phase.php: PHP phase-detection baked into a pattern's own content only re-evaluates while the pattern stays a live wp:pattern reference, and is lost if WordPress flattens it, so the phase-dependent selection and markup now live in this dynamic block's render.php instead, which runs at real request time regardless of how the surrounding pattern is stored.",
+	"textdomain": "ls-theme",
+	"usesContext": [ "postId" ],
+	"render": "file:./render.php"
+}

blocks/phase-services/index.js

@@ -0,0 +1,34 @@
+/**
+ * Editor-side registration for ls-theme/phase-services.
+ *
+ * The PHP registration in inc/blocks.php (register_block_type against this folder's block.json)
+ * only tells WordPress how to render this block on the front end — the block editor's own JS
+ * registry is entirely separate, and needs its own wp.blocks.registerBlockType() call by the same
+ * name or it shows "Your site doesn't include support for this block" and renders nothing in the
+ * canvas. ServerSideRender is used for `edit` (rather than reimplementing the markup in JS) so the
+ * editor preview always matches render.php's actual output, including the current phase's real
+ * content and colour — no separate editor-only representation to keep in sync.
+ *
+ * Plain global-based script (no build step), per AGENTS.md "Avoid inventing a build pipeline".
+ *
+ * @package ls-theme
+ */
+( function ( blocks, element, serverSideRender ) {
+	var el = element.createElement;
+
+	blocks.registerBlockType( 'ls-theme/phase-services', {
+		title: 'Phase Services',
+		category: 'text',
+		usesContext: [ 'postId' ],
+		description: 'Renders the current phase page\'s "Services in this phase" heading and service cards.',
+		edit: function ( props ) {
+			return el( serverSideRender, {
+				block: 'ls-theme/phase-services',
+				urlQueryArgs: { post_id: props.context ? props.context.postId : undefined },
+			} );
+		},
+		save: function () {
+			return null;
+		},
+	} );
+} )( window.wp.blocks, window.wp.element, window.wp.serverSideRender );