From 00ccb8b18ea45295bf5edc74f94b7197c768cb96 Mon Sep 17 00:00:00 2001
From: David Arenas <david.arenas@automattic.com>
Date: Wed, 29 Nov 2023 12:26:28 +0100
Subject: [PATCH] Create block: Update `interactive-template` to the new
 `store()` API (#56613)

* Update templates to the new `store()` API

* Add changelog entry

* Use wp_unique_id

---------

Co-authored-by: Luis Herranz <luisherranz@gmail.com>
---
 .../CHANGELOG.md                              |  4 +++
 .../block-templates/render.php.mustache       | 18 ++++++-------
 .../block-templates/view.js.mustache          | 25 ++++++++-----------
 3 files changed, 24 insertions(+), 23 deletions(-)

diff --git a/packages/create-block-interactive-template/CHANGELOG.md b/packages/create-block-interactive-template/CHANGELOG.md
index 46e2a04014e6c0..2ee6b58aabc9ed 100644
--- a/packages/create-block-interactive-template/CHANGELOG.md
+++ b/packages/create-block-interactive-template/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Enhancement
+
+-   Update `view.js` and `render.php` templates to the new `store()` API. [#56613](https://github.com/WordPress/gutenberg/pull/56613)
+
 ## 1.9.0 (2023-11-16)
 
 ## 1.8.0 (2023-11-02)
diff --git a/packages/create-block-interactive-template/block-templates/render.php.mustache b/packages/create-block-interactive-template/block-templates/render.php.mustache
index c458473d565e00..efecd748d19ef8 100644
--- a/packages/create-block-interactive-template/block-templates/render.php.mustache
+++ b/packages/create-block-interactive-template/block-templates/render.php.mustache
@@ -11,26 +11,26 @@
  * @see https://github.com/WordPress/gutenberg/blob/trunk/docs/reference-guides/block-api/block-metadata.md#render
  */
 
-$unique_id = uniqid( 'p-' );
+$unique_id = wp_unique_id( 'p-' );
 ?>
 
 <div
 	<?php echo get_block_wrapper_attributes(); ?>
-	data-wp-interactive
-	data-wp-context='{ "{{namespace}}": { "isOpen": false } }'
-	data-wp-effect="effects.{{namespace}}.logIsOpen"
+	data-wp-interactive='{ "namespace": "{{namespace}}" }'
+	data-wp-context='{ "isOpen": false }'
+	data-wp-watch="callbacks.logIsOpen"
 >
 	<button
-		data-wp-on--click="actions.{{namespace}}.toggle"
-		data-wp-bind--aria-expanded="context.{{namespace}}.isOpen"
-		aria-controls="p-<?php echo esc_attr( $unique_id ); ?>"
+		data-wp-on--click="actions.toggle"
+		data-wp-bind--aria-expanded="context.isOpen"
+		aria-controls="<?php echo esc_attr( $unique_id ); ?>"
 	>
 		<?php esc_html_e( 'Toggle', '{{textdomain}}' ); ?>
 	</button>
 
 	<p
-		id="p-<?php echo esc_attr( $unique_id ); ?>"
-		data-wp-bind--hidden="!context.{{namespace}}.isOpen"
+		id="<?php echo esc_attr( $unique_id ); ?>"
+		data-wp-bind--hidden="!context.isOpen"
 	>
 		<?php
 			esc_html_e( '{{title}} - hello from an interactive block!', '{{textdomain}}' );
diff --git a/packages/create-block-interactive-template/block-templates/view.js.mustache b/packages/create-block-interactive-template/block-templates/view.js.mustache
index 85d74fec190ba5..b4bae3939461dd 100644
--- a/packages/create-block-interactive-template/block-templates/view.js.mustache
+++ b/packages/create-block-interactive-template/block-templates/view.js.mustache
@@ -1,26 +1,23 @@
 {{#isBasicVariant}}
-
 /**
  * WordPress dependencies
  */
-import { store } from "@wordpress/interactivity";
+import { store, getContext } from "@wordpress/interactivity";
 
-store( {
+store( '{{namespace}}', {
 	actions: {
-		'{{namespace}}': {
-			toggle: ( { context } ) => {
-				context[ '{{namespace}}' ].isOpen = !context[ '{{namespace}}' ].isOpen;
-			},
+		toggle: () => {
+			const context = getContext();
+			context.isOpen = ! context.isOpen;
 		},
 	},
-	effects: {
-		'{{namespace}}': {
-			logIsOpen: ( { context } ) => {
-				// Log the value of `isOpen` each time it changes.
-				console.log( `Is open: ${ context[ '{{namespace}}' ].isOpen }` );
-			},
+	callbacks: {
+		logIsOpen: () => {
+			const { isOpen } = getContext();
+			// Log the value of `isOpen` each time it changes.
+			console.log( `Is open: ${ isOpen }` );
 		},
 	},
 } );
 
-{{/isBasicVariant}}
\ No newline at end of file
+{{/isBasicVariant}}