Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Interactivity API: Refactor to use string instead of an object on wp-data-interactive #59034

Merged
merged 1 commit into from
Feb 15, 2024
Merged

Interactivity API: Refactor to use string instead of an object on wp-data-interactive #59034

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/create-block-interactive-template/block-templates/render.php.mustache
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ $unique_id = wp_unique_id( 'p-' );

<div
<?php echo get_block_wrapper_attributes(); ?>
data-wp-interactive='{ "namespace": "{{namespace}}" }'
data-wp-interactive="{{namespace}}"
data-wp-context='{ "isOpen": false }'
data-wp-watch="callbacks.logIsOpen"
>
Expand Down
2 changes: 1 addition & 1 deletion packages/e2e-tests/plugins/interactive-blocks/directive-bind/render.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
wp_enqueue_script_module( 'directive-bind-view' );
?>

<div data-wp-interactive='{ "namespace": "directive-bind" }'>
<div data-wp-interactive="directive-bind">
<a
data-wp-bind--href="state.url"
data-testid="add missing href at hydration"
Expand Down
2 changes: 1 addition & 1 deletion packages/e2e-tests/plugins/interactive-blocks/directive-context/view.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ store( 'directive-context', {

const html = `
<div
data-wp-interactive='{ "namespace": "directive-context-navigate" }'
data-wp-interactive="directive-context-navigate"
data-wp-router-region="navigation"
data-wp-context='{ "text": "second page" }'
>
Expand Down
4 changes: 2 additions & 2 deletions packages/e2e-tests/plugins/interactive-blocks/directive-each/render.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
wp_enqueue_script_module( 'directive-each-view' );
?>

<div data-wp-interactive='{ "namespace": "directive-each" }'>
<div data-wp-interactive="directive-each">
<div data-testid="letters">
<template data-wp-each="state.letters">
<p data-wp-text="context.item" data-testid="item"></p>
Expand Down Expand Up @@ -220,7 +220,7 @@
<hr>

<div
data-wp-interactive='{ "namespace": "directive-each" }'
data-wp-interactive="directive-each"
data-wp-router-region="navigation-updated list"
data-wp-context='{ "list": [ "beta", "gamma", "delta" ] }'
data-testid="navigation-updated list"
Expand Down
2 changes: 1 addition & 1 deletion packages/e2e-tests/plugins/interactive-blocks/directive-each/view.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -157,7 +157,7 @@ store( 'directive-each', {

const html = `
<div
data-wp-interactive='{ "namespace": "directive-each" }'
data-wp-interactive="directive-each"
data-wp-router-region="navigation-updated list"
data-wp-context='{ "list": [ "alpha", "beta", "gamma", "delta" ] }'
data-testid="navigation-updated list"
Expand Down
2 changes: 1 addition & 1 deletion packages/e2e-tests/plugins/interactive-blocks/directive-init/render.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
wp_enqueue_script_module( 'directive-init-view' );
?>

<div data-wp-interactive='{ "namespace": "directive-init" }'>
<div data-wp-interactive="directive-init">
<div
data-testid="single init"
data-wp-context='{"isReady":[false],"calls":[0]}'
Expand Down
2 changes: 1 addition & 1 deletion packages/e2e-tests/plugins/interactive-blocks/directive-key/render.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
?>

<div
data-wp-interactive='{ "namespace": "directive-key" }'
data-wp-interactive="directive-key"
data-wp-router-region="some-id"
>
<ul>
Expand Down
2 changes: 1 addition & 1 deletion packages/e2e-tests/plugins/interactive-blocks/directive-key/view.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { store } from '@wordpress/interactivity';

const html = `
<div
data-wp-interactive='{ "namespace": "directive-key" }'
data-wp-interactive="directive-key"
data-wp-router-region="some-id"
>
<ul>
Expand Down
4 changes: 2 additions & 2 deletions packages/e2e-tests/plugins/interactive-blocks/directive-on-document/render.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,8 @@
wp_enqueue_script_module( 'directive-on-document-view' );
?>

<div data-wp-interactive='{ "namespace": "directive-on-document" }'>
<button
<div data-wp-interactive="directive-on-document">
<button
data-testid="visibility"
data-wp-on--click="actions.visibilityHandler"
>
Expand Down
2 changes: 1 addition & 1 deletion packages/e2e-tests/plugins/interactive-blocks/directive-on-window/render.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
wp_enqueue_script_module( 'directive-on-window-view' );
?>

<div data-wp-interactive='{ "namespace": "directive-on-window" }'>
<div data-wp-interactive="directive-on-window">
<button
data-wp-on--click="actions.visibilityHandler"
data-testid="visibility">
Expand Down
2 changes: 1 addition & 1 deletion packages/e2e-tests/plugins/interactive-blocks/directive-on/render.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
wp_enqueue_script_module( 'directive-on-view' );
?>

<div data-wp-interactive='{ "namespace": "directive-on" }'>
<div data-wp-interactive="directive-on">
<div>
<p data-wp-text="state.counter" data-testid="counter">0</p>
<button
Expand Down
4 changes: 2 additions & 2 deletions packages/e2e-tests/plugins/interactive-blocks/directive-priorities/render.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
wp_enqueue_script_module( 'directive-priorities-view' );
?>

<div data-wp-interactive='{ "namespace": "directive-priorities" }'>
<div data-wp-interactive="directive-priorities">
<pre data-testid="execution order"></pre>

<!-- Element with test directives -->
Expand All @@ -25,5 +25,5 @@
<!-- WARNING: the `div` with `data-wp-non-existent-directive` should remain
inline (i.e., without new line or blank characters in between) to
ensure it is the only child node. Otherwise, tests could fail. -->
<div data-wp-interactive='{ "namespace": "directive-priorities" }'><div data-wp-non-existent-directive></div></div>
<div data-wp-interactive="directive-priorities"><div data-wp-non-existent-directive></div></div>
</div>
4 changes: 2 additions & 2 deletions packages/e2e-tests/plugins/interactive-blocks/directive-run/render.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
?>

<div
data-wp-interactive='{ "namespace": "directive-run" }'
data-wp-interactive="directive-run"
data-wp-router-region='test-directive-run'
>
<div data-testid="hydrated" data-wp-text="state.isHydrated"></div>
Expand All @@ -24,7 +24,7 @@
></div>
</div>

<div data-wp-interactive='{ "namespace": "directive-run" }' >
<div data-wp-interactive="directive-run" >
<button data-testid="toggle" data-wp-on--click="actions.toggle">
Toggle
</button>
Expand Down
2 changes: 1 addition & 1 deletion packages/e2e-tests/plugins/interactive-blocks/directive-run/view.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ directive(

const html = `
<div
data-wp-interactive='{ "namespace": "directive-run" }'
data-wp-interactive="directive-run"
data-wp-router-region='test-directive-run'
>
<div data-testid="hydrated" data-wp-text="state.isHydrated"></div>
Expand Down
2 changes: 1 addition & 1 deletion packages/e2e-tests/plugins/interactive-blocks/directive-style/render.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
wp_enqueue_script_module( 'directive-style-view' );
?>

<div data-wp-interactive='{ "namespace": "directive-style" }'>
<div data-wp-interactive="directive-style">
<button
data-wp-on--click="actions.toggleColor"
data-testid="toggle color"
Expand Down
2 changes: 1 addition & 1 deletion packages/e2e-tests/plugins/interactive-blocks/directive-text/render.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
wp_enqueue_script_module( 'directive-text-view' );
?>

<div data-wp-interactive='{ "namespace": "directive-context" }'>
<div data-wp-interactive="directive-context">
<div>
<span
data-wp-text="state.text"
Expand Down
2 changes: 1 addition & 1 deletion packages/e2e-tests/plugins/interactive-blocks/directive-watch/render.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
wp_enqueue_script_module( 'directive-watch-view' );
?>

<div data-wp-interactive='{ "namespace": "directive-watch" }'>
<div data-wp-interactive="directive-watch">
<div data-wp-show-mock="state.isOpen">
<input
data-testid="input"
Expand Down
2 changes: 1 addition & 1 deletion packages/e2e-tests/plugins/interactive-blocks/negation-operator/render.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
wp_enqueue_script_module( 'negation-operator-view' );
?>

<div data-wp-interactive='{ "namespace": "negation-operator" }'>
<div data-wp-interactive="negation-operator">
<button
data-wp-on--click="actions.toggle"
data-testid="toggle active value"
Expand Down
2 changes: 1 addition & 1 deletion packages/e2e-tests/plugins/interactive-blocks/router-navigate/render.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
?>

<div
data-wp-interactive='{ "namespace": "router" }'
data-wp-interactive="router"
data-wp-router-region="region-1"
>
<h2 data-testid="title"><?php echo $attributes['title']; ?></h2>
Expand Down
2 changes: 1 addition & 1 deletion packages/e2e-tests/plugins/interactive-blocks/store-tag/render.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
$test_store_tag_double = $test_store_tag_counter * 2;
?>

<div data-wp-interactive='{ "namespace": "store-tag" }'>
<div data-wp-interactive="store-tag">
<div>
Counter:
<span
Expand Down
16 changes: 8 additions & 8 deletions packages/e2e-tests/plugins/interactive-blocks/tovdom-islands/render.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
</span>
</div>

<div data-wp-interactive='{ "namespace": "tovdom-islands" }'>
<div data-wp-interactive="tovdom-islands">
<div data-wp-show-mock="state.falseValue">
<span data-testid="inside an island with json object">
This should not be shown because it is inside an island.
Expand All @@ -31,7 +31,7 @@
</div>
</div>

<div data-wp-interactive='{ "namespace": "tovdom-islands" }'>
<div data-wp-interactive="tovdom-islands">
<div data-wp-ignore>
<div data-wp-show-mock="state.falseValue">
<span
Expand All @@ -44,8 +44,8 @@
</div>
</div>

<div data-wp-interactive='{ "namespace": "tovdom-islands" }'>
<div data-wp-interactive='{ "namespace": "tovdom-islands" }'>
<div data-wp-interactive="tovdom-islands">
<div data-wp-interactive="tovdom-islands">
<div
data-wp-show-mock="state.falseValue"
data-testid="island inside another island"
Expand All @@ -58,10 +58,10 @@
</div>
</div>

<div data-wp-interactive='{ "namespace": "tovdom-islands" }'>
<div data-wp-interactive="tovdom-islands">
<div>
<div
data-wp-interactive='{ "namespace": "tovdom-islands" }'
data-wp-interactive="tovdom-islands"
data-wp-ignore
>
<div data-wp-show-mock="state.falseValue">
Expand All @@ -77,8 +77,8 @@
</div>
</div>

<div data-wp-interactive='{ "namespace": "tovdom-islands" }'>
<div data-wp-interactive='{ "namespace": "something-new" }'></div>
<div data-wp-interactive="tovdom-islands">
<div data-wp-interactive="something-new"></div>
<div data-wp-show-mock="state.falseValue">
<span data-testid="directive after different namespace">
The directive above should keep the `tovdom-island` namespace,
Expand Down
2 changes: 1 addition & 1 deletion packages/e2e-tests/plugins/interactive-blocks/tovdom/render.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
wp_enqueue_script_module( 'tovdom-view' );
?>

<div data-wp-interactive='{ "namespace": "tovdom" }'>
<div data-wp-interactive="tovdom">
<div data-testid="it should delete comments">
<!-- ##1## -->
<div data-testid="it should keep this node between comments">
Expand Down
2 changes: 1 addition & 1 deletion packages/e2e-tests/plugins/interactive-blocks/with-scope/render.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
wp_enqueue_script_module( 'with-scope-view' );
?>

<div data-wp-interactive='{ "namespace": "with-scope" }' data-wp-context='{"asyncCounter": 0, "syncCounter": 0}' data-wp-init--a='callbacks.asyncInit' data-wp-init--b='callbacks.syncInit'>
<div data-wp-interactive="with-scope" data-wp-context='{"asyncCounter": 0, "syncCounter": 0}' data-wp-init--a='callbacks.asyncInit' data-wp-init--b='callbacks.syncInit'>
<p data-wp-text="context.asyncCounter" data-testid="asyncCounter">0</p>
<p data-wp-text="context.syncCounter" data-testid="syncCounter">0</p>
</div>
2 changes: 1 addition & 1 deletion packages/interactivity/docs/1-getting-started.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,7 @@ To "activate" the Interactivity API in a DOM element (and its children) we add t


```html
<div data-wp-interactive='{ "namespace": "myPlugin" }'>
<div data-wp-interactive="myPlugin">
<!-- Interactivity API zone -->
</div>
```
4 changes: 2 additions & 2 deletions packages/interactivity/src/hooks.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -198,7 +198,7 @@ const directivePriorities: Record< string, number > = {};
* the `data-wp-alert` directive will have the `onclick` event handler, e.g.,
*
* ```html
* <div data-wp-interactive='{ "namespace": "messages" }'>
* <div data-wp-interactive="messages">
* <button data-wp-alert="state.alert">Click me!</button>
* </div>
* ```
Expand All @@ -208,7 +208,7 @@ const directivePriorities: Record< string, number > = {};
* attribute, followed by the suffix, like in the following HTML snippet:
*
* ```html
* <div data-wp-interactive='{ "namespace": "myblock" }'>
* <div data-wp-interactive="myblock">
* <button
* data-wp-color--text="state.text"
* data-wp-color--background="state.background"
Expand Down
2 changes: 1 addition & 1 deletion packages/interactivity/src/store.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -235,7 +235,7 @@ const universalUnlock =
* the store by using directives in the HTML, e.g.:
*
* ```html
* <div data-wp-interactive='{ "namespace": "counter" }'>
* <div data-wp-interactive="counter">
* <button
* data-wp-text="state.double"
* data-wp-on--click="actions.increment"
Expand Down
Loading