如何扩展自定义WordPress Gutenberg区块RichText组件的功能？

嘿，这个场景我太熟悉了！WordPress的RichText组件其实是为单一文本段落+基础格式设计的（比如加粗、斜体、链接），它天生就不支持嵌套列表、按钮、媒体这类复杂内容。要实现你想要的功能，咱们得把RichText换成InnerBlocks组件——这玩意儿就是专门用来在自定义区块里嵌套其他区块（包括核心区块和你自己写的自定义区块）的。

下面是具体的实现步骤：

1. 在编辑器的Edit组件中替换为InnerBlocks #

首先在你的区块编辑逻辑里，把原来的RichText部分替换成InnerBlocks，还可以通过allowedBlocks指定允许用户添加的区块类型，避免出现不需要的内容：

import { InnerBlocks } from '@wordpress/block-editor';

export default function Edit( props ) {
  return (
    <div className={ props.className }>
      {/* 这里是你的区块左侧内容（比如图片/图标等） */}
      <div className="your-block__left">
        {/* ... 左侧内容代码 ... */}
      </div>
      {/* 右侧内容区域用InnerBlocks替代RichText */}
      <div className="your-block__right">
        <InnerBlocks
          // 指定允许使用的核心区块，按需添加
          allowedBlocks={ [
            'core/paragraph',
            'core/list',
            'core/button',
            'core/image',
            'core/heading'
          ] }
          // 设置默认的初始区块，比如一个带占位符的段落
          template={ [
            [ 'core/paragraph', { placeholder: '在这里添加文本、列表或按钮...' } ]
          ] }
          // 可选：锁定模板，比如只能添加允许的区块，不能删除默认的初始区块
          // templateLock="insert"
        />
      </div>
    </div>
  );
}

2. 在Save组件中渲染嵌套区块内容 #

保存区块的时候，要使用InnerBlocks.Content来输出所有嵌套的区块内容，确保前端能正常显示：

import { InnerBlocks } from '@wordpress/block-editor';

export default function save( props ) {
  return (
    <div className={ props.className }>
      <div className="your-block__left">
        {/* ... 左侧内容的保存代码 ... */}
      </div>
      <div className="your-block__right">
        <InnerBlocks.Content />
      </div>
    </div>
  );
}

3. 自定义样式调整（可选） #

InnerBlocks里的核心区块会自带默认样式，你可以给你的区块右侧区域加一些自定义样式，让排版更贴合你的设计：

.your-block__right {
  padding-left: 2rem; /* 比如给左右区域加间距 */
}

.your-block__right .wp-block-paragraph,
.your-block__right .wp-block-list,
.your-block__right .wp-block-button {
  margin-bottom: 1.5em; /* 统一嵌套区块的底部间距 */
}

.your-block__right .wp-block-button {
  margin-top: 1em; /* 给按钮单独加顶部间距 */
}

额外小技巧 #

• 如果需要固定区块的结构（比如必须先有一个标题，再是段落），可以用template属性定义更复杂的模板结构；
• 用templateLock属性可以控制用户的编辑权限："all"完全锁定模板不能修改，"insert"只能添加允许的区块不能删除现有模板，false则完全开放。

这样改完之后，你的自定义区块右侧区域就能支持添加列表、按钮、图片这些复杂内容了，用户体验和WordPress原生编辑器完全一致！

内容的提问来源于stack exchange，提问作者Dmytro Sokolovskyi