Description

The wp-each directive exposes a property that is added to the iAPI context, representing each list item. By default, this property is named item. When the directives inside the template access that property using derived state, they don't react to item changes under certain circumstances, e.g., when the whole list is removed and replaced by new items, even when they have the same structure.

In the following example, note the getCurrentItem() getter and how it is used inside the template instead of context.item.text:

<ul>
  <template data-wp-interactive="test" data-wp-each="state.someList">
    <li data-wp-text="state.currentItem.text"></li>
  </template>
</ul>

import { store } from '@wordpress/interactivity';

store( 'example', {
    state: {
        someList: [{ text: 'hi' }, { text: 'hola' }, { text: 'olá' }]
        get currentItem() {
            return getContext().item;
        },
    },
} );

Step-by-step reproduction instructions

1. In a JS module, create a store similar to the one in the example above.
2. Add an action that replaces the content of state.someList with new objects.
3. Inject the HTML above in a page or template with interactive blocks.
4. Visit that page or template.
5. Execute the action that replaces state.someList content.
6. Check that the list doesn't update correctly.

Screenshots, screen recording, code snippet

No response

Environment info

No response

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

• Yes

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

• Yes

Please confirm which theme type you used for testing.

• Block
• Classic
• Hybrid (e.g. classic with theme.json)
• Not sure