Comment ajouter un paramètre à l’éditeur WordPress Gutenberg

J’essaie d’écrire un plugin simple qui modifiera le comportement de l’écran Edit Post (maintenant appelé Gutenberg). J’utilise @wordpress/scriptspour regrouper le javascript. Le code suivant fonctionnera pour faire apparaître le contrôle … mais lorsque je clique sur la bascule, il recharge la page au lieu de changer l’état.

Qu’est-ce que je fais mal? Je ne trouve aucune documentation sur l’utilisation de l’état dans le contexte de l’éditeur Gutenberg.

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 } );

Solution n°1 trouvée

Le problème ici est que chaque composant de cet emplacement est enveloppé avec <button></button>. Ainsi, lorsque vous appuyez sur votre bascule, vous appuyez plutôt sur ce bouton. Mais dans votre cas, je pense que ce n’est pas important, et vous pouvez utiliser l’événement button onClick pour définir votre état. Voici le code mis à jour et il fonctionne.

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 } );

Le reste du problème est que la section Plus d’outils et d’options se ferme lorsque le bouton est cliqué. Ce comportement est par défaut et je ne sais pas comment le remplacer.