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

package/CHANGELOG.md

@@ -2,6 +2,16 @@
 
 ## Unreleased
 
+## 1.10.1 (2023-12-07)
+
+-   Update template to use modules instead of scripts. [#56694](https://github.com/WordPress/gutenberg/pull/56694)
+
+## 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,30 @@
  * @see https://github.com/WordPress/gutenberg/blob/trunk/docs/reference-guides/block-api/block-metadata.md#render
  */
 
-$unique_id = uniqid( 'p-' );
+// Generate unique id for aria-controls.
+$unique_id = wp_unique_id( 'p-' );
+
+// Enqueue the view file.
+gutenberg_enqueue_module( '{{namespace}}-view' );
 ?>
 
 <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/index.js

@@ -14,7 +14,6 @@ module.exports = {
 			interactivity: true,
 		},
 		render: 'file:./render.php',
-		viewScript: 'file:./view.js',
 		example: {},
 	},
 	variants: {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/create-block-interactive-template",
-	"version": "1.9.0",
+	"version": "1.10.1",
 	"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": "12b897d7feff1cb00ddbf9016b62c1177d9c0081"
 }

package/plugin-templates/$slug.php.mustache

@@ -43,5 +43,12 @@ if ( ! defined( 'ABSPATH' ) ) {
  */
 function {{namespaceSnakeCase}}_{{slugSnakeCase}}_block_init() {
 	register_block_type( __DIR__ . '/build' );
+
+	gutenberg_register_module(
+		'{{namespace}}-view',
+		plugin_dir_url( __FILE__ ) . 'src/view.js',
+		array( '@wordpress/interactivity' ),
+		'{{version}}'
+	);
 }
 add_action( 'init', '{{namespaceSnakeCase}}_{{slugSnakeCase}}_block_init' );