当使用RangeControl更改字体大小时，我的gutenberg块为什么会得到'此块包含意外或无效的内容错误'

Question

因此，我一直试图根据用户在gutenberg块上的输入来设置字体大小。这是设置编辑部分的方式：

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
}