Gutenberg ToggleControl не будет визуально переключаться - PullRequest
Новая
       23

Gutenberg ToggleControl не будет визуально переключаться

0 голосов
/ 18 марта 2019

У меня был ToggleControl для блока, который появляется в области InspectorControls .По умолчанию на .Когда я пытаюсь установить его, используя тип boolean , он не сохранит состояние должным образом.При попытке его переключения он останется как « on », но текст справки изменится, как если бы он был off .При сохранении изменений и перезагрузке переключение вернется к на .

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, но это не главное.Я что-то упускаю с логическим типом, или это ошибка в Гутенберге?

Версия WP: 5.1.1

1 Ответ

0 голосов
/ 22 марта 2019

Ваше условие в атрибуте checked неверно, потому что оно всегда оценивается как true. Хотя в тексте справки этого условия нет, переключение текста справки зависит от attributes.autoplay, который вы изменяете в атрибуте onChange.

Таким образом, решение состоит в том, чтобы изменить ваше условие на атрибут checked.

Атрибуты внутри registerBlockType могут определять значения по умолчанию с помощью клавиши default внутри любого атрибута, поэтому рекомендуется использовать это. ( пример атрибута по умолчанию из обложки WordPress )

...