Fix editor validation errors and Icon block attributes on Services patterns (LS-4207)

CHANGELOG.md

@@ -7,6 +7,18 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ---
 
+## [Unreleased] — Fix editor validation errors and Icon block attributes on Services patterns (LS-4207)
+
+### Fixed
+
+- `patterns/sections/services-linked-decisions.php`, `patterns/sections/services-service-clusters.php`: added the missing `has-border-color` class to the `ls-process-pill` and `ls-cluster-tag` wrapper groups. Both blocks set an inline border colour via a custom JSON style attribute, but WordPress's border block support always expects a `has-border-color` class on the wrapper whenever a border colour is set. The hand-authored static HTML never included it, so the editor's re-derived expected markup never matched the stored HTML, permanently flagging these blocks as "Block contains unexpected or invalid content" with an "Attempt Recovery" prompt in the Site Editor.
+- `patterns/cards/section-card-services.php`, `patterns/sections/services-service-tiles.php`: moved the Icon block's width from an unsupported top-level `"width"` JSON attribute to the correct `"style":{"dimensions":{"width":...}}` path, matching `core/icon`'s actual schema. The old attribute was silently dropped, leaving the icon unsized.
+- `patterns/cards/section-card-services.php`: fixed icon slug `lightspeed/rocket-launch` to `lightspeed/rocket` — `rocket-launch.svg` does not exist in the `ls-plugin` icon library, so the icon failed to render entirely.
+
+([#60](https://github.com/lightspeedwp/ls-theme/pull/60))
+
+---
+
 ## [Unreleased] — Fix mobile menu: restore dropdown links, remove Systems, refine spacing (LS-3222)
 
 ### Fixed

patterns/cards/section-card-services.php

@@ -17,7 +17,7 @@
 <article class="wp-block-group is-style-card-services">
 	<!-- wp:group {"className":"ls-card__icon-shell","style":{"spacing":{"padding":"var:preset|spacing|20"}},"layout":{"type":"flex","justifyContent":"center","verticalAlignment":"center","flexWrap":"nowrap"}} -->
 	<div class="wp-block-group ls-card__icon-shell" style="padding:var(--wp--preset--spacing--20)">
-		<!-- wp:icon {"icon":"lightspeed/rocket-launch","width":"34px"} /-->
+		<!-- wp:icon {"icon":"lightspeed/rocket","style":{"dimensions":{"width":"34px"}}} /-->
 	</div>
 	<!-- /wp:group -->
 

patterns/sections/services-linked-decisions.php

@@ -99,7 +99,7 @@
 						?>
 
 					<!-- wp:group {"className":"<?php echo esc_attr( $ls_pill_class ); ?>","style":{"border":{"color":"var:custom|color|border|card","radius":"var:preset|border-radius|500","style":"solid","width":"1px"},"color":{"background":"var:custom|color|surface|canvas"},"spacing":{"padding":{"top":"var:preset|spacing|20","right":"var:preset|spacing|30","bottom":"var:preset|spacing|20","left":"var:preset|spacing|20"},"blockGap":"var:preset|spacing|10"}},"layout":{"type":"flex","flexWrap":"nowrap","verticalAlignment":"center"}} -->
-					<div class="wp-block-group <?php echo esc_attr( $ls_pill_class ); ?> has-background" style="border-color:var(--wp--custom--color--border--card);border-style:solid;border-width:1px;border-radius:var(--wp--preset--border-radius--500);background-color:var(--wp--custom--color--surface--canvas);padding-top:var(--wp--preset--spacing--20);padding-right:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--20);padding-left:var(--wp--preset--spacing--20)">
+					<div class="wp-block-group <?php echo esc_attr( $ls_pill_class ); ?> has-border-color has-background" style="border-color:var(--wp--custom--color--border--card);border-style:solid;border-width:1px;border-radius:var(--wp--preset--border-radius--500);background-color:var(--wp--custom--color--surface--canvas);padding-top:var(--wp--preset--spacing--20);padding-right:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--20);padding-left:var(--wp--preset--spacing--20)">
 						<!-- wp:paragraph {"className":"ls-process-pill__badge","style":{"typography":{"fontFamily":"var:preset|font-family|monospace","letterSpacing":"var:custom|typography|letter-spacing|wide"},"color":{"text":"<?php echo esc_attr( $ls_step_phase_color ); ?>"},"border":{"radius":"var:preset|border-radius|200","style":"solid","width":"1px"},"spacing":{"padding":{"top":"var:preset|spacing|5","right":"var:preset|spacing|10","bottom":"var:preset|spacing|5","left":"var:preset|spacing|10"}}},"fontSize":"100"} -->
 						<p class="has-text-color has-100-font-size ls-process-pill__badge" style="color:<?php echo esc_attr( $ls_step_phase_color ); ?>;border-radius:var(--wp--preset--border-radius--200);border-style:solid;border-width:1px;padding-top:var(--wp--preset--spacing--5);padding-right:var(--wp--preset--spacing--10);padding-bottom:var(--wp--preset--spacing--5);padding-left:var(--wp--preset--spacing--10);font-family:var(--wp--preset--font-family--monospace);letter-spacing:var(--wp--custom--typography--letter-spacing--wide)"><?php echo esc_html( $ls_step['index'] ); ?></p>
 						<!-- /wp:paragraph -->

patterns/sections/services-service-clusters.php

@@ -133,7 +133,7 @@
 			<?php foreach ( $ls_cluster['tags'] as $ls_tag_key ) : ?>
 
 			<!-- wp:group {"className":"ls-cluster-tag","style":{"border":{"color":"var:custom|color|border|card","radius":"var:preset|border-radius|500","style":"solid","width":"1px"},"color":{"background":"var:custom|color|surface|canvas"},"spacing":{"padding":{"top":"var:preset|spacing|5","right":"var:preset|spacing|10","bottom":"var:preset|spacing|5","left":"var:preset|spacing|10"},"blockGap":"var:preset|spacing|5"}},"layout":{"type":"flex","flexWrap":"nowrap","verticalAlignment":"center"}} -->
-			<div class="wp-block-group ls-cluster-tag has-background" style="border-color:var(--wp--custom--color--border--card);border-style:solid;border-width:1px;border-radius:var(--wp--preset--border-radius--500);background-color:var(--wp--custom--color--surface--canvas);padding-top:var(--wp--preset--spacing--5);padding-right:var(--wp--preset--spacing--10);padding-bottom:var(--wp--preset--spacing--5);padding-left:var(--wp--preset--spacing--10)">
+			<div class="wp-block-group ls-cluster-tag has-border-color has-background" style="border-color:var(--wp--custom--color--border--card);border-style:solid;border-width:1px;border-radius:var(--wp--preset--border-radius--500);background-color:var(--wp--custom--color--surface--canvas);padding-top:var(--wp--preset--spacing--5);padding-right:var(--wp--preset--spacing--10);padding-bottom:var(--wp--preset--spacing--5);padding-left:var(--wp--preset--spacing--10)">
 				<!-- wp:icon {"icon":"lightspeed/<?php echo esc_attr( $ls_service_icons[ $ls_tag_key ] ); ?>","className":"has-text-color","style":{"color":{"text":"var(--wp--custom--color--text--subtle)"},"dimensions":{"width":"13px"}}} /-->
 
 				<!-- wp:paragraph {"style":{"typography":{"fontWeight":"var:custom|typography|font-weight|semibold"}},"fontSize":"100"} -->

patterns/sections/services-service-tiles.php

@@ -137,7 +137,7 @@
 	<article class="wp-block-group is-style-card-service-tile" style="min-height:100%">
 		<!-- wp:group {"className":"ls-icon-well-brand"} -->
 		<div class="wp-block-group ls-icon-well-brand">
-			<!-- wp:icon {"icon":"lightspeed/<?php echo esc_attr( $ls_tile['icon'] ); ?>","width":"18px"} /-->
+			<!-- wp:icon {"icon":"lightspeed/<?php echo esc_attr( $ls_tile['icon'] ); ?>","style":{"dimensions":{"width":"18px"}}} /-->
 		</div>
 		<!-- /wp:group -->
 

tests/helpers/browser-errors.ts

@@ -16,17 +16,41 @@ function isAllowed(message: string): boolean {
 	return ALLOWED_ERROR_PATTERNS.some((pattern) => pattern.test(message));
 }
 
+// Chromium logs this itself (independent of any theme JS) whenever the
+// top-level document's own response is >= 400 — e.g. loading the 404
+// template. network-errors.ts already exempts the main-frame navigation
+// response for the same reason (a route can legitimately return a non-2xx
+// status); this mirrors that exemption for the console-side equivalent.
+// Tracked via the actual main-frame navigation response's status (reset on
+// every navigation) rather than a URL string comparison — a subresource can
+// legitimately request the same URL as the page, which a URL-based check
+// would wrongly treat as the page's own status and swallow.
+function isMainFrameNavigationResponse(response: import('@playwright/test').Response, page: Page): boolean {
+	const request = response.request();
+	return request.isNavigationRequest() && request.frame() === page.mainFrame();
+}
+
 /**
  * Installs console/pageerror listeners on `page` and returns a collector.
  * Must be called before navigation to catch errors from the initial load.
  */
 export function watchBrowserErrors(page: Page): BrowserErrorCollector {
 	const collector: BrowserErrorCollector = { consoleErrors: [], pageErrors: [] };
+	let expectedStatusErrorPrefix: string | null = null;
+
+	page.on('response', (response) => {
+		if (!isMainFrameNavigationResponse(response, page)) return;
+		expectedStatusErrorPrefix =
+			response.status() >= 400
+				? `Failed to load resource: the server responded with a status of ${response.status()}`
+				: null;
+	});
 
 	page.on('console', (message) => {
-		if (message.type() === 'error' && !isAllowed(message.text())) {
-			collector.consoleErrors.push(message.text());
-		}
+		if (message.type() !== 'error') return;
+		if (isAllowed(message.text())) return;
+		if (expectedStatusErrorPrefix && message.text().startsWith(expectedStatusErrorPrefix)) return;
+		collector.consoleErrors.push(message.text());
 	});
 
 	page.on('pageerror', (error) => {