Interactivity Guide

Use the interactivity template when the block needs lightweight frontend behavior without moving to a larger client application architecture.

Typical fits:

• toggles and disclosure UI
• small counters and stateful reactions
• client-side filtering and view state
• simple async actions tied to WordPress markup

Start with the right template

npx wp-typia my-interactive-block --template interactivity --package-manager npm --yes --no-install

Where the behavior lives

• src/view.ts defines the Interactivity API store
• block.json wires the frontend module
• src/types.ts still drives block.json and typia.manifest.json

Example

import { store } from '@wordpress/interactivity';

const { state, actions } = store('my-plugin/my-block', {
  state: {
    isOpen: false,
  },
  actions: {
    toggle() {
      state.isOpen = !state.isOpen;
    },
  },
});

When to reach for the reference app instead

Use examples/my-typia-block as the richer reference when you need:

• schema snapshots for legacy attribute compatibility
• deprecated Gutenberg entries generated from versioned snapshots
• site scan and migration dashboard tooling

If you only need reactive frontend behavior, the interactivity template stays simpler and is the right built-in starting point.

From the repository root, the reference app is exercised through the examples:* namespace:

bun run examples:build
bun run examples:test:e2e