Skip to content

Commit

Permalink
Refactor to use string instead of an object (#59034)
Browse files Browse the repository at this point in the history
Co-authored-by: c4rl0sbr4v0 <cbravobernal@git.wordpress.org>
Co-authored-by: SantosGuillamot <santosguillamot@git.wordpress.org>
  • Loading branch information
3 people authored Feb 15, 2024
1 parent decaae6 commit acd79ef
Show file tree
Hide file tree
Showing 25 changed files with 37 additions and 37 deletions.
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
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
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
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
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
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
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
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
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
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
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
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>
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
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
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
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
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
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
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
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
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
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
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
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
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

1 comment on commit acd79ef

@github-actions
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Flaky tests detected in acd79ef.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/7915505964
📝 Reported issues:

Please sign in to comment.