# 快速入门指南

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

## 搭建交互式区块

首先确保您的计算机已安装 Node.js 和 `npm`。如果尚未安装，请查阅 [Node.js 开发环境](https://developer.wordpress.org/block-editor/getting-started/devenv/nodejs-development-environment/)指南。

接下来，使用 [`@wordpress/create-block`](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-create-block/) 包和 [`@wordpress/create-block-interactive-template`](https://www.npmjs.com/package/@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 入门](https://developer.wordpress.org/block-editor/getting-started/devenv/get-started-with-wp-scripts/) 文章。

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

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

## 查看区块实际效果

如果你已安装本地 WordPress 环境，可以在该安装目录的 `plugins` 文件夹中运行上述命令。如果尚未安装，可以使用 [`@wp-playground/cli`](https://github.com/WordPress/wordpress-playground/tree/trunk/packages/playground/cli) 在插件目录（`my-first-interactive-block`）中执行以下命令，启动已安装该插件的 WordPress 站点：

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

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

<div class="callout callout-info">
    <p>如需获取使用交互性 API 的更高级示例，可查阅以下资源：</p>
    <ul>
      <li><a href="https://developer.wordpress.org/block-editor/reference-guides/interactivity-api/#docs-examples">文档与示例</a></li>
      <li><a href="https://github.com/WordPress/gutenberg/discussions/52894">入门指南及其他学习资源</a></li>
      <li><a href="https://github.com/WordPress/gutenberg/discussions/55642#">交互性 API 展示</a></li>
    </ul>
</div>