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

This reverts commit 0a5be06.

Author: DAreRodz

packages/e2e-tests/plugins/interactive-blocks/router-styles-blue/assets/10x10_e2e_test_image_blue.png

@@ -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/block.json

@@ -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/render.php

@@ -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-from-link.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-blue/style.css

@@ -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/assets/10x10_e2e_test_image_green.png

@@ -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/block.json

@@ -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/render.php

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