Docs: Interactivity API - Invalid HTML output of wp-each and wp-each-child snippets

[atachibana]

Description

wp-each documentation says: https://github.com/WordPress/gutenberg/blob/trunk/docs/reference-guides/interactivity-api/api-reference.md

It would generate the following output:

<ul data-wp-context='{ "list": [ "hello", "hola", "olá" ] }'>
  <li data-wp-text="context.item">hello</li>
  <li data-wp-text="context.item">hola</li>
  <li data-wp-text="context.item">olá</li>
</ul>

But, output includes data-wp-each-child. Should we modify above output as followings?

<ul data-wp-context='{ "list": [ "hello", "hola", "olá" ] }'>
  <li data-wp-each-child data-wp-text="context.item">hello</li>
  <li data-wp-each-child data-wp-text="context.item">hola</li>
  <li data-wp-each-child data-wp-text="context.item">olá</li>
</ul>

Also, the wp-each-child section lists the processed results:

<ul data-wp-context='{ "list": [ "hello", "hola", "olá" ] }'>
  <template data-wp-each--greeting="context.list" >
    <li data-wp-text="context.greeting"></li>
  </template>
  <li data-wp-each-child>hello</li>
  <li data-wp-each-child>hola</li>
  <li data-wp-each-child>olá</li>
</ul>

But, it contains a <template> tag that must disappear after the processing. This entire snippet of wp-each-child should be removed, and refer to the above wp-each output.

Step-by-step reproduction instructions

1. npx @wordpress/create-block@latest my-first-interactive-block --template @wordpress/create-block-interactive-template
2. Replace render.php by following code:

   <h1>wp-each test</h1>
   <div data-wp-interactive="myPlugin">
   <ul data-wp-context='{ "list": [ "hello", "hola", "olá" ] }'>
   <template data-wp-each="context.list" >
   <li data-wp-text="context.item"></li>
   </template>
   </ul>
   </div>

Screenshots, screen recording, code snippet

No response

Environment info

• Gutenberg: 18.9.0
• WordPress: 6.6.1 (Playground)
• Chrome: 127.0.6533.89（Official Build） （x86_64）
• macOS: Sonoma 14.5

Please confirm that you have searched existing issues in the repo.

• [X] Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

• [X] Yes

[luisherranz]

Hmm... it is true that in the case of data-wp-each, saying what it generates is not clear because what it generates on the server is not exactly what it generates on the client after processing. As you mentioned, the template tag is removed from the DOM, and the data-wp-each-child directives are not removed, but are also not produced when new elements are added to the array, as they are only for identifying the elements added on the server.

So, in this case, I am not quite sure what to show without explaining the purpose of data-wp-each-child.