Interactive template: Use viewModule (#57712)

Use viewModule in the create-block interactivity template. - Add `viewModule` support to `@wordpress/create-block`. - Set the `--experimental-modules` option when building the templated block. - The plugin php template is updated to register with block metadata. --------- Co-authored-by: Luis Herranz <luisherranz@gmail.com>
WordPress · Jan 10, 2024 · 08f236d · 08f236d
1 parent db067e1
commit 08f236d
Show file tree

Hide file tree

Showing 9 changed files with 28 additions and 34 deletions.
diff --git a/packages/create-block-interactive-template/CHANGELOG.md b/packages/create-block-interactive-template/CHANGELOG.md
@@ -2,20 +2,24 @@
 
 ## Unreleased
 
+### Enhancement
+
+-   Update the template to use `viewModule` in block.json ([#57712](https://github.com/WordPress/gutenberg/pull/57712)).
+
 ## 1.11.0 (2023-12-13)
 
--   Add all files to the generated plugin zip. [#56943](https://github.com/WordPress/gutenberg/pull/56943)
--   Prevent crash when Gutenberg plugin is not installed. [#56941](https://github.com/WordPress/gutenberg/pull/56941)
+-   Add all files to the generated plugin zip ([#56943](https://github.com/WordPress/gutenberg/pull/56943)).
+-   Prevent crash when Gutenberg plugin is not installed ([#56941](https://github.com/WordPress/gutenberg/pull/56941)).
 
 ## 1.10.1 (2023-12-07)
 
--   Update template to use modules instead of scripts. [#56694](https://github.com/WordPress/gutenberg/pull/56694)
+-   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)
+-   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)
 
@@ -35,4 +39,4 @@
 
 ### Enhancement
 
--   Moves the `example` property into block.json by leveraging changes to create-block to now support `example`. [#52801](https://github.com/WordPress/gutenberg/pull/52801)
+-   Moves the `example` property into block.json by leveraging changes to create-block to now support `example` ([#52801](https://github.com/WordPress/gutenberg/pull/52801)).
diff --git a/packages/create-block-interactive-template/README.md b/packages/create-block-interactive-template/README.md
@@ -10,6 +10,8 @@ This block template can be used by running the following command:
 npx  @wordpress/create-block --template @wordpress/create-block-interactive-template
 ```
 
+It requires Gutenberg 17.5 or higher.
+
 ## Contributing to this package
 
 This is an individual package that's part of the Gutenberg project. The project is organized as a monorepo. It's made up of multiple self-contained software packages, each with a specific purpose. The packages in this monorepo are published to [npm](https://www.npmjs.com/) and used by [WordPress](https://make.wordpress.org/core/) as well as other software projects.

diff --git a/packages/create-block-interactive-template/block-templates/render.php.mustache b/packages/create-block-interactive-template/block-templates/render.php.mustache
@@ -13,11 +13,6 @@
 
 // Generate unique id for aria-controls.
 $unique_id = wp_unique_id( 'p-' );
-
-// Enqueue the view file.
-if (function_exists('gutenberg_enqueue_module')) {
-	gutenberg_enqueue_module( '{{namespace}}-view' );
-}
 ?>
 
 <div

diff --git a/packages/create-block-interactive-template/index.js b/packages/create-block-interactive-template/index.js
@@ -14,8 +14,14 @@ module.exports = {
 		supports: {
 			interactivity: true,
 		},
+		viewScript: null,
+		viewModule: 'file:./view.js',
 		render: 'file:./render.php',
 		example: {},
+		customScripts: {
+			build: 'wp-scripts build --experimental-modules',
+			start: 'wp-scripts start --experimental-modules',
+		},
 	},
 	variants: {
 		basic: {},

diff --git a/packages/create-block-interactive-template/plugin-templates/$slug.php.mustache b/packages/create-block-interactive-template/plugin-templates/$slug.php.mustache
@@ -42,15 +42,6 @@ if ( ! defined( 'ABSPATH' ) ) {
  * @see https://developer.wordpress.org/reference/functions/register_block_type/
  */
 function {{namespaceSnakeCase}}_{{slugSnakeCase}}_block_init() {
-	register_block_type( __DIR__ . '/build' );
-
-	if (function_exists('gutenberg_register_module')) {
-		gutenberg_register_module(
-			'{{namespace}}-view',
-			plugin_dir_url( __FILE__ ) . 'src/view.js',
-			array( '@wordpress/interactivity' ),
-			'{{version}}'
-		);
-	}
+	register_block_type_from_metadata( __DIR__ . '/build' );
 }
 add_action( 'init', '{{namespaceSnakeCase}}_{{slugSnakeCase}}_block_init' );
diff --git a/packages/create-block/CHANGELOG.md b/packages/create-block/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### New Feature
+
+-   Add support for the `viewModule` property ([#57712](https://github.com/WordPress/gutenberg/pull/57712)).
+
 ## 4.32.0 (2023-12-13)
 
 ## 4.31.0 (2023-11-29)

diff --git a/packages/create-block/lib/init-block.js b/packages/create-block/lib/init-block.js
@@ -30,6 +30,7 @@ async function initBlockJSON( {
 	editorStyle,
 	style,
 	render,
+	viewModule,
 	viewScript,
 	customBlockJSON,
 	example,
@@ -62,6 +63,7 @@ async function initBlockJSON( {
 					editorStyle,
 					style,
 					render,
+					viewModule,
 					viewScript,
 					...customBlockJSON,
 				} ).filter( ( [ , value ] ) => !! value )

diff --git a/packages/create-block/lib/scaffold.js b/packages/create-block/lib/scaffold.js
@@ -44,6 +44,7 @@ module.exports = async (
 		editorStyle,
 		style,
 		render,
+		viewModule,
 		viewScript,
 		variantVars,
 		customPackageJSON,
@@ -84,6 +85,7 @@ module.exports = async (
 		editorStyle,
 		style,
 		render,
+		viewModule,
 		viewScript,
 		variantVars,
 		customPackageJSON,

diff --git a/packages/interactivity/docs/1-getting-started.md b/packages/interactivity/docs/1-getting-started.md
@@ -26,18 +26,6 @@ We can scaffold a WordPress plugin that registers an interactive block (using th
 npx @wordpress/create-block@latest my-first-interactive-block --template @wordpress/create-block-interactive-template
 ```
 
-> **Note**
-> The Interactivity API recently switched from [using modules instead of scripts in the frontend](https://github.com/WordPress/gutenberg/pull/56143). Therefore, in order to test this scaffolded block, you will need to add the following line to the `package.json` file of the generated plugin:
-
-```json
-"files": [
-	"src/view.js"
-]
-```
-> This should be updated in the [scripts package](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-scripts/) soon.
-
-
-
 #### 2. Generate the build
 
 When the plugin folder is generated, we should launch the build process to get the final version of the interactive block that can be used from WordPress.
@@ -61,7 +49,7 @@ At this point you should be able to insert the "My First Interactive Block" bloc
 
 ## Requirements of the Interactivity API
 
-To start working with the Interactivity API you'll need to have a [proper WordPress development environment for blocks](https://developer.wordpress.org/block-editor/getting-started/devenv/)  and some specific code in your block, which should include:
+To start working with the Interactivity API you'll need to have a [proper WordPress development environment for blocks](https://developer.wordpress.org/block-editor/getting-started/devenv/) and some specific code in your block, which should include:
 
 #### A local WordPress installation
 
@@ -71,7 +59,7 @@ To get quickly started, [`wp-now`](https://www.npmjs.com/package/@wp-now/wp-now)
 
 #### Latest vesion of Gutenberg
 
-The Interactivity API is currently only available as an experimental feature from Gutenberg 17.2, so you'll need to have Gutenberg 17.2 or higher version installed and activated in your WordPress installation.
+The Interactivity API is currently only available as an experimental feature from Gutenberg, so you'll need to have Gutenberg 17.5 or higher version installed and activated in your WordPress installation.
 
 #### Node.js