This is a template for @wordpress/create-block to create interactive blocks.

Usage

This block template can be used by running the following command:

npx @wordpress/create-block --template @wordpress/create-block-interactive-template

It requires at least WordPress 6.5 or Gutenberg 17.7.

Variants

This template exposes three variants. Use the --variant flag to select one:

default

The standard interactive block scaffold. Uses the Interactivity API to demonstrate reactive state, context, and DOM event handling.

npx @wordpress/create-block --template @wordpress/create-block-interactive-template --variant default

This is also the variant used when no --variant flag is provided.

typescript

Same as default but the view script (view.ts) is written in TypeScript, with fully typed store state and context.

npx @wordpress/create-block --template @wordpress/create-block-interactive-template --variant typescript

client-side-navigation

Demonstrates client-side navigation powered by @wordpress/interactivity-router. The block renders a quote navigator whose Prev / Next links swap page content without a full reload. A client-side stopwatch running outside the router region proves that no full page reload occurred.

npx @wordpress/create-block --template @wordpress/create-block-interactive-template --variant client-side-navigation

This variant adds @wordpress/interactivity-router as an additional npm dependency.

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 and used by WordPress as well as other software projects.

To find out more about contributing to this package or Gutenberg as a whole, please read the project’s main contributor guide.