Question

我在 InspectorControls 区域中出现的块上有一个ToggleControl。默认情况下为 on 。当我尝试使用 boolean 的类型进行设置时，它无法正确保存状态。尝试切换时，它将保持为“ on ”，但帮助文本将变为 off 。保存更改并重新加载时，切换将恢复为 on 。

const defaults: {
    autoplay: {
        type: 'boolean',
        meta: 'autoplay',
        default: true
    }
}

....  

<ToggleControl
    label={__('Autoplay')}
    help={attributes.autoplay ? __('Slideshow will start playing automatically', 'five') : __('User will have to cycle slideshow manually', 'five')}
    checked={(attributes.autoplay || defaults.autoplay.default)}
    onChange={() => {
        setAttributes({
            autoplay: !attributes.autoplay
        });
    }}
/>

但是，如果我将输入更改为 string 并自己进行布尔处理，它将正确切换输入并保存状态：

const defaults: {
    autoplay: {
        type: 'boolean',
        meta: 'autoplay',
        default: true
    }
}

....

<ToggleControl
    label={__('Autoplay')}
    help={attributes.autoplay == 'true' ? __('Slideshow will start playing automatically', 'five') : __('User will have to cycle slideshow manually', 'five')}
    checked={(attributes.autoplay || defaults.autoplay.default) == 'true'}
    onChange={(nextValue) => {
        setAttributes({
            autoplay: nextValue ? 'true' : 'false'
        });
    }} 
/>

这可行，但是在渲染时检查真实性时需要额外的字符。我可以通过仅使用数字并使用0和1来使此操作变得容易一些，但这不是重点。我是否缺少布尔类型的内容，或者这是古腾堡（Gutenberg）中的错误？

WP版本：5.1.1

Answer 1

您在checked属性中的条件是错误的，因为它始终在评估true。虽然您的帮助文本没有任何条件，但是切换帮助文本取决于attributes.autoplay属性，您可以在onChange属性中进行更改。

因此解决方案是更改checked属性上的条件。

registerBlockType内的属性可以通过在任何属性内使用default键来定义默认值，因此推荐的方法是使用默认值。（default attribute example from wordpress cover block）

古腾堡ToggleControl不会在视觉上切换

1 个答案: