2026 年,块编辑器已经成为 WordPress 内容编辑的核心。在主题中创建自定义块,可以让用户拥有更丰富的内容编辑能力。本文介绍创建自定义块的基础流程和方法。

块开发的环境准备

块开发需要 Node.js 和 npm 环境。使用 @wordpress/create-block 脚手架工具可以快速生成块的初始代码结构。这个工具会自动创建所有必要的配置文件、JavaScript 源代码和 PHP 入口文件。

块的基本结构

一个块由以下几个部分组成:block.json 文件定义块的元数据,包括名称、标题、图标、类别、属性等。edit 函数定义块在编辑器中的渲染逻辑,返回一个 React 组件。save 函数定义块在前端的输出内容,返回 HTML 字符串。

块的属性系统

属性是块的数据存储机制,定义了块需要保存的数据结构。常见的属性类型包括字符串、数字、布尔值、数组和对象。在编辑过程中,通过 setAttributes 函数更新属性值,这些值会保存到数据库中。

块的控件和工具栏

在块的编辑界面中,可以添加侧边栏控件和块工具栏。侧边栏控件位于编辑器右侧的设置面板中,用于配置块的详细参数。块工具栏位于块的上方,提供常用操作的快捷入口。

仅 PHP 的块注册

WordPress 7.0 引入了仅 PHP 的块注册功能,让不熟悉 JavaScript 的开发者也可以在服务器端创建块。这种方法不需要构建工具,直接在 PHP 中定义块的属性、样式和渲染逻辑,自动通过块 API 注册到编辑器中。

在主题中集成自定义块

自定义块可以打包成独立的插件,也可以直接放在主题中。如果块只用于特定主题,放在主题的 /blocks/ 目录中即可。如果块需要在多个主题中使用,建议打包成插件。