title: "快速入门指南" post_status: publish comment_status: open taxonomy: category: - gutenberg-docs post_tag: - Getting Started - Repos - Data
快速入门指南
本指南旨在通过实践方法演示 WordPress 区块开发的基本原理。按照以下步骤，您将在几分钟内创建一个使用现代 JavaScript（ESNext 和 JSX）的自定义区块插件。该示例区块将显示版权符号（©）和当前年份，是任何网站页脚的完美补充。您可以通过以下短视频演示观看这些步骤的实际操作。
搭建区块插件脚手架
首先确保您的计算机已安装 Node.js 和 npm。如果尚未安装，请查阅 Node.js 开发环境指南。
接下来，使用 @wordpress/create-block 包和 @wordpress/create-block-tutorial-template 模板来搭建完整的“版权日期区块”插件脚手架。
您可以使用 create-block 在几乎任何位置搭建区块脚手架，然后在生成的插件文件夹内使用 wp-env。这将创建一个本地 WordPress 开发环境，并安装和激活您的新区块插件。
如果您已有自己的 本地 WordPress 开发环境，请通过终端导航到 plugins/ 文件夹。
选择您要创建插件的文件夹，然后在该文件夹内的终端中执行以下命令：
npx @wordpress/create-block copyright-date-block --template @wordpress/create-block-tutorial-template
提供的 slug（copyright-date-block）定义了脚手架插件的文件夹名称和内部区块名称。
导航到本地 WordPress 安装的插件页面，激活“版权日期区块”插件。示例区块随后将在编辑器中可用。
基本用法
插件激活后，您可以探索该区块的工作原理。使用以下命令进入新创建的插件文件夹并开始开发过程。
cd copyright-date-block && npm start
当 create-block 搭建区块时，它会安装 wp-scripts 并将最常用的脚本添加到区块的 package.json 文件中。有关此包的介绍，请参阅 wp-scripts 入门 文章。
npm start 命令将启动开发服务器并监视区块代码的更改，每当进行修改时都会重新构建区块。
完成更改后，运行 npm run build 命令。这将优化区块代码并使其可用于生产环境。
查看区块实际效果
您可以使用任何本地 WordPress 开发环境来测试新创建的区块，但脚手架插件已包含 wp-env 的配置。您的计算机上必须已安装并运行 Docker，如果满足条件，请运行 npx wp-env start 命令。
脚本运行完成后，您可以通过以下地址访问本地环境：http://localhost:8888。使用用户名 admin 和密码 password 登录 WordPress 仪表盘。插件将已自动安装并激活。打开编辑器或站点编辑器，像插入其他任何区块一样插入版权日期区块。
访问 入门指南 以了解更多关于 wp-env 的信息。