Skip to content

Commit 2c71cfa

Browse files
DAreRodzDAreRodz
committed
Reapply "iAPI Router: Handle styles assets on region-based navigation (WordPress#67826)"
This reverts commit 0a5be06.
1 parent 116aad9 commit 2c71cfa

30 files changed

+680
-153
lines changed

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

119 Bytes
Loading

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

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
{
2+
"$schema": "https://schemas.wp.org/trunk/block.json",
3+
"apiVersion": 2,
4+
"name": "test/router-styles-blue",
5+
"title": "E2E Interactivity tests - router styles - Blue",
6+
"category": "text",
7+
"icon": "heart",
8+
"description": "",
9+
"supports": {
10+
"interactivity": true
11+
},
12+
"textdomain": "e2e-interactivity",
13+
"viewStyle": "file:./style.css",
14+
"render": "file:./render.php"
15+
}

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

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<?php
2+
/**
3+
* HTML for testing the iAPI's style assets management.
4+
*
5+
* @package gutenberg-test-interactive-blocks
6+
*
7+
* @phpcs:disable VariableAnalysis.CodeAnalysis.VariableAnalysis.UndefinedVariable
8+
*/
9+
10+
add_action(
11+
'wp_enqueue_scripts',
12+
function () {
13+
wp_enqueue_style(
14+
'blue-from-link',
15+
plugin_dir_url( __FILE__ ) . 'style-from-link.css',
16+
array()
17+
);
18+
19+
$custom_css = '
20+
.blue-from-inline {
21+
color: rgb(0, 0, 255);
22+
}
23+
';
24+
25+
wp_register_style( 'test-router-styles', false );
26+
wp_enqueue_style( 'test-router-styles' );
27+
wp_add_inline_style( 'test-router-styles', $custom_css );
28+
}
29+
);
30+
31+
$wrapper_attributes = get_block_wrapper_attributes(
32+
array( 'data-testid' => 'blue-block' )
33+
);
34+
?>
35+
<p <?php echo $wrapper_attributes; ?>>Blue</p>

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

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
.blue-from-link {
2+
color: rgb(0, 0, 255);
3+
}
4+
5+
.background-from-link {
6+
background-image: url('./assets/10x10_e2e_test_image_blue.png');
7+
}

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

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
.wp-block-test-router-styles-blue,
2+
.blue {
3+
color: rgb(0, 0, 255);
4+
}

‎packages/e2e-tests/plugins/interactive-blocks/router-styles-green/assets/10x10_e2e_test_image_green.png

119 Bytes
Loading

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

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
{
2+
"$schema": "https://schemas.wp.org/trunk/block.json",
3+
"apiVersion": 2,
4+
"name": "test/router-styles-green",
5+
"title": "E2E Interactivity tests - router styles - Green",
6+
"category": "text",
7+
"icon": "heart",
8+
"description": "",
9+
"supports": {
10+
"interactivity": true
11+
},
12+
"textdomain": "e2e-interactivity",
13+
"viewStyle": "file:./style.css",
14+
"render": "file:./render.php"
15+
}

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

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<?php
2+
/**
3+
* HTML for testing the iAPI's style assets management.
4+
*
5+
* @package gutenberg-test-interactive-blocks
6+
*
7+
* @phpcs:disable VariableAnalysis.CodeAnalysis.VariableAnalysis.UndefinedVariable
8+
*/
9+
10+
add_action(
11+
'wp_enqueue_scripts',
12+
function () {
13+
wp_enqueue_style(
14+
'green-from-link',
15+
plugin_dir_url( __FILE__ ) . 'style-from-link.css',
16+
array()
17+
);
18+
19+
$custom_css = '
20+
.green-from-inline {
21+
color: rgb(0, 255, 0);
22+
}
23+
';
24+
25+
wp_register_style( 'test-router-styles', false );
26+
wp_enqueue_style( 'test-router-styles' );
27+
wp_add_inline_style( 'test-router-styles', $custom_css );
28+
}
29+
);
30+
31+
$wrapper_attributes = get_block_wrapper_attributes(
32+
array( 'data-testid' => 'green-block' )
33+
);
34+
?>
35+
<p <?php echo $wrapper_attributes; ?>>Green</p>

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

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
.green-from-link {
2+
color: rgb(0, 255, 0);
3+
}
4+
5+
.background-from-link {
6+
background-image: url('./assets/10x10_e2e_test_image_green.png');
7+
}

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

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
.wp-block-test-router-styles-green,
2+
.green {
3+
color: rgb(0, 255, 0);
4+
}

‎packages/e2e-tests/plugins/interactive-blocks/router-styles-red/assets/10x10_e2e_test_image_red.png

119 Bytes
Loading

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

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
{
2+
"$schema": "https://schemas.wp.org/trunk/block.json",
3+
"apiVersion": 2,
4+
"name": "test/router-styles-red",
5+
"title": "E2E Interactivity tests - router styles - Red",
6+
"category": "text",
7+
"icon": "heart",
8+
"description": "",
9+
"supports": {
10+
"interactivity": true
11+
},
12+
"textdomain": "e2e-interactivity",
13+
"viewStyle": "file:./style.css",
14+
"render": "file:./render.php"
15+
}

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

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<?php
2+
/**
3+
* HTML for testing the iAPI's style assets management.
4+
*
5+
* @package gutenberg-test-interactive-blocks
6+
*
7+
* @phpcs:disable VariableAnalysis.CodeAnalysis.VariableAnalysis.UndefinedVariable
8+
*/
9+
10+
add_action(
11+
'wp_enqueue_scripts',
12+
function () {
13+
wp_enqueue_style(
14+
'red-from-link',
15+
plugin_dir_url( __FILE__ ) . 'style-from-link.css',
16+
array()
17+
);
18+
19+
$custom_css = '
20+
.red-from-inline {
21+
color: rgb(255, 0, 0);
22+
}
23+
';
24+
25+
wp_register_style( 'test-router-styles', false );
26+
wp_enqueue_style( 'test-router-styles' );
27+
wp_add_inline_style( 'test-router-styles', $custom_css );
28+
}
29+
);
30+
31+
$wrapper_attributes = get_block_wrapper_attributes(
32+
array( 'data-testid' => 'red-block' )
33+
);
34+
?>
35+
<p <?php echo $wrapper_attributes; ?>>Red</p>

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

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
.red-from-link {
2+
color: rgb(255, 0, 0);
3+
}
4+
5+
.background-from-link {
6+
background-image: url('./assets/10x10_e2e_test_image_red.png');
7+
}

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

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
.wp-block-test-router-styles-red,
2+
.red {
3+
color: rgb(255, 0, 0);
4+
}

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

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
{
2+
"$schema": "https://schemas.wp.org/trunk/block.json",
3+
"apiVersion": 2,
4+
"name": "test/router-styles-wrapper",
5+
"title": "E2E Interactivity tests - router styles - Wrapper",
6+
"category": "text",
7+
"icon": "heart",
8+
"description": "",
9+
"supports": {
10+
"interactivity": true
11+
},
12+
"textdomain": "e2e-interactivity",
13+
"viewScriptModule": "file:./view.js",
14+
"viewStyle": "file:./style.css",
15+
"render": "file:./render.php"
16+
}

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

+70
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
<?php
2+
/**
3+
* HTML for testing the iAPI's style assets management.
4+
*
5+
* @package gutenberg-test-interactive-blocks
6+
*
7+
* @phpcs:disable VariableAnalysis.CodeAnalysis.VariableAnalysis.UndefinedVariable
8+
*/
9+
10+
$wrapper_attributes = get_block_wrapper_attributes();
11+
?>
12+
<div <?php echo $wrapper_attributes; ?>>
13+
<!-- These get colored when the corresponding block is present. -->
14+
<fieldset>
15+
<legend>Styles from block styles</legend>
16+
<p data-testid="red" class="red">Red</p>
17+
<p data-testid="green" class="green">Green</p>
18+
<p data-testid="blue" class="blue">Blue</p>
19+
<p data-testid="all" class="red green blue">All</p>
20+
</fieldset>
21+
22+
<!-- These get colored when the corresponding block enqueues a referenced stylesheet. -->
23+
<fieldset>
24+
<legend>Styles from referenced style sheets</legend>
25+
<p data-testid="red-from-link" class="red-from-link">Red from link</p>
26+
<p data-testid="green-from-link" class="green-from-link">Green from link</p>
27+
<p data-testid="blue-from-link" class="blue-from-link">Blue from link</p>
28+
<p data-testid="all-from-link" class="red-from-link green-from-link blue-from-link">All from link</p>
29+
<div data-testid="background-from-link"class="background-from-link" style="width: 10px; height: 10px"></div>
30+
</fieldset>
31+
32+
<!-- These get colored when the corresponding block adds inline style. -->
33+
<fieldset>
34+
<legend>Styles from inline styles</legend>
35+
<p data-testid="red-from-inline" class="red-from-inline">Red</p>
36+
<p data-testid="green-from-inline" class="green-from-inline">Green</p>
37+
<p data-testid="blue-from-inline" class="blue-from-inline">Blue</p>
38+
<p data-testid="all-from-inline" class="red-from-inline green-from-inline blue-from-inline">All</p>
39+
</fieldset>
40+
41+
<!-- Links to pages with different blocks combination. -->
42+
<nav data-wp-interactive="test/router-styles">
43+
<?php foreach ( $attributes['links'] as $label => $link ) : ?>
44+
<a
45+
data-testid="link <?php echo $label; ?>"
46+
data-wp-on--click="actions.navigate"
47+
href="<?php echo $link; ?>"
48+
>
49+
<?php echo $label; ?>
50+
</a>
51+
<?php endforeach; ?>
52+
</nav>
53+
54+
<!-- HTML updated on navigation. -->
55+
<div
56+
data-wp-interactive="test/router-styles"
57+
data-wp-router-region="router-styles"
58+
>
59+
<?php echo $content; ?>
60+
</div>
61+
62+
<!-- Text to check whether a navigation was client-side. -->
63+
<div
64+
data-testid="client-side navigation"
65+
data-wp-interactive="test/router-styles"
66+
data-wp-bind--hidden="!state.clientSideNavigation"
67+
>
68+
Client-side navigation
69+
</div>
70+
</div>

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

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.wp-block-test-router-styles-wrapper {
2+
color: rgb(160, 12, 60);
3+
}

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

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<?php return array(
2+
'dependencies' => array(
3+
'@wordpress/interactivity',
4+
array(
5+
'id' => '@wordpress/interactivity-router',
6+
'import' => 'dynamic',
7+
),
8+
),
9+
);

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

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
/**
2+
* WordPress dependencies
3+
*/
4+
import { store } from '@wordpress/interactivity';
5+
6+
const { state } = store( 'test/router-styles', {
7+
state: {
8+
clientSideNavigation: false,
9+
},
10+
actions: {
11+
*navigate( e ) {
12+
e.preventDefault();
13+
const { actions } = yield import(
14+
'@wordpress/interactivity-router'
15+
);
16+
yield actions.navigate( e.target.href );
17+
state.clientSideNavigation = true;
18+
},
19+
},
20+
} );

0 commit comments

Comments
 (0)