云策 WordPress 开发者社区

块编辑器开发文档

快速入门指南

查看官方原文 ↗
💡 云策文档标注

概述

本指南通过实践方法演示 WordPress 区块开发的基本原理，指导开发者快速创建一个自定义区块插件，使用现代 JavaScript（ESNext 和 JSX）技术栈。示例区块显示版权符号（©）和当前年份，适合添加到网站页脚。

关键要点

  • 使用 @wordpress/create-block 包和 @wordpress/create-block-tutorial-template 模板快速搭建“Copyright Date Block”插件。
  • 通过 npm start 启动开发服务器，实时监控代码变化并自动重建区块；使用 npm run build 优化代码以用于生产环境。
  • 利用 wp-env 配置在本地 Docker 环境中测试区块，访问 http://localhost:8888 登录 WordPress 仪表板进行验证。

代码示例

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

注意事项

  • 确保已安装 Node.js 和 npm，并参考相关指南设置开发环境。
  • 如果已有本地 WordPress 环境，需在终端中导航到 plugins/ 文件夹执行命令。
  • 区块 slug（如 copyright-date-block）决定了插件文件夹名和内部区块名称。
📄 原文内容

This guide is designed to demonstrate the basic principles of block development in WordPress using a hands-on approach. Following the steps below, you will create a custom block plugin that uses modern JavaScript (ESNext and JSX) in a matter of minutes. The example block displays the copyright symbol (©) and the current year, the perfect addition to any website’s footer. You can see these steps in action through this short video demonstration.

Scaffold the block plugin

Start by ensuring you have Node.js and npm installed on your computer. Review the Node.js development environment guide if not.

Next, use the @wordpress/create-block package and the @wordpress/create-block-tutorial-template template to scaffold the complete “Copyright Date Block” plugin.

You can use create-block to scaffold a block just about anywhere and then use wp-env inside the generated plugin folder. This will create a local WordPress development environment with your new block plugin installed and activated.
If you already have your own local WordPress development environment, navigate to the plugins/ folder using the terminal.

Choose the folder where you want to create the plugin, and then execute the following command in the terminal from within that folder:

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

The slug provided (copyright-date-block) defines the folder name for the scaffolded plugin and the internal block name.

Navigate to the Plugins page of your local WordPress installation and activate the “Copyright Date Block” plugin. The example block will then be available in the Editor.

Basic usage

With the plugin activated, you can explore how the block works. Use the following command to move into the newly created plugin folder and start the development process.

cd copyright-date-block && npm start

When create-block scaffolds the block, it installs wp-scripts and adds the most common scripts to the block’s package.json file. Refer to the Get started with wp-scripts article for an introduction to this package.

The npm start command will start a development server and watch for changes in the block’s code, rebuilding the block whenever modifications are made.

When you are finished making changes, run the npm run build command. This optimizes the block code and makes it production-ready.

View the block in action

You can use any local WordPress development environment to test your new block, but the scaffolded plugin includes configuration for wp-env. You must have Docker already installed and running on your machine, but if you do, run the npx wp-env start command.

Once the script finishes running, you can access the local environment at: http://localhost:8888. Log into the WordPress dashboard using username admin and password password. The plugin will already be installed and activated. Open the Editor or Site Editor, and insert the Copyright Date Block as you would any other block.

Visit the Getting started guide to learn more about wp-env.

Additional resources