wordpress-gutenberg - 使用 RangeControl 更改字体大小时，为什么我的 gutenberg 块会出现“此块包含意外或无效的内容错误”

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 并看到相同的行为。

将不胜感激。谢谢！

标签： wordpress-gutenberggutenberg-blocks

Answer 1

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

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

应该：

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