iAPI Router: Handle styles assets on region-based navigation (#67826)

* Experiment with

* Handle relative URLs

* Rename constructor to factory

* Use `element.sheet` property if present

* Remove unnecessary files

* Remove extraneous param from tsdoc comment

* Allow inner blocks in `addPostWithBlock` util

* Add test blocks for testing styles

* Fix directives in region block

* Add styles to navigation counter

* Implement first test

* Add more tests WIP

* Refactor test block to make them easier to understand WIP

* Keep refactoring test blocks

* Greatly simplify tests

* Test support for referenced style sheets

* Fix style files

* Make HTML more clear

* Add test for relative URLs

* Add tests for modified inline style tags

* Use text content instead of the id to identify inline style tags

* Fix typo in comments

Co-authored-by: Michal <[email protected]>

* Fix e2e interactivity utils

---------

Co-authored-by: DAreRodz <[email protected]>
Co-authored-by: michalczaplinski <[email protected]>
Co-authored-by: luisherranz <[email protected]>
Co-authored-by: sethrubenstein <[email protected]>

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

@@ -0,0 +1,15 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 2,
+	"name": "test/router-styles-blue",
+	"title": "E2E Interactivity tests - router styles - Blue",
+	"category": "text",
+	"icon": "heart",
+	"description": "",
+	"supports": {
+		"interactivity": true
+	},
+	"textdomain": "e2e-interactivity",
+	"viewStyle": "file:./style.css",
+	"render": "file:./render.php"
+}

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

@@ -0,0 +1,35 @@
+<?php
+/**
+ * HTML for testing the iAPI's style assets management.
+ *
+ * @package gutenberg-test-interactive-blocks
+ *
+ * @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()
+		);
+
+		$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 );
+	}
+);
+
+$wrapper_attributes = get_block_wrapper_attributes(
+	array( 'data-testid' => 'blue-block' )
+);
+?>
+<p <?php echo $wrapper_attributes; ?>>Blue</p>

packages/e2e-tests/plugins/interactive-blocks/router-styles-blue/style-from-link.css

@@ -0,0 +1,7 @@
+.blue-from-link {
+    color: rgb(0, 0, 255);
+}
+
+.background-from-link {
+    background-image: url('./assets/10x10_e2e_test_image_blue.png');
+}

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

@@ -0,0 +1,4 @@
+.wp-block-test-router-styles-blue,
+.blue  {
+    color: rgb(0, 0, 255);
+}

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

@@ -0,0 +1,15 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 2,
+	"name": "test/router-styles-green",
+	"title": "E2E Interactivity tests - router styles - Green",
+	"category": "text",
+	"icon": "heart",
+	"description": "",
+	"supports": {
+		"interactivity": true
+	},
+	"textdomain": "e2e-interactivity",
+	"viewStyle": "file:./style.css",
+	"render": "file:./render.php"
+}

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

@@ -0,0 +1,35 @@
+<?php
+/**
+ * HTML for testing the iAPI's style assets management.
+ *
+ * @package gutenberg-test-interactive-blocks
+ *
+ * @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()
+		);
+
+		$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 );
+	}
+);
+
+$wrapper_attributes = get_block_wrapper_attributes(
+	array( 'data-testid' => 'green-block' )
+);
+?>
+<p <?php echo $wrapper_attributes; ?>>Green</p>

packages/e2e-tests/plugins/interactive-blocks/router-styles-green/style-from-link.css

@@ -0,0 +1,7 @@
+.green-from-link {
+    color: rgb(0, 255, 0);
+}
+
+.background-from-link {
+    background-image: url('./assets/10x10_e2e_test_image_green.png');
+}

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

@@ -0,0 +1,4 @@
+.wp-block-test-router-styles-green,
+.green {
+    color: rgb(0, 255, 0);
+}

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"
+}

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

@@ -0,0 +1,35 @@
+<?php
+/**
+ * HTML for testing the iAPI's style assets management.
+ *
+ * @package gutenberg-test-interactive-blocks
+ *
+ * @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()
+		);
+
+		$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 );
+	}
+);
+
+$wrapper_attributes = get_block_wrapper_attributes(
+	array( 'data-testid' => 'red-block' )
+);
+?>
+<p <?php echo $wrapper_attributes; ?>>Red</p>

packages/e2e-tests/plugins/interactive-blocks/router-styles-red/style-from-link.css

@@ -0,0 +1,7 @@
+.red-from-link {
+    color: rgb(255, 0, 0);
+}
+
+.background-from-link {
+    background-image: url('./assets/10x10_e2e_test_image_red.png');
+}

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);
+}

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

@@ -0,0 +1,16 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 2,
+	"name": "test/router-styles-wrapper",
+	"title": "E2E Interactivity tests - router styles - Wrapper",
+	"category": "text",
+	"icon": "heart",
+	"description": "",
+	"supports": {
+		"interactivity": true
+	},
+	"textdomain": "e2e-interactivity",
+	"viewScriptModule": "file:./view.js",
+	"viewStyle": "file:./style.css",
+	"render": "file:./render.php"
+}

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

@@ -0,0 +1,70 @@
+<?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; ?>>
+	<!-- These get colored when the corresponding block is present. -->
+	<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>
+	</fieldset>
+
+	<!-- These get colored when the corresponding block enqueues a referenced stylesheet. -->
+	<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 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 ) : ?>
+			<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>
+
+	<!-- 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>

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);
+}

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

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

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

@@ -0,0 +1,20 @@
+/**
+ * WordPress dependencies
+ */
+import { store } from '@wordpress/interactivity';
+
+const { state } = store( 'test/router-styles', {
+	state: {
+		clientSideNavigation: false,
+	},
+	actions: {
+		*navigate( e ) {
+			e.preventDefault();
+			const { actions } = yield import(
+				'@wordpress/interactivity-router'
+			);
+			yield actions.navigate( e.target.href );
+			state.clientSideNavigation = true;
+		},
+	},
+} );