From 32c87f2b9c02c6d883bf1e7b2f77303189696daa Mon Sep 17 00:00:00 2001 From: Jon Surrell Date: Wed, 10 Jan 2024 10:41:07 +0100 Subject: [PATCH 1/8] Add changelog --- packages/create-block-interactive-template/CHANGELOG.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/create-block-interactive-template/CHANGELOG.md b/packages/create-block-interactive-template/CHANGELOG.md index 47a8aec6c92a31..682155764e7349 100644 --- a/packages/create-block-interactive-template/CHANGELOG.md +++ b/packages/create-block-interactive-template/CHANGELOG.md @@ -2,6 +2,10 @@ ## Unreleased +### Enhancement + +- Update the template to use `viewModule` in block.json. + ## 1.11.0 (2023-12-13) - Add all files to the generated plugin zip. [#56943](https://github.com/WordPress/gutenberg/pull/56943) From cb1417fc46c058a235652f416446d643eddba90d Mon Sep 17 00:00:00 2001 From: Jon Surrell Date: Wed, 10 Jan 2024 11:40:41 +0100 Subject: [PATCH 2/8] Add --experimental-modules to build/start scripts --- packages/create-block-interactive-template/index.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/create-block-interactive-template/index.js b/packages/create-block-interactive-template/index.js index 6e5ffcb9cc9ae6..6f006123b3d102 100644 --- a/packages/create-block-interactive-template/index.js +++ b/packages/create-block-interactive-template/index.js @@ -16,6 +16,10 @@ module.exports = { }, render: 'file:./render.php', example: {}, + customScripts: { + build: 'wp-scripts build --experimental-modules', + start: 'wp-scripts start --experimental-modules', + }, }, variants: { basic: {}, From 8673e1018f846e57dd5b3697cfadaf500e9dca70 Mon Sep 17 00:00:00 2001 From: Jon Surrell Date: Wed, 10 Jan 2024 11:41:56 +0100 Subject: [PATCH 3/8] Add GUTENBERG_VERSION check to register via metadata --- .../plugin-templates/$slug.php.mustache | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/create-block-interactive-template/plugin-templates/$slug.php.mustache b/packages/create-block-interactive-template/plugin-templates/$slug.php.mustache index 81e6b035b1d737..fbd49404dd61cf 100644 --- a/packages/create-block-interactive-template/plugin-templates/$slug.php.mustache +++ b/packages/create-block-interactive-template/plugin-templates/$slug.php.mustache @@ -42,6 +42,11 @@ if ( ! defined( 'ABSPATH' ) ) { * @see https://developer.wordpress.org/reference/functions/register_block_type/ */ function {{namespaceSnakeCase}}_{{slugSnakeCase}}_block_init() { + if ( defined( 'GUTENBERG_VERSION' ) && version_compare( GUTENBERG_VERSION, '17.5', '>=' ) { + register_block_type_from_metadata( __DIR__ . '/build' ); + return; + } + register_block_type( __DIR__ . '/build' ); if (function_exists('gutenberg_register_module')) { From 3e50da3197bd88ee3f92e205e6621fac1c4bfeb8 Mon Sep 17 00:00:00 2001 From: Jon Surrell Date: Wed, 10 Jan 2024 12:02:35 +0100 Subject: [PATCH 4/8] Add support for viewModule to create-block --- packages/create-block-interactive-template/index.js | 2 ++ packages/create-block/lib/init-block.js | 2 ++ packages/create-block/lib/scaffold.js | 2 ++ 3 files changed, 6 insertions(+) diff --git a/packages/create-block-interactive-template/index.js b/packages/create-block-interactive-template/index.js index 6f006123b3d102..5fe9baa5c6ea45 100644 --- a/packages/create-block-interactive-template/index.js +++ b/packages/create-block-interactive-template/index.js @@ -14,6 +14,8 @@ module.exports = { supports: { interactivity: true, }, + viewScript: null, + viewModule: 'file:./view.js', render: 'file:./render.php', example: {}, customScripts: { diff --git a/packages/create-block/lib/init-block.js b/packages/create-block/lib/init-block.js index 9c0bda20a40097..5a60e90197ee82 100644 --- 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 index 49d3cbf794777a..bd9ba0396b75e3 100644 --- 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, From 5d04030855589d16c766e2ff76d30f372497c079 Mon Sep 17 00:00:00 2001 From: Jon Surrell Date: Wed, 10 Jan 2024 12:02:50 +0100 Subject: [PATCH 5/8] Add and update changelogs --- .../create-block-interactive-template/CHANGELOG.md | 12 ++++++------ packages/create-block/CHANGELOG.md | 4 ++++ 2 files changed, 10 insertions(+), 6 deletions(-) diff --git a/packages/create-block-interactive-template/CHANGELOG.md b/packages/create-block-interactive-template/CHANGELOG.md index 682155764e7349..159c65e9ada19c 100644 --- a/packages/create-block-interactive-template/CHANGELOG.md +++ b/packages/create-block-interactive-template/CHANGELOG.md @@ -4,22 +4,22 @@ ### Enhancement -- Update the template to use `viewModule` in block.json. +- 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) @@ -39,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/CHANGELOG.md b/packages/create-block/CHANGELOG.md index 7f6a5a0c428161..a3a1b01bc09fbe 100644 --- 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) From a6b067034979cbf86baa814b24b8328b0c9e5dc8 Mon Sep 17 00:00:00 2001 From: Jon Surrell Date: Wed, 10 Jan 2024 12:41:30 +0100 Subject: [PATCH 6/8] Fix missing paren --- .../plugin-templates/$slug.php.mustache | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/create-block-interactive-template/plugin-templates/$slug.php.mustache b/packages/create-block-interactive-template/plugin-templates/$slug.php.mustache index fbd49404dd61cf..de0cdc7ad75ef0 100644 --- a/packages/create-block-interactive-template/plugin-templates/$slug.php.mustache +++ b/packages/create-block-interactive-template/plugin-templates/$slug.php.mustache @@ -42,7 +42,7 @@ if ( ! defined( 'ABSPATH' ) ) { * @see https://developer.wordpress.org/reference/functions/register_block_type/ */ function {{namespaceSnakeCase}}_{{slugSnakeCase}}_block_init() { - if ( defined( 'GUTENBERG_VERSION' ) && version_compare( GUTENBERG_VERSION, '17.5', '>=' ) { + if ( defined( 'GUTENBERG_VERSION' ) && version_compare( GUTENBERG_VERSION, '17.5', '>=' ) ) { register_block_type_from_metadata( __DIR__ . '/build' ); return; } From af50d257e3a58c8df2301eac48037e7d6d5d361a Mon Sep 17 00:00:00 2001 From: Luis Herranz Date: Wed, 10 Jan 2024 13:12:31 +0100 Subject: [PATCH 7/8] Don't register and enqueue the file manually --- .../block-templates/render.php.mustache | 5 ----- .../plugin-templates/$slug.php.mustache | 10 ---------- 2 files changed, 15 deletions(-) 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 0f6883a9362407..960da619f790a4 100644 --- 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' ); -} ?>
Date: Wed, 10 Jan 2024 14:42:50 +0100 Subject: [PATCH 8/8] Require Gutenberg 17.5 or higher --- .../create-block-interactive-template/README.md | 2 ++ .../plugin-templates/$slug.php.mustache | 6 +----- packages/interactivity/docs/1-getting-started.md | 16 ++-------------- 3 files changed, 5 insertions(+), 19 deletions(-) diff --git a/packages/create-block-interactive-template/README.md b/packages/create-block-interactive-template/README.md index cc0530c0630549..adf3cab6594cc9 100644 --- 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/plugin-templates/$slug.php.mustache b/packages/create-block-interactive-template/plugin-templates/$slug.php.mustache index 5934bc0f34aa1d..83890732cc41bc 100644 --- a/packages/create-block-interactive-template/plugin-templates/$slug.php.mustache +++ b/packages/create-block-interactive-template/plugin-templates/$slug.php.mustache @@ -42,10 +42,6 @@ if ( ! defined( 'ABSPATH' ) ) { * @see https://developer.wordpress.org/reference/functions/register_block_type/ */ function {{namespaceSnakeCase}}_{{slugSnakeCase}}_block_init() { - if ( defined( 'GUTENBERG_VERSION' ) && version_compare( GUTENBERG_VERSION, '17.5', '>=' ) ) { - register_block_type_from_metadata( __DIR__ . '/build' ); - return; - } - register_block_type( __DIR__ . '/build' ); + register_block_type_from_metadata( __DIR__ . '/build' ); } add_action( 'init', '{{namespaceSnakeCase}}_{{slugSnakeCase}}_block_init' ); diff --git a/packages/interactivity/docs/1-getting-started.md b/packages/interactivity/docs/1-getting-started.md index 85af2021807351..660671a8b10cd8 100644 --- 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