懒加载编辑器组件,自动管理资源和设置。
概览
该包提供了一个 <Editor> 组件,用于处理加载和初始化 WordPress 块编辑器的所有复杂工作。它会自动:
- 加载编辑器资源 – 获取并注入脚本和样式,并正确解析依赖关系
- 加载编辑器设置 – 从 REST API 获取编辑器配置
- 解析全局样式 – 根据当前模板应用 theme.json 样式
- 管理模板上下文 – 自动确定正在编辑的文章的正确模板
- 显示加载状态 – 在加载资源和设置时显示加载动画
安装
安装模块:
npm install @wordpress/lazy-editor --save
用法
基本用法
import { Editor } from '@wordpress/lazy-editor';
function App() {
return <Editor postType="page" postId="123" />;
}
就是这样!该组件会在内部处理所有事项:
1. 根据文章类型和 ID 解析模板 ID
2. 根据模板解析样式 ID
3. 从 /wp-block-editor/v1/settings 加载编辑器设置
4. 从 /wp-block-editor/v1/assets 加载编辑器资源
5. 将脚本和样式注入 DOM
6. 在准备就绪后渲染编辑器
不同文章类型
// 编辑文章
<Editor postType="post" postId="42" />
// 编辑页面
<Editor postType="page" postId="123" />
// 编辑模板
<Editor postType="wp_template" postId="index" />
// 编辑自定义文章类型
<Editor postType="product" postId="789" />
贡献
请参阅 CONTRIBUTING.md。
许可证
GPL-2.0-or-later