Interactivity API: Fix router initialization race condition on Safari/Firefox

packages/e2e-tests/plugins/interactive-blocks/router-race-condition/block.json

@@ -0,0 +1,15 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 3,
+	"name": "test/router-race-condition",
+	"title": "E2E Interactivity tests - router race condition",
+	"category": "text",
+	"icon": "heart",
+	"description": "",
+	"supports": {
+		"interactivity": true
+	},
+	"textdomain": "e2e-interactivity",
+	"viewScriptModule": "file:./view.js",
+	"render": "file:./render.php"
+}

packages/e2e-tests/plugins/interactive-blocks/router-race-condition/render.php

@@ -0,0 +1,26 @@
+<?php
+/**
+ * HTML for testing the router hydration race condition.
+ *
+ * @package gutenberg-test-interactive-blocks
+ *
+ * @phpcs:disable VariableAnalysis.CodeAnalysis.VariableAnalysis.UndefinedVariable
+ */
+?>
+<div
+	data-wp-interactive="router-race-condition"
+	data-wp-router-region="router-race-condition/buttons"
+	data-wp-context='{ "counter": 0 }'
+>
+	<button
+		data-testid="context-counter"
+		data-wp-text="context.counter"
+		data-wp-on--click="actions.increment"
+	>0</button>
+
+	<button
+		data-testid="global-counter"
+		data-wp-text="state.counter"
+		data-wp-on--click="actions.incrementGlobal"
+	>0</button>
+</div>

packages/e2e-tests/plugins/interactive-blocks/router-race-condition/view.asset.php

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

packages/e2e-tests/plugins/interactive-blocks/router-race-condition/view.js

@@ -0,0 +1,20 @@
+/**
+ * WordPress dependencies
+ */
+import { store, getContext } from '@wordpress/interactivity';
+import '@wordpress/interactivity-router';
+
+const { state } = store( 'router-race-condition', {
+	state: {
+		counter: 0,
+	},
+	actions: {
+		increment() {
+			const context = getContext();
+			context.counter += 1;
+		},
+		incrementGlobal() {
+			state.counter += 1;
+		},
+	},
+} );

packages/interactivity-router/CHANGELOG.md

@@ -2,6 +2,9 @@
 
 ## Unreleased
 
+### Bug Fixes
+
+-   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)
 
 ## 2.40.0 (2026-02-18)

packages/interactivity-router/src/index.ts

@@ -16,7 +16,7 @@ import {
 
 const {
 	getRegionRootFragment,
-	initialVdom,
+	initialVdomPromise,
 	toVdom,
 	render,
 	parseServerData,
@@ -50,7 +50,7 @@ export interface PrefetchOptions {
 }
 
 interface VdomParams {
-	vdom?: typeof initialVdom;
+	vdom?: WeakMap< Element, any >;
 }
 
 interface Page {
@@ -361,14 +361,19 @@ document.querySelectorAll( regionsSelector ).forEach( ( region ) => {
 window.document
 	.querySelectorAll< HTMLScriptElement >( 'script[type=module][src]' )
 	.forEach( ( { src } ) => markScriptModuleAsResolved( src ) );
-pages.set(
-	getPagePath( window.location.href ),
-	Promise.resolve(
-		preparePage( getPagePath( window.location.href ), document, {
-			vdom: initialVdom,
-		} )
-	)
-);
+
+// Await hydration completion before setting the initial page to ensure initialVdom is populated.
+( async () => {
+	const initialVdomMap = await initialVdomPromise;
+	pages.set(
+		getPagePath( window.location.href ),
+		Promise.resolve(
+			preparePage( getPagePath( window.location.href ), document, {
+				vdom: initialVdomMap,
+			} )
+		)
+	);
+} )();
 
 // Variable to store the current navigation.
 let navigatingTo = '';

packages/interactivity/CHANGELOG.md

@@ -2,6 +2,9 @@
 
 ## Unreleased
 
+### Bug Fixes
+
+-   Add `initialVdomPromise` synchronization promise to ensure the router waits for hydration to complete before initializing, fixing dead DOM on Safari and Firefox. ([#76053](https://github.com/WordPress/gutenberg/pull/76053))
 ## 6.41.0 (2026-03-04)
 
 ## 6.40.0 (2026-02-18)

packages/interactivity/src/hydration.ts

@@ -29,6 +29,14 @@ export const getRegionRootFragment = (
 // Initial vDOM regions associated with its DOM element.
 export const initialVdom = new WeakMap< Element, ComponentChild >();
 
+// Promise that resolves with the populated initialVdom after hydration completes.
+let resolveInitialVdom!: ( map: WeakMap< Element, ComponentChild > ) => void;
+export const initialVdomPromise = new Promise<
+	WeakMap< Element, ComponentChild >
+>( ( resolve ) => {
+	resolveInitialVdom = resolve;
+} );
+
 // Initialize the router with the initial DOM.
 export const hydrateRegions = async () => {
 	const nodes = document.querySelectorAll( `[data-wp-interactive]` );
@@ -43,4 +51,7 @@ export const hydrateRegions = async () => {
 			hydrate( vdom, fragment );
 		}
 	}
+
+	// Resolve the promise with the fully populated initialVdom after all regions are hydrated.
+	resolveInitialVdom( initialVdom );
 };

packages/interactivity/src/index.ts

@@ -13,7 +13,7 @@ import { batch, effect } from '@preact/signals';
  */
 import registerDirectives, { routerRegions } from './directives';
 import {
-	initialVdom,
+	initialVdomPromise,
 	hydrateRegions,
 	getRegionRootFragment,
 } from './hydration';
@@ -78,7 +78,7 @@ export const privateApis = (
 	if ( lock === requiredConsent ) {
 		return {
 			getRegionRootFragment,
-			initialVdom,
+			initialVdomPromise,
 			toVdom,
 			directive,
 			getNamespace,

test/e2e/specs/interactivity/router-race-condition.spec.ts

@@ -0,0 +1,51 @@
+/**
+ * Internal dependencies
+ */
+import { test, expect } from './fixtures';
+
+// Regression test for https://github.com/WordPress/gutenberg/issues/75778.
+test.describe( 'Router hydration race condition (@webkit, @firefox)', () => {
+	test.beforeAll( async ( { interactivityUtils: utils } ) => {
+		await utils.activatePlugins();
+		await utils.addPostWithBlock( 'test/router-race-condition', {
+			alias: 'router-race-condition',
+		} );
+	} );
+
+	test.beforeEach( async ( { interactivityUtils: utils, page } ) => {
+		await page.goto( utils.getLink( 'router-race-condition' ) );
+	} );
+
+	test.afterAll( async ( { interactivityUtils: utils } ) => {
+		await utils.deactivatePlugins();
+		await utils.deleteAllPosts();
+	} );
+
+	test( 'should hydrate context-bound directives when router loads statically', async ( {
+		page,
+	} ) => {
+		const button = page.getByTestId( 'context-counter' );
+
+		await expect( button ).toHaveText( '0' );
+
+		await button.click();
+		await expect( button ).toHaveText( '1' );
+
+		await button.click();
+		await expect( button ).toHaveText( '2' );
+	} );
+
+	test( 'should hydrate state-bound directives when router loads statically', async ( {
+		page,
+	} ) => {
+		const button = page.getByTestId( 'global-counter' );
+
+		await expect( button ).toHaveText( '0' );
+
+		await button.click();
+		await expect( button ).toHaveText( '1' );
+
+		await button.click();
+		await expect( button ).toHaveText( '2' );
+	} );
+} );