@wordpress/create-block-interactive-template 1.9.0 → 1.10.0

package/CHANGELOG.md

@@ -2,6 +2,12 @@
 
 ## Unreleased
 
+## 1.10.0 (2023-11-29)
+
+### 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)

package/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}}' );

package/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}}
+{{/isBasicVariant}}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/create-block-interactive-template",
-	"version": "1.9.0",
+	"version": "1.10.0",
 	"description": "Template for @wordpress/create-block to create interactive blocks with the Interactivity API.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -22,5 +22,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "839018ff6029ba749780e288e08ff9cd898e50e8"
+	"gitHead": "d98dff8ea96f29cfea045bf964269f46f040d539"
 }