Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Interactive template: Use viewModule #57712

Merged
merged 8 commits into from
Jan 10, 2024
Merged

Interactive template: Use viewModule #57712

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
32c87f2
Add changelog
sirreal Jan 10, 2024
cb1417f
Add --experimental-modules to build/start scripts
sirreal Jan 10, 2024
8673e10
Add GUTENBERG_VERSION check to register via metadata
sirreal Jan 10, 2024
3e50da3
Add support for viewModule to create-block
sirreal Jan 10, 2024
5d04030
Add and update changelogs
sirreal Jan 10, 2024
a6b0670
Fix missing paren
sirreal Jan 10, 2024
af50d25
Don't register and enqueue the file manually
luisherranz Jan 10, 2024
26e7b0f
Require Gutenberg 17.5 or higher
luisherranz Jan 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 9 additions & 5 deletions packages/create-block-interactive-template/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)).
Comment on lines -7 to +12
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Most other CHANGELOGs in the repo follow this form so I updated these.


## 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)

Expand All @@ -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)).
2 changes: 2 additions & 0 deletions packages/create-block-interactive-template/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
5 changes: 0 additions & 5 deletions packages/create-block-interactive-template/block-templates/render.php.mustache
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
6 changes: 6 additions & 0 deletions packages/create-block-interactive-template/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: {},
Expand Down
11 changes: 1 addition & 10 deletions packages/create-block-interactive-template/plugin-templates/$slug.php.mustache
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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' );
4 changes: 4 additions & 0 deletions packages/create-block/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
2 changes: 2 additions & 0 deletions packages/create-block/lib/init-block.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ async function initBlockJSON( {
editorStyle,
style,
render,
viewModule,
viewScript,
customBlockJSON,
example,
Expand Down Expand Up @@ -62,6 +63,7 @@ async function initBlockJSON( {
editorStyle,
style,
render,
viewModule,
viewScript,
...customBlockJSON,
} ).filter( ( [ , value ] ) => !! value )
Expand Down
2 changes: 2 additions & 0 deletions packages/create-block/lib/scaffold.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,7 @@ module.exports = async (
editorStyle,
style,
render,
viewModule,
viewScript,
variantVars,
customPackageJSON,
Expand Down Expand Up @@ -84,6 +85,7 @@ module.exports = async (
editorStyle,
style,
render,
viewModule,
viewScript,
variantVars,
customPackageJSON,
Expand Down
16 changes: 2 additions & 14 deletions packages/interactivity/docs/1-getting-started.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand All @@ -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

Expand All @@ -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

Expand Down
Loading