Skip to content

Commit

Permalink
Merge branch 'WordPress:trunk' into trunk
Browse files Browse the repository at this point in the history
  • Loading branch information
karthick-murugan authored Dec 20, 2024
2 parents 09b4cf2 + 12f7764 commit 27e4bbc
Show file tree
Hide file tree
Showing 30 changed files with 680 additions and 153 deletions.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
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"
}
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>
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');
}
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);
}
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
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"
}
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>
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');
}
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);
}
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
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"
}
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>
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');
}
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);
}
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"
}
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>
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);
}
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',
),
),
);
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;
},
},
} );
Loading

0 comments on commit 27e4bbc

Please sign in to comment.