4.1 KiB
快速入门指南
本指南旨在通过实践操作演示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的信息。