iAPI Router: Ignores <noscript> elements while preparing DOM.

[vipul0425]

What?

Closes #70876

Why?

The <style> or elements inside sections were handled as if they were placed outside and applied to the page after client-side navigation, which is not correct.

How?

This PR removes <noscript> elements during DOM preparation when extracting router regions and related resources, since the router only functions with JavaScript enabled. This prevents browsers and our style scripts from incorrectly extracting styles from those tags.

Testing Instructions

1. Add a block of HTML in a template with a Query Loop block, with a element and a <style> tag that changes the body background within. E.g.:

   <noscript><style>body{ background: red !important; }</style></noscript>

2. Ensure "force page reload" is disabled in the Query Loop block.

3. Visit a page with the modified template.

4. Navigate to the next page.

5. The body background color doesn't changes anymore.

6. Now disable JS and refresh the page it change the background color.

Screenshots or screencast

Screen.Recording.2025-07-25.at.10.53.30.AM.mov

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: vipul0425 <vipulgupta003@git.wordpress.org>
Co-authored-by: DAreRodz <darerodz@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[DAreRodz]

The fix looks good to me. 👍

@vipul0425, could you include an entry in the CHANGELOG.md file of the Interactivity Router package? You can check the docs to know how to do so.

It would also be great to include some e2e tests. You would have to add a new test case to the router-styles.spec.ts file, and modify the related test blocks that live in /packages/e2e-tests/plugins/interactive-blocks.

Let me know if you need help with that. 🙂

[DAreRodz]

Thanks, @vipul0425. Nice tests. 😎

I removed the nonexistent stylesheet because it was distorting the test result slightly, as it forced a page reload and prevented the style changes from being correctly tested. The rest of the test code is perfect as it is.