WordPress Gutenberg 区块转换（Transforms）机制详解-优快云博客

WordPress Gutenberg 区块转换（Transforms）机制详解

gutenberg The Block Editor project for WordPress and beyond. Plugin is available from the official repository. 项目地址: https://gitcode.com/gh_mirrors/gu/gutenberg

什么是区块转换

在 WordPress Gutenberg 编辑器中，区块转换（Block Transforms）是一项强大的 API，它允许开发者定义区块与其他内容形式之间的相互转换规则。这项功能让内容创作者能够轻松地将一种内容形式转换为另一种，大大提升了编辑体验的灵活性。

转换方向：to 和 from

区块转换支持两个主要方向：

from：从其他内容形式转换为当前区块
to：从当前区块转换为其他内容形式

开发者需要在区块注册时通过 transforms 属性来声明支持的转换规则：

registerBlockType('create-block/gutenpride', {
  // 其他配置...
  transforms: {
    from: [ /* 支持的来源转换 */ ],
    to: [ /* 支持的目标转换 */ ]
  }
});

区块转换类型详解

1. 区块间转换（Block-to-Block）

这是最常见的转换类型，允许一个区块转换为另一个区块。这种转换会在区块工具栏中显示对应的操作按钮。

一个完整的区块转换配置包含以下参数：

type (必填)：固定值为 "block"
blocks (必填)：支持转换的区块类型列表，可使用通配符 "*" 表示所有区块
transform (必填)：执行转换的回调函数
isMatch (可选)：判断是否允许转换的条件函数
isMultiBlock (可选)：是否支持多区块同时转换
priority (可选)：转换优先级，数值越小优先级越高

实际应用示例

假设我们要实现 Gutenpride 区块与标题区块的相互转换：

从标题区块转换为 Gutenpride 区块

transforms: {
  from: [
    {
      type: "block",
      blocks: ["core/heading"],
      transform: ({ content }) => {
        return createBlock("create-block/gutenpride", {
          message: content,
        });
      },
    },
  ],
},

从 Gutenpride 区块转换为标题区块

transforms: {
  to: [
    {
      type: 'block',
      blocks: ['core/heading'],
      transform: ({ message }) => {
        return createBlock('core/heading', {
          content: message,
        });
      },
    },
  ]
},