Gutenberg自定义区块未指定source的数字属性无法正常保存读取怎么办

问题原因 #

核心是Gutenberg属性类型校验不匹配导致的非法值被丢弃：

• 你定义的selectedpost属性类型为number，但SelectControl返回的选中值实际是字符串类型
• Gutenberg在保存和加载区块属性时会严格匹配声明的类型，类型不符的值会直接丢弃，回退到你设置的默认值0，看起来就像属性丢失了
• 你改成text类型并存在DOM节点中功能正常，就是因为类型匹配上了校验规则

解决步骤 #

1. 强制转换选中值为数字类型 #

修改onSelectPost方法，把拿到的值主动转成数字，和属性声明的类型对齐：

const onSelectPost = ( post ) => {
    setAttributes( {
        selectedpost: Number(post), // 强制转为数字
    } );
};

2. 修正选项值的类型 #

检查你构造SelectControl的options数组的逻辑，确保每个选项的value本身就是数字类型，避免后续出现类型问题：

// 示例：构造选项时统一转数字
const options = yourPostList.map(post => ({
    label: post.title,
    value: Number(post.id)
}))

简易调试方法 #

如果修改后还有问题，可以加两行日志快速定位问题：

• 在onSelectPost里加console.log('选中值类型', typeof post, '值', post)，确认输入值的类型
• 在edit函数开头加console.log('加载到的属性', attributes)，确认重新进入编辑页时拿到的属性值
• 保存文章后切换到代码编辑器模式，查看区块头部的注释里是否有selectedpost对应的值，判断是保存阶段丢了还是加载阶段被过滤了

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