Как добавить настройку в редактор WordPress Gutenberg

Я пытаюсь написать простой плагин, который изменит поведение экрана редактирования сообщения (теперь он называется Gutenberg). Я использую @wordpress/scripts для связывания javascript. Следующий код будет работать, чтобы отобразить элемент управления ... но когда я нажимаю переключатель, он перезагружает страницу вместо изменения состояния.

Что я делаю неправильно? Я не могу найти никакой документации о том, как использовать состояние в контексте редактора Гутенберга.

import { registerPlugin } from '@wordpress/plugins';
import { PluginMoreMenuItem } from '@wordpress/edit-post';
import { pencil } from '@wordpress/icons';
import { ToggleControl } from '@wordpress/components';
import { withState } from '@wordpress/compose';
 
const HemingwayModeToggleControl = withState( {
    hemingwayMode: false,
} )( ( { hemingwayMode, setState } ) => (
    <ToggleControl
        label="Hemingway mode"
        help={ hemingwayMode ? 'Hemingway mode is on.' : 'Hemingway mode is off.' }
        checked={ hemingwayMode }
        onChange={ () => setState( ( state ) => ( { hemingwayMode: ! state.hemingwayMode } ) ) }
    />
) );

const HemingwayModeMoreMenuItem = () => (
    <PluginMoreMenuItem
        icon={pencil}
    >
        <HemingwayModeToggleControl />
    </PluginMoreMenuItem>
);

registerPlugin( 'hemingway-mode-more-menu', { render: HemingwayModeMoreMenuItem } );

wordpress wordpress-theming wordpress-gutenberg
person emersonthis    schedule 14.03.2021    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Проблема здесь в том, что каждый компонент в этом слоте обернут <button></button>. Итак, когда вы нажимаете на переключатель, вы скорее нажимаете эту кнопку. Но в вашем случае я думаю, что это не важно, и вы можете использовать событие кнопки onClick, чтобы установить свое состояние. Вот обновленный код, и он работает.

import { registerPlugin } from '@wordpress/plugins';
import { PluginMoreMenuItem } from '@wordpress/edit-post';
import { pencil } from '@wordpress/icons';
import { ToggleControl } from '@wordpress/components';
import { withState } from '@wordpress/compose';

const HemingwayModeMoreMenuItem = withState( {hemingwayMode: false} )(
    ({ hemingwayMode, setState }) => (
        <PluginMoreMenuItem
            icon={pencil}
            onClick={ (e) => {
                e.preventDefault();
                setState( ( state ) => ( { hemingwayMode: ! state.hemingwayMode } ) )
            } }
        >

        <ToggleControl
            label="Hemingway mode"
            help={ hemingwayMode ? 'Hemingway mode is on.' : 'Hemingway mode is off.' }
            checked={ hemingwayMode }
        />

        </PluginMoreMenuItem>
    )
);

registerPlugin( 'hemingway-mode-more-menu', { render: HemingwayModeMoreMenuItem } );

Остальная проблема заключается в том, что раздел «Дополнительные инструменты и параметры» закрывается при нажатии кнопки. Это поведение по умолчанию, и я не знаю, как его изменить.

person katya_leurdo    schedule 15.03.2021
comment
Спасибо! Вы сказали, что раздел «Дополнительные инструменты и параметры» закрывается при нажатии кнопки, но я не вижу такого поведения при переключении параметров по умолчанию. Пример: код или режим визуального редактора. Вы знаете какой-нибудь способ воспроизвести это поведение? Это был мой первый инстинкт, но в документации специально сказано не использовать этот компонент для простого включения / выключения настройки. - person emersonthis; 17.03.2021
comment
Я получаю бесполезную ошибку при запуске этого кода: TypeError: a is not a function - person emersonthis; 17.03.2021