本指南将帮助您构建一个演示 WordPress 中 Interactivity API 的基础区块。
前置条件
您需要一个 WordPress 开发环境来安装并激活在本指南中构建的插件。有关如何开始操作的详细信息，请参阅 Development Environment setup guide。
创建交互式区块
首先确保您的计算机上已安装 Node.js 和 npm。如果尚未安装，请查阅 Node.js development environment 指南。
接下来，使用 @wordpress/create-block 包和 @wordpress/create-block-interactive-template 模板来搭建完整的“My First Interactive Block”插件。
选择您想要创建插件的文件夹，然后在该文件夹内的终端中执行以下命令：
npx @wordpress/create-block@latest my-first-interactive-block --template @wordpress/create-block-interactive-template
提供的 slug（my-first-interactive-block）定义了所搭建插件的文件夹名称以及内部区块名称。
基本用法
插件搭建完成后，导航至新创建的插件文件夹，并使用以下命令启动开发过程：
cd my-first-interactive-block && npm start
当 create-block 搭建区块时，它会安装 wp-scripts 并将最常用的脚本添加到区块的 package.json 文件中。请参阅 Get started with wp-scripts 文章以了解该包的简介。
npm start 命令将启动开发服务器并监视区块代码中的更改，每当进行修改时都会重新构建区块。
完成更改后，运行 npm run build 命令。这将优化区块代码并使其具备生产就绪状态。
查看区块的实际效果
如果您已经运行了本地 WordPress 安装，您可以在该安装的 plugins 文件夹内执行上述命令。如果没有，您可以使用 @wp-playground/cli 通过从插件文件夹（my-first-interactive-block）执行以下命令来启动安装了该插件的 WordPress 站点。
npx @wp-playground/cli server --auto-mount
您应该能够将“My First Interactive Block”区块插入到任何文章中，并在发布后查看其在前端的表现。
要获取更多关于使用 Interactivity API 的高级示例，您可以查看以下资源：