Fix: interactivity-router preserve dynamically-injected and deferred stylesheets across navigations

packages/e2e-tests/plugins/interactive-blocks/router-dynamic-styles/block.json

@@ -0,0 +1,14 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 3,
+	"name": "test/router-dynamic-styles",
+	"title": "Test Router Dynamic Styles",
+	"category": "text",
+	"description": "",
+	"supports": {
+		"interactivity": true
+	},
+	"textdomain": "e2e-interactivity",
+	"viewScriptModule": "file:./view.js",
+	"render": "file:./render.php"
+}

packages/e2e-tests/plugins/interactive-blocks/router-dynamic-styles/deferred-style.css

@@ -0,0 +1,14 @@
+/**
+ * Deferred stylesheet for the test/router-dynamic-styles block.
+ *
+ * Enqueued by render.php with media="not all" — the browser fetches the file
+ * but does not apply it until an iAPI store activates it by mutating
+ * link.media to "all" (see activateDeferredStyle action in view.js).
+ *
+ * The custom property lets the view script detect activation without relying
+ * on visual-style inspection: getComputedStyle(body) returns "--test-deferred-active: 1"
+ * only when this sheet is active (media matches AND sheet.disabled === false).
+ */
+body {
+	--test-deferred-active: 1;
+}

packages/e2e-tests/plugins/interactive-blocks/router-dynamic-styles/render.php

@@ -0,0 +1,108 @@
+<?php
+/**
+ * Test block render template for test/router-dynamic-styles.
+ *
+ * Provides deterministic style-scenario fixtures for two router bugs:
+ *
+ * Bug A — runtime-activated deferred stylesheets:
+ *   A <style id="test-router-deferred-style" media="not all"> element is
+ *   output server-side on every page request.
+ *   This mirrors the real WordPress pattern of wp_enqueue_style() with
+ *   media="not all". view.js finds it by id and the activateDeferredStyle
+ *   action sets element.media = "all".
+ *
+ *   Because the element is server-rendered it also appears in the fetched
+ *   page HTML during SPA navigation. normalizeMedia() maps "not all" → "all"
+ *   so the SCS algorithm matches the live activated element (media="all")
+ *   against the server-returned element (media="not all"), keeps it in
+ *   page.styles, and applyStyles() leaves it enabled.
+ *
+ *   No external CSS file is required — the declaration is inlined.
+ *
+ * Bug B — dynamically-injected plugin stylesheets:
+ *   view.js init() appends a <style> element with a stable id attribute,
+ *   simulating plugins like Complianz GDPR that bypass wp_enqueue_style().
+ *   The router must never disable it across any navigation path.
+ *
+ * Navigation links use data-wp-on--click="actions.navigate" to trigger
+ * iAPI router SPA navigation. Without this directive the plain <a> clicks
+ * would cause full page reloads, resetting all state and making the test
+ * unable to verify that styles survive navigation.
+ *
+ * Navigation links nav-to-a, nav-to-b and nav-to-c resolve sibling posts by title so
+ * the spec's addPostWithBlock( …, { alias } ) pattern works out of the box.
+ *
+ * @package gutenberg-test-interactive-blocks
+ */
+
+// Resolve sibling post URLs by alias (post title set by addPostWithBlock).
+$current_title = (string) get_the_title();
+$base_alias    = (string) preg_replace( '/-[a-z]$/', '', $current_title );
+
+$find_url = static function ( string $alias ): string {
+	$posts = get_posts(
+		array(
+			'post_type'      => 'post',
+			'post_status'    => 'publish',
+			'title'          => $alias,
+			'posts_per_page' => 1,
+			'no_found_rows'  => true,
+			'fields'         => 'ids',
+		)
+	);
+	return $posts ? (string) get_permalink( $posts[0] ) : '#';
+};
+
+$link_a = $find_url( $base_alias . '-a' );
+$link_b = $find_url( $base_alias . '-b' );
+$link_c = $find_url( $base_alias . '-c' );
+?>
+
+<!-- Bug A fixture: deferred style outside router region, survives navigation. -->
+<style id="test-router-deferred-style" media="not all">body { --test-deferred-active: 1; }</style>
+
+<div
+	data-wp-interactive="test/router-dynamic-styles"
+	data-wp-router-region="test-router-dynamic-styles"
+	<?php echo get_block_wrapper_attributes(); ?>
+>
+	<p>
+		Deferred style:
+		<span
+			data-testid="deferred-style-active"
+			data-wp-text="state.deferredStyleStatus"
+		>inactive</span>
+	</p>
+	<p>
+		Plugin style:
+		<span
+			data-testid="plugin-style-active"
+			data-wp-text="state.pluginStyleStatus"
+		>inactive</span>
+	</p>
+	<button
+		type="button"
+		data-testid="activate-deferred-style"
+		data-wp-on--click="actions.activateDeferredStyle"
+	>
+		Activate deferred style
+	</button>
+	<nav>
+		<a
+			data-testid="nav-to-a"
+			href="<?php echo esc_url( $link_a ); ?>"
+			data-wp-on--click="actions.navigate"
+		>Page A</a>
+		<a
+			data-testid="nav-to-b"
+			href="<?php echo esc_url( $link_b ); ?>"
+			data-wp-on--click="actions.navigate"
+		>Page B</a>
+		<a
+			data-testid="nav-to-c"
+			href="<?php echo esc_url( $link_c ); ?>"
+			data-wp-on--click="actions.navigate"
+		>Page C</a>
+	</nav>
+	<div data-wp-init="callbacks.init"></div>
+</div>

packages/e2e-tests/plugins/interactive-blocks/router-dynamic-styles/view.asset.php

@@ -0,0 +1,9 @@
+<?php return array(
+	'dependencies' => array(
+		'@wordpress/interactivity',
+		array(
+			'id'     => '@wordpress/interactivity-router',
+			'import' => 'dynamic',
+		),
+	),
+);

packages/e2e-tests/plugins/interactive-blocks/router-dynamic-styles/view.js

@@ -0,0 +1,103 @@
+/**
+ * WordPress dependencies
+ */
+import { store, getElement } from '@wordpress/interactivity';
+
+const PLUGIN_STYLE_ID = 'test-router-plugin-style';
+
+const { state } = store( 'test/router-dynamic-styles', {
+	state: {
+		/**
+		 * "active" | "inactive". Written by activateDeferredStyle() and
+		 * re-synchronised from the real DOM by init() on every SPA mount.
+		 *
+		 * Must be a plain reactive field, not a DOM getter: raw DOM reads are
+		 * not tracked by Preact's signal system, so a getter would be evaluated
+		 * once at hydration and never again, leaving the span stuck at "inactive".
+		 */
+		deferredStyleStatus: 'inactive',
+
+		/**
+		 * "active" | "inactive". Written by init() on every SPA mount.
+		 * Plain reactive field for the same reason as deferredStyleStatus.
+		 */
+		pluginStyleStatus: 'inactive',
+	},
+
+	actions: {
+		/**
+		 * Bug A fixture — activates the deferred stylesheet.
+		 *
+		 * Mutates media from "not all" to "all" on the inline style element, then
+		 * writes the reactive signal so data-wp-text re-renders immediately.
+		 */
+		activateDeferredStyle() {
+			const el = document.getElementById( 'test-router-deferred-style' );
+			if ( el ) {
+				el.media = 'all';
+				state.deferredStyleStatus = 'active';
+			}
+		},
+
+		/**
+		 * SPA navigation action — intercepts the anchor click and delegates to
+		 * the iAPI router's navigate() so the router performs a client-side
+		 * navigation instead of a full page reload.
+		 *
+		 * Without this, plain <a href="..."> links inside the router region
+		 * would cause a full page reload, resetting all reactive state and
+		 * making it impossible to verify that applyStyles() preserved the
+		 * activated stylesheet across navigation.
+		 *
+		 * Uses a generator function to yield the dynamic import.
+		 * actions.navigate() is called without yield (fire-and-forget),
+		 * matching the pattern used in full-page.ts.
+		 *
+		 * @param {MouseEvent} event The click event from data-wp-on--click.
+		 */
+		*navigate( event ) {
+			event.preventDefault();
+			const { ref } = getElement();
+			const { actions } = yield import(
+				'@wordpress/interactivity-router'
+			);
+			actions.navigate( ref.href );
+		},
+	},
+
+	callbacks: {
+		/**
+		 * Runs on every SPA page mount (data-wp-init).
+		 *
+		 * Execution order per navigation:
+		 *   1. applyStyles()  — router enables / disables sheets.
+		 *   2. iAPI re-initialises directives, calling this callback.
+		 *
+		 * Reading the DOM here therefore always reflects the post-applyStyles
+		 * state, allowing both signals to be synchronised accurately.
+		 *
+		 * Bug B: injects the plugin-style element on first mount; subsequent
+		 *   mounts confirm it survived applyStyles() without being disabled.
+		 *
+		 * Bug A: re-reads sheet.disabled so deferredStyleStatus reflects whether
+		 *   applyStyles() correctly preserved the activated sheet.
+		 */
+		init() {
+			// Bug B — idempotent plugin-style injection.
+			if ( ! document.getElementById( PLUGIN_STYLE_ID ) ) {
+				const style = document.createElement( 'style' );
+				style.id = PLUGIN_STYLE_ID;
+				style.textContent = 'body { --test-plugin-style: 1; }';
+				document.head.appendChild( style );
+			}
+			state.pluginStyleStatus = 'active';
+
+			// Bug A — re-sync deferred status after applyStyles().
+			const el = document.getElementById( 'test-router-deferred-style' );
+			state.deferredStyleStatus =
+				el?.sheet && ! el.sheet.disabled && el.media !== 'not all'
+					? 'active'
+					: 'inactive';
+		},
+	},
+} );

packages/interactivity-router/CHANGELOG.md

@@ -15,7 +15,8 @@
 ## 2.42.0 (2026-03-18)
 
 ### Bug Fixes
-
+-   Preserve runtime-activated deferred stylesheets (`media="not all"` → `"all"`) across client-side navigations. Previously, `areNodesEqual()` used `isEqualNode()` which compared the `media` attribute, causing `applyStyles()` to disable the activated sheet on the next navigation. ([#76289](https://github.com/WordPress/gutenberg/pull/76289))
+-   Preserve dynamically-injected stylesheets (e.g. Complianz GDPR consent CSS) across client-side navigations. Previously, `applyStyles()` disabled every stylesheet absent from the fetched page, including elements injected at runtime via `document.head.appendChild()` which carry no `id` attribute. ([#76289](https://github.com/WordPress/gutenberg/pull/76289))
 -   Fix race condition where router evaluates before `hydrateRegions()` completes on Safari and Firefox, causing interactive regions to be permanently non-functional (dead DOM). ([#76053](https://github.com/WordPress/gutenberg/pull/76053))
 ## 2.41.0 (2026-03-04)