# 快速入门指南

本指南旨在通过实践操作演示WordPress区块开发的基本原理。按照以下步骤，您将在几分钟内创建一个使用现代JavaScript（ESNext和JSX）的自定义区块插件。该示例区块将显示版权符号（©）和当前年份，是任何网站页脚的完美补充。您可以通过以下短视频演示观看这些步骤的实际操作。

<iframe width="960" height="540" src="https://www.youtube.com/embed/nrut8SfXA44?si=YxvmHmAoYx-BDCog" title="WordPress区块开发：快速入门指南视频" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen="true"></iframe>

## 搭建区块插件

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

接下来，使用[`@wordpress/create-block`](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-create-block/)包和[`@wordpress/create-block-tutorial-template`](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-create-block-tutorial-template/)模板来搭建完整的“版权日期区块”插件。

<div class="callout callout-info">
    <p>您可以使用<code>create-block</code>在任意位置搭建区块，然后在生成的插件文件夹内使用<a href="https://developer.wordpress.org/block-editor/getting-started/devenv/get-started-with-wp-env/"><code>wp-env</code></a>。这将创建一个已安装并激活新区块插件的本地WordPress开发环境。</p>
    <p>如果您已有自己的<a href="https://developer.wordpress.org/block-editor/getting-started/devenv/#local-wordpress-environment">本地WordPress开发环境</a>，请通过终端导航至<code>plugins/</code>文件夹。</p>
</div>

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

```sh
npx @wordpress/create-block copyright-date-block --template @wordpress/create-block-tutorial-template
```

提供的`slug`参数（`copyright-date-block`）定义了搭建插件的文件夹名称和内部区块名称。

导航至本地WordPress安装的插件页面，激活“版权日期区块”插件。随后该示例区块将在编辑器中可用。

## 基本使用

激活插件后，您可以探索区块的工作方式。使用以下命令进入新创建的插件文件夹并启动开发过程：

```sh
cd copyright-date-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开发环境测试新区块，但搭建的插件包含`wp-env`配置。您的计算机必须已安装并运行[Docker](https://www.docker.com/products/docker-desktop)，如果满足条件，请运行`npx wp-env start`命令。

脚本运行完成后，您可以通过以下地址访问本地环境：<code>http://localhost:8888</code>。使用用户名`admin`和密码`password`登录WordPress仪表板。插件将已安装并激活。打开编辑器或站点编辑器，像插入任何其他区块一样插入版权日期区块。

访问[入门指南](https://developer.wordpress.org/block-editor/getting-started/devenv/get-started-with-wp-env/)了解更多关于`wp-env`的信息。

## 附加资源

- [create-block入门指南](https://developer.wordpress.org/block-editor/getting-started/devenv/get-started-with-create-block/)
- [wp-scripts入门指南](https://developer.wordpress.org/block-editor/getting-started/devenv/get-started-with-wp-scripts/)
- [wp-env入门指南](https://developer.wordpress.org/block-editor/getting-started/devenv/get-started-with-wp-env/)