制作含嵌套HTML的Gutenberg自定义块：解决块验证失败问题

错误根源 #

你的块验证失败核心在于save()输出的HTML与预期结构不符，且和edit()组件结构不匹配：

• 你给btnTextS1对应的RichText.Content设置了tagName='span'，导致输出多了一层<span>，最终HTML变成<a><span>Start now</span><span>$209/mo</span></a>，和需求的<a> Start now <span>$209/mo</span></a>结构不一致。
• Gutenberg的块验证机制要求save()的输出必须和编辑器存储的结构完全匹配，结构差异会直接触发恢复提示。

正确实现步骤 #

1. 定义块属性 #

在块的属性声明里，明确两个文本字段和链接字段：

attributes: {
  btnHref: {
    type: 'string',
    default: '#'
  },
  btnTextS1: {
    type: 'string',
    default: 'Start now'
  },
  btnTextS2: {
    type: 'string',
    default: '$209/mo'
  }
}

2. edit()方法组件结构 #

确保编辑状态的结构和save()输出完全对应，避免结构差异：

edit({ attributes, setAttributes }) {
  const { btnHref, btnTextS1, btnTextS2 } = attributes;

  return (
    <a href={ btnHref } className="custom-dual-btn">
      <RichText
        value={ btnTextS1 }
        onChange={ (newVal) => setAttributes({ btnTextS1: newVal }) }
        placeholder="输入按钮主文本"
        allowedFormats={ [] } // 禁止格式化，保持纯文本样式
      />
      <span>
        <RichText
          value={ btnTextS2 }
          onChange={ (newVal) => setAttributes({ btnTextS2: newVal }) }
          placeholder="输入按钮次要文本"
          allowedFormats={ [] }
        />
      </span>
    </a>
  );
}

3. save()方法正确渲染 #

移除btnTextS1对应的RichText.Content的tagName='span'，让它直接输出纯文本，和需求的HTML结构完全匹配：

save({ attributes }) {
  const { btnHref, btnTextS1, btnTextS2 } = attributes;

  return (
    <a href={ btnHref } className="custom-dual-btn">
      <RichText.Content value={ btnTextS1 } />
      <span>
        <RichText.Content value={ btnTextS2 } />
      </span>
    </a>
  );
}

4. 样式实现双色文本 #

通过自定义类名给两个文本部分设置不同颜色：

.custom-dual-btn {
  padding: 10px 20px;
  background: #2d3748;
  color: #ffffff;
  text-decoration: none;
  border-radius: 4px;
}
.custom-dual-btn span {
  color: #f6ad55;
  margin-left: 8px;
}

验证错误的本质 #

当你给btnTextS1的RichText.Content添加tagName='span'时，save输出的HTML多了一层不必要的<span>，和编辑状态下存储的结构（edit里的btnTextS1没有包裹span）不匹配，Gutenberg对比后判定块结构异常，因此触发恢复提示。

内容的提问来源于stack exchange，提问作者Rakesh Suryavardhan