diff --git a/.gitignore b/.gitignore
index 4a7f4708ce399..19e43aecea7b8 100644
--- a/.gitignore
+++ b/.gitignore
@@ -15,6 +15,7 @@ coverage
*.log
yarn.lock
/artifacts
+/test/e2e/artifacts
/perf-envs
/composer.lock
diff --git a/bin/build-plugin-zip.sh b/bin/build-plugin-zip.sh
index 131e434d1383d..4ba931c4a4aeb 100755
--- a/bin/build-plugin-zip.sh
+++ b/bin/build-plugin-zip.sh
@@ -83,7 +83,6 @@ build_files=$(
build/block-library/blocks/*.php \
build/block-library/blocks/*/block.json \
build/block-library/blocks/*/*.{js,js.map,css,asset.php} \
- build/block-library/interactivity/*.{js,js.map,asset.php} \
build/edit-widgets/blocks/*/block.json \
build/widgets/blocks/*.php \
build/widgets/blocks/*/block.json \
diff --git a/docs/manifest.json b/docs/manifest.json
index 8a21bc38a5418..aaadd15a57079 100644
--- a/docs/manifest.json
+++ b/docs/manifest.json
@@ -1673,6 +1673,12 @@
"markdown_source": "../packages/icons/README.md",
"parent": "packages"
},
+ {
+ "title": "@wordpress/interactivity",
+ "slug": "packages-interactivity",
+ "markdown_source": "../packages/interactivity/README.md",
+ "parent": "packages"
+ },
{
"title": "@wordpress/interface",
"slug": "packages-interface",
diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md
index 0306e026b5f45..939cc6748ec91 100644
--- a/docs/reference-guides/core-blocks.md
+++ b/docs/reference-guides/core-blocks.md
@@ -266,7 +266,7 @@ Add a link to a downloadable file. ([Source](https://github.com/WordPress/gutenb
- **Name:** core/file
- **Category:** media
-- **Supports:** align, anchor, color (background, gradients, link, ~~text~~)
+- **Supports:** align, anchor, color (background, gradients, link, ~~text~~), interactivity
- **Attributes:** displayPreview, downloadButtonText, fileId, fileName, href, id, previewHeight, showDownloadButton, textLinkHref, textLinkTarget
## Footnotes
@@ -421,7 +421,7 @@ A collection of blocks that allow visitors to get around your site. ([Source](ht
- **Name:** core/navigation
- **Category:** theme
-- **Supports:** align (full, wide), inserter, layout (allowSizingOnChildren, default, ~~allowInheriting~~, ~~allowSwitching~~, ~~allowVerticalAlignment~~), spacing (blockGap, units), typography (fontSize, lineHeight), ~~html~~
+- **Supports:** align (full, wide), inserter, interactivity, layout (allowSizingOnChildren, default, ~~allowInheriting~~, ~~allowSwitching~~, ~~allowVerticalAlignment~~), spacing (blockGap, units), typography (fontSize, lineHeight), ~~html~~
- **Attributes:** __unstableLocation, backgroundColor, customBackgroundColor, customOverlayBackgroundColor, customOverlayTextColor, customTextColor, hasIcon, icon, maxNestingLevel, openSubmenusOnClick, overlayBackgroundColor, overlayMenu, overlayTextColor, ref, rgbBackgroundColor, rgbTextColor, showSubmenuIcon, templateLock, textColor
## Custom Link
diff --git a/lib/experimental/interactivity-api/blocks.php b/lib/experimental/interactivity-api/blocks.php
index 0087f95cbf144..76955357e6c93 100644
--- a/lib/experimental/interactivity-api/blocks.php
+++ b/lib/experimental/interactivity-api/blocks.php
@@ -2,7 +2,8 @@
/**
* Extend WordPress core blocks to use the Interactivity API.
*
- * @package gutenberg
+ * @package Gutenberg
+ * @subpackage Interactivity API
*/
/**
@@ -17,7 +18,7 @@ function gutenberg_block_update_interactive_view_script( $metadata ) {
in_array( $metadata['name'], array( 'core/image' ), true ) &&
str_contains( $metadata['file'], 'build/block-library/blocks' )
) {
- $metadata['viewScript'] = array( 'file:./interactivity.min.js' );
+ $metadata['viewScript'] = array( 'file:./view-interactivity.min.js' );
}
return $metadata;
}
diff --git a/lib/experimental/interactivity-api/class-wp-directive-context.php b/lib/experimental/interactivity-api/class-wp-directive-context.php
new file mode 100644
index 0000000000000..7186922d137a8
--- /dev/null
+++ b/lib/experimental/interactivity-api/class-wp-directive-context.php
@@ -0,0 +1,77 @@
+
+ *
+ *
+ *
+ *
+ *
+ *
+ */
+class WP_Directive_Context {
+ /**
+ * The stack used to store contexts internally.
+ *
+ * @var array An array of contexts.
+ */
+ protected $stack = array( array() );
+
+ /**
+ * Constructor.
+ *
+ * Accepts a context as an argument to initialize this with.
+ *
+ * @param array $context A context.
+ */
+ function __construct( $context = array() ) {
+ $this->set_context( $context );
+ }
+
+ /**
+ * Return the current context.
+ *
+ * @return array The current context.
+ */
+ public function get_context() {
+ return end( $this->stack );
+ }
+
+ /**
+ * Set the current context.
+ *
+ * @param array $context The context to be set.
+ *
+ * @return void
+ */
+ public function set_context( $context ) {
+ if ( $context ) {
+ array_push( $this->stack, array_replace_recursive( $this->get_context(), $context ) );
+ }
+ }
+
+ /**
+ * Reset the context to its previous state.
+ *
+ * @return void
+ */
+ public function rewind_context() {
+ array_pop( $this->stack );
+ }
+}
diff --git a/lib/experimental/interactivity-api/class-wp-directive-processor.php b/lib/experimental/interactivity-api/class-wp-directive-processor.php
new file mode 100644
index 0000000000000..608466a9c6eda
--- /dev/null
+++ b/lib/experimental/interactivity-api/class-wp-directive-processor.php
@@ -0,0 +1,193 @@
+get_tag();
+
+ if ( self::is_html_void_element( $tag_name ) ) {
+ return false;
+ }
+
+ while ( $this->next_tag(
+ array(
+ 'tag_name' => $tag_name,
+ 'tag_closers' => 'visit',
+ )
+ ) ) {
+ if ( ! $this->is_tag_closer() ) {
+ $depth++;
+ continue;
+ }
+
+ if ( 0 === $depth ) {
+ return true;
+ }
+
+ $depth--;
+ }
+
+ return false;
+ }
+
+ /**
+ * Return the content between two balanced tags.
+ *
+ * When called on an opening tag, return the HTML content found between that
+ * opening tag and its matching closing tag.
+ *
+ * @return string The content between the current opening and its matching
+ * closing tag.
+ */
+ public function get_inner_html() {
+ $bookmarks = $this->get_balanced_tag_bookmarks();
+ if ( ! $bookmarks ) {
+ return false;
+ }
+ list( $start_name, $end_name ) = $bookmarks;
+
+ $start = $this->bookmarks[ $start_name ]->end + 1;
+ $end = $this->bookmarks[ $end_name ]->start;
+
+ $this->seek( $start_name ); // Return to original position.
+ $this->release_bookmark( $start_name );
+ $this->release_bookmark( $end_name );
+
+ return substr( $this->html, $start, $end - $start );
+ }
+
+ /**
+ * Set the content between two balanced tags.
+ *
+ * When called on an opening tag, set the HTML content found between that
+ * opening tag and its matching closing tag.
+ *
+ * @param string $new_html The string to replace the content between the
+ * matching tags with.
+ *
+ * @return bool Whether the content was successfully replaced.
+ */
+ public function set_inner_html( $new_html ) {
+ $this->get_updated_html(); // Apply potential previous updates.
+
+ $bookmarks = $this->get_balanced_tag_bookmarks();
+ if ( ! $bookmarks ) {
+ return false;
+ }
+ list( $start_name, $end_name ) = $bookmarks;
+
+ $start = $this->bookmarks[ $start_name ]->end + 1;
+ $end = $this->bookmarks[ $end_name ]->start;
+
+ $this->seek( $start_name ); // Return to original position.
+ $this->release_bookmark( $start_name );
+ $this->release_bookmark( $end_name );
+
+ $this->lexical_updates[] = new WP_HTML_Text_Replacement( $start, $end, $new_html );
+ return true;
+ }
+
+ /**
+ * Return a pair of bookmarks for the current opening tag and the matching
+ * closing tag.
+ *
+ * @return array|false A pair of bookmarks, or false if there's no matching
+ * closing tag.
+ */
+ public function get_balanced_tag_bookmarks() {
+ $i = 0;
+ while ( array_key_exists( 'start' . $i, $this->bookmarks ) ) {
+ ++$i;
+ }
+ $start_name = 'start' . $i;
+
+ $this->set_bookmark( $start_name );
+ if ( ! $this->next_balanced_closer() ) {
+ $this->release_bookmark( $start_name );
+ return false;
+ }
+
+ $i = 0;
+ while ( array_key_exists( 'end' . $i, $this->bookmarks ) ) {
+ ++$i;
+ }
+ $end_name = 'end' . $i;
+ $this->set_bookmark( $end_name );
+
+ return array( $start_name, $end_name );
+ }
+
+ /**
+ * Whether a given HTML element is void (e.g.
+
+
+
+
+
+
+
+
+
+
+
+
+ Update
+
+
+
+ Some Text
+
+
+
+ Toggle trueValue
+
+
+
+ Toggle falseValue
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Toggle context falseValue
+
+
+
+
+
+
+
+
+ prop1
+
+
+ prop2
+
+
+ obj.prop4
+
+
+ obj.prop5
+
+
+
+
+
+
+ prop1
+
+
+ prop2
+
+
+ prop3
+
+
+ obj.prop4
+
+
+ obj.prop5
+
+
+ obj.prop6
+
+
+
+
+
+ Toggle Context Text
+
+
+
+
+
+
+
+
+
+
+
+ Update
+
+
+
+ Toggle trueValue
+
+
+
+ Toggle falseValue
+
+
+
+
+
+
+
+
+ falseValue
+
+
+ Toggle context falseValue
+
+
+
+
+
+ Toggle State Text
+
+
+
+
+
+ Toggle Context Text
+
+
+
+
+ Toggle Active Value
+
+
+
+
+
+
+
+ Counter:
+
+ +1
+
+ 0
+ clicks
+
+
+
+
+ This should be shown because it is inside an island.
+
+
+
+
+
+
+ This should not be shown because it is inside an island.
+
+
+
+
+
+
+
+
+ This should be shown because it is inside an inner
+ block of an isolated island.
+
+
+
+
+
+
+
+
+
+ This should not have two template wrappers because
+ that means we hydrated twice.
+
+
+
+
+
+
+
+
+
+
+ This should not be shown because even though it
+ is inside an inner block of an isolated island,
+ it's inside an new island.
+
+
+
+
+
+
+
+
+ Processing instructions inner node
+
+
+
+
+
+
+ Comments inner node
+
+
+
+
+
+
+
+
+
+
+
+
{ element.props.children }
+ );
+ }
+ );
+
// data-wp-ignore
directive(
'ignore',
@@ -197,4 +214,22 @@ export default () => {
);
}
);
+
+ // data-wp-text
+ directive(
+ 'text',
+ ( {
+ directives: {
+ text: { default: text },
+ },
+ element,
+ evaluate,
+ context,
+ } ) => {
+ const contextValue = useContext( context );
+ element.props.children = evaluate( text, {
+ context: contextValue,
+ } );
+ }
+ );
};
diff --git a/packages/block-library/src/utils/interactivity/hooks.js b/packages/interactivity/src/hooks.js
similarity index 100%
rename from packages/block-library/src/utils/interactivity/hooks.js
rename to packages/interactivity/src/hooks.js
diff --git a/packages/block-library/src/utils/interactivity/hydration.js b/packages/interactivity/src/hydration.js
similarity index 100%
rename from packages/block-library/src/utils/interactivity/hydration.js
rename to packages/interactivity/src/hydration.js
diff --git a/packages/block-library/src/utils/interactivity/index.js b/packages/interactivity/src/index.js
similarity index 61%
rename from packages/block-library/src/utils/interactivity/index.js
rename to packages/interactivity/src/index.js
index 71b6a2b790704..9d1b6b695b66b 100644
--- a/packages/block-library/src/utils/interactivity/index.js
+++ b/packages/interactivity/src/index.js
@@ -4,6 +4,10 @@
import registerDirectives from './directives';
import { init } from './hydration';
export { store } from './store';
+export { directive } from './hooks';
+export { h as createElement } from 'preact';
+export { useEffect, useContext, useMemo } from 'preact/hooks';
+export { deepSignal } from 'deepsignal';
/**
* Initialize the Interactivity API.
diff --git a/packages/block-library/src/utils/interactivity/portals.js b/packages/interactivity/src/portals.js
similarity index 100%
rename from packages/block-library/src/utils/interactivity/portals.js
rename to packages/interactivity/src/portals.js
diff --git a/packages/block-library/src/utils/interactivity/store.js b/packages/interactivity/src/store.js
similarity index 92%
rename from packages/block-library/src/utils/interactivity/store.js
rename to packages/interactivity/src/store.js
index d11af90135201..207fd2d58cfc9 100644
--- a/packages/block-library/src/utils/interactivity/store.js
+++ b/packages/interactivity/src/store.js
@@ -20,9 +20,8 @@ const deepMerge = ( target, source ) => {
};
const getSerializedState = () => {
- // TODO: change the store tag ID for a better one.
const storeTag = document.querySelector(
- `script[type="application/json"]#store`
+ `script[type="application/json"]#wp-interactivity-store-data`
);
if ( ! storeTag ) return {};
try {
diff --git a/packages/block-library/src/utils/interactivity/utils.js b/packages/interactivity/src/utils.js
similarity index 100%
rename from packages/block-library/src/utils/interactivity/utils.js
rename to packages/interactivity/src/utils.js
diff --git a/packages/block-library/src/utils/interactivity/vdom.js b/packages/interactivity/src/vdom.js
similarity index 100%
rename from packages/block-library/src/utils/interactivity/vdom.js
rename to packages/interactivity/src/vdom.js
diff --git a/phpunit/experimental/interactivity-api/class-wp-directive-processor-test.php b/phpunit/experimental/interactivity-api/class-wp-directive-processor-test.php
new file mode 100644
index 0000000000000..2b01cb6251c21
--- /dev/null
+++ b/phpunit/experimental/interactivity-api/class-wp-directive-processor-test.php
@@ -0,0 +1,132 @@
+outsideinside
inside
outside
This is the new section content. ', $tags->get_updated_html() );
+ }
+
+ public function test_set_inner_html_updates_bookmarks_correctly() {
+ $tags = new WP_Directive_Processor( self::HTML );
+
+ $tags->next_tag( 'div' );
+ $tags->set_bookmark( 'start' );
+ $tags->next_tag( 'img' );
+ $this->assertSame( 'IMG', $tags->get_tag() );
+ $tags->set_bookmark( 'after' );
+ $tags->seek( 'start' );
+
+ $tags->set_inner_html( 'This is the new div content.' );
+ $this->assertSame( 'This is the new div content.
inside
outside
This is the even newer section content. ', $tags->get_updated_html() );
+ }
+
+ public function test_set_inner_html_followed_by_set_attribute_works() {
+ $tags = new WP_Directive_Processor( self::HTML );
+
+ $tags->next_tag( 'section' );
+ $tags->set_inner_html( 'This is the new section content.' );
+ $tags->set_attribute( 'id', 'thesection' );
+ $this->assertSame( 'outside
This is the new section content. ', $tags->get_updated_html() );
+ }
+
+ public function test_set_inner_html_preceded_by_set_attribute_works() {
+ $tags = new WP_Directive_Processor( self::HTML );
+
+ $tags->next_tag( 'section' );
+ $tags->set_attribute( 'id', 'thesection' );
+ $tags->set_inner_html( 'This is the new section content.' );
+ $this->assertSame( 'outside
This is the new section content. ', $tags->get_updated_html() );
+ }
+
+ /**
+ * TODO: Review this, how that the code is in Gutenberg.
+ */
+ public function test_set_inner_html_invalidates_bookmarks_that_point_to_replaced_content() {
+ $this->markTestSkipped( "This requires on bookmark invalidation, which is only in GB's WP 6.3 compat layer." );
+
+ $tags = new WP_Directive_Processor( self::HTML );
+
+ $tags->next_tag( 'section' );
+ $tags->set_bookmark( 'start' );
+ $tags->next_tag( 'img' );
+ $tags->set_bookmark( 'replaced' );
+ $tags->seek( 'start' );
+
+ $tags->set_inner_html( 'This is the new section content.' );
+ $this->assertSame( 'outside
This is the new section content. ', $tags->get_updated_html() );
+
+ $this->expectExceptionMessage( 'Invalid bookmark name' );
+ $successful_seek = $tags->seek( 'replaced' );
+ $this->assertFalse( $successful_seek );
+ }
+}
diff --git a/phpunit/experimental/interactivity-api/class-wp-interactivity-store-test.php b/phpunit/experimental/interactivity-api/class-wp-interactivity-store-test.php
new file mode 100644
index 0000000000000..84286457f2612
--- /dev/null
+++ b/phpunit/experimental/interactivity-api/class-wp-interactivity-store-test.php
@@ -0,0 +1,168 @@
+assertEmpty( WP_Interactivity_Store::get_data() );
+ }
+
+ public function test_store_can_be_merged() {
+ $data = array(
+ 'state' => array(
+ 'core' => array(
+ 'a' => 1,
+ 'b' => 2,
+ 'nested' => array(
+ 'c' => 3,
+ ),
+ ),
+ ),
+ );
+ WP_Interactivity_Store::merge_data( $data );
+ $this->assertSame( $data, WP_Interactivity_Store::get_data() );
+ }
+
+ public function test_store_can_be_extended() {
+ WP_Interactivity_Store::merge_data(
+ array(
+ 'state' => array(
+ 'core' => array(
+ 'a' => 1,
+ ),
+ ),
+ )
+ );
+ WP_Interactivity_Store::merge_data(
+ array(
+ 'state' => array(
+ 'core' => array(
+ 'b' => 2,
+ ),
+ 'custom' => array(
+ 'c' => 3,
+ ),
+ ),
+ )
+ );
+ $this->assertSame(
+ array(
+ 'state' => array(
+ 'core' => array(
+ 'a' => 1,
+ 'b' => 2,
+ ),
+ 'custom' => array(
+ 'c' => 3,
+ ),
+ ),
+ ),
+ WP_Interactivity_Store::get_data()
+ );
+ }
+
+ public function test_store_existing_props_should_be_overwritten() {
+ WP_Interactivity_Store::merge_data(
+ array(
+ 'state' => array(
+ 'core' => array(
+ 'a' => 1,
+ ),
+ ),
+ )
+ );
+ WP_Interactivity_Store::merge_data(
+ array(
+ 'state' => array(
+ 'core' => array(
+ 'a' => 'overwritten',
+ ),
+ ),
+ )
+ );
+ $this->assertSame(
+ array(
+ 'state' => array(
+ 'core' => array(
+ 'a' => 'overwritten',
+ ),
+ ),
+ ),
+ WP_Interactivity_Store::get_data()
+ );
+ }
+
+ public function test_store_existing_indexed_arrays_should_be_replaced() {
+ WP_Interactivity_Store::merge_data(
+ array(
+ 'state' => array(
+ 'core' => array(
+ 'a' => array( 1, 2 ),
+ ),
+ ),
+ )
+ );
+ WP_Interactivity_Store::merge_data(
+ array(
+ 'state' => array(
+ 'core' => array(
+ 'a' => array( 3, 4 ),
+ ),
+ ),
+ )
+ );
+ $this->assertSame(
+ array(
+ 'state' => array(
+ 'core' => array(
+ 'a' => array( 3, 4 ),
+ ),
+ ),
+ ),
+ WP_Interactivity_Store::get_data()
+ );
+ }
+
+ public function test_store_should_be_correctly_rendered() {
+ WP_Interactivity_Store::merge_data(
+ array(
+ 'state' => array(
+ 'core' => array(
+ 'a' => 1,
+ ),
+ ),
+ )
+ );
+ WP_Interactivity_Store::merge_data(
+ array(
+ 'state' => array(
+ 'core' => array(
+ 'b' => 2,
+ ),
+ ),
+ )
+ );
+ ob_start();
+ WP_Interactivity_Store::render();
+ $rendered = ob_get_clean();
+ $this->assertSame(
+ '',
+ $rendered
+ );
+ }
+}
diff --git a/phpunit/experimental/interactivity-api/directive-processing-test.php b/phpunit/experimental/interactivity-api/directive-processing-test.php
new file mode 100644
index 0000000000000..4da0a4a85ac3c
--- /dev/null
+++ b/phpunit/experimental/interactivity-api/directive-processing-test.php
@@ -0,0 +1,170 @@
+createMock( Helper_Class::class );
+
+ $test_helper->expects( $this->exactly( 2 ) )
+ ->method( 'process_foo_test' )
+ ->with(
+ $this->callback(
+ function( $p ) {
+ return 'DIV' === $p->get_tag() && (
+ // Either this is a closing tag...
+ $p->is_tag_closer() ||
+ // ...or it is an open tag, and has the directive attribute set.
+ ( ! $p->is_tag_closer() && 'abc' === $p->get_attribute( 'foo-test' ) )
+ );
+ }
+ )
+ );
+
+ $directives = array(
+ 'foo-test' => array( $test_helper, 'process_foo_test' ),
+ );
+
+ $markup = 'Example:
This is a test> Here is a nested div
';
+ $tags = new WP_HTML_Tag_Processor( $markup );
+ gutenberg_interactivity_process_directives( $tags, 'foo-', $directives );
+ }
+}
+
+/**
+ * Tests for the gutenberg_interactivity_evaluate_reference function.
+ *
+ * @group interactivity-api
+ * @covers gutenberg_interactivity_evaluate_reference
+ */
+class Tests_Utils_Evaluate extends WP_UnitTestCase {
+ public function test_evaluate_function_should_access_state() {
+ // Init a simple store.
+ wp_store(
+ array(
+ 'state' => array(
+ 'core' => array(
+ 'number' => 1,
+ 'bool' => true,
+ 'nested' => array(
+ 'string' => 'hi',
+ ),
+ ),
+ ),
+ )
+ );
+ $this->assertSame( 1, gutenberg_interactivity_evaluate_reference( 'state.core.number' ) );
+ $this->assertTrue( gutenberg_interactivity_evaluate_reference( 'state.core.bool' ) );
+ $this->assertSame( 'hi', gutenberg_interactivity_evaluate_reference( 'state.core.nested.string' ) );
+ $this->assertFalse( gutenberg_interactivity_evaluate_reference( '!state.core.bool' ) );
+ }
+
+ public function test_evaluate_function_should_access_passed_context() {
+ $context = array(
+ 'local' => array(
+ 'number' => 2,
+ 'bool' => false,
+ 'nested' => array(
+ 'string' => 'bye',
+ ),
+ ),
+ );
+ $this->assertSame( 2, gutenberg_interactivity_evaluate_reference( 'context.local.number', $context ) );
+ $this->assertFalse( gutenberg_interactivity_evaluate_reference( 'context.local.bool', $context ) );
+ $this->assertTrue( gutenberg_interactivity_evaluate_reference( '!context.local.bool', $context ) );
+ $this->assertSame( 'bye', gutenberg_interactivity_evaluate_reference( 'context.local.nested.string', $context ) );
+ // Previously defined state is also accessible.
+ $this->assertSame( 1, gutenberg_interactivity_evaluate_reference( 'state.core.number' ) );
+ $this->assertTrue( gutenberg_interactivity_evaluate_reference( 'state.core.bool' ) );
+ $this->assertSame( 'hi', gutenberg_interactivity_evaluate_reference( 'state.core.nested.string' ) );
+ }
+
+ public function test_evaluate_function_should_return_null_for_unresolved_paths() {
+ $this->assertNull( gutenberg_interactivity_evaluate_reference( 'this.property.doesnt.exist' ) );
+ }
+
+ public function test_evaluate_function_should_execute_anonymous_functions() {
+ $context = new WP_Directive_Context( array( 'count' => 2 ) );
+ $helper = new Helper_Class;
+
+ wp_store(
+ array(
+ 'state' => array(
+ 'count' => 3,
+ ),
+ 'selectors' => array(
+ 'anonymous_function' => function( $store ) {
+ return $store['state']['count'] + $store['context']['count'];
+ },
+ // Other types of callables should not be executed.
+ 'function_name' => 'gutenberg_test_process_directives_helper_increment',
+ 'class_method' => array( $helper, 'increment' ),
+ 'class_static_method' => 'Helper_Class::static_increment',
+ 'class_static_method_as_array' => array( 'Helper_Class', 'static_increment' ),
+ ),
+ )
+ );
+
+ $this->assertSame( 5, gutenberg_interactivity_evaluate_reference( 'selectors.anonymous_function', $context->get_context() ) );
+ $this->assertSame(
+ 'gutenberg_test_process_directives_helper_increment',
+ gutenberg_interactivity_evaluate_reference( 'selectors.function_name', $context->get_context() )
+ );
+ $this->assertSame(
+ array( $helper, 'increment' ),
+ gutenberg_interactivity_evaluate_reference( 'selectors.class_method', $context->get_context() )
+ );
+ $this->assertSame(
+ 'Helper_Class::static_increment',
+ gutenberg_interactivity_evaluate_reference( 'selectors.class_static_method', $context->get_context() )
+ );
+ $this->assertSame(
+ array( 'Helper_Class', 'static_increment' ),
+ gutenberg_interactivity_evaluate_reference( 'selectors.class_static_method_as_array', $context->get_context() )
+ );
+ }
+}
diff --git a/phpunit/experimental/interactivity-api/directives/wp-bind-test.php b/phpunit/experimental/interactivity-api/directives/wp-bind-test.php
new file mode 100644
index 0000000000000..bfb4c428cd946
--- /dev/null
+++ b/phpunit/experimental/interactivity-api/directives/wp-bind-test.php
@@ -0,0 +1,46 @@
+';
+ $tags = new WP_HTML_Tag_Processor( $markup );
+ $tags->next_tag();
+
+ $context_before = new WP_Directive_Context( array( 'myblock' => array( 'imageSource' => './wordpress.png' ) ) );
+ $context = $context_before;
+ gutenberg_interactivity_process_wp_bind( $tags, $context );
+
+ $this->assertSame(
+ 'Test
',
+ $tags->get_updated_html()
+ );
+ $this->assertStringContainsString( 'red', $tags->get_attribute( 'class' ) );
+ $this->assertSame( $context_before->get_context(), $context->get_context(), 'data-wp-class directive changed context' );
+ }
+
+ public function test_directive_removes_class() {
+ $markup = 'Test
';
+ $tags = new WP_HTML_Tag_Processor( $markup );
+ $tags->next_tag();
+
+ $context_before = new WP_Directive_Context( array( 'myblock' => array( 'isBlue' => false ) ) );
+ $context = $context_before;
+ gutenberg_interactivity_process_wp_class( $tags, $context );
+
+ $this->assertSame(
+ 'Test
',
+ $tags->get_updated_html()
+ );
+ $this->assertStringNotContainsString( 'blue', $tags->get_attribute( 'class' ) );
+ $this->assertSame( $context_before->get_context(), $context->get_context(), 'data-wp-class directive changed context' );
+ }
+
+ public function test_directive_removes_empty_class_attribute() {
+ $markup = 'Test
';
+ $tags = new WP_HTML_Tag_Processor( $markup );
+ $tags->next_tag();
+
+ $context_before = new WP_Directive_Context( array( 'myblock' => array( 'isBlue' => false ) ) );
+ $context = $context_before;
+ gutenberg_interactivity_process_wp_class( $tags, $context );
+
+ $this->assertSame(
+ // WP_HTML_Tag_Processor has a TODO note to prune whitespace after classname removal.
+ 'Test
',
+ $tags->get_updated_html()
+ );
+ $this->assertNull( $tags->get_attribute( 'class' ) );
+ $this->assertSame( $context_before->get_context(), $context->get_context(), 'data-wp-class directive changed context' );
+ }
+
+ public function test_directive_does_not_remove_non_existant_class() {
+ $markup = 'Test
';
+ $tags = new WP_HTML_Tag_Processor( $markup );
+ $tags->next_tag();
+
+ $context_before = new WP_Directive_Context( array( 'myblock' => array( 'isBlue' => false ) ) );
+ $context = $context_before;
+ gutenberg_interactivity_process_wp_class( $tags, $context );
+
+ $this->assertSame(
+ 'Test
',
+ $tags->get_updated_html()
+ );
+ $this->assertSame( 'green red', $tags->get_attribute( 'class' ) );
+ $this->assertSame( $context_before->get_context(), $context->get_context(), 'data-wp-class directive changed context' );
+ }
+
+ public function test_directive_ignores_empty_class_name() {
+ $markup = 'Test
';
+ $tags = new WP_HTML_Tag_Processor( $markup );
+ $tags->next_tag();
+
+ $context_before = new WP_Directive_Context( array( 'myblock' => array( 'isRed' => true ) ) );
+ $context = $context_before;
+ gutenberg_interactivity_process_wp_class( $tags, $context );
+
+ $this->assertSame( $markup, $tags->get_updated_html() );
+ $this->assertStringNotContainsString( 'red', $tags->get_attribute( 'class' ) );
+ $this->assertSame( $context_before->get_context(), $context->get_context(), 'data-wp-class directive changed context' );
+ }
+}
diff --git a/phpunit/experimental/interactivity-api/directives/wp-context-test.php b/phpunit/experimental/interactivity-api/directives/wp-context-test.php
new file mode 100644
index 0000000000000..90ffb7dd9bf29
--- /dev/null
+++ b/phpunit/experimental/interactivity-api/directives/wp-context-test.php
@@ -0,0 +1,77 @@
+ array( 'open' => false ),
+ 'otherblock' => array( 'somekey' => 'somevalue' ),
+ )
+ );
+
+ $markup = '';
+ $tags = new WP_HTML_Tag_Processor( $markup );
+ $tags->next_tag();
+
+ gutenberg_interactivity_process_wp_context( $tags, $context );
+
+ $this->assertSame(
+ array(
+ 'myblock' => array( 'open' => true ),
+ 'otherblock' => array( 'somekey' => 'somevalue' ),
+ ),
+ $context->get_context()
+ );
+ }
+
+ public function test_directive_resets_context_correctly_upon_closing_tag() {
+ $context = new WP_Directive_Context(
+ array( 'my-key' => 'original-value' )
+ );
+
+ $context->set_context(
+ array( 'my-key' => 'new-value' )
+ );
+
+ $markup = '
';
+ $tags = new WP_HTML_Tag_Processor( $markup );
+ $tags->next_tag( array( 'tag_closers' => 'visit' ) );
+
+ gutenberg_interactivity_process_wp_context( $tags, $context );
+
+ $this->assertSame(
+ array( 'my-key' => 'original-value' ),
+ $context->get_context()
+ );
+ }
+
+ public function test_directive_doesnt_throw_on_malformed_context_objects() {
+ $context = new WP_Directive_Context(
+ array( 'my-key' => 'some-value' )
+ );
+
+ $markup = '';
+ $tags = new WP_HTML_Tag_Processor( $markup );
+ $tags->next_tag();
+
+ gutenberg_interactivity_process_wp_context( $tags, $context );
+
+ $this->assertSame(
+ array( 'my-key' => 'some-value' ),
+ $context->get_context()
+ );
+ }
+
+}
diff --git a/phpunit/experimental/interactivity-api/directives/wp-style-test.php b/phpunit/experimental/interactivity-api/directives/wp-style-test.php
new file mode 100644
index 0000000000000..8942559b2fe89
--- /dev/null
+++ b/phpunit/experimental/interactivity-api/directives/wp-style-test.php
@@ -0,0 +1,46 @@
+Test
';
+ $tags = new WP_HTML_Tag_Processor( $markup );
+ $tags->next_tag();
+
+ $context_before = new WP_Directive_Context( array( 'myblock' => array( 'color' => 'green' ) ) );
+ $context = $context_before;
+ gutenberg_interactivity_process_wp_style( $tags, $context );
+
+ $this->assertSame(
+ 'Test
',
+ $tags->get_updated_html()
+ );
+ $this->assertStringContainsString( 'color: green;', $tags->get_attribute( 'style' ) );
+ $this->assertSame( $context_before->get_context(), $context->get_context(), 'data-wp-style directive changed context' );
+ }
+
+ public function test_directive_ignores_empty_style() {
+ $markup = 'Test
';
+ $tags = new WP_HTML_Tag_Processor( $markup );
+ $tags->next_tag();
+
+ $context_before = new WP_Directive_Context( array( 'myblock' => array( 'color' => 'green' ) ) );
+ $context = $context_before;
+ gutenberg_interactivity_process_wp_style( $tags, $context );
+
+ $this->assertSame( $markup, $tags->get_updated_html() );
+ $this->assertStringNotContainsString( 'color: green;', $tags->get_attribute( 'style' ) );
+ $this->assertSame( $context_before->get_context(), $context->get_context(), 'data-wp-style directive changed context' );
+ }
+}
diff --git a/phpunit/experimental/interactivity-api/directives/wp-text-test.php b/phpunit/experimental/interactivity-api/directives/wp-text-test.php
new file mode 100644
index 0000000000000..81d2d0f370a64
--- /dev/null
+++ b/phpunit/experimental/interactivity-api/directives/wp-text-test.php
@@ -0,0 +1,45 @@
+';
+
+ $tags = new WP_Directive_Processor( $markup );
+ $tags->next_tag();
+
+ $context_before = new WP_Directive_Context( array( 'myblock' => array( 'someText' => 'The HTML tag The HTML tag <br> produces a line break.
';
+ $this->assertSame( $expected_markup, $tags->get_updated_html() );
+ $this->assertSame( $context_before->get_context(), $context->get_context(), 'data-wp-text directive changed context' );
+ }
+
+ public function test_directive_overwrites_inner_html_based_on_attribute_value() {
+ $markup = 'Lorem ipsum dolor sit.
';
+
+ $tags = new WP_Directive_Processor( $markup );
+ $tags->next_tag();
+
+ $context_before = new WP_Directive_Context( array( 'myblock' => array( 'someText' => 'Honi soit qui mal y pense.' ) ) );
+ $context = clone $context_before;
+ gutenberg_interactivity_process_wp_text( $tags, $context );
+
+ $expected_markup = 'Honi soit qui mal y pense.
';
+ $this->assertSame( $expected_markup, $tags->get_updated_html() );
+ $this->assertSame( $context_before->get_context(), $context->get_context(), 'data-wp-text directive changed context' );
+ }
+}
diff --git a/test/e2e/specs/interactivity/directive-bind.spec.ts b/test/e2e/specs/interactivity/directive-bind.spec.ts
new file mode 100644
index 0000000000000..67ee1232a6798
--- /dev/null
+++ b/test/e2e/specs/interactivity/directive-bind.spec.ts
@@ -0,0 +1,96 @@
+/**
+ * Internal dependencies
+ */
+import { test, expect } from './fixtures';
+
+test.describe( 'data-wp-bind', () => {
+ test.beforeAll( async ( { interactivityUtils: utils } ) => {
+ await utils.activatePlugins();
+ await utils.addPostWithBlock( 'test/directive-bind' );
+ } );
+
+ test.beforeEach( async ( { interactivityUtils: utils, page } ) => {
+ await page.goto( utils.getLink( 'test/directive-bind' ) );
+ } );
+
+ test.afterAll( async ( { interactivityUtils: utils } ) => {
+ await utils.deactivatePlugins();
+ await utils.deleteAllPosts();
+ } );
+
+ test( 'add missing href at hydration', async ( { page } ) => {
+ const el = page.getByTestId( 'add missing href at hydration' );
+ await expect( el ).toHaveAttribute( 'href', '/some-url' );
+ } );
+
+ test( 'change href at hydration', async ( { page } ) => {
+ const el = page.getByTestId( 'change href at hydration' );
+ await expect( el ).toHaveAttribute( 'href', '/some-url' );
+ } );
+
+ test( 'update missing href at hydration', async ( { page } ) => {
+ const el = page.getByTestId( 'add missing href at hydration' );
+ await expect( el ).toHaveAttribute( 'href', '/some-url' );
+ await page.getByTestId( 'toggle' ).click();
+ await expect( el ).toHaveAttribute( 'href', '/some-other-url' );
+ } );
+
+ test( 'add missing checked at hydration', async ( { page } ) => {
+ const el = page.getByTestId( 'add missing checked at hydration' );
+ await expect( el ).toHaveAttribute( 'checked', '' );
+ } );
+
+ test( 'remove existing checked at hydration', async ( { page } ) => {
+ const el = page.getByTestId( 'remove existing checked at hydration' );
+ await expect( el ).not.toHaveAttribute( 'checked', '' );
+ } );
+
+ test( 'update existing checked', async ( { page } ) => {
+ const el = page.getByTestId( 'add missing checked at hydration' );
+ const el2 = page.getByTestId( 'remove existing checked at hydration' );
+ let checked = await el.evaluate(
+ ( element: HTMLInputElement ) => element.checked
+ );
+ let checked2 = await el2.evaluate(
+ ( element: HTMLInputElement ) => element.checked
+ );
+ expect( checked ).toBe( true );
+ expect( checked2 ).toBe( false );
+ await page.getByTestId( 'toggle' ).click();
+ checked = await el.evaluate(
+ ( element: HTMLInputElement ) => element.checked
+ );
+ checked2 = await el2.evaluate(
+ ( element: HTMLInputElement ) => element.checked
+ );
+ expect( checked ).toBe( false );
+ expect( checked2 ).toBe( true );
+ } );
+
+ test( 'nested binds', async ( { page } ) => {
+ const el = page.getByTestId( 'nested binds - 1' );
+ await expect( el ).toHaveAttribute( 'href', '/some-url' );
+ const el2 = page.getByTestId( 'nested binds - 2' );
+ await expect( el2 ).toHaveAttribute( 'width', '1' );
+ await page.getByTestId( 'toggle' ).click();
+ await expect( el ).toHaveAttribute( 'href', '/some-other-url' );
+ await expect( el2 ).toHaveAttribute( 'width', '2' );
+ } );
+
+ test( 'check enumerated attributes with true/false values', async ( {
+ page,
+ } ) => {
+ const el = page.getByTestId(
+ 'check enumerated attributes with true/false exist and have a string value'
+ );
+ await expect( el ).toHaveAttribute( 'hidden', '' );
+ await expect( el ).toHaveAttribute( 'aria-hidden', 'true' );
+ await expect( el ).toHaveAttribute( 'aria-expanded', 'false' );
+ await expect( el ).toHaveAttribute( 'data-some-value', 'false' );
+ await page.getByTestId( 'toggle' ).click();
+ await expect( el ).not.toHaveAttribute( 'hidden', '' );
+ await expect( el ).toHaveAttribute( 'aria-hidden', 'false' );
+ await expect( el ).toHaveAttribute( 'aria-expanded', 'true' );
+ await expect( el ).toHaveAttribute( 'data-some-value', 'true' );
+ } );
+} );
diff --git a/test/e2e/specs/interactivity/directive-effect.spec.ts b/test/e2e/specs/interactivity/directive-effect.spec.ts
new file mode 100644
index 0000000000000..2ec52444cfd9b
--- /dev/null
+++ b/test/e2e/specs/interactivity/directive-effect.spec.ts
@@ -0,0 +1,39 @@
+/**
+ * Internal dependencies
+ */
+import { test, expect } from './fixtures';
+
+test.describe( 'data-wp-effect', () => {
+ test.beforeAll( async ( { interactivityUtils: utils } ) => {
+ await utils.activatePlugins();
+ await utils.addPostWithBlock( 'test/directive-effect' );
+ } );
+
+ test.beforeEach( async ( { interactivityUtils: utils, page } ) => {
+ await page.goto( utils.getLink( 'test/directive-effect' ) );
+ } );
+
+ test.afterAll( async ( { interactivityUtils: utils } ) => {
+ await utils.deactivatePlugins();
+ await utils.deleteAllPosts();
+ } );
+
+ test( 'check that effect runs when it is added', async ( { page } ) => {
+ const el = page.getByTestId( 'element in the DOM' );
+ await expect( el ).toContainText( 'element is in the DOM' );
+ } );
+
+ test( 'check that effect runs when it is removed', async ( { page } ) => {
+ await page.getByTestId( 'toggle' ).click();
+ const el = page.getByTestId( 'element in the DOM' );
+ await expect( el ).toContainText( 'element is not in the DOM' );
+ } );
+
+ test( 'change focus after DOM changes', async ( { page } ) => {
+ const el = page.getByTestId( 'input' );
+ await expect( el ).toBeFocused();
+ await page.getByTestId( 'toggle' ).click();
+ await page.getByTestId( 'toggle' ).click();
+ await expect( el ).toBeFocused();
+ } );
+} );
diff --git a/test/e2e/specs/interactivity/directive-priorities.spec.ts b/test/e2e/specs/interactivity/directive-priorities.spec.ts
new file mode 100644
index 0000000000000..1734d6f5aecc3
--- /dev/null
+++ b/test/e2e/specs/interactivity/directive-priorities.spec.ts
@@ -0,0 +1,84 @@
+/**
+ * Internal dependencies
+ */
+import { test, expect } from './fixtures';
+
+test.describe( 'Directives (w/ priority)', () => {
+ test.beforeAll( async ( { interactivityUtils: utils } ) => {
+ await utils.activatePlugins();
+ await utils.addPostWithBlock( 'test/directive-priorities' );
+ } );
+
+ test.beforeEach( async ( { interactivityUtils: utils, page } ) => {
+ await page.goto( utils.getLink( 'test/directive-priorities' ) );
+ } );
+
+ test.afterAll( async ( { interactivityUtils: utils } ) => {
+ await utils.deactivatePlugins();
+ await utils.deleteAllPosts();
+ } );
+
+ test( 'should run in priority order', async ( { page } ) => {
+ const executionOrder = page.getByTestId( 'execution order' );
+ await expect( executionOrder ).toHaveText(
+ 'context, attribute, text, children'
+ );
+ } );
+
+ test( 'should wrap those with less priority', async ( { page } ) => {
+ // Check that attribute value is correctly received from Provider.
+ const element = page.getByTestId( 'test directives' );
+ await expect( element ).toHaveAttribute(
+ 'data-attribute',
+ 'from context'
+ );
+
+ // Check that text value is correctly received from Provider, and text
+ // wrapped with an element with `data-testid=text`.
+ const text = element.getByTestId( 'text' );
+ await expect( text ).toHaveText( 'from context' );
+ } );
+
+ test( 'should propagate element modifications top-down', async ( {
+ page,
+ } ) => {
+ const executionOrder = page.getByTestId( 'execution order' );
+ const element = page.getByTestId( 'test directives' );
+ const text = element.getByTestId( 'text' );
+
+ // Get buttons.
+ const updateAttribute = element.getByRole( 'button', {
+ name: 'Update attribute',
+ } );
+ const updateText = element.getByRole( 'button', {
+ name: 'Update text',
+ } );
+
+ // Modify `attribute` inside context. This triggers a re-render for the
+ // component that wraps the `attribute` directive, evaluating it again.
+ // Nested components are re-rendered as well, so their directives are
+ // also re-evaluated (note how `text` and `children` have run).
+ await updateAttribute.click();
+ await expect( element ).toHaveAttribute( 'data-attribute', 'updated' );
+ await expect( executionOrder ).toHaveText(
+ [
+ 'context, attribute, text, children',
+ 'attribute, text, children',
+ ].join( ', ' )
+ );
+
+ // Modify `text` inside context. This triggers a re-render of the
+ // component that wraps the `text` directive. In this case, only
+ // `children` run as well, right after `text`.
+ await updateText.click();
+ await expect( element ).toHaveAttribute( 'data-attribute', 'updated' );
+ await expect( text ).toHaveText( 'updated' );
+ await expect( executionOrder ).toHaveText(
+ [
+ 'context, attribute, text, children',
+ 'attribute, text, children',
+ 'text, children',
+ ].join( ', ' )
+ );
+ } );
+} );
diff --git a/test/e2e/specs/interactivity/directives-class.spec.ts b/test/e2e/specs/interactivity/directives-class.spec.ts
new file mode 100644
index 0000000000000..c0ec77e14d056
--- /dev/null
+++ b/test/e2e/specs/interactivity/directives-class.spec.ts
@@ -0,0 +1,101 @@
+/**
+ * Internal dependencies
+ */
+import { test, expect } from './fixtures';
+
+test.describe( 'data-wp-class', () => {
+ test.beforeAll( async ( { interactivityUtils: utils } ) => {
+ await utils.activatePlugins();
+ await utils.addPostWithBlock( 'test/directive-class' );
+ } );
+
+ test.beforeEach( async ( { interactivityUtils: utils, page } ) => {
+ await page.goto( utils.getLink( 'test/directive-class' ) );
+ } );
+
+ test.afterAll( async ( { interactivityUtils: utils } ) => {
+ await utils.deactivatePlugins();
+ await utils.deleteAllPosts();
+ } );
+
+ test( 'remove class if callback returns falsy value', async ( {
+ page,
+ } ) => {
+ const el = page.getByTestId(
+ 'remove class if callback returns falsy value'
+ );
+ await expect( el ).toHaveClass( 'bar' );
+ await page.getByTestId( 'toggle falseValue' ).click();
+ await expect( el ).toHaveClass( 'foo bar' );
+ await page.getByTestId( 'toggle falseValue' ).click();
+ await expect( el ).toHaveClass( 'bar' );
+ } );
+
+ test( 'add class if callback returns truthy value', async ( { page } ) => {
+ const el = page.getByTestId(
+ 'add class if callback returns truthy value'
+ );
+ await expect( el ).toHaveClass( 'foo bar' );
+ await page.getByTestId( 'toggle trueValue' ).click();
+ await expect( el ).toHaveClass( 'foo' );
+ await page.getByTestId( 'toggle trueValue' ).click();
+ await expect( el ).toHaveClass( 'foo bar' );
+ } );
+
+ test( 'handles multiple classes and callbacks', async ( { page } ) => {
+ const el = page.getByTestId( 'handles multiple classes and callbacks' );
+ await expect( el ).toHaveClass( 'bar baz' );
+ await page.getByTestId( 'toggle trueValue' ).click();
+ await expect( el ).toHaveClass( '' );
+ await page.getByTestId( 'toggle trueValue' ).click();
+ await expect( el ).toHaveClass( 'bar baz' );
+ await page.getByTestId( 'toggle falseValue' ).click();
+ await expect( el ).toHaveClass( 'foo bar baz' );
+ await page.getByTestId( 'toggle trueValue' ).click();
+ await expect( el ).toHaveClass( 'foo' );
+ } );
+
+ test( 'handles class names that are contained inside other class names', async ( {
+ page,
+ } ) => {
+ const el = page.getByTestId(
+ 'handles class names that are contained inside other class names'
+ );
+ await expect( el ).toHaveClass( 'foo-bar' );
+ await page.getByTestId( 'toggle falseValue' ).click();
+ await expect( el ).toHaveClass( 'foo foo-bar' );
+ await page.getByTestId( 'toggle trueValue' ).click();
+ await expect( el ).toHaveClass( 'foo' );
+ } );
+
+ test( 'can toggle class in the middle', async ( { page } ) => {
+ const el = page.getByTestId( 'can toggle class in the middle' );
+ await expect( el ).toHaveClass( 'foo bar baz' );
+ await page.getByTestId( 'toggle trueValue' ).click();
+ await expect( el ).toHaveClass( 'foo baz' );
+ await page.getByTestId( 'toggle trueValue' ).click();
+ await expect( el ).toHaveClass( 'foo bar baz' );
+ } );
+
+ test( 'can toggle class when class attribute is missing', async ( {
+ page,
+ } ) => {
+ const el = page.getByTestId(
+ 'can toggle class when class attribute is missing'
+ );
+ await expect( el ).toHaveClass( '' );
+ await page.getByTestId( 'toggle falseValue' ).click();
+ await expect( el ).toHaveClass( 'foo' );
+ await page.getByTestId( 'toggle falseValue' ).click();
+ await expect( el ).toHaveClass( '' );
+ } );
+
+ test( 'can use context values', async ( { page } ) => {
+ const el = page.getByTestId( 'can use context values' );
+ await expect( el ).toHaveClass( '' );
+ await page.getByTestId( 'toggle context false value' ).click();
+ await expect( el ).toHaveClass( 'foo' );
+ await page.getByTestId( 'toggle context false value' ).click();
+ await expect( el ).toHaveClass( '' );
+ } );
+} );
diff --git a/test/e2e/specs/interactivity/directives-context.spec.ts b/test/e2e/specs/interactivity/directives-context.spec.ts
new file mode 100644
index 0000000000000..5c74e8054bf19
--- /dev/null
+++ b/test/e2e/specs/interactivity/directives-context.spec.ts
@@ -0,0 +1,165 @@
+/**
+ * External dependencies
+ */
+import type { Locator } from '@playwright/test';
+/**
+ * Internal dependencies
+ */
+import { test, expect } from './fixtures';
+
+const parseContent = async ( loc: Locator ) =>
+ JSON.parse( ( await loc.textContent() ) || '' );
+
+test.describe( 'data-wp-context', () => {
+ test.beforeAll( async ( { interactivityUtils: utils } ) => {
+ await utils.activatePlugins();
+ await utils.addPostWithBlock( 'test/directive-context' );
+ } );
+
+ test.beforeEach( async ( { interactivityUtils: utils, page } ) => {
+ await page.goto( utils.getLink( 'test/directive-context' ) );
+ } );
+
+ test.afterAll( async ( { interactivityUtils: utils } ) => {
+ await utils.deactivatePlugins();
+ await utils.deleteAllPosts();
+ } );
+
+ test( 'is correctly initialized', async ( { page } ) => {
+ const parentContext = await parseContent(
+ page.getByTestId( 'parent context' )
+ );
+
+ expect( parentContext ).toMatchObject( {
+ prop1: 'parent',
+ prop2: 'parent',
+ obj: { prop4: 'parent', prop5: 'parent' },
+ array: [ 1, 2, 3 ],
+ } );
+ } );
+
+ test( 'is correctly extended', async ( { page } ) => {
+ const childContext = await parseContent(
+ page.getByTestId( 'child context' )
+ );
+
+ expect( childContext ).toMatchObject( {
+ prop1: 'parent',
+ prop2: 'child',
+ prop3: 'child',
+ obj: { prop4: 'parent', prop5: 'child', prop6: 'child' },
+ array: [ 4, 5, 6 ],
+ } );
+ } );
+
+ test( 'changes in inherited properties are reflected (child)', async ( {
+ page,
+ } ) => {
+ await page.getByTestId( 'child prop1' ).click();
+ await page.getByTestId( 'child obj.prop4' ).click();
+
+ const childContext = await parseContent(
+ page.getByTestId( 'child context' )
+ );
+
+ expect( childContext.prop1 ).toBe( 'modifiedFromChild' );
+ expect( childContext.obj.prop4 ).toBe( 'modifiedFromChild' );
+
+ const parentContext = await parseContent(
+ page.getByTestId( 'parent context' )
+ );
+
+ expect( parentContext.prop1 ).toBe( 'modifiedFromChild' );
+ expect( parentContext.obj.prop4 ).toBe( 'modifiedFromChild' );
+ } );
+
+ test( 'changes in inherited properties are reflected (parent)', async ( {
+ page,
+ } ) => {
+ await page.getByTestId( 'parent prop1' ).click();
+ await page.getByTestId( 'parent obj.prop4' ).click();
+
+ const childContext = await parseContent(
+ page.getByTestId( 'child context' )
+ );
+
+ expect( childContext.prop1 ).toBe( 'modifiedFromParent' );
+ expect( childContext.obj.prop4 ).toBe( 'modifiedFromParent' );
+
+ const parentContext = await parseContent(
+ page.getByTestId( 'parent context' )
+ );
+
+ expect( parentContext.prop1 ).toBe( 'modifiedFromParent' );
+ expect( parentContext.obj.prop4 ).toBe( 'modifiedFromParent' );
+ } );
+
+ test( 'changes in shadowed properties do not leak (child)', async ( {
+ page,
+ } ) => {
+ await page.getByTestId( 'child prop2' ).click();
+ await page.getByTestId( 'child obj.prop5' ).click();
+
+ const childContext = await parseContent(
+ page.getByTestId( 'child context' )
+ );
+
+ expect( childContext.prop2 ).toBe( 'modifiedFromChild' );
+ expect( childContext.obj.prop5 ).toBe( 'modifiedFromChild' );
+
+ const parentContext = await parseContent(
+ page.getByTestId( 'parent context' )
+ );
+
+ expect( parentContext.prop2 ).toBe( 'parent' );
+ expect( parentContext.obj.prop5 ).toBe( 'parent' );
+ } );
+
+ test( 'changes in shadowed properties do not leak (parent)', async ( {
+ page,
+ } ) => {
+ await page.getByTestId( 'parent prop2' ).click();
+ await page.getByTestId( 'parent obj.prop5' ).click();
+
+ const childContext = await parseContent(
+ page.getByTestId( 'child context' )
+ );
+
+ expect( childContext.prop2 ).toBe( 'child' );
+ expect( childContext.obj.prop5 ).toBe( 'child' );
+
+ const parentContext = await parseContent(
+ page.getByTestId( 'parent context' )
+ );
+
+ expect( parentContext.prop2 ).toBe( 'modifiedFromParent' );
+ expect( parentContext.obj.prop5 ).toBe( 'modifiedFromParent' );
+ } );
+
+ test( 'Array properties are shadowed', async ( { page } ) => {
+ const parentContext = await parseContent(
+ page.getByTestId( 'parent context' )
+ );
+
+ const childContext = await parseContent(
+ page.getByTestId( 'child context' )
+ );
+
+ expect( parentContext.array ).toMatchObject( [ 1, 2, 3 ] );
+ expect( childContext.array ).toMatchObject( [ 4, 5, 6 ] );
+ } );
+
+ test( 'can be accessed in other directives on the same element', async ( {
+ page,
+ } ) => {
+ const element = page.getByTestId( 'context & other directives' );
+ await expect( element ).toHaveText( 'Text 1' );
+ await expect( element ).toHaveAttribute( 'value', 'Text 1' );
+ await element.click();
+ await expect( element ).toHaveText( 'Text 2' );
+ await expect( element ).toHaveAttribute( 'value', 'Text 2' );
+ await element.click();
+ await expect( element ).toHaveText( 'Text 1' );
+ await expect( element ).toHaveAttribute( 'value', 'Text 1' );
+ } );
+} );
diff --git a/test/e2e/specs/interactivity/directives-show.spec.ts b/test/e2e/specs/interactivity/directives-show.spec.ts
new file mode 100644
index 0000000000000..7e25332ae143c
--- /dev/null
+++ b/test/e2e/specs/interactivity/directives-show.spec.ts
@@ -0,0 +1,59 @@
+/**
+ * Internal dependencies
+ */
+import { test, expect } from './fixtures';
+
+test.describe( 'data-wp-show', () => {
+ test.beforeAll( async ( { interactivityUtils: utils } ) => {
+ await utils.activatePlugins();
+ await utils.addPostWithBlock( 'test/directive-show' );
+ } );
+ test.beforeEach( async ( { interactivityUtils: utils, page } ) => {
+ await page.goto( utils.getLink( 'test/directive-show' ) );
+ } );
+ test.afterAll( async ( { interactivityUtils: utils } ) => {
+ await utils.deactivatePlugins();
+ await utils.deleteAllPosts();
+ } );
+
+ test( 'show if callback returns truthy value', async ( { page } ) => {
+ const el = page.getByTestId( 'show if callback returns truthy value' );
+ await expect( el ).toBeVisible();
+ } );
+
+ test( 'do not show if callback returns falsy value', async ( { page } ) => {
+ const el = page.getByTestId(
+ 'do not show if callback returns false value'
+ );
+ await expect( el ).toBeHidden();
+ } );
+
+ test( 'hide when toggling truthy value to falsy', async ( { page } ) => {
+ const el = page.getByTestId( 'show if callback returns truthy value' );
+ await expect( el ).toBeVisible();
+ await page.getByTestId( 'toggle trueValue' ).click();
+ await expect( el ).toBeHidden();
+ await page.getByTestId( 'toggle trueValue' ).click();
+ await expect( el ).toBeVisible();
+ } );
+
+ test( 'show when toggling false value to truthy', async ( { page } ) => {
+ const el = page.getByTestId(
+ 'do not show if callback returns false value'
+ );
+ await expect( el ).toBeHidden();
+ await page.getByTestId( 'toggle falseValue' ).click();
+ await expect( el ).toBeVisible();
+ await page.getByTestId( 'toggle falseValue' ).click();
+ await expect( el ).toBeHidden();
+ } );
+
+ test( 'can use context values', async ( { page } ) => {
+ const el = page.getByTestId( 'can use context values' );
+ await expect( el ).toBeHidden();
+ await page.getByTestId( 'toggle context false value' ).click();
+ await expect( el ).toBeVisible();
+ await page.getByTestId( 'toggle context false value' ).click();
+ await expect( el ).toBeHidden();
+ } );
+} );
diff --git a/test/e2e/specs/interactivity/directives-text.spec.ts b/test/e2e/specs/interactivity/directives-text.spec.ts
new file mode 100644
index 0000000000000..8e83be26de15c
--- /dev/null
+++ b/test/e2e/specs/interactivity/directives-text.spec.ts
@@ -0,0 +1,36 @@
+/**
+ * Internal dependencies
+ */
+import { test, expect } from './fixtures';
+
+test.describe( 'data-wp-text', () => {
+ test.beforeAll( async ( { interactivityUtils: utils } ) => {
+ await utils.activatePlugins();
+ await utils.addPostWithBlock( 'test/directive-text' );
+ } );
+ test.beforeEach( async ( { interactivityUtils: utils, page } ) => {
+ await page.goto( utils.getLink( 'test/directive-text' ) );
+ } );
+ test.afterAll( async ( { interactivityUtils: utils } ) => {
+ await utils.deactivatePlugins();
+ await utils.deleteAllPosts();
+ } );
+
+ test( 'show proper text reading from state', async ( { page } ) => {
+ const el = page.getByTestId( 'show state text' );
+ await expect( el ).toHaveText( 'Text 1' );
+ await page.getByTestId( 'toggle state text' ).click();
+ await expect( el ).toHaveText( 'Text 2' );
+ await page.getByTestId( 'toggle state text' ).click();
+ await expect( el ).toHaveText( 'Text 1' );
+ } );
+
+ test( 'show proper text reading from context', async ( { page } ) => {
+ const el = page.getByTestId( 'show context text' );
+ await expect( el ).toHaveText( 'Text 1' );
+ await page.getByTestId( 'toggle context text' ).click();
+ await expect( el ).toHaveText( 'Text 2' );
+ await page.getByTestId( 'toggle context text' ).click();
+ await expect( el ).toHaveText( 'Text 1' );
+ } );
+} );
diff --git a/test/e2e/specs/interactivity/fixtures/index.ts b/test/e2e/specs/interactivity/fixtures/index.ts
new file mode 100644
index 0000000000000..607221ffb1ec4
--- /dev/null
+++ b/test/e2e/specs/interactivity/fixtures/index.ts
@@ -0,0 +1,25 @@
+/**
+ * WordPress dependencies
+ */
+import { test as base } from '@wordpress/e2e-test-utils-playwright';
+export { expect } from '@wordpress/e2e-test-utils-playwright';
+
+/**
+ * Internal dependencies
+ */
+import InteractivityUtils from './interactivity-utils';
+
+type Fixtures = {
+ interactivityUtils: InteractivityUtils;
+};
+
+export const test = base.extend< Fixtures >( {
+ interactivityUtils: [
+ async ( { requestUtils }, use ) => {
+ await use( new InteractivityUtils( { requestUtils } ) );
+ },
+ // @ts-ignore: The required type is 'test', but can be 'worker' too. See
+ // https://playwright.dev/docs/test-fixtures#worker-scoped-fixtures
+ { scope: 'worker' },
+ ],
+} );
diff --git a/test/e2e/specs/interactivity/fixtures/interactivity-utils.ts b/test/e2e/specs/interactivity/fixtures/interactivity-utils.ts
new file mode 100644
index 0000000000000..9d83c93650d40
--- /dev/null
+++ b/test/e2e/specs/interactivity/fixtures/interactivity-utils.ts
@@ -0,0 +1,60 @@
+/**
+ * WordPress dependencies
+ */
+import type { RequestUtils } from '@wordpress/e2e-test-utils-playwright';
+
+export default class InteractivityUtils {
+ links: Map< string, string >;
+ requestUtils: RequestUtils;
+
+ constructor( { requestUtils }: { requestUtils: RequestUtils } ) {
+ this.links = new Map();
+ this.requestUtils = requestUtils;
+ }
+
+ getLink( blockName: string ) {
+ const link = this.links.get( blockName );
+ if ( ! link ) {
+ throw new Error(
+ `No link found for post with block '${ blockName }'`
+ );
+ }
+
+ // Add an extra param to disable directives SSR. This is required at
+ // this moment, as SSR for directives is not stabilized yet and we need
+ // to ensure hydration works, even when the SSR'ed HTML is not correct.
+ const url = new URL( link );
+ url.searchParams.append( 'disable_directives_ssr', 'true' );
+ return url.href;
+ }
+
+ async addPostWithBlock( blockName: string ) {
+ const payload = {
+ content: ``,
+ status: 'publish' as 'publish',
+ date_gmt: '2023-01-01T00:00:00',
+ };
+
+ const { link } = await this.requestUtils.createPost( payload );
+ this.links.set( blockName, link );
+ }
+
+ async deleteAllPosts() {
+ await this.requestUtils.deleteAllPosts();
+ this.links.clear();
+ }
+
+ async activatePlugins() {
+ await this.requestUtils.activateTheme( 'emptytheme' );
+ await this.requestUtils.activatePlugin(
+ 'gutenberg-test-interactive-blocks'
+ );
+ }
+
+ async deactivatePlugins() {
+ await this.requestUtils.activateTheme( 'twentytwentyone' );
+ await this.requestUtils.deactivatePlugin(
+ 'gutenberg-test-interactive-blocks'
+ );
+ }
+}
diff --git a/test/e2e/specs/interactivity/negation-operator.spec.ts b/test/e2e/specs/interactivity/negation-operator.spec.ts
new file mode 100644
index 0000000000000..da5670a0e5782
--- /dev/null
+++ b/test/e2e/specs/interactivity/negation-operator.spec.ts
@@ -0,0 +1,44 @@
+/**
+ * Internal dependencies
+ */
+import { test, expect } from './fixtures';
+
+test.describe( 'negation-operator', () => {
+ test.beforeAll( async ( { interactivityUtils: utils } ) => {
+ await utils.activatePlugins();
+ await utils.addPostWithBlock( 'test/negation-operator' );
+ } );
+
+ test.beforeEach( async ( { interactivityUtils: utils, page } ) => {
+ await page.goto( utils.getLink( 'test/negation-operator' ) );
+ } );
+
+ test.afterAll( async ( { interactivityUtils: utils } ) => {
+ await utils.deactivatePlugins();
+ await utils.deleteAllPosts();
+ } );
+
+ test( 'add hidden attribute when !state.active', async ( { page } ) => {
+ const el = page.getByTestId(
+ 'add hidden attribute if state is not active'
+ );
+
+ await expect( el ).toHaveAttribute( 'hidden', '' );
+ await page.getByTestId( 'toggle active value' ).click();
+ await expect( el ).not.toHaveAttribute( 'hidden', '' );
+ await page.getByTestId( 'toggle active value' ).click();
+ await expect( el ).toHaveAttribute( 'hidden', '' );
+ } );
+
+ test( 'add hidden attribute when !selectors.active', async ( { page } ) => {
+ const el = page.getByTestId(
+ 'add hidden attribute if selector is not active'
+ );
+
+ await expect( el ).toHaveAttribute( 'hidden', '' );
+ await page.getByTestId( 'toggle active value' ).click();
+ await expect( el ).not.toHaveAttribute( 'hidden', '' );
+ await page.getByTestId( 'toggle active value' ).click();
+ await expect( el ).toHaveAttribute( 'hidden', '' );
+ } );
+} );
diff --git a/test/e2e/specs/interactivity/store-tag.spec.ts b/test/e2e/specs/interactivity/store-tag.spec.ts
new file mode 100644
index 0000000000000..80f9acfad9335
--- /dev/null
+++ b/test/e2e/specs/interactivity/store-tag.spec.ts
@@ -0,0 +1,86 @@
+/**
+ * Internal dependencies
+ */
+import { test, expect } from './fixtures';
+
+test.describe( 'store tag', () => {
+ test.beforeAll( async ( { interactivityUtils: utils } ) => {
+ await utils.activatePlugins();
+ await utils.addPostWithBlock( 'test/store-tag {"condition":"ok"}' );
+ await utils.addPostWithBlock(
+ 'test/store-tag {"condition":"missing"}'
+ );
+ await utils.addPostWithBlock(
+ 'test/store-tag {"condition":"corrupted-json"}'
+ );
+ await utils.addPostWithBlock(
+ 'test/store-tag {"condition":"invalid-state"}'
+ );
+ } );
+
+ test.afterAll( async ( { interactivityUtils: utils } ) => {
+ await utils.deactivatePlugins();
+ await utils.deleteAllPosts();
+ } );
+
+ test( 'hydrates when it is well defined', async ( {
+ interactivityUtils: utils,
+ page,
+ } ) => {
+ const block = 'test/store-tag {"condition":"ok"}';
+ await page.goto( utils.getLink( block ) );
+
+ const value = page.getByTestId( 'counter value' );
+ const double = page.getByTestId( 'counter double' );
+ const clicks = page.getByTestId( 'counter clicks' );
+
+ await expect( value ).toHaveText( '3' );
+ await expect( double ).toHaveText( '6' );
+ await expect( clicks ).toHaveText( '0' );
+
+ await page.getByTestId( 'counter button' ).click();
+
+ await expect( value ).toHaveText( '4' );
+ await expect( double ).toHaveText( '8' );
+ await expect( clicks ).toHaveText( '1' );
+ } );
+
+ test( 'does not break the page when missing', async ( {
+ interactivityUtils: utils,
+ page,
+ } ) => {
+ const block = 'test/store-tag {"condition":"missing"}';
+ await page.goto( utils.getLink( block ) );
+
+ const clicks = page.getByTestId( 'counter clicks' );
+ await expect( clicks ).toHaveText( '0' );
+ await page.getByTestId( 'counter button' ).click();
+ await expect( clicks ).toHaveText( '1' );
+ } );
+
+ test( 'does not break the page when corrupted', async ( {
+ interactivityUtils: utils,
+ page,
+ } ) => {
+ const block = 'test/store-tag {"condition":"corrupted-json"}';
+ await page.goto( utils.getLink( block ) );
+
+ const clicks = page.getByTestId( 'counter clicks' );
+ await expect( clicks ).toHaveText( '0' );
+ await page.getByTestId( 'counter button' ).click();
+ await expect( clicks ).toHaveText( '1' );
+ } );
+
+ test( 'does not break the page when it contains an invalid state', async ( {
+ interactivityUtils: utils,
+ page,
+ } ) => {
+ const block = 'test/store-tag {"condition":"invalid-state"}';
+ await page.goto( utils.getLink( block ) );
+
+ const clicks = page.getByTestId( 'counter clicks' );
+ await expect( clicks ).toHaveText( '0' );
+ await page.getByTestId( 'counter button' ).click();
+ await expect( clicks ).toHaveText( '1' );
+ } );
+} );
diff --git a/test/e2e/specs/interactivity/tovdom-islands.spec.ts b/test/e2e/specs/interactivity/tovdom-islands.spec.ts
new file mode 100644
index 0000000000000..fcc7c6081077a
--- /dev/null
+++ b/test/e2e/specs/interactivity/tovdom-islands.spec.ts
@@ -0,0 +1,58 @@
+/**
+ * Internal dependencies
+ */
+import { test, expect } from './fixtures';
+
+test.describe( 'toVdom - islands', () => {
+ test.beforeAll( async ( { interactivityUtils: utils } ) => {
+ await utils.activatePlugins();
+ await utils.addPostWithBlock( 'test/tovdom-islands' );
+ } );
+ test.beforeEach( async ( { interactivityUtils: utils, page } ) => {
+ await page.goto( utils.getLink( 'test/tovdom-islands' ) );
+ } );
+ test.afterAll( async ( { interactivityUtils: utils } ) => {
+ await utils.deactivatePlugins();
+ await utils.deleteAllPosts();
+ } );
+
+ test( 'directives that are not inside islands should not be hydrated', async ( {
+ page,
+ } ) => {
+ const el = page.getByTestId( 'not inside an island' );
+ await expect( el ).toBeVisible();
+ } );
+
+ test( 'directives that are inside islands should be hydrated', async ( {
+ page,
+ } ) => {
+ const el = page.getByTestId( 'inside an island' );
+ await expect( el ).toBeHidden();
+ } );
+
+ test( 'directives that are inside inner blocks of isolated islands should not be hydrated', async ( {
+ page,
+ } ) => {
+ const el = page.getByTestId(
+ 'inside an inner block of an isolated island'
+ );
+ await expect( el ).toBeVisible();
+ } );
+
+ test( 'directives inside islands should not be hydrated twice', async ( {
+ page,
+ } ) => {
+ const el = page.getByTestId( 'island inside another island' );
+ const templates = el.locator( 'template' );
+ expect( await templates.count() ).toEqual( 1 );
+ } );
+
+ test( 'islands inside inner blocks of isolated islands should be hydrated', async ( {
+ page,
+ } ) => {
+ const el = page.getByTestId(
+ 'island inside inner block of isolated island'
+ );
+ await expect( el ).toBeHidden();
+ } );
+} );
diff --git a/test/e2e/specs/interactivity/tovdom.spec.ts b/test/e2e/specs/interactivity/tovdom.spec.ts
new file mode 100644
index 0000000000000..cf08fb115db4f
--- /dev/null
+++ b/test/e2e/specs/interactivity/tovdom.spec.ts
@@ -0,0 +1,55 @@
+/**
+ * Internal dependencies
+ */
+import { test, expect } from './fixtures';
+
+test.describe( 'toVdom', () => {
+ test.beforeAll( async ( { interactivityUtils: utils } ) => {
+ await utils.activatePlugins();
+ await utils.addPostWithBlock( 'test/tovdom' );
+ } );
+ test.beforeEach( async ( { interactivityUtils: utils, page } ) => {
+ await page.goto( utils.getLink( 'test/tovdom' ) );
+ } );
+ test.afterAll( async ( { interactivityUtils: utils } ) => {
+ await utils.deactivatePlugins();
+ await utils.deleteAllPosts();
+ } );
+
+ test( 'it should delete comments', async ( { page } ) => {
+ const el = page.getByTestId( 'it should delete comments' );
+ const c = await el.innerHTML();
+ expect( c ).not.toContain( '##1##' );
+ expect( c ).not.toContain( '##2##' );
+ const el2 = page.getByTestId(
+ 'it should keep this node between comments'
+ );
+ await expect( el2 ).toBeVisible();
+ } );
+
+ test( 'it should delete processing instructions', async ( { page } ) => {
+ const el = page.getByTestId(
+ 'it should delete processing instructions'
+ );
+ const c = await el.innerHTML();
+ expect( c ).not.toContain( '##1##' );
+ expect( c ).not.toContain( '##2##' );
+ const el2 = page.getByTestId(
+ 'it should keep this node between processing instructions'
+ );
+ await expect( el2 ).toBeVisible();
+ } );
+
+ test( 'it should replace CDATA with text nodes', async ( { page } ) => {
+ const el = page.getByTestId(
+ 'it should replace CDATA with text nodes'
+ );
+ const c = await el.innerHTML();
+ expect( c ).toContain( '##1##' );
+ expect( c ).toContain( '##2##' );
+ const el2 = page.getByTestId(
+ 'it should keep this node between CDATA'
+ );
+ await expect( el2 ).toBeVisible();
+ } );
+} );
diff --git a/tools/webpack/blocks.js b/tools/webpack/blocks.js
index 19ff4e90e214e..d399ee0d1a34b 100644
--- a/tools/webpack/blocks.js
+++ b/tools/webpack/blocks.js
@@ -219,82 +219,4 @@ module.exports = [
} ),
].filter( Boolean ),
},
- {
- ...baseConfig,
- watchOptions: {
- aggregateTimeout: 200,
- },
- name: 'interactivity',
- entry: {
- file: './packages/block-library/src/file/interactivity.js',
- navigation:
- './packages/block-library/src/navigation/interactivity.js',
- image: './packages/block-library/src/image/interactivity.js',
- },
- output: {
- devtoolNamespace: 'wp',
- filename: './blocks/[name]/interactivity.min.js',
- path: join( __dirname, '..', '..', 'build', 'block-library' ),
- },
- optimization: {
- ...baseConfig.optimization,
- runtimeChunk: {
- name: 'vendors',
- },
- splitChunks: {
- cacheGroups: {
- vendors: {
- name: 'vendors',
- test: /[\\/]node_modules[\\/]/,
- filename: './interactivity/[name].min.js',
- minSize: 0,
- chunks: 'all',
- },
- runtime: {
- name: 'runtime',
- test: /[\\/]utils[\\/]interactivity[\\/]/,
- filename: './interactivity/[name].min.js',
- chunks: 'all',
- minSize: 0,
- priority: -10,
- },
- },
- },
- },
- module: {
- rules: [
- {
- test: /\.(j|t)sx?$/,
- exclude: /node_modules/,
- use: [
- {
- loader: require.resolve( 'babel-loader' ),
- options: {
- cacheDirectory:
- process.env.BABEL_CACHE_DIRECTORY || true,
- babelrc: false,
- configFile: false,
- presets: [
- [
- '@babel/preset-react',
- {
- runtime: 'automatic',
- importSource: 'preact',
- },
- ],
- ],
- },
- },
- ],
- },
- ],
- },
- plugins: [
- ...plugins,
- new DependencyExtractionWebpackPlugin( {
- __experimentalInjectInteractivityRuntime: true,
- injectPolyfill: false,
- } ),
- ].filter( Boolean ),
- },
];
diff --git a/tools/webpack/interactivity.js b/tools/webpack/interactivity.js
new file mode 100644
index 0000000000000..715d824979e5e
--- /dev/null
+++ b/tools/webpack/interactivity.js
@@ -0,0 +1,56 @@
+/**
+ * External dependencies
+ */
+const { join } = require( 'path' );
+
+/**
+ * Internal dependencies
+ */
+const { baseConfig } = require( './shared' );
+
+module.exports = {
+ ...baseConfig,
+ name: 'interactivity',
+ entry: {
+ index: {
+ import: `./packages/interactivity/src/index.js`,
+ library: {
+ name: [ 'wp', 'interactivity' ],
+ type: 'window',
+ },
+ },
+ },
+ output: {
+ devtoolNamespace: 'wp',
+ filename: './build/interactivity/[name].min.js',
+ path: join( __dirname, '..', '..' ),
+ },
+ module: {
+ rules: [
+ {
+ test: /\.(j|t)sx?$/,
+ exclude: /node_modules/,
+ use: [
+ {
+ loader: require.resolve( 'babel-loader' ),
+ options: {
+ cacheDirectory:
+ process.env.BABEL_CACHE_DIRECTORY || true,
+ babelrc: false,
+ configFile: false,
+ presets: [
+ [
+ '@babel/preset-react',
+ {
+ runtime: 'automatic',
+ importSource: 'preact',
+ },
+ ],
+ ],
+ },
+ },
+ ],
+ },
+ ],
+ },
+};
diff --git a/tools/webpack/packages.js b/tools/webpack/packages.js
index 30f73a82fa0da..c8016882e4141 100644
--- a/tools/webpack/packages.js
+++ b/tools/webpack/packages.js
@@ -75,7 +75,8 @@ const gutenbergPackages = Object.keys( dependencies )
( packageName ) =>
! BUNDLED_PACKAGES.includes( packageName ) &&
packageName.startsWith( WORDPRESS_NAMESPACE ) &&
- ! packageName.startsWith( WORDPRESS_NAMESPACE + 'react-native' )
+ ! packageName.startsWith( WORDPRESS_NAMESPACE + 'react-native' ) &&
+ ! packageName.startsWith( WORDPRESS_NAMESPACE + 'interactivity' )
)
.map( ( packageName ) => packageName.replace( WORDPRESS_NAMESPACE, '' ) );
diff --git a/webpack.config.js b/webpack.config.js
index f1c5ce803adc1..8558707f4bc9f 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -3,6 +3,12 @@
*/
const blocksConfig = require( './tools/webpack/blocks' );
const developmentConfigs = require( './tools/webpack/development' );
+const interactivity = require( './tools/webpack/interactivity' );
const packagesConfig = require( './tools/webpack/packages' );
-module.exports = [ ...blocksConfig, packagesConfig, ...developmentConfigs ];
+module.exports = [
+ ...blocksConfig,
+ interactivity,
+ packagesConfig,
+ ...developmentConfigs,
+];
',
+ $tags->get_updated_html()
+ );
+ $this->assertSame( './wordpress.png', $tags->get_attribute( 'src' ) );
+ $this->assertSame( $context_before->get_context(), $context->get_context(), 'data-wp-bind directive changed context' );
+ }
+
+ public function test_directive_ignores_empty_bound_attribute() {
+ $markup = '