调整core/spacer块默认高度时触发Block validation failed错误

问题根源 #

你仅在JS端修改了core/spacer的height属性默认值，但PHP端（服务器端）仍使用原默认值200px，导致前后端生成的HTML内容不一致：

• 已保存的未手动设置高度的spacer块，服务器端渲染的HTML为style="height:200px"
• 编辑器加载时用JS端的新默认值24px生成HTML
  两者对比不匹配，触发块验证失败。

解决步骤 #

需要同时在PHP和JS端统一height属性的默认值，确保前后端行为一致：

1. PHP端修改默认值 #

在主题的functions.php中添加以下代码，同步服务器端的属性默认值：

add_filter('register_block_type_args', 'my_theme_set_spacer_default_height', 10, 2);
function my_theme_set_spacer_default_height($args, $block_type) {
    if ('core/spacer' === $block_type) {
        $args['attributes']['height']['default'] = '24px';
    }
    return $args;
}

2. 优化JS端过滤器代码 #

保留原有的JS过滤器，但调整代码以保留属性的原有配置（仅修改默认值），确保和PHP端一致：

wp.hooks.addFilter(
  "blocks.registerBlockType",
  "my-script/extend-block-attributes",
  (settings, name) => {
    if (name === "core/spacer") {
      return {
        ...settings,
        attributes: {
          ...settings.attributes,
          height: {
            ...settings.attributes.height, // 保留原属性的类型、可选值等配置
            default: "24px",
          },
        },
      };
    }
    return settings;
  }
);

3. 效果验证 #

• 新添加的spacer块默认高度为24px，保存后HTML为style="height:24px"
• 已保存的未手动设置高度的spacer块，编辑器会从数据库的HTML中解析出height="200px"属性，生成的HTML与数据库内容一致，不会触发验证失败
• 已手动设置高度的spacer块不受影响，正常显示

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