为什么我的古腾堡块在使用 RangeControl 更改字体大小时出现"此块包含意外或无效内容错误"

Question

所以我一直在尝试根据用户在我的古腾堡块上的输入来设置字体大小。以下是编辑部分的设置方式：

titleSize: {
type: 'string',
default: null
}
function handleTitleSize(value) {
props.setAttributes({
titleSize: value
})
}
<PanelBody title={'Title Settings'}>
<p><strong>Select a Title Color:</strong></p>
<ColorPalette 
value={titleColor}
onChange={handleTitleColorChange}
/>
<RangeControl 
label="Font Size"
value={titleSize}
onChange={handleTitleSize}
min={12}
max={60}
/>
<p><strong>Select Title Alignment:</strong></p>
<AlignmentToolbar 
value={titleAlignment}
onChange={handleTitleAlignment}
/>
</PanelBody>

这是在保存方法中：

<div class="hero-block-subtitle" style={
{ 
color: titleColor,
textAlign: titleAlignment,
fontSize: titleSize
}
}>{title}</div>

其他一切似乎都工作正常，但是当使用 RangeControl 更改字体大小时，该块会在重新加载时给我错误。我设置错误或遗漏了什么？这是我唯一看到这种行为的地方，对齐和颜色变化似乎工作正常。

我也尝试过FontSizePicker并看到相同的行为。

将不胜感激。谢谢！

Answer 1

我想通了，所以问题是我将字体大小定义为字符串，而不是数字。

titleSize: {
type: 'string',
default: null
}

应该是：

titleSize: {
type: 'number',
default: 16
}