Gutenberg自定义块无法保存iframe链接，提示内容异常

核心问题定位 #

出现“This block contains unexpected or invalid content”提示的本质是编辑器内容验证机制发现save函数输出的HTML与文章存储的内容不匹配，你提到save生成的iframe src为空，说明save函数未正确读取到存储的src属性值。

常见修复方案 #

1. 修正save函数的属性读取逻辑 #

确保save函数从props.attributes中读取src值，而非依赖edit组件的临时状态：

// 错误示例：依赖组件内部state
function save() {
  return <iframe src={ this.state.src } />;
}

// 正确示例：从传入的attributes读取
function save( props ) {
  const { src } = props.attributes;
  return <iframe src={ src } />;
}

2. 确认块的属性定义配置正确 #

注册块时，要将src属性正确定义为可存储、可解析的类型：

registerBlockType( 'my-plugin/iframe-block', {
  attributes: {
    src: {
      type: 'string',
      source: 'attribute',
      selector: 'iframe',
      attribute: 'src',
    },
  },
  // 其他块配置...
} );

这里的source配置会告诉编辑器如何从HTML中提取src值并映射到attributes。

3. 保证edit与save的输出结构一致 #

edit组件渲染的临时HTML要和save函数输出的结构完全匹配，比如都使用标准<iframe>标签，无额外冗余属性或嵌套结构，避免编辑器解析时出现偏差。

4. 验证属性的序列化/反序列化逻辑 #

如果自定义了属性序列化规则，要确保它能正确将attributes转换为HTML，同时也能从HTML反序列化回attributes，防止src值在转换过程中丢失。

排查步骤 #

1. 打开浏览器开发者工具，查看文章存储的原始块内容，确认src值确实存在。
2. 在save函数中添加console.log(props.attributes.src)，刷新后检查控制台输出是否为预期的URL。
3. 对比save函数输出的HTML与文章存储的HTML，排查结构差异。

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