50 lines
2.8 KiB
Markdown
50 lines
2.8 KiB
Markdown
# 快速入门指南
|
|
|
|
本指南将帮助您构建一个基础区块，用于展示 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` 目录中执行上述命令。若尚未搭建环境，可通过在插件目录（`my-first-interactive-block`）中执行以下命令，使用 [`@wp-playground/cli`](https://github.com/WordPress/wordpress-playground/tree/trunk/packages/playground/cli) 启动已安装该插件的 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> |