From 67de97b9bf41ebaf5c7eaa3bfd22e0215e2485af Mon Sep 17 00:00:00 2001
From: David Arenas <david.arenas@automattic.com>
Date: Mon, 25 Nov 2024 12:54:44 +0100
Subject: [PATCH 01/23] Experiment with

---
 .../src/assets/scripts.ts                     |  6 ++
 .../interactivity-router/src/assets/styles.ts | 43 +++++++++++++++
 packages/interactivity-router/src/index.ts    | 55 +++++++++++++------
 3 files changed, 86 insertions(+), 18 deletions(-)
 create mode 100644 packages/interactivity-router/src/assets/scripts.ts
 create mode 100644 packages/interactivity-router/src/assets/styles.ts

diff --git a/packages/interactivity-router/src/assets/scripts.ts b/packages/interactivity-router/src/assets/scripts.ts
new file mode 100644
index 00000000000000..397ca8a625f7d6
--- /dev/null
+++ b/packages/interactivity-router/src/assets/scripts.ts
@@ -0,0 +1,6 @@
+export const importJavaScriptModules = async ( doc: Document ) => {
+	const modules = doc.querySelectorAll< HTMLScriptElement >(
+		'script[type=module][src]'
+	);
+	return [ ...modules ].map( ( { src } ) => import( src ) );
+};
diff --git a/packages/interactivity-router/src/assets/styles.ts b/packages/interactivity-router/src/assets/styles.ts
new file mode 100644
index 00000000000000..98fa17bfa2673b
--- /dev/null
+++ b/packages/interactivity-router/src/assets/styles.ts
@@ -0,0 +1,43 @@
+const styleSheetCache = new Map< string, Promise< CSSStyleSheet > >();
+
+const getCachedSheet = async (
+	sheetId: string,
+	constructor: () => Promise< CSSStyleSheet >
+) => {
+	if ( ! styleSheetCache.has( sheetId ) ) {
+		styleSheetCache.set( sheetId, constructor() );
+	}
+	return styleSheetCache.get( sheetId );
+};
+
+const sheetFromLink = async ( { id, href }: HTMLLinkElement ) => {
+	const sheetId = id || href;
+	return getCachedSheet( sheetId, async () => {
+		const response = await fetch( href );
+		const text = await response.text();
+		const sheet = new CSSStyleSheet( { baseURL: href } );
+		await sheet.replace( text );
+		return sheet;
+	} );
+};
+
+const sheetFromStyle = async ( { id, textContent }: HTMLStyleElement ) => {
+	const sheetId = id || textContent;
+	return getCachedSheet( sheetId, async () => {
+		const sheet = new CSSStyleSheet();
+		await sheet.replace( textContent );
+		return sheet;
+	} );
+};
+
+export const generateCSSStyleSheets = (
+	doc: Document
+): Promise< CSSStyleSheet >[] =>
+	[ ...doc.querySelectorAll( 'style,link[rel=stylesheet]' ) ].map(
+		( element ) => {
+			if ( 'LINK' === element.nodeName ) {
+				return sheetFromLink( element as HTMLLinkElement );
+			}
+			return sheetFromStyle( element as HTMLStyleElement );
+		}
+	);
diff --git a/packages/interactivity-router/src/index.ts b/packages/interactivity-router/src/index.ts
index 0c10e896ce1ef5..68185b669e158e 100644
--- a/packages/interactivity-router/src/index.ts
+++ b/packages/interactivity-router/src/index.ts
@@ -6,7 +6,7 @@ import { store, privateApis, getConfig } from '@wordpress/interactivity';
 /**
  * Internal dependencies
  */
-import { fetchHeadAssets, updateHead, headElements } from './head';
+import { generateCSSStyleSheets } from './assets/styles';
 
 const {
 	directivePrefix,
@@ -41,12 +41,13 @@ interface VdomParams {
 
 interface Page {
 	regions: Record< string, any >;
-	head: HTMLHeadElement[];
+	styles: Promise< CSSStyleSheet >[];
+	scriptModules: string[];
 	title: string;
 	initialData: any;
 }
 
-type RegionsToVdom = ( dom: Document, params?: VdomParams ) => Promise< Page >;
+type RegionsToVdom = ( dom: Document, params?: VdomParams ) => Page;
 
 // Check if the navigation mode is full page or region based.
 const navigationMode: 'regionBased' | 'fullPage' =
@@ -81,12 +82,18 @@ const fetchPage = async ( url: string, { html }: { html: string } ) => {
 
 // Return an object with VDOM trees of those HTML regions marked with a
 // `router-region` directive.
-const regionsToVdom: RegionsToVdom = async ( dom, { vdom } = {} ) => {
+const regionsToVdom: RegionsToVdom = ( dom, { vdom } = {} ) => {
 	const regions = { body: undefined };
-	let head: HTMLElement[];
+	let styles: Promise< CSSStyleSheet >[];
+	let scriptModules: string[];
 	if ( globalThis.IS_GUTENBERG_PLUGIN ) {
 		if ( navigationMode === 'fullPage' ) {
-			head = await fetchHeadAssets( dom );
+			styles = generateCSSStyleSheets( dom );
+			scriptModules = [
+				...dom.querySelectorAll< HTMLScriptElement >(
+					'script[type=module][src]'
+				),
+			].map( ( s ) => s.src );
 			regions.body = vdom
 				? vdom.get( document.body )
 				: toVdom( dom.body );
@@ -103,15 +110,27 @@ const regionsToVdom: RegionsToVdom = async ( dom, { vdom } = {} ) => {
 	}
 	const title = dom.querySelector( 'title' )?.innerText;
 	const initialData = parseServerData( dom );
-	return { regions, head, title, initialData };
+	return { regions, styles, scriptModules, title, initialData };
 };
 
 // Render all interactive regions contained in the given page.
 const renderRegions = async ( page: Page ) => {
 	if ( globalThis.IS_GUTENBERG_PLUGIN ) {
 		if ( navigationMode === 'fullPage' ) {
-			// Once this code is tested and more mature, the head should be updated for region based navigation as well.
-			await updateHead( page.head );
+			// Whait for styles and modules to be ready.
+			await Promise.all( [
+				...page.styles,
+				...page.scriptModules.map(
+					( src ) => import( /* webpackIgnore: true */ src )
+				),
+			] );
+			// Replace style sheets.
+			const sheets = await Promise.all( page.styles );
+			window.document
+				.querySelectorAll( 'style,link[rel=stylesheet]' )
+				.forEach( ( element ) => element.remove() );
+			window.document.adoptedStyleSheets = sheets;
+			// Update HTML.
 			const fragment = getRegionRootFragment( document.body );
 			batch( () => {
 				populateServerData( page.initialData );
@@ -172,15 +191,15 @@ window.addEventListener( 'popstate', async () => {
 if ( globalThis.IS_GUTENBERG_PLUGIN ) {
 	if ( navigationMode === 'fullPage' ) {
 		// Cache the scripts. Has to be called before fetching the assets.
-		[].map.call(
-			document.querySelectorAll( 'script[type="module"][src]' ),
-			( script ) => {
-				headElements.set( script.getAttribute( 'src' ), {
-					tag: script,
-				} );
-			}
-		);
-		await fetchHeadAssets( document );
+		// [].map.call(
+		// 	document.querySelectorAll( 'script[type="module"][src]' ),
+		// 	( script ) => {
+		// 		headElements.set( script.getAttribute( 'src' ), {
+		// 			tag: script,
+		// 		} );
+		// 	}
+		// );
+		// await fetchHeadAssets( document );
 	}
 }
 pages.set(

From c50b033722bf6d417a3f46385527beed5ac07cc1 Mon Sep 17 00:00:00 2001
From: David <david.arenas@automattic.com>
Date: Wed, 27 Nov 2024 14:57:11 +0100
Subject: [PATCH 02/23] Handle relative URLs

---
 .../interactivity-router/src/assets/styles.ts | 36 ++++++++--
 packages/interactivity-router/src/index.ts    | 69 +++++++++----------
 2 files changed, 62 insertions(+), 43 deletions(-)

diff --git a/packages/interactivity-router/src/assets/styles.ts b/packages/interactivity-router/src/assets/styles.ts
index 98fa17bfa2673b..d6d8807b453bdf 100644
--- a/packages/interactivity-router/src/assets/styles.ts
+++ b/packages/interactivity-router/src/assets/styles.ts
@@ -1,3 +1,24 @@
+const cssUrlRegEx =
+	/url\(\s*(?:(["'])((?:\\.|[^\n\\"'])+)\1|((?:\\.|[^\s,"'()\\])+))\s*\)/g;
+
+const resolveUrl = ( relativeUrl: string, baseUrl: string ) => {
+	try {
+		return new URL( relativeUrl, baseUrl ).toString();
+	} catch ( e ) {
+		return relativeUrl;
+	}
+};
+
+const withAbsoluteUrls = ( cssText: string, baseUrl: string ) =>
+	cssText.replace(
+		cssUrlRegEx,
+		( _match, quotes = '', relUrl1, relUrl2 ) =>
+			`url(${ quotes }${ resolveUrl(
+				relUrl1 || relUrl2,
+				baseUrl
+			) }${ quotes })`
+	);
+
 const styleSheetCache = new Map< string, Promise< CSSStyleSheet > >();
 
 const getCachedSheet = async (
@@ -10,13 +31,17 @@ const getCachedSheet = async (
 	return styleSheetCache.get( sheetId );
 };
 
-const sheetFromLink = async ( { id, href }: HTMLLinkElement ) => {
+const sheetFromLink = async (
+	{ id, href }: HTMLLinkElement,
+	baseUrl: string
+) => {
 	const sheetId = id || href;
+	const sheetUrl = resolveUrl( href, baseUrl );
 	return getCachedSheet( sheetId, async () => {
 		const response = await fetch( href );
 		const text = await response.text();
-		const sheet = new CSSStyleSheet( { baseURL: href } );
-		await sheet.replace( text );
+		const sheet = new CSSStyleSheet();
+		await sheet.replace( withAbsoluteUrls( text, sheetUrl ) );
 		return sheet;
 	} );
 };
@@ -31,12 +56,13 @@ const sheetFromStyle = async ( { id, textContent }: HTMLStyleElement ) => {
 };
 
 export const generateCSSStyleSheets = (
-	doc: Document
+	doc: Document,
+	baseUrl: string = ( doc.location || window.location ).href
 ): Promise< CSSStyleSheet >[] =>
 	[ ...doc.querySelectorAll( 'style,link[rel=stylesheet]' ) ].map(
 		( element ) => {
 			if ( 'LINK' === element.nodeName ) {
-				return sheetFromLink( element as HTMLLinkElement );
+				return sheetFromLink( element as HTMLLinkElement, baseUrl );
 			}
 			return sheetFromStyle( element as HTMLStyleElement );
 		}
diff --git a/packages/interactivity-router/src/index.ts b/packages/interactivity-router/src/index.ts
index 68185b669e158e..4945fd323e00e8 100644
--- a/packages/interactivity-router/src/index.ts
+++ b/packages/interactivity-router/src/index.ts
@@ -37,6 +37,7 @@ interface PrefetchOptions {
 
 interface VdomParams {
 	vdom?: typeof initialVdom;
+	baseUrl?: string;
 }
 
 interface Page {
@@ -74,7 +75,7 @@ const fetchPage = async ( url: string, { html }: { html: string } ) => {
 			html = await res.text();
 		}
 		const dom = new window.DOMParser().parseFromString( html, 'text/html' );
-		return regionsToVdom( dom );
+		return regionsToVdom( dom, { baseUrl: url } );
 	} catch ( e ) {
 		return false;
 	}
@@ -82,18 +83,17 @@ const fetchPage = async ( url: string, { html }: { html: string } ) => {
 
 // Return an object with VDOM trees of those HTML regions marked with a
 // `router-region` directive.
-const regionsToVdom: RegionsToVdom = ( dom, { vdom } = {} ) => {
+const regionsToVdom: RegionsToVdom = ( dom, { vdom, baseUrl } = {} ) => {
 	const regions = { body: undefined };
-	let styles: Promise< CSSStyleSheet >[];
-	let scriptModules: string[];
+	const styles = generateCSSStyleSheets( dom, baseUrl );
+	const scriptModules = [
+		...dom.querySelectorAll< HTMLScriptElement >(
+			'script[type=module][src]'
+		),
+	].map( ( s ) => s.src );
+
 	if ( globalThis.IS_GUTENBERG_PLUGIN ) {
 		if ( navigationMode === 'fullPage' ) {
-			styles = generateCSSStyleSheets( dom );
-			scriptModules = [
-				...dom.querySelectorAll< HTMLScriptElement >(
-					'script[type=module][src]'
-				),
-			].map( ( s ) => s.src );
 			regions.body = vdom
 				? vdom.get( document.body )
 				: toVdom( dom.body );
@@ -115,21 +115,22 @@ const regionsToVdom: RegionsToVdom = ( dom, { vdom } = {} ) => {
 
 // Render all interactive regions contained in the given page.
 const renderRegions = async ( page: Page ) => {
+	// Whait for styles and modules to be ready.
+	await Promise.all( [
+		...page.styles,
+		...page.scriptModules.map(
+			( src ) => import( /* webpackIgnore: true */ src )
+		),
+	] );
+	// Replace style sheets.
+	const sheets = await Promise.all( page.styles );
+	window.document
+		.querySelectorAll( 'style,link[rel=stylesheet]' )
+		.forEach( ( element ) => element.remove() );
+	window.document.adoptedStyleSheets = sheets;
+
 	if ( globalThis.IS_GUTENBERG_PLUGIN ) {
 		if ( navigationMode === 'fullPage' ) {
-			// Whait for styles and modules to be ready.
-			await Promise.all( [
-				...page.styles,
-				...page.scriptModules.map(
-					( src ) => import( /* webpackIgnore: true */ src )
-				),
-			] );
-			// Replace style sheets.
-			const sheets = await Promise.all( page.styles );
-			window.document
-				.querySelectorAll( 'style,link[rel=stylesheet]' )
-				.forEach( ( element ) => element.remove() );
-			window.document.adoptedStyleSheets = sheets;
 			// Update HTML.
 			const fragment = getRegionRootFragment( document.body );
 			batch( () => {
@@ -188,23 +189,14 @@ window.addEventListener( 'popstate', async () => {
 // Initialize the router and cache the initial page using the initial vDOM.
 // Once this code is tested and more mature, the head should be updated for
 // region based navigation as well.
-if ( globalThis.IS_GUTENBERG_PLUGIN ) {
-	if ( navigationMode === 'fullPage' ) {
-		// Cache the scripts. Has to be called before fetching the assets.
-		// [].map.call(
-		// 	document.querySelectorAll( 'script[type="module"][src]' ),
-		// 	( script ) => {
-		// 		headElements.set( script.getAttribute( 'src' ), {
-		// 			tag: script,
-		// 		} );
-		// 	}
-		// );
-		// await fetchHeadAssets( document );
-	}
-}
 pages.set(
 	getPagePath( window.location.href ),
-	Promise.resolve( regionsToVdom( document, { vdom: initialVdom } ) )
+	Promise.resolve(
+		regionsToVdom( document, {
+			vdom: initialVdom,
+			baseUrl: window.location.href,
+		} )
+	)
 );
 
 // Check if the link is valid for client-side navigation.
@@ -380,6 +372,7 @@ export const { state, actions } = store< Store >( 'core/router', {
 		 * @param [options]       Options object.
 		 * @param [options.force] Force fetching the URL again.
 		 * @param [options.html]  HTML string to be used instead of fetching the requested URL.
+		 * @param [options.vdom]  vDOM map to be used instead of fetching the requested URL.
 		 */
 		prefetch( url: string, options: PrefetchOptions = {} ) {
 			const { clientNavigationDisabled } = getConfig();

From f9de8b427808dad09269c5bc3d8a3ba3599e5b92 Mon Sep 17 00:00:00 2001
From: David <david.arenas@automattic.com>
Date: Wed, 27 Nov 2024 15:06:48 +0100
Subject: [PATCH 03/23] Rename constructor to factory

---
 packages/interactivity-router/src/assets/styles.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/interactivity-router/src/assets/styles.ts b/packages/interactivity-router/src/assets/styles.ts
index d6d8807b453bdf..eac6a1b3913c2a 100644
--- a/packages/interactivity-router/src/assets/styles.ts
+++ b/packages/interactivity-router/src/assets/styles.ts
@@ -23,10 +23,10 @@ const styleSheetCache = new Map< string, Promise< CSSStyleSheet > >();
 
 const getCachedSheet = async (
 	sheetId: string,
-	constructor: () => Promise< CSSStyleSheet >
+	factory: () => Promise< CSSStyleSheet >
 ) => {
 	if ( ! styleSheetCache.has( sheetId ) ) {
-		styleSheetCache.set( sheetId, constructor() );
+		styleSheetCache.set( sheetId, factory() );
 	}
 	return styleSheetCache.get( sheetId );
 };

From fcf25c18a6bdbbe87e88ca8846d10e50f51a4bb3 Mon Sep 17 00:00:00 2001
From: David <david.arenas@automattic.com>
Date: Mon, 2 Dec 2024 11:10:52 +0100
Subject: [PATCH 04/23] Use `element.sheet` property if present

---
 packages/interactivity-router/src/assets/styles.ts | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/packages/interactivity-router/src/assets/styles.ts b/packages/interactivity-router/src/assets/styles.ts
index eac6a1b3913c2a..2154b03a543cb1 100644
--- a/packages/interactivity-router/src/assets/styles.ts
+++ b/packages/interactivity-router/src/assets/styles.ts
@@ -32,11 +32,21 @@ const getCachedSheet = async (
 };
 
 const sheetFromLink = async (
-	{ id, href }: HTMLLinkElement,
+	{ id, href, sheet: elementSheet }: HTMLLinkElement,
 	baseUrl: string
 ) => {
 	const sheetId = id || href;
 	const sheetUrl = resolveUrl( href, baseUrl );
+
+	if ( elementSheet ) {
+		return getCachedSheet( sheetId, () => {
+			const sheet = new CSSStyleSheet();
+			for ( const { cssText } of elementSheet.cssRules ) {
+				sheet.insertRule( withAbsoluteUrls( cssText, sheetUrl ) );
+			}
+			return Promise.resolve( sheet );
+		} );
+	}
 	return getCachedSheet( sheetId, async () => {
 		const response = await fetch( href );
 		const text = await response.text();

From 777118b1ba6b59db6a8a9f85d65b7f28df594f4b Mon Sep 17 00:00:00 2001
From: David <david.arenas@automattic.com>
Date: Wed, 11 Dec 2024 11:45:54 +0100
Subject: [PATCH 05/23] Remove unnecessary files

---
 .../src/assets/scripts.ts                     |   6 -
 packages/interactivity-router/src/head.ts     | 126 ------------------
 2 files changed, 132 deletions(-)
 delete mode 100644 packages/interactivity-router/src/assets/scripts.ts
 delete mode 100644 packages/interactivity-router/src/head.ts

diff --git a/packages/interactivity-router/src/assets/scripts.ts b/packages/interactivity-router/src/assets/scripts.ts
deleted file mode 100644
index 397ca8a625f7d6..00000000000000
--- a/packages/interactivity-router/src/assets/scripts.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export const importJavaScriptModules = async ( doc: Document ) => {
-	const modules = doc.querySelectorAll< HTMLScriptElement >(
-		'script[type=module][src]'
-	);
-	return [ ...modules ].map( ( { src } ) => import( src ) );
-};
diff --git a/packages/interactivity-router/src/head.ts b/packages/interactivity-router/src/head.ts
deleted file mode 100644
index 69139348b582ff..00000000000000
--- a/packages/interactivity-router/src/head.ts
+++ /dev/null
@@ -1,126 +0,0 @@
-/**
- * The cache of prefetched stylesheets and scripts.
- */
-export const headElements = new Map<
-	string,
-	{ tag: HTMLElement; text?: string }
->();
-
-/**
- * Helper to update only the necessary tags in the head.
- *
- * @async
- * @param newHead The head elements of the new page.
- */
-export const updateHead = async ( newHead: HTMLHeadElement[] ) => {
-	// Helper to get the tag id store in the cache.
-	const getTagId = ( tag: Element ) => tag.id || tag.outerHTML;
-
-	// Map incoming head tags by their content.
-	const newHeadMap = new Map< string, Element >();
-	for ( const child of newHead ) {
-		newHeadMap.set( getTagId( child ), child );
-	}
-
-	const toRemove: Element[] = [];
-
-	// Detect nodes that should be added or removed.
-	for ( const child of document.head.children ) {
-		const id = getTagId( child );
-		// Always remove styles and links as they might change.
-		if ( child.nodeName === 'LINK' || child.nodeName === 'STYLE' ) {
-			toRemove.push( child );
-		} else if ( newHeadMap.has( id ) ) {
-			newHeadMap.delete( id );
-		} else if ( child.nodeName !== 'SCRIPT' && child.nodeName !== 'META' ) {
-			toRemove.push( child );
-		}
-	}
-
-	await Promise.all(
-		[ ...headElements.entries() ]
-			.filter( ( [ , { tag } ] ) => tag.nodeName === 'SCRIPT' )
-			.map( async ( [ url ] ) => {
-				await import( /* webpackIgnore: true */ url );
-			} )
-	);
-
-	// Prepare new assets.
-	const toAppend = [ ...newHeadMap.values() ];
-
-	// Apply the changes.
-	toRemove.forEach( ( n ) => n.remove() );
-	document.head.append( ...toAppend );
-};
-
-/**
- * Fetches and processes head assets (stylesheets and scripts) from a specified document.
- *
- * @async
- * @param doc The document from which to fetch head assets. It should support standard DOM querying methods.
- *
- * @return Returns an array of HTML elements representing the head assets.
- */
-export const fetchHeadAssets = async (
-	doc: Document
-): Promise< HTMLElement[] > => {
-	const headTags = [];
-
-	// We only want to fetch module scripts because regular scripts (without
-	// `async` or `defer` attributes) can depend on the execution of other scripts.
-	// Scripts found in the head are blocking and must be executed in order.
-	const scripts = doc.querySelectorAll< HTMLScriptElement >(
-		'script[type="module"][src]'
-	);
-
-	scripts.forEach( ( script ) => {
-		const src = script.getAttribute( 'src' );
-		if ( ! headElements.has( src ) ) {
-			// add the <link> elements to prefetch the module scripts
-			const link = doc.createElement( 'link' );
-			link.rel = 'modulepreload';
-			link.href = src;
-			document.head.append( link );
-			headElements.set( src, { tag: script } );
-		}
-	} );
-
-	const stylesheets = doc.querySelectorAll< HTMLLinkElement >(
-		'link[rel=stylesheet]'
-	);
-
-	await Promise.all(
-		Array.from( stylesheets ).map( async ( tag ) => {
-			const href = tag.getAttribute( 'href' );
-			if ( ! href ) {
-				return;
-			}
-
-			if ( ! headElements.has( href ) ) {
-				try {
-					const response = await fetch( href );
-					const text = await response.text();
-					headElements.set( href, {
-						tag,
-						text,
-					} );
-				} catch ( e ) {
-					// eslint-disable-next-line no-console
-					console.error( e );
-				}
-			}
-
-			const headElement = headElements.get( href );
-			const styleElement = doc.createElement( 'style' );
-			styleElement.textContent = headElement.text;
-
-			headTags.push( styleElement );
-		} )
-	);
-
-	return [
-		doc.querySelector( 'title' ),
-		...doc.querySelectorAll( 'style' ),
-		...headTags,
-	];
-};

From e31e6705d18f6d5e3cff42f22ff073075b50410d Mon Sep 17 00:00:00 2001
From: David <david.arenas@automattic.com>
Date: Wed, 11 Dec 2024 11:48:27 +0100
Subject: [PATCH 06/23] Remove extraneous param from tsdoc comment

---
 packages/interactivity-router/src/index.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/interactivity-router/src/index.ts b/packages/interactivity-router/src/index.ts
index 4945fd323e00e8..e79a13bad2e0b4 100644
--- a/packages/interactivity-router/src/index.ts
+++ b/packages/interactivity-router/src/index.ts
@@ -372,7 +372,6 @@ export const { state, actions } = store< Store >( 'core/router', {
 		 * @param [options]       Options object.
 		 * @param [options.force] Force fetching the URL again.
 		 * @param [options.html]  HTML string to be used instead of fetching the requested URL.
-		 * @param [options.vdom]  vDOM map to be used instead of fetching the requested URL.
 		 */
 		prefetch( url: string, options: PrefetchOptions = {} ) {
 			const { clientNavigationDisabled } = getConfig();

From 86a48be3d58abfaf9ce448cb4d26c1ef18353aeb Mon Sep 17 00:00:00 2001
From: David <david.arenas@automattic.com>
Date: Sun, 15 Dec 2024 23:40:06 +0100
Subject: [PATCH 07/23] Allow inner blocks in `addPostWithBlock` util

---
 .../fixtures/interactivity-utils.ts           | 38 ++++++++++++++++---
 1 file changed, 32 insertions(+), 6 deletions(-)

diff --git a/test/e2e/specs/interactivity/fixtures/interactivity-utils.ts b/test/e2e/specs/interactivity/fixtures/interactivity-utils.ts
index fd850a6e39fae2..39bef7517eaf4b 100644
--- a/test/e2e/specs/interactivity/fixtures/interactivity-utils.ts
+++ b/test/e2e/specs/interactivity/fixtures/interactivity-utils.ts
@@ -6,6 +6,30 @@ import type { RequestUtils } from '@wordpress/e2e-test-utils-playwright';
 type AddPostWithBlockOptions = {
 	alias?: string;
 	attributes?: Record< string, any >;
+	innerBlocks?: Block[];
+};
+
+type Block = [
+	type: string,
+	attributes?: Record< string, any >,
+	innerBlocks?: Block[],
+];
+
+const generateBlockMarkup = ( [
+	type,
+	attributes,
+	innerBlocks,
+]: Block ): string => {
+	const typeAndAttributes = attributes
+		? `${ type } ${ JSON.stringify( attributes ) }`
+		: type;
+
+	if ( ! innerBlocks ) {
+		return `<!-- wp:${ typeAndAttributes } /-->`;
+	}
+	return `<!-- wp:${ typeAndAttributes } -->${ innerBlocks
+		.map( generateBlockMarkup )
+		.join( '' ) }<!--/ wp:${ type } -->`;
 };
 
 export default class InteractivityUtils {
@@ -40,18 +64,20 @@ export default class InteractivityUtils {
 
 	async addPostWithBlock(
 		name: string,
-		{ attributes, alias }: AddPostWithBlockOptions = {}
+		{ attributes, alias, innerBlocks }: AddPostWithBlockOptions = {}
 	) {
-		const block = attributes
-			? `${ name } ${ JSON.stringify( attributes ) }`
-			: name;
+		const content = generateBlockMarkup( [
+			name,
+			attributes,
+			innerBlocks,
+		] );
 
 		if ( ! alias ) {
-			alias = block;
+			alias = content;
 		}
 
 		const payload = {
-			content: `<!-- wp:${ block } /-->`,
+			content,
 			status: 'publish' as 'publish',
 			date_gmt: '2023-01-01T00:00:00',
 			title: alias,

From 2a8f7f8fe603eacd67505f9f2855800ca5d164f6 Mon Sep 17 00:00:00 2001
From: David <david.arenas@automattic.com>
Date: Sun, 15 Dec 2024 23:41:26 +0100
Subject: [PATCH 08/23] Add test blocks for testing styles

---
 .../router-styles-region-block/block.json     | 16 +++++++++
 .../router-styles-region-block/render.php     | 36 +++++++++++++++++++
 .../router-styles-region-block/style.css      |  3 ++
 .../router-styles-region-block/view.asset.php |  9 +++++
 .../router-styles-region-block/view.js        | 20 +++++++++++
 .../router-styles-test-block-a/block.json     | 15 ++++++++
 .../router-styles-test-block-a/render.php     | 12 +++++++
 .../router-styles-test-block-a/style.css      |  3 ++
 .../router-styles-test-block-b/block.json     | 15 ++++++++
 .../router-styles-test-block-b/render.php     | 12 +++++++
 .../router-styles-test-block-b/style.css      |  3 ++
 11 files changed, 144 insertions(+)
 create mode 100644 packages/e2e-tests/plugins/interactive-blocks/router-styles-region-block/block.json
 create mode 100644 packages/e2e-tests/plugins/interactive-blocks/router-styles-region-block/render.php
 create mode 100644 packages/e2e-tests/plugins/interactive-blocks/router-styles-region-block/style.css
 create mode 100644 packages/e2e-tests/plugins/interactive-blocks/router-styles-region-block/view.asset.php
 create mode 100644 packages/e2e-tests/plugins/interactive-blocks/router-styles-region-block/view.js
 create mode 100644 packages/e2e-tests/plugins/interactive-blocks/router-styles-test-block-a/block.json
 create mode 100644 packages/e2e-tests/plugins/interactive-blocks/router-styles-test-block-a/render.php
 create mode 100644 packages/e2e-tests/plugins/interactive-blocks/router-styles-test-block-a/style.css
 create mode 100644 packages/e2e-tests/plugins/interactive-blocks/router-styles-test-block-b/block.json
 create mode 100644 packages/e2e-tests/plugins/interactive-blocks/router-styles-test-block-b/render.php
 create mode 100644 packages/e2e-tests/plugins/interactive-blocks/router-styles-test-block-b/style.css

diff --git a/packages/e2e-tests/plugins/interactive-blocks/router-styles-region-block/block.json b/packages/e2e-tests/plugins/interactive-blocks/router-styles-region-block/block.json
new file mode 100644
index 00000000000000..17e3216650d386
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/router-styles-region-block/block.json
@@ -0,0 +1,16 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 2,
+	"name": "test/router-styles-region-block",
+	"title": "E2E Interactivity tests - router styles - Region",
+	"category": "text",
+	"icon": "heart",
+	"description": "",
+	"supports": {
+		"interactivity": true
+	},
+	"textdomain": "e2e-interactivity",
+	"viewScriptModule": "file:./view.js",
+	"viewStyle": "file:./style.css",
+	"render": "file:./render.php"
+}
diff --git a/packages/e2e-tests/plugins/interactive-blocks/router-styles-region-block/render.php b/packages/e2e-tests/plugins/interactive-blocks/router-styles-region-block/render.php
new file mode 100644
index 00000000000000..3430af60c14aaf
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/router-styles-region-block/render.php
@@ -0,0 +1,36 @@
+<?php
+/**
+ * HTML for testing the iAPI's style assets management.
+ *
+ * @package gutenberg-test-interactive-blocks
+ *
+ * @phpcs:disable VariableAnalysis.CodeAnalysis.VariableAnalysis.UndefinedVariable
+ */
+
+$wrapper_attributes = get_block_wrapper_attributes(
+	array(
+		'data-wp-interactive'   => 'test/router-styles',
+		'data-wp-router-region' => 'router-styles',
+	)
+);
+?>
+<div <?php echo $wrapper_attributes; ?>>
+	<nav data-wp-interactive="test/router-styles">
+		<?php foreach ( $attributes['links'] as $label => $link ) : ?>
+			<a
+				data-testid="link <?php echo $label; ?>"
+				data-wp-on--click="actions.navigate"
+				href="<?php echo $link; ?>"
+			>
+				<?php echo $label; ?>
+			</a>
+		<?php endforeach; ?>
+	</nav>
+	<div
+		data-wp-interactive="test/router-styles"
+		data-wp-router-region="router-styles"
+	>
+		<p>Inside a router region</p>
+		<?php echo $content; ?>
+	</div>
+</div>
diff --git a/packages/e2e-tests/plugins/interactive-blocks/router-styles-region-block/style.css b/packages/e2e-tests/plugins/interactive-blocks/router-styles-region-block/style.css
new file mode 100644
index 00000000000000..dd3f01a865da2c
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/router-styles-region-block/style.css
@@ -0,0 +1,3 @@
+.wp-block-test-router-styles-region-block {
+    color: red;
+}
\ No newline at end of file
diff --git a/packages/e2e-tests/plugins/interactive-blocks/router-styles-region-block/view.asset.php b/packages/e2e-tests/plugins/interactive-blocks/router-styles-region-block/view.asset.php
new file mode 100644
index 00000000000000..bdaec8d1b67a9d
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/router-styles-region-block/view.asset.php
@@ -0,0 +1,9 @@
+<?php return array(
+	'dependencies' => array(
+		'@wordpress/interactivity',
+		array(
+			'id'     => '@wordpress/interactivity-router',
+			'import' => 'dynamic',
+		),
+	),
+);
diff --git a/packages/e2e-tests/plugins/interactive-blocks/router-styles-region-block/view.js b/packages/e2e-tests/plugins/interactive-blocks/router-styles-region-block/view.js
new file mode 100644
index 00000000000000..1a4174817bd2a2
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/router-styles-region-block/view.js
@@ -0,0 +1,20 @@
+/**
+ * WordPress dependencies
+ */
+import { store } from '@wordpress/interactivity';
+
+const { state } = store( 'test/router-styles', {
+	state: {
+		navigationCount: 0,
+	},
+	actions: {
+		*navigate( e ) {
+			e.preventDefault();
+			const { actions } = yield import(
+				'@wordpress/interactivity-router'
+			);
+			yield actions.navigate( e.target.href );
+			state.navigationCount += 1;
+		},
+	},
+} );
diff --git a/packages/e2e-tests/plugins/interactive-blocks/router-styles-test-block-a/block.json b/packages/e2e-tests/plugins/interactive-blocks/router-styles-test-block-a/block.json
new file mode 100644
index 00000000000000..21083882ab6b8e
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/router-styles-test-block-a/block.json
@@ -0,0 +1,15 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 2,
+	"name": "test/router-styles-block-a",
+	"title": "E2E Interactivity tests - router styles - Block A",
+	"category": "text",
+	"icon": "heart",
+	"description": "",
+	"supports": {
+		"interactivity": true
+	},
+	"textdomain": "e2e-interactivity",
+	"viewStyle": "file:./style.css",
+	"render": "file:./render.php"
+}
diff --git a/packages/e2e-tests/plugins/interactive-blocks/router-styles-test-block-a/render.php b/packages/e2e-tests/plugins/interactive-blocks/router-styles-test-block-a/render.php
new file mode 100644
index 00000000000000..02520085a986fc
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/router-styles-test-block-a/render.php
@@ -0,0 +1,12 @@
+<?php
+/**
+ * HTML for testing the iAPI's style assets management.
+ *
+ * @package gutenberg-test-interactive-blocks
+ *
+ * @phpcs:disable VariableAnalysis.CodeAnalysis.VariableAnalysis.UndefinedVariable
+ */
+
+$wrapper_attributes = get_block_wrapper_attributes();
+?>
+<p <?php echo $wrapper_attributes; ?>>Block A</p>
diff --git a/packages/e2e-tests/plugins/interactive-blocks/router-styles-test-block-a/style.css b/packages/e2e-tests/plugins/interactive-blocks/router-styles-test-block-a/style.css
new file mode 100644
index 00000000000000..e182a8b8ce7f93
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/router-styles-test-block-a/style.css
@@ -0,0 +1,3 @@
+.wp-block-test-router-styles-block-a {
+    color: green;
+}
\ No newline at end of file
diff --git a/packages/e2e-tests/plugins/interactive-blocks/router-styles-test-block-b/block.json b/packages/e2e-tests/plugins/interactive-blocks/router-styles-test-block-b/block.json
new file mode 100644
index 00000000000000..a489c5e174199a
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/router-styles-test-block-b/block.json
@@ -0,0 +1,15 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 2,
+	"name": "test/router-styles-block-b",
+	"title": "E2E Interactivity tests - router styles - Block B",
+	"category": "text",
+	"icon": "heart",
+	"description": "",
+	"supports": {
+		"interactivity": true
+	},
+	"textdomain": "e2e-interactivity",
+	"viewStyle": "file:./style.css",
+	"render": "file:./render.php"
+}
diff --git a/packages/e2e-tests/plugins/interactive-blocks/router-styles-test-block-b/render.php b/packages/e2e-tests/plugins/interactive-blocks/router-styles-test-block-b/render.php
new file mode 100644
index 00000000000000..584dc9081ad21a
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/router-styles-test-block-b/render.php
@@ -0,0 +1,12 @@
+<?php
+/**
+ * HTML for testing the iAPI's style assets management.
+ *
+ * @package gutenberg-test-interactive-blocks
+ *
+ * @phpcs:disable VariableAnalysis.CodeAnalysis.VariableAnalysis.UndefinedVariable
+ */
+
+$wrapper_attributes = get_block_wrapper_attributes();
+?>
+<p <?php echo $wrapper_attributes; ?>>Block B</p>
diff --git a/packages/e2e-tests/plugins/interactive-blocks/router-styles-test-block-b/style.css b/packages/e2e-tests/plugins/interactive-blocks/router-styles-test-block-b/style.css
new file mode 100644
index 00000000000000..3bf8f4ef5cef3e
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/router-styles-test-block-b/style.css
@@ -0,0 +1,3 @@
+.wp-block-test-router-styles-block-b {
+    color: blue;
+}
\ No newline at end of file

From 356e7f386ad187bd903c5e8f029940809bc451c4 Mon Sep 17 00:00:00 2001
From: David <david.arenas@automattic.com>
Date: Mon, 16 Dec 2024 00:54:48 +0100
Subject: [PATCH 09/23] Fix directives in region block

---
 .../router-styles-region-block/render.php     | 37 ++++++++++---------
 1 file changed, 20 insertions(+), 17 deletions(-)

diff --git a/packages/e2e-tests/plugins/interactive-blocks/router-styles-region-block/render.php b/packages/e2e-tests/plugins/interactive-blocks/router-styles-region-block/render.php
index 3430af60c14aaf..c8f6773e25c5f5 100644
--- a/packages/e2e-tests/plugins/interactive-blocks/router-styles-region-block/render.php
+++ b/packages/e2e-tests/plugins/interactive-blocks/router-styles-region-block/render.php
@@ -7,25 +7,28 @@
  * @phpcs:disable VariableAnalysis.CodeAnalysis.VariableAnalysis.UndefinedVariable
  */
 
-$wrapper_attributes = get_block_wrapper_attributes(
-	array(
-		'data-wp-interactive'   => 'test/router-styles',
-		'data-wp-router-region' => 'router-styles',
-	)
-);
+$wrapper_attributes = get_block_wrapper_attributes();
 ?>
 <div <?php echo $wrapper_attributes; ?>>
-	<nav data-wp-interactive="test/router-styles">
-		<?php foreach ( $attributes['links'] as $label => $link ) : ?>
-			<a
-				data-testid="link <?php echo $label; ?>"
-				data-wp-on--click="actions.navigate"
-				href="<?php echo $link; ?>"
-			>
-				<?php echo $label; ?>
-			</a>
-		<?php endforeach; ?>
-	</nav>
+	<!-- Interactive HTML NOT updated on navigation -->
+	<div data-wp-interactive="test/router-styles">
+		<div
+			data-testid="counter"
+			data-wp-text="state.navigationCount"
+		></div>
+		<nav>
+			<?php foreach ( $attributes['links'] as $label => $link ) : ?>
+				<a
+					data-testid="link <?php echo $label; ?>"
+					data-wp-on--click="actions.navigate"
+					href="<?php echo $link; ?>"
+				>
+					<?php echo $label; ?>
+				</a>
+			<?php endforeach; ?>
+		</nav>
+	</div>
+	<!-- HTML updated on navigation. -->
 	<div
 		data-wp-interactive="test/router-styles"
 		data-wp-router-region="router-styles"

From 08046a0fb65aef5b8d70c12165fbc91d9251c6e0 Mon Sep 17 00:00:00 2001
From: David <david.arenas@automattic.com>
Date: Mon, 16 Dec 2024 00:56:05 +0100
Subject: [PATCH 10/23] Add styles to navigation counter

---
 .../interactive-blocks/router-styles-test-block-a/style.css    | 3 ++-
 .../interactive-blocks/router-styles-test-block-b/style.css    | 3 ++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/e2e-tests/plugins/interactive-blocks/router-styles-test-block-a/style.css b/packages/e2e-tests/plugins/interactive-blocks/router-styles-test-block-a/style.css
index e182a8b8ce7f93..6b036a1c631fc8 100644
--- a/packages/e2e-tests/plugins/interactive-blocks/router-styles-test-block-a/style.css
+++ b/packages/e2e-tests/plugins/interactive-blocks/router-styles-test-block-a/style.css
@@ -1,3 +1,4 @@
-.wp-block-test-router-styles-block-a {
+.wp-block-test-router-styles-block-a,
+[data-testid="counter"] {
     color: green;
 }
\ No newline at end of file
diff --git a/packages/e2e-tests/plugins/interactive-blocks/router-styles-test-block-b/style.css b/packages/e2e-tests/plugins/interactive-blocks/router-styles-test-block-b/style.css
index 3bf8f4ef5cef3e..2faa9bc9e3d790 100644
--- a/packages/e2e-tests/plugins/interactive-blocks/router-styles-test-block-b/style.css
+++ b/packages/e2e-tests/plugins/interactive-blocks/router-styles-test-block-b/style.css
@@ -1,3 +1,4 @@
-.wp-block-test-router-styles-block-b {
+.wp-block-test-router-styles-block-b,
+[data-testid="counter"]  {
     color: blue;
 }
\ No newline at end of file

From 5656860af0075b140ead13913c9d041f648d6202 Mon Sep 17 00:00:00 2001
From: David <david.arenas@automattic.com>
Date: Mon, 16 Dec 2024 00:56:16 +0100
Subject: [PATCH 11/23] Implement first test

---
 .../specs/interactivity/router-styles.spec.ts | 55 +++++++++++++++++++
 1 file changed, 55 insertions(+)
 create mode 100644 test/e2e/specs/interactivity/router-styles.spec.ts

diff --git a/test/e2e/specs/interactivity/router-styles.spec.ts b/test/e2e/specs/interactivity/router-styles.spec.ts
new file mode 100644
index 00000000000000..de84925d5aa320
--- /dev/null
+++ b/test/e2e/specs/interactivity/router-styles.spec.ts
@@ -0,0 +1,55 @@
+/**
+ * Internal dependencies
+ */
+import { test, expect } from './fixtures';
+
+test.describe( 'Router styles', () => {
+	test.beforeAll( async ( { interactivityUtils: utils } ) => {
+		await utils.activatePlugins();
+		const blockA = await utils.addPostWithBlock(
+			'test/router-styles-region-block',
+			{
+				alias: 'block A',
+				innerBlocks: [ [ 'test/router-styles-block-a' ] ],
+			}
+		);
+		const blockB = await utils.addPostWithBlock(
+			'test/router-styles-region-block',
+			{
+				alias: 'block B',
+				innerBlocks: [ [ 'test/router-styles-block-b' ] ],
+			}
+		);
+
+		const both = await utils.addPostWithBlock(
+			'test/router-styles-region-block',
+			{
+				alias: 'both',
+				innerBlocks: [
+					[ 'test/router-styles-block-a' ],
+					[ 'test/router-styles-block-b' ],
+				],
+			}
+		);
+
+		await utils.addPostWithBlock( 'test/router-styles-region-block', {
+			alias: 'none',
+			attributes: { links: { blockA, blockB, both } },
+		} );
+	} );
+
+	test.beforeEach( async ( { page, interactivityUtils: utils } ) => {
+		await page.goto( utils.getLink( 'none' ) );
+	} );
+
+	test.afterAll( async ( { interactivityUtils: utils } ) => {
+		await utils.deactivatePlugins();
+		await utils.deleteAllPosts();
+	} );
+
+	test( 'should add new styles from style tags', async ( { page } ) => {
+		const counter = page.getByTestId( 'counter' );
+		await expect( counter ).toHaveText( '0' );
+		await expect( counter ).toHaveCSS( 'color', 'rgb(255, 0, 0)' );
+	} );
+} );

From 02abf7d0f1803ff4b401bb512c89e4dc0cc1f05b Mon Sep 17 00:00:00 2001
From: David <david.arenas@automattic.com>
Date: Mon, 16 Dec 2024 01:43:03 +0100
Subject: [PATCH 12/23] Add more tests WIP

---
 .../router-styles-region-block/style.css      |  2 +-
 .../router-styles-test-block-a/render.php     |  4 +-
 .../router-styles-test-block-a/style.css      |  2 +-
 .../router-styles-test-block-b/render.php     |  4 +-
 .../router-styles-test-block-b/style.css      |  2 +-
 .../specs/interactivity/router-styles.spec.ts | 53 +++++++++++++++++++
 6 files changed, 62 insertions(+), 5 deletions(-)

diff --git a/packages/e2e-tests/plugins/interactive-blocks/router-styles-region-block/style.css b/packages/e2e-tests/plugins/interactive-blocks/router-styles-region-block/style.css
index dd3f01a865da2c..931d2a78ca30a1 100644
--- a/packages/e2e-tests/plugins/interactive-blocks/router-styles-region-block/style.css
+++ b/packages/e2e-tests/plugins/interactive-blocks/router-styles-region-block/style.css
@@ -1,3 +1,3 @@
 .wp-block-test-router-styles-region-block {
-    color: red;
+    color: rgb(255, 0, 0);
 }
\ No newline at end of file
diff --git a/packages/e2e-tests/plugins/interactive-blocks/router-styles-test-block-a/render.php b/packages/e2e-tests/plugins/interactive-blocks/router-styles-test-block-a/render.php
index 02520085a986fc..6052ea887f44e6 100644
--- a/packages/e2e-tests/plugins/interactive-blocks/router-styles-test-block-a/render.php
+++ b/packages/e2e-tests/plugins/interactive-blocks/router-styles-test-block-a/render.php
@@ -7,6 +7,8 @@
  * @phpcs:disable VariableAnalysis.CodeAnalysis.VariableAnalysis.UndefinedVariable
  */
 
-$wrapper_attributes = get_block_wrapper_attributes();
+$wrapper_attributes = get_block_wrapper_attributes(
+	array( 'data-testid' => 'block-a' )
+);
 ?>
 <p <?php echo $wrapper_attributes; ?>>Block A</p>
diff --git a/packages/e2e-tests/plugins/interactive-blocks/router-styles-test-block-a/style.css b/packages/e2e-tests/plugins/interactive-blocks/router-styles-test-block-a/style.css
index 6b036a1c631fc8..7dc960d78e817c 100644
--- a/packages/e2e-tests/plugins/interactive-blocks/router-styles-test-block-a/style.css
+++ b/packages/e2e-tests/plugins/interactive-blocks/router-styles-test-block-a/style.css
@@ -1,4 +1,4 @@
 .wp-block-test-router-styles-block-a,
 [data-testid="counter"] {
-    color: green;
+    color: rgb(0, 255, 0);
 }
\ No newline at end of file
diff --git a/packages/e2e-tests/plugins/interactive-blocks/router-styles-test-block-b/render.php b/packages/e2e-tests/plugins/interactive-blocks/router-styles-test-block-b/render.php
index 584dc9081ad21a..596046891d91a8 100644
--- a/packages/e2e-tests/plugins/interactive-blocks/router-styles-test-block-b/render.php
+++ b/packages/e2e-tests/plugins/interactive-blocks/router-styles-test-block-b/render.php
@@ -7,6 +7,8 @@
  * @phpcs:disable VariableAnalysis.CodeAnalysis.VariableAnalysis.UndefinedVariable
  */
 
-$wrapper_attributes = get_block_wrapper_attributes();
+$wrapper_attributes = get_block_wrapper_attributes(
+	array( 'data-testid' => 'block-b' )
+);
 ?>
 <p <?php echo $wrapper_attributes; ?>>Block B</p>
diff --git a/packages/e2e-tests/plugins/interactive-blocks/router-styles-test-block-b/style.css b/packages/e2e-tests/plugins/interactive-blocks/router-styles-test-block-b/style.css
index 2faa9bc9e3d790..d495aa6491ab38 100644
--- a/packages/e2e-tests/plugins/interactive-blocks/router-styles-test-block-b/style.css
+++ b/packages/e2e-tests/plugins/interactive-blocks/router-styles-test-block-b/style.css
@@ -1,4 +1,4 @@
 .wp-block-test-router-styles-block-b,
 [data-testid="counter"]  {
-    color: blue;
+    color: rgb(0, 0, 255);
 }
\ No newline at end of file
diff --git a/test/e2e/specs/interactivity/router-styles.spec.ts b/test/e2e/specs/interactivity/router-styles.spec.ts
index de84925d5aa320..bbdb24fda31ad7 100644
--- a/test/e2e/specs/interactivity/router-styles.spec.ts
+++ b/test/e2e/specs/interactivity/router-styles.spec.ts
@@ -49,7 +49,60 @@ test.describe( 'Router styles', () => {
 
 	test( 'should add new styles from style tags', async ( { page } ) => {
 		const counter = page.getByTestId( 'counter' );
+		const blockA = page.getByTestId( 'block-a' );
+		const blockB = page.getByTestId( 'block-b' );
 		await expect( counter ).toHaveText( '0' );
 		await expect( counter ).toHaveCSS( 'color', 'rgb(255, 0, 0)' );
+		await expect( blockA ).toBeHidden();
+		await expect( blockB ).toBeHidden();
+
+		await page.getByTestId( 'link blockA' ).click();
+
+		await expect( counter ).toHaveText( '1' );
+		await expect( counter ).toHaveCSS( 'color', 'rgb(0, 255, 0)' );
+		await expect( blockA ).toHaveCSS( 'color', 'rgb(0, 255, 0)' );
+		await expect( blockB ).toBeHidden();
+
+		await page.getByTestId( 'link blockB' ).click();
+
+		await expect( counter ).toHaveText( '2' );
+		await expect( counter ).toHaveCSS( 'color', 'rgb(0, 0, 255)' );
+		await expect( blockA ).toBeHidden();
+		await expect( blockB ).toHaveCSS( 'color', 'rgb(0, 0, 255)' );
+
+		await page.getByTestId( 'link both' ).click();
+
+		await expect( counter ).toHaveText( '2' );
+		await expect( counter ).toHaveCSS( 'color', 'rgb(0, 0, 255)' );
+		await expect( blockA ).toHaveCSS( 'color', 'rgb(0, 255, 0)' );
+		await expect( blockB ).toHaveCSS( 'color', 'rgb(0, 0, 255)' );
+	} );
+
+	test( 'should remove styles from style tags missing in the new page', async ( {
+		page,
+	} ) => {
+		const counter = page.getByTestId( 'counter' );
+
+		await page.getByTestId( 'link both' ).click();
+
+		await expect( counter ).toHaveText( '1' );
+		await expect( counter ).toHaveCSS( 'color', 'rgb(0, 0, 255)' );
+
+		await page.getByTestId( 'link blockA' ).click();
+
+		await expect( counter ).toHaveText( '2' );
+		await expect( counter ).toHaveCSS( 'color', 'rgb(0, 255, 0)' );
+
+		await page.goBack();
+		await page.goBack();
+
+		await expect( counter ).toHaveText( '2' );
+		await expect( counter ).toHaveCSS( 'color', 'rgb(255, 0, 0)' );
 	} );
+
+	test( 'should update style tags with modified content', async () => {} );
+
+	test( 'should add new styles from referenced style sheets', async () => {} );
+	test( 'should remove styles from referenced style sheets missing in the new page', async () => {} );
+	test( 'should support relative URLs in referenced style sheets', async () => {} );
 } );

From 05a5ec30a41acb44ea6bfa2b77c4bcd652e81f07 Mon Sep 17 00:00:00 2001
From: David <david.arenas@automattic.com>
Date: Mon, 16 Dec 2024 13:12:40 +0100
Subject: [PATCH 13/23] Refactor test block to make them easier to understand
 WIP

---
 .../router-styles-region-block/render.php     | 39 -----------------
 .../router-styles-region-block/style.css      |  3 --
 .../block.json                                |  4 +-
 .../router-styles-wrapper/render.php          | 42 +++++++++++++++++++
 .../router-styles-wrapper/style.css           |  3 ++
 .../view.asset.php                            |  0
 .../view.js                                   |  4 +-
 .../specs/interactivity/router-styles.spec.ts | 29 +++++++------
 8 files changed, 65 insertions(+), 59 deletions(-)
 delete mode 100644 packages/e2e-tests/plugins/interactive-blocks/router-styles-region-block/render.php
 delete mode 100644 packages/e2e-tests/plugins/interactive-blocks/router-styles-region-block/style.css
 rename packages/e2e-tests/plugins/interactive-blocks/{router-styles-region-block => router-styles-wrapper}/block.json (75%)
 create mode 100644 packages/e2e-tests/plugins/interactive-blocks/router-styles-wrapper/render.php
 create mode 100644 packages/e2e-tests/plugins/interactive-blocks/router-styles-wrapper/style.css
 rename packages/e2e-tests/plugins/interactive-blocks/{router-styles-region-block => router-styles-wrapper}/view.asset.php (100%)
 rename packages/e2e-tests/plugins/interactive-blocks/{router-styles-region-block => router-styles-wrapper}/view.js (83%)

diff --git a/packages/e2e-tests/plugins/interactive-blocks/router-styles-region-block/render.php b/packages/e2e-tests/plugins/interactive-blocks/router-styles-region-block/render.php
deleted file mode 100644
index c8f6773e25c5f5..00000000000000
--- a/packages/e2e-tests/plugins/interactive-blocks/router-styles-region-block/render.php
+++ /dev/null
@@ -1,39 +0,0 @@
-<?php
-/**
- * HTML for testing the iAPI's style assets management.
- *
- * @package gutenberg-test-interactive-blocks
- *
- * @phpcs:disable VariableAnalysis.CodeAnalysis.VariableAnalysis.UndefinedVariable
- */
-
-$wrapper_attributes = get_block_wrapper_attributes();
-?>
-<div <?php echo $wrapper_attributes; ?>>
-	<!-- Interactive HTML NOT updated on navigation -->
-	<div data-wp-interactive="test/router-styles">
-		<div
-			data-testid="counter"
-			data-wp-text="state.navigationCount"
-		></div>
-		<nav>
-			<?php foreach ( $attributes['links'] as $label => $link ) : ?>
-				<a
-					data-testid="link <?php echo $label; ?>"
-					data-wp-on--click="actions.navigate"
-					href="<?php echo $link; ?>"
-				>
-					<?php echo $label; ?>
-				</a>
-			<?php endforeach; ?>
-		</nav>
-	</div>
-	<!-- HTML updated on navigation. -->
-	<div
-		data-wp-interactive="test/router-styles"
-		data-wp-router-region="router-styles"
-	>
-		<p>Inside a router region</p>
-		<?php echo $content; ?>
-	</div>
-</div>
diff --git a/packages/e2e-tests/plugins/interactive-blocks/router-styles-region-block/style.css b/packages/e2e-tests/plugins/interactive-blocks/router-styles-region-block/style.css
deleted file mode 100644
index 931d2a78ca30a1..00000000000000
--- a/packages/e2e-tests/plugins/interactive-blocks/router-styles-region-block/style.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.wp-block-test-router-styles-region-block {
-    color: rgb(255, 0, 0);
-}
\ No newline at end of file
diff --git a/packages/e2e-tests/plugins/interactive-blocks/router-styles-region-block/block.json b/packages/e2e-tests/plugins/interactive-blocks/router-styles-wrapper/block.json
similarity index 75%
rename from packages/e2e-tests/plugins/interactive-blocks/router-styles-region-block/block.json
rename to packages/e2e-tests/plugins/interactive-blocks/router-styles-wrapper/block.json
index 17e3216650d386..a1a95b4c81e3b6 100644
--- a/packages/e2e-tests/plugins/interactive-blocks/router-styles-region-block/block.json
+++ b/packages/e2e-tests/plugins/interactive-blocks/router-styles-wrapper/block.json
@@ -1,8 +1,8 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
-	"name": "test/router-styles-region-block",
-	"title": "E2E Interactivity tests - router styles - Region",
+	"name": "test/router-styles-wrapper",
+	"title": "E2E Interactivity tests - router styles - Wrapper",
 	"category": "text",
 	"icon": "heart",
 	"description": "",
diff --git a/packages/e2e-tests/plugins/interactive-blocks/router-styles-wrapper/render.php b/packages/e2e-tests/plugins/interactive-blocks/router-styles-wrapper/render.php
new file mode 100644
index 00000000000000..9d188a3ea97f10
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/router-styles-wrapper/render.php
@@ -0,0 +1,42 @@
+<?php
+/**
+ * HTML for testing the iAPI's style assets management.
+ *
+ * @package gutenberg-test-interactive-blocks
+ *
+ * @phpcs:disable VariableAnalysis.CodeAnalysis.VariableAnalysis.UndefinedVariable
+ */
+
+$wrapper_attributes = get_block_wrapper_attributes();
+?>
+<div <?php echo $wrapper_attributes; ?>>
+	<!-- Text to check whether a navigation was client-side. -->
+	<div
+		data-testid="client-side navigation"
+		data-wp-interactive="test/router-styles"
+		data-wp-bind--hidden="!state.clientSideNavigation"
+	>
+		Client-side navigation
+	</div>
+
+	<!-- Links to pages with different blocks combination. -->
+	<nav data-wp-interactive="test/router-styles">
+		<?php foreach ( $attributes['links'] as $label => $link ) : ?>
+			<a
+				data-testid="link <?php echo $label; ?>"
+				data-wp-on--click="actions.navigate"
+				href="<?php echo $link; ?>"
+			>
+				<?php echo $label; ?>
+			</a>
+		<?php endforeach; ?>
+	</nav>
+
+	<!-- HTML updated on navigation. -->
+	<div
+		data-wp-interactive="test/router-styles"
+		data-wp-router-region="router-styles"
+	>
+		<?php echo $content; ?>
+	</div>
+</div>
diff --git a/packages/e2e-tests/plugins/interactive-blocks/router-styles-wrapper/style.css b/packages/e2e-tests/plugins/interactive-blocks/router-styles-wrapper/style.css
new file mode 100644
index 00000000000000..12773560c4180f
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/router-styles-wrapper/style.css
@@ -0,0 +1,3 @@
+.wp-block-test-router-styles-wrapper {
+    color: rgb(160, 12, 60);
+}
\ No newline at end of file
diff --git a/packages/e2e-tests/plugins/interactive-blocks/router-styles-region-block/view.asset.php b/packages/e2e-tests/plugins/interactive-blocks/router-styles-wrapper/view.asset.php
similarity index 100%
rename from packages/e2e-tests/plugins/interactive-blocks/router-styles-region-block/view.asset.php
rename to packages/e2e-tests/plugins/interactive-blocks/router-styles-wrapper/view.asset.php
diff --git a/packages/e2e-tests/plugins/interactive-blocks/router-styles-region-block/view.js b/packages/e2e-tests/plugins/interactive-blocks/router-styles-wrapper/view.js
similarity index 83%
rename from packages/e2e-tests/plugins/interactive-blocks/router-styles-region-block/view.js
rename to packages/e2e-tests/plugins/interactive-blocks/router-styles-wrapper/view.js
index 1a4174817bd2a2..5b3b42f2b413e4 100644
--- a/packages/e2e-tests/plugins/interactive-blocks/router-styles-region-block/view.js
+++ b/packages/e2e-tests/plugins/interactive-blocks/router-styles-wrapper/view.js
@@ -5,7 +5,7 @@ import { store } from '@wordpress/interactivity';
 
 const { state } = store( 'test/router-styles', {
 	state: {
-		navigationCount: 0,
+		clientSideNavigation: false,
 	},
 	actions: {
 		*navigate( e ) {
@@ -14,7 +14,7 @@ const { state } = store( 'test/router-styles', {
 				'@wordpress/interactivity-router'
 			);
 			yield actions.navigate( e.target.href );
-			state.navigationCount += 1;
+			state.clientSideNavigation = true;
 		},
 	},
 } );
diff --git a/test/e2e/specs/interactivity/router-styles.spec.ts b/test/e2e/specs/interactivity/router-styles.spec.ts
index bbdb24fda31ad7..ce7b34ea6c339b 100644
--- a/test/e2e/specs/interactivity/router-styles.spec.ts
+++ b/test/e2e/specs/interactivity/router-styles.spec.ts
@@ -7,14 +7,14 @@ test.describe( 'Router styles', () => {
 	test.beforeAll( async ( { interactivityUtils: utils } ) => {
 		await utils.activatePlugins();
 		const blockA = await utils.addPostWithBlock(
-			'test/router-styles-region-block',
+			'test/router-styles-wrapper',
 			{
 				alias: 'block A',
 				innerBlocks: [ [ 'test/router-styles-block-a' ] ],
 			}
 		);
 		const blockB = await utils.addPostWithBlock(
-			'test/router-styles-region-block',
+			'test/router-styles-wrapper',
 			{
 				alias: 'block B',
 				innerBlocks: [ [ 'test/router-styles-block-b' ] ],
@@ -22,7 +22,7 @@ test.describe( 'Router styles', () => {
 		);
 
 		const both = await utils.addPostWithBlock(
-			'test/router-styles-region-block',
+			'test/router-styles-wrapper',
 			{
 				alias: 'both',
 				innerBlocks: [
@@ -32,7 +32,7 @@ test.describe( 'Router styles', () => {
 			}
 		);
 
-		await utils.addPostWithBlock( 'test/router-styles-region-block', {
+		await utils.addPostWithBlock( 'test/router-styles-wrapper', {
 			alias: 'none',
 			attributes: { links: { blockA, blockB, both } },
 		} );
@@ -48,32 +48,35 @@ test.describe( 'Router styles', () => {
 	} );
 
 	test( 'should add new styles from style tags', async ( { page } ) => {
-		const counter = page.getByTestId( 'counter' );
+		const csn = page.getByTestId( 'client-side navigation' );
 		const blockA = page.getByTestId( 'block-a' );
 		const blockB = page.getByTestId( 'block-b' );
-		await expect( counter ).toHaveText( '0' );
-		await expect( counter ).toHaveCSS( 'color', 'rgb(255, 0, 0)' );
+
+		// await expect( counter ).toHaveCSS( 'color', 'rgb(255, 0, 0)' );
 		await expect( blockA ).toBeHidden();
 		await expect( blockB ).toBeHidden();
 
 		await page.getByTestId( 'link blockA' ).click();
+		await expect( csn ).toBeVisible();
 
-		await expect( counter ).toHaveText( '1' );
-		await expect( counter ).toHaveCSS( 'color', 'rgb(0, 255, 0)' );
+		// await expect( counter ).toHaveText( '1' );
+		// await expect( counter ).toHaveCSS( 'color', 'rgb(0, 255, 0)' );
 		await expect( blockA ).toHaveCSS( 'color', 'rgb(0, 255, 0)' );
 		await expect( blockB ).toBeHidden();
 
 		await page.getByTestId( 'link blockB' ).click();
+		await expect( csn ).toBeVisible();
 
-		await expect( counter ).toHaveText( '2' );
-		await expect( counter ).toHaveCSS( 'color', 'rgb(0, 0, 255)' );
+		// await expect( counter ).toHaveText( '2' );
+		// await expect( counter ).toHaveCSS( 'color', 'rgb(0, 0, 255)' );
 		await expect( blockA ).toBeHidden();
 		await expect( blockB ).toHaveCSS( 'color', 'rgb(0, 0, 255)' );
 
 		await page.getByTestId( 'link both' ).click();
+		await expect( csn ).toBeVisible();
 
-		await expect( counter ).toHaveText( '2' );
-		await expect( counter ).toHaveCSS( 'color', 'rgb(0, 0, 255)' );
+		// await expect( counter ).toHaveText( '2' );
+		// await expect( counter ).toHaveCSS( 'color', 'rgb(0, 0, 255)' );
 		await expect( blockA ).toHaveCSS( 'color', 'rgb(0, 255, 0)' );
 		await expect( blockB ).toHaveCSS( 'color', 'rgb(0, 0, 255)' );
 	} );

From 98d5076e49dc74649635334ccae67b47bb0954a8 Mon Sep 17 00:00:00 2001
From: David <david.arenas@automattic.com>
Date: Mon, 16 Dec 2024 13:23:06 +0100
Subject: [PATCH 14/23] Keep refactoring test blocks

---
 .../block.json                                |  4 ++--
 .../render.php                                |  4 ++--
 .../style.css                                 |  2 +-
 .../block.json                                |  4 ++--
 .../router-styles-green/render.php            | 14 ++++++++++++
 .../style.css                                 |  2 +-
 .../router-styles-red/block.json              | 15 +++++++++++++
 .../render.php                                |  4 ++--
 .../router-styles-red/style.css               |  4 ++++
 .../router-styles-wrapper/render.php          | 22 +++++++++++++------
 10 files changed, 58 insertions(+), 17 deletions(-)
 rename packages/e2e-tests/plugins/interactive-blocks/{router-styles-test-block-a => router-styles-blue}/block.json (73%)
 rename packages/e2e-tests/plugins/interactive-blocks/{router-styles-test-block-b => router-styles-blue}/render.php (75%)
 rename packages/e2e-tests/plugins/interactive-blocks/{router-styles-test-block-b => router-styles-blue}/style.css (70%)
 rename packages/e2e-tests/plugins/interactive-blocks/{router-styles-test-block-b => router-styles-green}/block.json (73%)
 create mode 100644 packages/e2e-tests/plugins/interactive-blocks/router-styles-green/render.php
 rename packages/e2e-tests/plugins/interactive-blocks/{router-styles-test-block-a => router-styles-green}/style.css (71%)
 create mode 100644 packages/e2e-tests/plugins/interactive-blocks/router-styles-red/block.json
 rename packages/e2e-tests/plugins/interactive-blocks/{router-styles-test-block-a => router-styles-red}/render.php (75%)
 create mode 100644 packages/e2e-tests/plugins/interactive-blocks/router-styles-red/style.css

diff --git a/packages/e2e-tests/plugins/interactive-blocks/router-styles-test-block-a/block.json b/packages/e2e-tests/plugins/interactive-blocks/router-styles-blue/block.json
similarity index 73%
rename from packages/e2e-tests/plugins/interactive-blocks/router-styles-test-block-a/block.json
rename to packages/e2e-tests/plugins/interactive-blocks/router-styles-blue/block.json
index 21083882ab6b8e..644ea70f74dca1 100644
--- a/packages/e2e-tests/plugins/interactive-blocks/router-styles-test-block-a/block.json
+++ b/packages/e2e-tests/plugins/interactive-blocks/router-styles-blue/block.json
@@ -1,8 +1,8 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
-	"name": "test/router-styles-block-a",
-	"title": "E2E Interactivity tests - router styles - Block A",
+	"name": "test/router-styles-blue",
+	"title": "E2E Interactivity tests - router styles - Blue",
 	"category": "text",
 	"icon": "heart",
 	"description": "",
diff --git a/packages/e2e-tests/plugins/interactive-blocks/router-styles-test-block-b/render.php b/packages/e2e-tests/plugins/interactive-blocks/router-styles-blue/render.php
similarity index 75%
rename from packages/e2e-tests/plugins/interactive-blocks/router-styles-test-block-b/render.php
rename to packages/e2e-tests/plugins/interactive-blocks/router-styles-blue/render.php
index 596046891d91a8..933e82127547cd 100644
--- a/packages/e2e-tests/plugins/interactive-blocks/router-styles-test-block-b/render.php
+++ b/packages/e2e-tests/plugins/interactive-blocks/router-styles-blue/render.php
@@ -8,7 +8,7 @@
  */
 
 $wrapper_attributes = get_block_wrapper_attributes(
-	array( 'data-testid' => 'block-b' )
+	array( 'data-testid' => 'blue-block' )
 );
 ?>
-<p <?php echo $wrapper_attributes; ?>>Block B</p>
+<p <?php echo $wrapper_attributes; ?>>Blue</p>
diff --git a/packages/e2e-tests/plugins/interactive-blocks/router-styles-test-block-b/style.css b/packages/e2e-tests/plugins/interactive-blocks/router-styles-blue/style.css
similarity index 70%
rename from packages/e2e-tests/plugins/interactive-blocks/router-styles-test-block-b/style.css
rename to packages/e2e-tests/plugins/interactive-blocks/router-styles-blue/style.css
index d495aa6491ab38..e5282f9fb867dc 100644
--- a/packages/e2e-tests/plugins/interactive-blocks/router-styles-test-block-b/style.css
+++ b/packages/e2e-tests/plugins/interactive-blocks/router-styles-blue/style.css
@@ -1,4 +1,4 @@
 .wp-block-test-router-styles-block-b,
-[data-testid="counter"]  {
+.blue  {
     color: rgb(0, 0, 255);
 }
\ No newline at end of file
diff --git a/packages/e2e-tests/plugins/interactive-blocks/router-styles-test-block-b/block.json b/packages/e2e-tests/plugins/interactive-blocks/router-styles-green/block.json
similarity index 73%
rename from packages/e2e-tests/plugins/interactive-blocks/router-styles-test-block-b/block.json
rename to packages/e2e-tests/plugins/interactive-blocks/router-styles-green/block.json
index a489c5e174199a..e2edda625571b9 100644
--- a/packages/e2e-tests/plugins/interactive-blocks/router-styles-test-block-b/block.json
+++ b/packages/e2e-tests/plugins/interactive-blocks/router-styles-green/block.json
@@ -1,8 +1,8 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
-	"name": "test/router-styles-block-b",
-	"title": "E2E Interactivity tests - router styles - Block B",
+	"name": "test/router-styles-green",
+	"title": "E2E Interactivity tests - router styles - Green",
 	"category": "text",
 	"icon": "heart",
 	"description": "",
diff --git a/packages/e2e-tests/plugins/interactive-blocks/router-styles-green/render.php b/packages/e2e-tests/plugins/interactive-blocks/router-styles-green/render.php
new file mode 100644
index 00000000000000..d651b603ddf0ce
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/router-styles-green/render.php
@@ -0,0 +1,14 @@
+<?php
+/**
+ * HTML for testing the iAPI's style assets management.
+ *
+ * @package gutenberg-test-interactive-blocks
+ *
+ * @phpcs:disable VariableAnalysis.CodeAnalysis.VariableAnalysis.UndefinedVariable
+ */
+
+$wrapper_attributes = get_block_wrapper_attributes(
+	array( 'data-testid' => 'green-block' )
+);
+?>
+<p <?php echo $wrapper_attributes; ?>>Green</p>
diff --git a/packages/e2e-tests/plugins/interactive-blocks/router-styles-test-block-a/style.css b/packages/e2e-tests/plugins/interactive-blocks/router-styles-green/style.css
similarity index 71%
rename from packages/e2e-tests/plugins/interactive-blocks/router-styles-test-block-a/style.css
rename to packages/e2e-tests/plugins/interactive-blocks/router-styles-green/style.css
index 7dc960d78e817c..9dcd1c5f841926 100644
--- a/packages/e2e-tests/plugins/interactive-blocks/router-styles-test-block-a/style.css
+++ b/packages/e2e-tests/plugins/interactive-blocks/router-styles-green/style.css
@@ -1,4 +1,4 @@
 .wp-block-test-router-styles-block-a,
-[data-testid="counter"] {
+.green {
     color: rgb(0, 255, 0);
 }
\ No newline at end of file
diff --git a/packages/e2e-tests/plugins/interactive-blocks/router-styles-red/block.json b/packages/e2e-tests/plugins/interactive-blocks/router-styles-red/block.json
new file mode 100644
index 00000000000000..582d7019062c6e
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/router-styles-red/block.json
@@ -0,0 +1,15 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 2,
+	"name": "test/router-styles-red",
+	"title": "E2E Interactivity tests - router styles - Red",
+	"category": "text",
+	"icon": "heart",
+	"description": "",
+	"supports": {
+		"interactivity": true
+	},
+	"textdomain": "e2e-interactivity",
+	"viewStyle": "file:./style.css",
+	"render": "file:./render.php"
+}
diff --git a/packages/e2e-tests/plugins/interactive-blocks/router-styles-test-block-a/render.php b/packages/e2e-tests/plugins/interactive-blocks/router-styles-red/render.php
similarity index 75%
rename from packages/e2e-tests/plugins/interactive-blocks/router-styles-test-block-a/render.php
rename to packages/e2e-tests/plugins/interactive-blocks/router-styles-red/render.php
index 6052ea887f44e6..f502878db5576c 100644
--- a/packages/e2e-tests/plugins/interactive-blocks/router-styles-test-block-a/render.php
+++ b/packages/e2e-tests/plugins/interactive-blocks/router-styles-red/render.php
@@ -8,7 +8,7 @@
  */
 
 $wrapper_attributes = get_block_wrapper_attributes(
-	array( 'data-testid' => 'block-a' )
+	array( 'data-testid' => 'red-block' )
 );
 ?>
-<p <?php echo $wrapper_attributes; ?>>Block A</p>
+<p <?php echo $wrapper_attributes; ?>>Red</p>
diff --git a/packages/e2e-tests/plugins/interactive-blocks/router-styles-red/style.css b/packages/e2e-tests/plugins/interactive-blocks/router-styles-red/style.css
new file mode 100644
index 00000000000000..eac7e3af16e0b5
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/router-styles-red/style.css
@@ -0,0 +1,4 @@
+.wp-block-test-router-styles-red,
+.red {
+    color: rgb(255, 0, 0);
+}
\ No newline at end of file
diff --git a/packages/e2e-tests/plugins/interactive-blocks/router-styles-wrapper/render.php b/packages/e2e-tests/plugins/interactive-blocks/router-styles-wrapper/render.php
index 9d188a3ea97f10..282bcea062d7a0 100644
--- a/packages/e2e-tests/plugins/interactive-blocks/router-styles-wrapper/render.php
+++ b/packages/e2e-tests/plugins/interactive-blocks/router-styles-wrapper/render.php
@@ -10,13 +10,12 @@
 $wrapper_attributes = get_block_wrapper_attributes();
 ?>
 <div <?php echo $wrapper_attributes; ?>>
-	<!-- Text to check whether a navigation was client-side. -->
-	<div
-		data-testid="client-side navigation"
-		data-wp-interactive="test/router-styles"
-		data-wp-bind--hidden="!state.clientSideNavigation"
-	>
-		Client-side navigation
+	<!-- These get colored when the corresponding block is present. -->
+	<div>
+		<p class="red">Red</p>
+		<p class="green">Green</p>
+		<p class="blue">Blue</p>
+		<p class="red green blue">All</p>
 	</div>
 
 	<!-- Links to pages with different blocks combination. -->
@@ -39,4 +38,13 @@
 	>
 		<?php echo $content; ?>
 	</div>
+
+	<!-- Text to check whether a navigation was client-side. -->
+	<div
+		data-testid="client-side navigation"
+		data-wp-interactive="test/router-styles"
+		data-wp-bind--hidden="!state.clientSideNavigation"
+	>
+		Client-side navigation
+	</div>
 </div>

From 79434be3f93459ffa5b3d221a3003db632dc7344 Mon Sep 17 00:00:00 2001
From: David <david.arenas@automattic.com>
Date: Mon, 16 Dec 2024 13:35:02 +0100
Subject: [PATCH 15/23] Greatly simplify tests

---
 .../router-styles-wrapper/render.php          |   8 +-
 .../specs/interactivity/router-styles.spec.ts | 110 +++++++++---------
 2 files changed, 61 insertions(+), 57 deletions(-)

diff --git a/packages/e2e-tests/plugins/interactive-blocks/router-styles-wrapper/render.php b/packages/e2e-tests/plugins/interactive-blocks/router-styles-wrapper/render.php
index 282bcea062d7a0..c8f845c83f2b78 100644
--- a/packages/e2e-tests/plugins/interactive-blocks/router-styles-wrapper/render.php
+++ b/packages/e2e-tests/plugins/interactive-blocks/router-styles-wrapper/render.php
@@ -12,10 +12,10 @@
 <div <?php echo $wrapper_attributes; ?>>
 	<!-- These get colored when the corresponding block is present. -->
 	<div>
-		<p class="red">Red</p>
-		<p class="green">Green</p>
-		<p class="blue">Blue</p>
-		<p class="red green blue">All</p>
+		<p data-testid="red" class="red">Red</p>
+		<p data-testid="green" class="green">Green</p>
+		<p data-testid="blue" class="blue">Blue</p>
+		<p data-testid="all" class="red green blue">All</p>
 	</div>
 
 	<!-- Links to pages with different blocks combination. -->
diff --git a/test/e2e/specs/interactivity/router-styles.spec.ts b/test/e2e/specs/interactivity/router-styles.spec.ts
index ce7b34ea6c339b..aaf33520676193 100644
--- a/test/e2e/specs/interactivity/router-styles.spec.ts
+++ b/test/e2e/specs/interactivity/router-styles.spec.ts
@@ -3,38 +3,51 @@
  */
 import { test, expect } from './fixtures';
 
+const COLOR_RED = 'rgb(255, 0, 0)';
+const COLOR_GREEN = 'rgb(0, 255, 0)';
+const COLOR_BLUE = 'rgb(0, 0, 255)';
+const COLOR_WRAPPER = 'rgb(160, 12, 60)';
+
 test.describe( 'Router styles', () => {
 	test.beforeAll( async ( { interactivityUtils: utils } ) => {
 		await utils.activatePlugins();
-		const blockA = await utils.addPostWithBlock(
+		const red = await utils.addPostWithBlock(
+			'test/router-styles-wrapper',
+			{
+				alias: 'red',
+				innerBlocks: [ [ 'test/router-styles-red' ] ],
+			}
+		);
+		const green = await utils.addPostWithBlock(
 			'test/router-styles-wrapper',
 			{
-				alias: 'block A',
-				innerBlocks: [ [ 'test/router-styles-block-a' ] ],
+				alias: 'green',
+				innerBlocks: [ [ 'test/router-styles-green' ] ],
 			}
 		);
-		const blockB = await utils.addPostWithBlock(
+		const blue = await utils.addPostWithBlock(
 			'test/router-styles-wrapper',
 			{
-				alias: 'block B',
-				innerBlocks: [ [ 'test/router-styles-block-b' ] ],
+				alias: 'blue',
+				innerBlocks: [ [ 'test/router-styles-blue' ] ],
 			}
 		);
 
-		const both = await utils.addPostWithBlock(
+		const all = await utils.addPostWithBlock(
 			'test/router-styles-wrapper',
 			{
-				alias: 'both',
+				alias: 'all',
 				innerBlocks: [
-					[ 'test/router-styles-block-a' ],
-					[ 'test/router-styles-block-b' ],
+					[ 'test/router-styles-red' ],
+					[ 'test/router-styles-green' ],
+					[ 'test/router-styles-blue' ],
 				],
 			}
 		);
 
 		await utils.addPostWithBlock( 'test/router-styles-wrapper', {
 			alias: 'none',
-			attributes: { links: { blockA, blockB, both } },
+			attributes: { links: { red, green, blue, all } },
 		} );
 	} );
 
@@ -47,60 +60,51 @@ test.describe( 'Router styles', () => {
 		await utils.deleteAllPosts();
 	} );
 
-	test( 'should add new styles from style tags', async ( { page } ) => {
+	test( 'should add and remove styles from style tags', async ( {
+		page,
+	} ) => {
 		const csn = page.getByTestId( 'client-side navigation' );
-		const blockA = page.getByTestId( 'block-a' );
-		const blockB = page.getByTestId( 'block-b' );
+		const red = page.getByTestId( 'red' );
+		const green = page.getByTestId( 'green' );
+		const blue = page.getByTestId( 'blue' );
+		const all = page.getByTestId( 'all' );
 
-		// await expect( counter ).toHaveCSS( 'color', 'rgb(255, 0, 0)' );
-		await expect( blockA ).toBeHidden();
-		await expect( blockB ).toBeHidden();
-
-		await page.getByTestId( 'link blockA' ).click();
-		await expect( csn ).toBeVisible();
+		await expect( red ).toHaveCSS( 'color', COLOR_WRAPPER );
+		await expect( green ).toHaveCSS( 'color', COLOR_WRAPPER );
+		await expect( blue ).toHaveCSS( 'color', COLOR_WRAPPER );
+		await expect( all ).toHaveCSS( 'color', COLOR_WRAPPER );
 
-		// await expect( counter ).toHaveText( '1' );
-		// await expect( counter ).toHaveCSS( 'color', 'rgb(0, 255, 0)' );
-		await expect( blockA ).toHaveCSS( 'color', 'rgb(0, 255, 0)' );
-		await expect( blockB ).toBeHidden();
+		await page.getByTestId( 'link red' ).click();
 
-		await page.getByTestId( 'link blockB' ).click();
 		await expect( csn ).toBeVisible();
+		await expect( red ).toHaveCSS( 'color', COLOR_RED );
+		await expect( green ).toHaveCSS( 'color', COLOR_WRAPPER );
+		await expect( blue ).toHaveCSS( 'color', COLOR_WRAPPER );
+		await expect( all ).toHaveCSS( 'color', COLOR_RED );
 
-		// await expect( counter ).toHaveText( '2' );
-		// await expect( counter ).toHaveCSS( 'color', 'rgb(0, 0, 255)' );
-		await expect( blockA ).toBeHidden();
-		await expect( blockB ).toHaveCSS( 'color', 'rgb(0, 0, 255)' );
+		await page.getByTestId( 'link green' ).click();
 
-		await page.getByTestId( 'link both' ).click();
 		await expect( csn ).toBeVisible();
+		await expect( red ).toHaveCSS( 'color', COLOR_WRAPPER );
+		await expect( green ).toHaveCSS( 'color', COLOR_GREEN );
+		await expect( blue ).toHaveCSS( 'color', COLOR_WRAPPER );
+		await expect( all ).toHaveCSS( 'color', COLOR_GREEN );
 
-		// await expect( counter ).toHaveText( '2' );
-		// await expect( counter ).toHaveCSS( 'color', 'rgb(0, 0, 255)' );
-		await expect( blockA ).toHaveCSS( 'color', 'rgb(0, 255, 0)' );
-		await expect( blockB ).toHaveCSS( 'color', 'rgb(0, 0, 255)' );
-	} );
-
-	test( 'should remove styles from style tags missing in the new page', async ( {
-		page,
-	} ) => {
-		const counter = page.getByTestId( 'counter' );
-
-		await page.getByTestId( 'link both' ).click();
+		await page.getByTestId( 'link blue' ).click();
 
-		await expect( counter ).toHaveText( '1' );
-		await expect( counter ).toHaveCSS( 'color', 'rgb(0, 0, 255)' );
-
-		await page.getByTestId( 'link blockA' ).click();
-
-		await expect( counter ).toHaveText( '2' );
-		await expect( counter ).toHaveCSS( 'color', 'rgb(0, 255, 0)' );
+		await expect( csn ).toBeVisible();
+		await expect( red ).toHaveCSS( 'color', COLOR_WRAPPER );
+		await expect( green ).toHaveCSS( 'color', COLOR_WRAPPER );
+		await expect( blue ).toHaveCSS( 'color', COLOR_BLUE );
+		await expect( all ).toHaveCSS( 'color', COLOR_BLUE );
 
-		await page.goBack();
-		await page.goBack();
+		await page.getByTestId( 'link all' ).click();
 
-		await expect( counter ).toHaveText( '2' );
-		await expect( counter ).toHaveCSS( 'color', 'rgb(255, 0, 0)' );
+		await expect( csn ).toBeVisible();
+		await expect( red ).toHaveCSS( 'color', COLOR_RED );
+		await expect( green ).toHaveCSS( 'color', COLOR_GREEN );
+		await expect( blue ).toHaveCSS( 'color', COLOR_BLUE );
+		await expect( all ).toHaveCSS( 'color', COLOR_BLUE );
 	} );
 
 	test( 'should update style tags with modified content', async () => {} );

From c8bac0fbbee82440ff9bf0cea1daad3fab65d431 Mon Sep 17 00:00:00 2001
From: David <david.arenas@automattic.com>
Date: Mon, 16 Dec 2024 13:51:11 +0100
Subject: [PATCH 16/23] Test support for referenced style sheets

---
 .../router-styles-blue/render.php             | 11 +++++
 .../router-styles-blue/style-from-link.css    |  3 ++
 .../router-styles-green/render.php            | 11 +++++
 .../router-styles-green/style-from-link.css   |  3 ++
 .../router-styles-red/render.php              | 11 +++++
 .../router-styles-red/style-from-link.css     |  3 ++
 .../router-styles-wrapper/render.php          |  7 +++
 .../specs/interactivity/router-styles.spec.ts | 48 ++++++++++++++++++-
 8 files changed, 96 insertions(+), 1 deletion(-)
 create mode 100644 packages/e2e-tests/plugins/interactive-blocks/router-styles-blue/style-from-link.css
 create mode 100644 packages/e2e-tests/plugins/interactive-blocks/router-styles-green/style-from-link.css
 create mode 100644 packages/e2e-tests/plugins/interactive-blocks/router-styles-red/style-from-link.css

diff --git a/packages/e2e-tests/plugins/interactive-blocks/router-styles-blue/render.php b/packages/e2e-tests/plugins/interactive-blocks/router-styles-blue/render.php
index 933e82127547cd..f608d4a946770c 100644
--- a/packages/e2e-tests/plugins/interactive-blocks/router-styles-blue/render.php
+++ b/packages/e2e-tests/plugins/interactive-blocks/router-styles-blue/render.php
@@ -7,6 +7,17 @@
  * @phpcs:disable VariableAnalysis.CodeAnalysis.VariableAnalysis.UndefinedVariable
  */
 
+add_action(
+	'wp_enqueue_scripts',
+	function () {
+		wp_enqueue_style(
+			'blue-from-link',
+			plugin_dir_url( __FILE__ ) . 'style-from-link.css',
+			array()
+		);
+	}
+);
+
 $wrapper_attributes = get_block_wrapper_attributes(
 	array( 'data-testid' => 'blue-block' )
 );
diff --git a/packages/e2e-tests/plugins/interactive-blocks/router-styles-blue/style-from-link.css b/packages/e2e-tests/plugins/interactive-blocks/router-styles-blue/style-from-link.css
new file mode 100644
index 00000000000000..0d9bbba7bf4f92
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/router-styles-blue/style-from-link.css
@@ -0,0 +1,3 @@
+.blue-from-link {
+    color: rgb(0, 0, 255);
+}
\ No newline at end of file
diff --git a/packages/e2e-tests/plugins/interactive-blocks/router-styles-green/render.php b/packages/e2e-tests/plugins/interactive-blocks/router-styles-green/render.php
index d651b603ddf0ce..443babe3f96c84 100644
--- a/packages/e2e-tests/plugins/interactive-blocks/router-styles-green/render.php
+++ b/packages/e2e-tests/plugins/interactive-blocks/router-styles-green/render.php
@@ -7,6 +7,17 @@
  * @phpcs:disable VariableAnalysis.CodeAnalysis.VariableAnalysis.UndefinedVariable
  */
 
+add_action(
+	'wp_enqueue_scripts',
+	function () {
+		wp_enqueue_style(
+			'green-from-link',
+			plugin_dir_url( __FILE__ ) . 'style-from-link.css',
+			array()
+		);
+	}
+);
+
 $wrapper_attributes = get_block_wrapper_attributes(
 	array( 'data-testid' => 'green-block' )
 );
diff --git a/packages/e2e-tests/plugins/interactive-blocks/router-styles-green/style-from-link.css b/packages/e2e-tests/plugins/interactive-blocks/router-styles-green/style-from-link.css
new file mode 100644
index 00000000000000..f7fe92c7f501d2
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/router-styles-green/style-from-link.css
@@ -0,0 +1,3 @@
+.green-from-link {
+    color: rgb(0, 255, 0);
+}
\ No newline at end of file
diff --git a/packages/e2e-tests/plugins/interactive-blocks/router-styles-red/render.php b/packages/e2e-tests/plugins/interactive-blocks/router-styles-red/render.php
index f502878db5576c..c93f64833245a4 100644
--- a/packages/e2e-tests/plugins/interactive-blocks/router-styles-red/render.php
+++ b/packages/e2e-tests/plugins/interactive-blocks/router-styles-red/render.php
@@ -7,6 +7,17 @@
  * @phpcs:disable VariableAnalysis.CodeAnalysis.VariableAnalysis.UndefinedVariable
  */
 
+add_action(
+	'wp_enqueue_scripts',
+	function () {
+		wp_enqueue_style(
+			'red-from-link',
+			plugin_dir_url( __FILE__ ) . 'style-from-link.css',
+			array()
+		);
+	}
+);
+
 $wrapper_attributes = get_block_wrapper_attributes(
 	array( 'data-testid' => 'red-block' )
 );
diff --git a/packages/e2e-tests/plugins/interactive-blocks/router-styles-red/style-from-link.css b/packages/e2e-tests/plugins/interactive-blocks/router-styles-red/style-from-link.css
new file mode 100644
index 00000000000000..70ee5f90c5d27e
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/router-styles-red/style-from-link.css
@@ -0,0 +1,3 @@
+.red-from-link {
+    color: rgb(255, 0, 0);
+}
\ No newline at end of file
diff --git a/packages/e2e-tests/plugins/interactive-blocks/router-styles-wrapper/render.php b/packages/e2e-tests/plugins/interactive-blocks/router-styles-wrapper/render.php
index c8f845c83f2b78..dbad03810a2a69 100644
--- a/packages/e2e-tests/plugins/interactive-blocks/router-styles-wrapper/render.php
+++ b/packages/e2e-tests/plugins/interactive-blocks/router-styles-wrapper/render.php
@@ -17,6 +17,13 @@
 		<p data-testid="blue" class="blue">Blue</p>
 		<p data-testid="all" class="red green blue">All</p>
 	</div>
+	<!-- These get colored when the corresponding block enqueues a referenced stylesheet. -->
+	<div>
+		<p data-testid="red-from-link" class="red-from-link">Red from link</p>
+		<p data-testid="green-from-link" class="green-from-link">Green from link</p>
+		<p data-testid="blue-from-link" class="blue-from-link">Blue from link</p>
+		<p data-testid="all-from-link" class="red-from-link green-from-link blue-from-link">All from link</p>
+	</div>
 
 	<!-- Links to pages with different blocks combination. -->
 	<nav data-wp-interactive="test/router-styles">
diff --git a/test/e2e/specs/interactivity/router-styles.spec.ts b/test/e2e/specs/interactivity/router-styles.spec.ts
index aaf33520676193..41f6a39d8e39d6 100644
--- a/test/e2e/specs/interactivity/router-styles.spec.ts
+++ b/test/e2e/specs/interactivity/router-styles.spec.ts
@@ -109,7 +109,53 @@ test.describe( 'Router styles', () => {
 
 	test( 'should update style tags with modified content', async () => {} );
 
-	test( 'should add new styles from referenced style sheets', async () => {} );
+	test( 'should add and remove styles from referenced style sheets', async ( {
+		page,
+	} ) => {
+		const csn = page.getByTestId( 'client-side navigation' );
+		const red = page.getByTestId( 'red-from-link' );
+		const green = page.getByTestId( 'green-from-link' );
+		const blue = page.getByTestId( 'blue-from-link' );
+		const all = page.getByTestId( 'all-from-link' );
+
+		await expect( red ).toHaveCSS( 'color', COLOR_WRAPPER );
+		await expect( green ).toHaveCSS( 'color', COLOR_WRAPPER );
+		await expect( blue ).toHaveCSS( 'color', COLOR_WRAPPER );
+		await expect( all ).toHaveCSS( 'color', COLOR_WRAPPER );
+
+		await page.getByTestId( 'link red' ).click();
+
+		await expect( csn ).toBeVisible();
+		await expect( red ).toHaveCSS( 'color', COLOR_RED );
+		await expect( green ).toHaveCSS( 'color', COLOR_WRAPPER );
+		await expect( blue ).toHaveCSS( 'color', COLOR_WRAPPER );
+		await expect( all ).toHaveCSS( 'color', COLOR_RED );
+
+		await page.getByTestId( 'link green' ).click();
+
+		await expect( csn ).toBeVisible();
+		await expect( red ).toHaveCSS( 'color', COLOR_WRAPPER );
+		await expect( green ).toHaveCSS( 'color', COLOR_GREEN );
+		await expect( blue ).toHaveCSS( 'color', COLOR_WRAPPER );
+		await expect( all ).toHaveCSS( 'color', COLOR_GREEN );
+
+		await page.getByTestId( 'link blue' ).click();
+
+		await expect( csn ).toBeVisible();
+		await expect( red ).toHaveCSS( 'color', COLOR_WRAPPER );
+		await expect( green ).toHaveCSS( 'color', COLOR_WRAPPER );
+		await expect( blue ).toHaveCSS( 'color', COLOR_BLUE );
+		await expect( all ).toHaveCSS( 'color', COLOR_BLUE );
+
+		await page.getByTestId( 'link all' ).click();
+
+		await expect( csn ).toBeVisible();
+		await expect( red ).toHaveCSS( 'color', COLOR_RED );
+		await expect( green ).toHaveCSS( 'color', COLOR_GREEN );
+		await expect( blue ).toHaveCSS( 'color', COLOR_BLUE );
+		await expect( all ).toHaveCSS( 'color', COLOR_BLUE );
+	} );
+
 	test( 'should remove styles from referenced style sheets missing in the new page', async () => {} );
 	test( 'should support relative URLs in referenced style sheets', async () => {} );
 } );

From 76841c7208882e9da5c6ebceac43381772dcf8a9 Mon Sep 17 00:00:00 2001
From: David <david.arenas@automattic.com>
Date: Mon, 16 Dec 2024 13:52:41 +0100
Subject: [PATCH 17/23] Fix style files

---
 .../plugins/interactive-blocks/router-styles-blue/style.css     | 2 +-
 .../plugins/interactive-blocks/router-styles-green/style.css    | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/e2e-tests/plugins/interactive-blocks/router-styles-blue/style.css b/packages/e2e-tests/plugins/interactive-blocks/router-styles-blue/style.css
index e5282f9fb867dc..84d891e90242a5 100644
--- a/packages/e2e-tests/plugins/interactive-blocks/router-styles-blue/style.css
+++ b/packages/e2e-tests/plugins/interactive-blocks/router-styles-blue/style.css
@@ -1,4 +1,4 @@
-.wp-block-test-router-styles-block-b,
+.wp-block-test-router-styles-blue,
 .blue  {
     color: rgb(0, 0, 255);
 }
\ No newline at end of file
diff --git a/packages/e2e-tests/plugins/interactive-blocks/router-styles-green/style.css b/packages/e2e-tests/plugins/interactive-blocks/router-styles-green/style.css
index 9dcd1c5f841926..0c457588f625cb 100644
--- a/packages/e2e-tests/plugins/interactive-blocks/router-styles-green/style.css
+++ b/packages/e2e-tests/plugins/interactive-blocks/router-styles-green/style.css
@@ -1,4 +1,4 @@
-.wp-block-test-router-styles-block-a,
+.wp-block-test-router-styles-green,
 .green {
     color: rgb(0, 255, 0);
 }
\ No newline at end of file

From ec301ef068e1e7a2d84cde06ed2b8906acea50f7 Mon Sep 17 00:00:00 2001
From: David <david.arenas@automattic.com>
Date: Mon, 16 Dec 2024 13:55:30 +0100
Subject: [PATCH 18/23] Make HTML more clear

---
 .../router-styles-wrapper/render.php                   | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/packages/e2e-tests/plugins/interactive-blocks/router-styles-wrapper/render.php b/packages/e2e-tests/plugins/interactive-blocks/router-styles-wrapper/render.php
index dbad03810a2a69..77774a4debcbf5 100644
--- a/packages/e2e-tests/plugins/interactive-blocks/router-styles-wrapper/render.php
+++ b/packages/e2e-tests/plugins/interactive-blocks/router-styles-wrapper/render.php
@@ -11,19 +11,21 @@
 ?>
 <div <?php echo $wrapper_attributes; ?>>
 	<!-- These get colored when the corresponding block is present. -->
-	<div>
+	<fieldset>
+		<legend>Styles from block styles</legend>
 		<p data-testid="red" class="red">Red</p>
 		<p data-testid="green" class="green">Green</p>
 		<p data-testid="blue" class="blue">Blue</p>
 		<p data-testid="all" class="red green blue">All</p>
-	</div>
+	</fieldset>
 	<!-- These get colored when the corresponding block enqueues a referenced stylesheet. -->
-	<div>
+	<fieldset>
+		<legend>Styles from referenced style sheets</legend>
 		<p data-testid="red-from-link" class="red-from-link">Red from link</p>
 		<p data-testid="green-from-link" class="green-from-link">Green from link</p>
 		<p data-testid="blue-from-link" class="blue-from-link">Blue from link</p>
 		<p data-testid="all-from-link" class="red-from-link green-from-link blue-from-link">All from link</p>
-	</div>
+	</fieldset>
 
 	<!-- Links to pages with different blocks combination. -->
 	<nav data-wp-interactive="test/router-styles">

From bcdbe32c5b1b6229ca4f47d2ba4825fad57faedf Mon Sep 17 00:00:00 2001
From: David <david.arenas@automattic.com>
Date: Mon, 16 Dec 2024 14:28:56 +0100
Subject: [PATCH 19/23] Add test for relative URLs

---
 .../assets/10x10_e2e_test_image_blue.png      | Bin 0 -> 119 bytes
 .../router-styles-blue/style-from-link.css    |   4 +++
 .../assets/10x10_e2e_test_image_green.png     | Bin 0 -> 119 bytes
 .../router-styles-green/style-from-link.css   |   4 +++
 .../assets/10x10_e2e_test_image_red.png       | Bin 0 -> 119 bytes
 .../router-styles-red/style-from-link.css     |   4 +++
 .../router-styles-wrapper/render.php          |   1 +
 ...-in-referenced-style-sheets-1-chromium.png | Bin 0 -> 92 bytes
 ...-in-referenced-style-sheets-2-chromium.png | Bin 0 -> 96 bytes
 ...-in-referenced-style-sheets-3-chromium.png | Bin 0 -> 96 bytes
 ...-in-referenced-style-sheets-4-chromium.png | Bin 0 -> 97 bytes
 ...-in-referenced-style-sheets-5-chromium.png | Bin 0 -> 97 bytes
 .../specs/interactivity/router-styles.spec.ts |  34 +++++++++++++++---
 13 files changed, 43 insertions(+), 4 deletions(-)
 create mode 100644 packages/e2e-tests/plugins/interactive-blocks/router-styles-blue/assets/10x10_e2e_test_image_blue.png
 create mode 100644 packages/e2e-tests/plugins/interactive-blocks/router-styles-green/assets/10x10_e2e_test_image_green.png
 create mode 100644 packages/e2e-tests/plugins/interactive-blocks/router-styles-red/assets/10x10_e2e_test_image_red.png
 create mode 100644 test/e2e/specs/interactivity/__snapshots__/Router-styles-should-support-relative-URLs-in-referenced-style-sheets-1-chromium.png
 create mode 100644 test/e2e/specs/interactivity/__snapshots__/Router-styles-should-support-relative-URLs-in-referenced-style-sheets-2-chromium.png
 create mode 100644 test/e2e/specs/interactivity/__snapshots__/Router-styles-should-support-relative-URLs-in-referenced-style-sheets-3-chromium.png
 create mode 100644 test/e2e/specs/interactivity/__snapshots__/Router-styles-should-support-relative-URLs-in-referenced-style-sheets-4-chromium.png
 create mode 100644 test/e2e/specs/interactivity/__snapshots__/Router-styles-should-support-relative-URLs-in-referenced-style-sheets-5-chromium.png

diff --git a/packages/e2e-tests/plugins/interactive-blocks/router-styles-blue/assets/10x10_e2e_test_image_blue.png b/packages/e2e-tests/plugins/interactive-blocks/router-styles-blue/assets/10x10_e2e_test_image_blue.png
new file mode 100644
index 0000000000000000000000000000000000000000..c4f8e7c5146d362a505607042039b832115b9dfb
GIT binary patch
literal 119
zcmeAS@N?(olHy`uVBq!ia0vp^AT}2xGmzZ=C-xtZVk{1FcVfJGQl}os;VkfoEM{Qf
z76xHPhFNnYfP%~cJ|V6Q4FCStKRO8H@_M>BhE&W+PDw~O(#ybbn1TC*g4kN11cRrm
KpUXO@geCyWY#fvT

literal 0
HcmV?d00001

diff --git a/packages/e2e-tests/plugins/interactive-blocks/router-styles-blue/style-from-link.css b/packages/e2e-tests/plugins/interactive-blocks/router-styles-blue/style-from-link.css
index 0d9bbba7bf4f92..f55f12f4d594cf 100644
--- a/packages/e2e-tests/plugins/interactive-blocks/router-styles-blue/style-from-link.css
+++ b/packages/e2e-tests/plugins/interactive-blocks/router-styles-blue/style-from-link.css
@@ -1,3 +1,7 @@
 .blue-from-link {
     color: rgb(0, 0, 255);
+}
+
+.background-from-link {
+    background-image: url('./assets/10x10_e2e_test_image_blue.png');
 }
\ No newline at end of file
diff --git a/packages/e2e-tests/plugins/interactive-blocks/router-styles-green/assets/10x10_e2e_test_image_green.png b/packages/e2e-tests/plugins/interactive-blocks/router-styles-green/assets/10x10_e2e_test_image_green.png
new file mode 100644
index 0000000000000000000000000000000000000000..34ec87925d8c5045f71f6d09724db8fa00ff03af
GIT binary patch
literal 119
zcmeAS@N?(olHy`uVBq!ia0vp^AT}2xGmzZ=C-xtZVk{1FcVfJGQl}os;VkfoEM{Qf
z76xHPhFNnYfP%~cJ|V6Q{~1i;4y*ujc|BbmLn`JZrz9jC>1ALz%)os@L2NBhg2B_(
K&t;ucLK6U;SQ~Hv

literal 0
HcmV?d00001

diff --git a/packages/e2e-tests/plugins/interactive-blocks/router-styles-green/style-from-link.css b/packages/e2e-tests/plugins/interactive-blocks/router-styles-green/style-from-link.css
index f7fe92c7f501d2..b3d7d7b111e52a 100644
--- a/packages/e2e-tests/plugins/interactive-blocks/router-styles-green/style-from-link.css
+++ b/packages/e2e-tests/plugins/interactive-blocks/router-styles-green/style-from-link.css
@@ -1,3 +1,7 @@
 .green-from-link {
     color: rgb(0, 255, 0);
+}
+
+.background-from-link {
+    background-image: url('./assets/10x10_e2e_test_image_green.png');
 }
\ No newline at end of file
diff --git a/packages/e2e-tests/plugins/interactive-blocks/router-styles-red/assets/10x10_e2e_test_image_red.png b/packages/e2e-tests/plugins/interactive-blocks/router-styles-red/assets/10x10_e2e_test_image_red.png
new file mode 100644
index 0000000000000000000000000000000000000000..3264bf6427c2766e0b2e6cb8c5dc0f88d123e239
GIT binary patch
literal 119
zcmeAS@N?(olHy`uVBq!ia0vp^AT}2xGmzZ=C-xtZVk{1FcVfJGQl}os;VkfoEM{Qf
z76xHPhFNnYfP%~cJ|V9E85krVahe0Uyq+$OAr*6yQxX!6^fE9UX5c=dAhs4L!QkoY
K=d#Wzp$Pzi{Ti_V

literal 0
HcmV?d00001

diff --git a/packages/e2e-tests/plugins/interactive-blocks/router-styles-red/style-from-link.css b/packages/e2e-tests/plugins/interactive-blocks/router-styles-red/style-from-link.css
index 70ee5f90c5d27e..0f7d6228079897 100644
--- a/packages/e2e-tests/plugins/interactive-blocks/router-styles-red/style-from-link.css
+++ b/packages/e2e-tests/plugins/interactive-blocks/router-styles-red/style-from-link.css
@@ -1,3 +1,7 @@
 .red-from-link {
     color: rgb(255, 0, 0);
+}
+
+.background-from-link {
+    background-image: url('./assets/10x10_e2e_test_image_red.png');
 }
\ No newline at end of file
diff --git a/packages/e2e-tests/plugins/interactive-blocks/router-styles-wrapper/render.php b/packages/e2e-tests/plugins/interactive-blocks/router-styles-wrapper/render.php
index 77774a4debcbf5..23f9e6f1dd08c3 100644
--- a/packages/e2e-tests/plugins/interactive-blocks/router-styles-wrapper/render.php
+++ b/packages/e2e-tests/plugins/interactive-blocks/router-styles-wrapper/render.php
@@ -25,6 +25,7 @@
 		<p data-testid="green-from-link" class="green-from-link">Green from link</p>
 		<p data-testid="blue-from-link" class="blue-from-link">Blue from link</p>
 		<p data-testid="all-from-link" class="red-from-link green-from-link blue-from-link">All from link</p>
+		<div data-testid="background-from-link"class="background-from-link" style="width: 10px; height: 10px"></div>
 	</fieldset>
 
 	<!-- Links to pages with different blocks combination. -->
diff --git a/test/e2e/specs/interactivity/__snapshots__/Router-styles-should-support-relative-URLs-in-referenced-style-sheets-1-chromium.png b/test/e2e/specs/interactivity/__snapshots__/Router-styles-should-support-relative-URLs-in-referenced-style-sheets-1-chromium.png
new file mode 100644
index 0000000000000000000000000000000000000000..4bc0f7a6b1dd7010f6e452350e97ea302ddd9e1b
GIT binary patch
literal 92
zcmeAS@N?(olHy`uVBq!ia0vp^AT~D#6OcT~)9nwW7>k44ofy`glX(f`h<Um=hG<Mo
o{`3F8J#*fH7WcdmDRBk{R(odQu<O<vfGQX~UHx3vIVCg!0B!abTmS$7

literal 0
HcmV?d00001

diff --git a/test/e2e/specs/interactivity/__snapshots__/Router-styles-should-support-relative-URLs-in-referenced-style-sheets-2-chromium.png b/test/e2e/specs/interactivity/__snapshots__/Router-styles-should-support-relative-URLs-in-referenced-style-sheets-2-chromium.png
new file mode 100644
index 0000000000000000000000000000000000000000..7339cccdb78f288a62408313716a9cc0aba689c3
GIT binary patch
literal 96
zcmeAS@N?(olHy`uVBq!ia0vp^AT~D#6OcT~)9nwW7>k44ofy`glX(f`NO`(AhG<Mo
s{`3F8J#*fH4*yAwjhyS>bWCMqFn`P<Xx7sAAE=7K)78&qol`;+032Z&*Z=?k

literal 0
HcmV?d00001

diff --git a/test/e2e/specs/interactivity/__snapshots__/Router-styles-should-support-relative-URLs-in-referenced-style-sheets-3-chromium.png b/test/e2e/specs/interactivity/__snapshots__/Router-styles-should-support-relative-URLs-in-referenced-style-sheets-3-chromium.png
new file mode 100644
index 0000000000000000000000000000000000000000..97943030eb1e88ca5e59d5c671411c42c34d31da
GIT binary patch
literal 96
zcmeAS@N?(olHy`uVBq!ia0vp^AT~D#6OcT~)9nwW7>k44ofy`glX(f`NO`(AhG<Mo
s{`3F8J#*fH6Ak{;8ad}bIWd)u!R!f(VCdfPt3Xu@p00i_>zopr04R|gIsgCw

literal 0
HcmV?d00001

diff --git a/test/e2e/specs/interactivity/__snapshots__/Router-styles-should-support-relative-URLs-in-referenced-style-sheets-4-chromium.png b/test/e2e/specs/interactivity/__snapshots__/Router-styles-should-support-relative-URLs-in-referenced-style-sheets-4-chromium.png
new file mode 100644
index 0000000000000000000000000000000000000000..b7c455784e8a425cb06f4d1c3e8397e552ca19c2
GIT binary patch
literal 97
zcmeAS@N?(olHy`uVBq!ia0vp^AT~D#6OcT~)9nwW7>k44ofy`glX(f`NPD_ChG<Mo
t{`3F8J#*fH69+!<_nQdI?G)7EWiZ*qA~4fM^f*u%gQu&X%Q~loCIA>r8Danc

literal 0
HcmV?d00001

diff --git a/test/e2e/specs/interactivity/__snapshots__/Router-styles-should-support-relative-URLs-in-referenced-style-sheets-5-chromium.png b/test/e2e/specs/interactivity/__snapshots__/Router-styles-should-support-relative-URLs-in-referenced-style-sheets-5-chromium.png
new file mode 100644
index 0000000000000000000000000000000000000000..b7c455784e8a425cb06f4d1c3e8397e552ca19c2
GIT binary patch
literal 97
zcmeAS@N?(olHy`uVBq!ia0vp^AT~D#6OcT~)9nwW7>k44ofy`glX(f`NPD_ChG<Mo
t{`3F8J#*fH69+!<_nQdI?G)7EWiZ*qA~4fM^f*u%gQu&X%Q~loCIA>r8Danc

literal 0
HcmV?d00001

diff --git a/test/e2e/specs/interactivity/router-styles.spec.ts b/test/e2e/specs/interactivity/router-styles.spec.ts
index 41f6a39d8e39d6..53499c556835a1 100644
--- a/test/e2e/specs/interactivity/router-styles.spec.ts
+++ b/test/e2e/specs/interactivity/router-styles.spec.ts
@@ -107,8 +107,6 @@ test.describe( 'Router styles', () => {
 		await expect( all ).toHaveCSS( 'color', COLOR_BLUE );
 	} );
 
-	test( 'should update style tags with modified content', async () => {} );
-
 	test( 'should add and remove styles from referenced style sheets', async ( {
 		page,
 	} ) => {
@@ -156,6 +154,34 @@ test.describe( 'Router styles', () => {
 		await expect( all ).toHaveCSS( 'color', COLOR_BLUE );
 	} );
 
-	test( 'should remove styles from referenced style sheets missing in the new page', async () => {} );
-	test( 'should support relative URLs in referenced style sheets', async () => {} );
+	test( 'should support relative URLs in referenced style sheets', async ( {
+		page,
+	} ) => {
+		const csn = page.getByTestId( 'client-side navigation' );
+		const background = page.getByTestId( 'background-from-link' );
+
+		await expect( background ).toHaveScreenshot();
+
+		await page.getByTestId( 'link red' ).click();
+
+		await expect( csn ).toBeVisible();
+		await expect( background ).toHaveScreenshot();
+
+		await page.getByTestId( 'link green' ).click();
+
+		await expect( csn ).toBeVisible();
+		await expect( background ).toHaveScreenshot();
+
+		await page.getByTestId( 'link blue' ).click();
+
+		await expect( csn ).toBeVisible();
+		await expect( background ).toHaveScreenshot();
+
+		await page.getByTestId( 'link all' ).click();
+
+		await expect( csn ).toBeVisible();
+		await expect( background ).toHaveScreenshot();
+	} );
+
+	test( 'should update style tags with modified content', async () => {} );
 } );

From 43e66d8cc0fa6c73ecae9186b01a3565da340477 Mon Sep 17 00:00:00 2001
From: David <david.arenas@automattic.com>
Date: Mon, 16 Dec 2024 14:43:01 +0100
Subject: [PATCH 20/23] Add tests for modified inline style tags

---
 .../router-styles-blue/render.php             | 10 ++++
 .../router-styles-green/render.php            | 10 ++++
 .../router-styles-red/render.php              | 10 ++++
 .../router-styles-wrapper/render.php          | 10 ++++
 .../specs/interactivity/router-styles.spec.ts | 47 ++++++++++++++++++-
 5 files changed, 86 insertions(+), 1 deletion(-)

diff --git a/packages/e2e-tests/plugins/interactive-blocks/router-styles-blue/render.php b/packages/e2e-tests/plugins/interactive-blocks/router-styles-blue/render.php
index f608d4a946770c..3f5da308db092a 100644
--- a/packages/e2e-tests/plugins/interactive-blocks/router-styles-blue/render.php
+++ b/packages/e2e-tests/plugins/interactive-blocks/router-styles-blue/render.php
@@ -15,6 +15,16 @@ function () {
 			plugin_dir_url( __FILE__ ) . 'style-from-link.css',
 			array()
 		);
+
+		$custom_css = '
+			.blue-from-inline {
+				color: rgb(0, 0, 255);
+			}
+		';
+
+		wp_register_style( 'test-router-styles', false );
+		wp_enqueue_style( 'test-router-styles' );
+		wp_add_inline_style( 'test-router-styles', $custom_css );
 	}
 );
 
diff --git a/packages/e2e-tests/plugins/interactive-blocks/router-styles-green/render.php b/packages/e2e-tests/plugins/interactive-blocks/router-styles-green/render.php
index 443babe3f96c84..4418a2d3ab0f3d 100644
--- a/packages/e2e-tests/plugins/interactive-blocks/router-styles-green/render.php
+++ b/packages/e2e-tests/plugins/interactive-blocks/router-styles-green/render.php
@@ -15,6 +15,16 @@ function () {
 			plugin_dir_url( __FILE__ ) . 'style-from-link.css',
 			array()
 		);
+
+		$custom_css = '
+			.green-from-inline {
+				color: rgb(0, 255, 0);
+			}
+		';
+
+		wp_register_style( 'test-router-styles', false );
+		wp_enqueue_style( 'test-router-styles' );
+		wp_add_inline_style( 'test-router-styles', $custom_css );
 	}
 );
 
diff --git a/packages/e2e-tests/plugins/interactive-blocks/router-styles-red/render.php b/packages/e2e-tests/plugins/interactive-blocks/router-styles-red/render.php
index c93f64833245a4..e8474cf69b825a 100644
--- a/packages/e2e-tests/plugins/interactive-blocks/router-styles-red/render.php
+++ b/packages/e2e-tests/plugins/interactive-blocks/router-styles-red/render.php
@@ -15,6 +15,16 @@ function () {
 			plugin_dir_url( __FILE__ ) . 'style-from-link.css',
 			array()
 		);
+
+		$custom_css = '
+			.red-from-inline {
+				color: rgb(255, 0, 0);
+			}
+		';
+
+		wp_register_style( 'test-router-styles', false );
+		wp_enqueue_style( 'test-router-styles' );
+		wp_add_inline_style( 'test-router-styles', $custom_css );
 	}
 );
 
diff --git a/packages/e2e-tests/plugins/interactive-blocks/router-styles-wrapper/render.php b/packages/e2e-tests/plugins/interactive-blocks/router-styles-wrapper/render.php
index 23f9e6f1dd08c3..6373e8e9bc235b 100644
--- a/packages/e2e-tests/plugins/interactive-blocks/router-styles-wrapper/render.php
+++ b/packages/e2e-tests/plugins/interactive-blocks/router-styles-wrapper/render.php
@@ -18,6 +18,7 @@
 		<p data-testid="blue" class="blue">Blue</p>
 		<p data-testid="all" class="red green blue">All</p>
 	</fieldset>
+
 	<!-- These get colored when the corresponding block enqueues a referenced stylesheet. -->
 	<fieldset>
 		<legend>Styles from referenced style sheets</legend>
@@ -28,6 +29,15 @@
 		<div data-testid="background-from-link"class="background-from-link" style="width: 10px; height: 10px"></div>
 	</fieldset>
 
+	<!-- These get colored when the corresponding block adds inline style. -->
+	<fieldset>
+		<legend>Styles from inline styles</legend>
+		<p data-testid="red-from-inline" class="red-from-inline">Red</p>
+		<p data-testid="green-from-inline" class="green-from-inline">Green</p>
+		<p data-testid="blue-from-inline" class="blue-from-inline">Blue</p>
+		<p data-testid="all-from-inline" class="red-from-inline green-from-inline blue-from-inline">All</p>
+	</fieldset>
+
 	<!-- Links to pages with different blocks combination. -->
 	<nav data-wp-interactive="test/router-styles">
 		<?php foreach ( $attributes['links'] as $label => $link ) : ?>
diff --git a/test/e2e/specs/interactivity/router-styles.spec.ts b/test/e2e/specs/interactivity/router-styles.spec.ts
index 53499c556835a1..7bc575af37816c 100644
--- a/test/e2e/specs/interactivity/router-styles.spec.ts
+++ b/test/e2e/specs/interactivity/router-styles.spec.ts
@@ -183,5 +183,50 @@ test.describe( 'Router styles', () => {
 		await expect( background ).toHaveScreenshot();
 	} );
 
-	test( 'should update style tags with modified content', async () => {} );
+	test( 'should update style tags with modified content', async ( {
+		page,
+	} ) => {
+		const csn = page.getByTestId( 'client-side navigation' );
+		const red = page.getByTestId( 'red-from-inline' );
+		const green = page.getByTestId( 'green-from-inline' );
+		const blue = page.getByTestId( 'blue-from-inline' );
+		const all = page.getByTestId( 'all-from-inline' );
+
+		await expect( red ).toHaveCSS( 'color', COLOR_WRAPPER );
+		await expect( green ).toHaveCSS( 'color', COLOR_WRAPPER );
+		await expect( blue ).toHaveCSS( 'color', COLOR_WRAPPER );
+		await expect( all ).toHaveCSS( 'color', COLOR_WRAPPER );
+
+		await page.getByTestId( 'link red' ).click();
+
+		await expect( csn ).toBeVisible();
+		await expect( red ).toHaveCSS( 'color', COLOR_RED );
+		await expect( green ).toHaveCSS( 'color', COLOR_WRAPPER );
+		await expect( blue ).toHaveCSS( 'color', COLOR_WRAPPER );
+		await expect( all ).toHaveCSS( 'color', COLOR_RED );
+
+		await page.getByTestId( 'link green' ).click();
+
+		await expect( csn ).toBeVisible();
+		await expect( red ).toHaveCSS( 'color', COLOR_WRAPPER );
+		await expect( green ).toHaveCSS( 'color', COLOR_GREEN );
+		await expect( blue ).toHaveCSS( 'color', COLOR_WRAPPER );
+		await expect( all ).toHaveCSS( 'color', COLOR_GREEN );
+
+		await page.getByTestId( 'link blue' ).click();
+
+		await expect( csn ).toBeVisible();
+		await expect( red ).toHaveCSS( 'color', COLOR_WRAPPER );
+		await expect( green ).toHaveCSS( 'color', COLOR_WRAPPER );
+		await expect( blue ).toHaveCSS( 'color', COLOR_BLUE );
+		await expect( all ).toHaveCSS( 'color', COLOR_BLUE );
+
+		await page.getByTestId( 'link all' ).click();
+
+		await expect( csn ).toBeVisible();
+		await expect( red ).toHaveCSS( 'color', COLOR_RED );
+		await expect( green ).toHaveCSS( 'color', COLOR_GREEN );
+		await expect( blue ).toHaveCSS( 'color', COLOR_BLUE );
+		await expect( all ).toHaveCSS( 'color', COLOR_BLUE );
+	} );
 } );

From b78c8b12f63ae694b984ef8b18737a71fe9b6521 Mon Sep 17 00:00:00 2001
From: David <david.arenas@automattic.com>
Date: Mon, 16 Dec 2024 14:48:11 +0100
Subject: [PATCH 21/23] Use text content instead of the id to identify inline
 style tags

---
 packages/interactivity-router/src/assets/styles.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/interactivity-router/src/assets/styles.ts b/packages/interactivity-router/src/assets/styles.ts
index 2154b03a543cb1..ddb41eabc7a758 100644
--- a/packages/interactivity-router/src/assets/styles.ts
+++ b/packages/interactivity-router/src/assets/styles.ts
@@ -56,8 +56,8 @@ const sheetFromLink = async (
 	} );
 };
 
-const sheetFromStyle = async ( { id, textContent }: HTMLStyleElement ) => {
-	const sheetId = id || textContent;
+const sheetFromStyle = async ( { textContent }: HTMLStyleElement ) => {
+	const sheetId = textContent;
 	return getCachedSheet( sheetId, async () => {
 		const sheet = new CSSStyleSheet();
 		await sheet.replace( textContent );

From 769342ba782fd14adf68dac2564ddbf05c84e467 Mon Sep 17 00:00:00 2001
From: David Arenas <david.arenas@automattic.com>
Date: Tue, 17 Dec 2024 10:43:33 +0100
Subject: [PATCH 22/23] Fix typo in comments

Co-authored-by: Michal <mmczaplinski@gmail.com>
---
 packages/interactivity-router/src/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/interactivity-router/src/index.ts b/packages/interactivity-router/src/index.ts
index e79a13bad2e0b4..ded21d35dd5886 100644
--- a/packages/interactivity-router/src/index.ts
+++ b/packages/interactivity-router/src/index.ts
@@ -115,7 +115,7 @@ const regionsToVdom: RegionsToVdom = ( dom, { vdom, baseUrl } = {} ) => {
 
 // Render all interactive regions contained in the given page.
 const renderRegions = async ( page: Page ) => {
-	// Whait for styles and modules to be ready.
+	// Wait for styles and modules to be ready.
 	await Promise.all( [
 		...page.styles,
 		...page.scriptModules.map(

From a4238267f548f38255f5b520ffd5349a88b8b035 Mon Sep 17 00:00:00 2001
From: David <david.arenas@automattic.com>
Date: Wed, 18 Dec 2024 17:11:43 +0100
Subject: [PATCH 23/23] Fix e2e interactivity utils

---
 .../interactivity/fixtures/interactivity-utils.ts    | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/test/e2e/specs/interactivity/fixtures/interactivity-utils.ts b/test/e2e/specs/interactivity/fixtures/interactivity-utils.ts
index 39bef7517eaf4b..74436673f10b79 100644
--- a/test/e2e/specs/interactivity/fixtures/interactivity-utils.ts
+++ b/test/e2e/specs/interactivity/fixtures/interactivity-utils.ts
@@ -66,16 +66,20 @@ export default class InteractivityUtils {
 		name: string,
 		{ attributes, alias, innerBlocks }: AddPostWithBlockOptions = {}
 	) {
+		const block = attributes
+			? `${ name } ${ JSON.stringify( attributes ) }`
+			: name;
+
+		if ( ! alias ) {
+			alias = block;
+		}
+
 		const content = generateBlockMarkup( [
 			name,
 			attributes,
 			innerBlocks,
 		] );
 
-		if ( ! alias ) {
-			alias = content;
-		}
-
 		const payload = {
 			content,
 			status: 'publish' as 'publish',