title: "快速入门指南" post_status: publish comment_status: open taxonomy: category: - gutenberg-docs post_tag: - Interactivity Api - Reference Guides - Repos

快速入门指南

本指南将帮助您构建一个基础区块，展示 WordPress 中的交互性 API。

搭建交互式区块

首先确保您的计算机已安装 Node.js 和 npm。如果尚未安装，请查阅 Node.js 开发环境指南。

接下来，使用 @wordpress/create-block 包和 @wordpress/create-block-interactive-template 模板来搭建完整的“我的第一个交互式区块”插件。

选择您要创建插件的文件夹，然后在该文件夹内的终端中执行以下命令：

npx @wordpress/create-block@latest my-first-interactive-block --template @wordpress/create-block-interactive-template

提供的别名（my-first-interactive-block）定义了搭建插件的文件夹名称和内部区块名称。

基本用法

插件激活后，您可以探索该区块的工作原理。使用以下命令进入新创建的插件文件夹并开始开发过程。

cd my-first-interactive-block && npm start

当 create-block 搭建区块时，它会安装 wp-scripts 并将最常用的脚本添加到区块的 package.json 文件中。有关此包的介绍，请参阅 wp-scripts 入门 文章。

npm start 命令将启动开发服务器并监视区块代码的更改，每当进行修改时都会重新构建区块。

完成更改后，运行 npm run build 命令。这将优化区块代码并使其可用于生产环境。

查看区块实际效果

如果你已安装本地 WordPress 环境，可以在该安装目录的 plugins 文件夹中运行上述命令。如果尚未安装，可以使用 @wp-playground/cli 在插件目录（my-first-interactive-block）中执行以下命令，启动已安装该插件的 WordPress 站点：

npx @wp-playground/cli server --auto-mount

你将能够在任意文章中插入“我的首个交互式区块”，并查看发布后在前端的实际表现。