懒加载编辑器组件,自动管理资源和设置。

概览

该包提供了一个 <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