iAPI Router: Ignores <noscript> elements while preparing DOM. (#70905)

* feat: Ignores <noscript> elements while preparing DOM.

* Docs: Update change logs with recent changes.

* feat: Adds e2e tests for noscript fix.

* docs: Added comment on code block.

* Remove nonexistent stylesheet from noscript tests

---------

Co-authored-by: vipul0425 <[email protected]>
Co-authored-by: DAreRodz <[email protected]>

Author: 3 people

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

@@ -33,3 +33,12 @@ function () {
 );
 ?>
 <p <?php echo $wrapper_attributes; ?>>Blue</p>
+
+<noscript>
+	<style>
+		.noscript-style-test {
+			color: rgb(0, 0, 255) !important;
+			background-color: yellow !important;
+		}
+	</style>
+</noscript>

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

@@ -33,3 +33,12 @@ function () {
 );
 ?>
 <p <?php echo $wrapper_attributes; ?>>Red</p>
+
+<noscript>
+	<style>
+		.noscript-style-test {
+			color: rgb(255, 0, 0) !important;
+			font-weight: bold !important;
+		}
+	</style>
+</noscript>

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

@@ -101,7 +101,16 @@ function () {
 
 	<!-- Text hidden when media=print applies. -->
 	<div class="hide-on-print" data-testid="hide-on-print">This should be visible when media is not "print".</div>
+	
+	<!-- Element for testing noscript styles being ignored -->
+	<div data-testid="noscript-style-test" class="noscript-style-test">This should not be affected by styles in noscript tags</div>
+	
+	<!-- Noscript styles that should be ignored -->
+	<noscript>
+		<style>
+			.noscript-style-test {
+				color: rgb(255, 0, 0) !important;
+			}
+		</style>
+	</noscript>
 </div>
-
-
-

packages/interactivity-router/CHANGELOG.md

@@ -8,6 +8,9 @@
 
 -   Preserve `media` attribute on intial style sheets after client-side navigation. ([70668](https://github.com/WordPress/gutenberg/pull/70668))
 
+-  Ignores `<noscript>` elements while preparing DOM. ([70905](https://github.com/WordPress/gutenberg/pull/70905))
+
+
 ## 2.26.0 (2025-06-25)
 
 ### New Features

packages/interactivity-router/src/index.ts

@@ -138,6 +138,10 @@ const fetchPage = async ( url: string, { html }: { html: string } ) => {
  *                        server-rendered data.
  */
 const preparePage: PreparePage = async ( url, dom, { vdom } = {} ) => {
+	// Remove all noscript elements as they're irrelevant when request is served via router.
+	// This prevents browsers from extracting styles from noscript tags.
+	dom.querySelectorAll( 'noscript' ).forEach( ( el ) => el.remove() );
+
 	const regions = {};
 	const regionsToAttach = {};
 	dom.querySelectorAll( regionsSelector ).forEach( ( region ) => {

test/e2e/specs/interactivity/router-styles.spec.ts

@@ -430,4 +430,34 @@ test.describe( 'Router styles', () => {
 		// The "hide-on-print" element should remain visible.
 		await expect( hideOnPrint ).toBeVisible();
 	} );
+
+	test( 'should ignore styles inside noscript elements during navigation', async ( {
+		page,
+	} ) => {
+		const csn = page.getByTestId( 'client-side navigation' );
+		const noscriptStyleTest = page.getByTestId( 'noscript-style-test' );
+
+		// Initially the element should not have styling from noscript.
+		await expect( noscriptStyleTest ).toHaveCSS( 'color', COLOR_WRAPPER );
+
+		await page.getByTestId( 'link red' ).click();
+
+		// This element disappears when a navigation starts.
+		// It should be visible again after a successful navigation.
+		await expect( csn ).toBeHidden();
+		await expect( csn ).toBeVisible();
+
+		// After navigation, the element should still have the default color
+		// and not be affected by styles in noscript elements
+		await expect( noscriptStyleTest ).toHaveCSS( 'color', COLOR_WRAPPER );
+
+		await page.getByTestId( 'link all' ).click();
+
+		await expect( csn ).toBeHidden();
+		await expect( csn ).toBeVisible();
+
+		// After navigating to the page with all blocks, the element should
+		// still maintain its original styling and not be affected by noscript styles
+		await expect( noscriptStyleTest ).toHaveCSS( 'color', COLOR_WRAPPER );
+	} );
 } );