-
Notifications
You must be signed in to change notification settings - Fork 4.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
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 <mmczaplinski@gmail.com> * Fix e2e interactivity utils --------- Co-authored-by: DAreRodz <darerodz@git.wordpress.org> Co-authored-by: michalczaplinski <czapla@git.wordpress.org> Co-authored-by: luisherranz <luisherranz@git.wordpress.org> Co-authored-by: sethrubenstein <smrubenstein@git.wordpress.org>
- Loading branch information
1 parent
94df941
commit 12f7764
Showing
30 changed files
with
680 additions
and
153 deletions.
There are no files selected for viewing
Binary file added
BIN
+119 Bytes
...gins/interactive-blocks/router-styles-blue/assets/10x10_e2e_test_image_blue.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
15 changes: 15 additions & 0 deletions
15
packages/e2e-tests/plugins/interactive-blocks/router-styles-blue/block.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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" | ||
} |
35 changes: 35 additions & 0 deletions
35
packages/e2e-tests/plugins/interactive-blocks/router-styles-blue/render.php
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> |
7 changes: 7 additions & 0 deletions
7
packages/e2e-tests/plugins/interactive-blocks/router-styles-blue/style-from-link.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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'); | ||
} |
4 changes: 4 additions & 0 deletions
4
packages/e2e-tests/plugins/interactive-blocks/router-styles-blue/style.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,4 @@ | ||
.wp-block-test-router-styles-blue, | ||
.blue { | ||
color: rgb(0, 0, 255); | ||
} |
Binary file added
BIN
+119 Bytes
...ns/interactive-blocks/router-styles-green/assets/10x10_e2e_test_image_green.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
15 changes: 15 additions & 0 deletions
15
packages/e2e-tests/plugins/interactive-blocks/router-styles-green/block.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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" | ||
} |
35 changes: 35 additions & 0 deletions
35
packages/e2e-tests/plugins/interactive-blocks/router-styles-green/render.php
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> |
7 changes: 7 additions & 0 deletions
7
packages/e2e-tests/plugins/interactive-blocks/router-styles-green/style-from-link.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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'); | ||
} |
4 changes: 4 additions & 0 deletions
4
packages/e2e-tests/plugins/interactive-blocks/router-styles-green/style.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,4 @@ | ||
.wp-block-test-router-styles-green, | ||
.green { | ||
color: rgb(0, 255, 0); | ||
} |
Binary file added
BIN
+119 Bytes
...lugins/interactive-blocks/router-styles-red/assets/10x10_e2e_test_image_red.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
15 changes: 15 additions & 0 deletions
15
packages/e2e-tests/plugins/interactive-blocks/router-styles-red/block.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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" | ||
} |
35 changes: 35 additions & 0 deletions
35
packages/e2e-tests/plugins/interactive-blocks/router-styles-red/render.php
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> |
7 changes: 7 additions & 0 deletions
7
packages/e2e-tests/plugins/interactive-blocks/router-styles-red/style-from-link.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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'); | ||
} |
4 changes: 4 additions & 0 deletions
4
packages/e2e-tests/plugins/interactive-blocks/router-styles-red/style.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,4 @@ | ||
.wp-block-test-router-styles-red, | ||
.red { | ||
color: rgb(255, 0, 0); | ||
} |
16 changes: 16 additions & 0 deletions
16
packages/e2e-tests/plugins/interactive-blocks/router-styles-wrapper/block.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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" | ||
} |
70 changes: 70 additions & 0 deletions
70
packages/e2e-tests/plugins/interactive-blocks/router-styles-wrapper/render.php
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> |
3 changes: 3 additions & 0 deletions
3
packages/e2e-tests/plugins/interactive-blocks/router-styles-wrapper/style.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
.wp-block-test-router-styles-wrapper { | ||
color: rgb(160, 12, 60); | ||
} |
9 changes: 9 additions & 0 deletions
9
packages/e2e-tests/plugins/interactive-blocks/router-styles-wrapper/view.asset.php
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,9 @@ | ||
<?php return array( | ||
'dependencies' => array( | ||
'@wordpress/interactivity', | ||
array( | ||
'id' => '@wordpress/interactivity-router', | ||
'import' => 'dynamic', | ||
), | ||
), | ||
); |
20 changes: 20 additions & 0 deletions
20
packages/e2e-tests/plugins/interactive-blocks/router-styles-wrapper/view.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; | ||
}, | ||
}, | ||
} ); |
Oops, something went wrong.
12f7764
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Flaky tests detected in 12f7764.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.
🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/12431355924
📝 Reported issues:
/test/e2e/specs/site-editor/dataviews-list-layout-keyboard.spec.js