Skip to content

Commit

Permalink
Interactivity API: Add wp-each directive (#57859)
Browse files Browse the repository at this point in the history 
* Copy the wp-each implementation

* Scaffold files for wp-each e2e tests

* Process template nodes inside `toVdom()`

* Add tests for several list manipulations

* Add a new test to implement

* Add SSRed elements in PHP

* Add SSRed elements to letters test

* Add more test cases

* Test support for siblings in template

* Implement tests for wp-each on navigation

* Update changelog

* Add `wp-each` documentation

* Extract localName

* Add missing comment for `data-wp-each-child` elements in tests

Co-authored-by: Luis Herranz <[email protected]>

* Clarify that `data-wp-each-child` is added automatically

Co-authored-by: Luis Herranz <[email protected]>

* Add test for nested lists

* Do nothing if element is not a template

* Add SSRed elements to nested testing

* Add tests for non-template elements

* Add `wp-each` to the table of contents

* Fix name of nested list tests

* Add tests for derived state as keys

* Fix broken tests

* Add missing inner templates in SSR

---------

Co-authored-by: Luis Herranz <[email protected]>
  • Loading branch information
@DAreRodz @luisherranz
DAreRodz and luisherranz authored Jan 23, 2024
1 parent c6ac9c0 commit bf65a9f
Show file tree
Hide file tree
Showing 9 changed files with 1,053 additions and 12 deletions.
15 changes: 15 additions & 0 deletions packages/e2e-tests/plugins/interactive-blocks/directive-each/block.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
{
"$schema": "https://schemas.wp.org/trunk/block.json",
"apiVersion": 2,
"name": "test/directive-each",
"title": "E2E Interactivity tests - directive each",
"category": "text",
"icon": "heart",
"description": "",
"supports": {
"interactivity": true
},
"textdomain": "e2e-interactivity",
"viewScript": "directive-each-view",
"render": "file:./render.php"
}
226 changes: 226 additions & 0 deletions packages/e2e-tests/plugins/interactive-blocks/directive-each/render.php
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,226 @@
<?php
/**
* HTML for testing the directive `data-wp-each`.
*
* @package gutenberg-test-interactive-blocks
*/

gutenberg_enqueue_module( 'directive-each-view' );
?>

<div data-wp-interactive='{ "namespace": "directive-each" }'>
<div data-testid="letters">
<template data-wp-each="state.letters">
<p data-wp-text="context.item" data-testid="item"></p>
</template>
<!-- SSRed elements; they should be removed on hydration -->
<p data-testid="item" data-wp-each-child>A</p>
<p data-testid="item" data-wp-each-child>B</p>
<p data-testid="item" data-wp-each-child>C</p>
</div>

<hr>

<div data-testid="fruits">
<button
data-testid="rotate" data-wp-on--click="actions.rotateFruits"
>Rotate</button>
<button
data-testid="add" data-wp-on--click="actions.addFruit"
>Add</button>
<button
data-testid="replace" data-wp-on--click="actions.replaceFruit"
>Replace</button>
<template data-wp-each--fruit="state.fruits">
<p
data-testid="item"
data-wp-text="context.fruit"
data-wp-on--click="actions.removeFruit"
></p>
</template>
<!-- SSRed elements; they should be removed on hydration -->
<p data-testid="item" data-wp-each-child>avocado</p>
<p data-testid="item" data-wp-each-child>banana</p>
<p data-testid="item" data-wp-each-child>cherimoya</p>
</div>

<hr>

<div data-testid="books">
<button
data-testid="rotate" data-wp-on--click="actions.rotateBooks"
>Rotate</button>
<button
data-testid="add" data-wp-on--click="actions.addBook"
>Add</button>
<button
data-testid="replace" data-wp-on--click="actions.replaceBook"
>Replace</button>
<button
data-testid="modify" data-wp-on--click="actions.modifyBook"
>Modify</button>
<template
data-wp-each--book="state.books"
data-wp-each-key="context.book.isbn"
>
<p
data-testid="item"
data-wp-text="context.book.title"
data-wp-on--click="actions.removeBook"
></p>
</template>
<!-- SSRed elements; they should be removed on hydration -->
<p data-testid="item" data-wp-each-child>A Game of Thrones</p>
<p data-testid="item" data-wp-each-child>A Clash of Kings</p>
<p data-testid="item" data-wp-each-child>A Storm of Swords</p>
</div>

<hr>

<div data-testid="numbers">
<button
data-testid="shift" data-wp-on--click="actions.shiftNumber"
>Shift</button>
<button
data-testid="unshift" data-wp-on--click="actions.unshiftNumber"
>Unshift</button>
<template data-wp-each="state.numbers">
<p data-wp-text="context.item" data-testid="item"></p>
</template>
<p data-testid="item" data-wp-each-child>1</p>
<p data-testid="item" data-wp-each-child>2</p>
<p data-testid="item" data-wp-each-child>3</p>
<p data-testid="item">4</p>
</div>

<hr>

<div data-testid="empty">
<button
data-testid="add" data-wp-on--click="actions.addItem"
>Add</button>
<template data-wp-each="state.emptyList">
<p data-wp-text="context.item" data-testid="item"></p>
</template>
<p data-testid="item">item X</p>
</div>

<div data-testid="siblings">
<button
data-testid="unshift"
data-wp-on--click="actions.unshiftNumberAndName"
>Unshift</button>
<template
data-wp-each="state.numbersAndNames"
data-wp-each-key="context.item.value"
>
<p data-wp-text="context.item.name" data-testid="item"></p>
<p data-wp-text="context.item.value" data-testid="item"></p>
</template>
<p data-testid="item" data-wp-each-child>two</p>
<p data-testid="item" data-wp-each-child>2</p>
<p data-testid="item" data-wp-each-child>three</p>
<p data-testid="item" data-wp-each-child>3</p>
<p data-testid="item">four</p>
<p data-testid="item">4</p>
</div>

<div data-testid="nested">
<button
data-testid="add animal"
data-wp-on--click="actions.addAnimal"
>Add animal</button>
<button
data-testid="add breeds"
data-wp-on--click="actions.addBreeds"
>Add breeds</button>

<ul>
<template
data-wp-each--animal="state.animalBreeds"
data-wp-each-key="context.animal.name"
>
<li data-testid="animal">
<span
data-testid="name"
data-wp-text="context.animal.name"
></span>
<ul>
<template data-wp-each--breed="context.animal.breeds">
<li data-wp-text="context.breed"></li>
</template>
</ul>
</li>
</template>
<!-- SSRed elements; they should be removed on hydration -->
<li data-testid="animal" data-wp-each-child>
<span data-testid="name">Dog</span>
<ul>
<template data-wp-each--breed="context.animal.breeds">
<li data-wp-text="context.breed"></li>
</template>
<li data-wp-each-child>Chihuahua</li>
<li data-wp-each-child>Rottweiler</li>
</ul>
</li>
<li data-testid="animal" data-wp-each-child>
<span data-testid="name">Cat</span>
<ul>
<template data-wp-each--breed="context.animal.breeds">
<li data-wp-text="context.breed"></li>
</template>
<li data-wp-each-child>Sphynx</li>
<li data-wp-each-child>Siamese</li>
</ul>
</li>
</ul>
</div>

<div data-testid="invalid tag">
<div data-wp-each="state.letters">
<p data-wp-text="context.item" data-testid="item"></p>
</div>
</div>


<div data-testid="derived state">
<button
data-testid="rotate" data-wp-on--click="actions.rotateFruits"
>Rotate</button>
<template
data-wp-context='{ "idPrefix": "fruit-" }'
data-wp-each--fruit="state.fruits"
data-wp-each-key="state.fruitId"
>
<p
data-testid="item"
data-wp-text="context.fruit"
data-wp-bind--data-fruit-id="state.fruitId"
></p>
</template>
<!-- SSRed elements; they should be removed on hydration -->
<p data-testid="item" data-wp-each-child>avocado</p>
<p data-testid="item" data-wp-each-child>banana</p>
<p data-testid="item" data-wp-each-child>cherimoya</p>
</div>
</div>

<hr>

<div
data-wp-interactive='{ "namespace": "directive-each" }'
data-wp-navigation-id="navigation-updated list"
data-wp-context='{ "list": [ "beta", "gamma", "delta" ] }'
data-testid="navigation-updated list"
>
<button
data-testid="navigate"
data-wp-on--click="actions.navigate"
>Navigate</button>
<template data-wp-each="context.list">
<p data-wp-text="context.item" data-testid="item"></p>
</template>
<p data-testid="item" data-wp-each-child>beta</p>
<p data-testid="item" data-wp-each-child>gamma</p>
<p data-testid="item" data-wp-each-child>delta</p>
</div>
Loading

0 comments on commit bf65a9f

Please sign in to comment.