Créer une barre latérale personnalisée avec PluginSidebar

Nous avons examiné les barres latérales de blocs personnalisées, les barres latérales de blocs tiers via InspectorControls et comment ajouter des contrôles à la barre latérale de publication. Dans ce guide, nous allons voir comment placer nos commandes dans leur propre barre latérale personnalisée.

Notre barre latérale personnalisée

La capture d’écran ci-dessus montre ce que nous allons construire. Pour la plupart, nous allons juste modifier légèrement le code que nous avons construit dans le guide Post Sidebar, alors assurez-vous d’avoir d’abord terminé ce guide.

Conditions préalables

• Avoir suivi le guide Création d’un plugin pour l’éditeur de blocs WordPress (Gutenberg)
• Lisez les guides de la barre latérale précédente (barre latérale pour un bloc personnalisé et barre latérale pour un bloc existant )
• Avoir suivi le guide Ajouter des contrôles à la barre latérale de publication avec PluginDocumentSettingPanel

Nous allons utiliser le code du guide Post Sidebar, donc si vous n’avez pas terminé ce guide, veuillez le faire. C’est bon, j’attendrai.

Ouvrez le /components/Sidebar.jsfichier que vous avez créé dans le guide précédent. Nous allons remplacer la ligne qui importe le PluginDocumentSettingPanelpar le code suivant :

import { PluginSidebar, PluginSidebarMoreMenuItem } from '@wordpress/edit-post';

Remplacez maintenant le balisage <PluginDocumentSettingPanel...par <PluginSidebar...et le travail est fait ! Droit?

Eh bien, oui et non. Cela nous donne une barre latérale, mais c’est moche! Nous avons besoin de panneaux pour que les contrôles soient formatés correctement.

De plus, la barre latérale est absente du menu "Options". Pour résoudre ce problème, nous devons implémenter PluginSidebarMoreMenuItem.

Modifiez /components/Sidebar.jsà nouveau et collez le code suivant :

import { Panel, PanelBody, ToggleControl } from '@wordpress/components';
import { dispatch, select } from '@wordpress/data';
import { PluginSidebar, PluginSidebarMoreMenuItem } from '@wordpress/edit-post';
import { Component, Fragment } from '@wordpress/element';
import { __ } from '@wordpress/i18n';

export default class Sidebar extends Component {
    render() {
        const meta = select( 'core/editor' ).getEditedPostAttribute( 'meta' );
        const exampleToggle = meta['_wholesomecode_wholesome_plugin_require_login'];

        return (<Fragment>
                <PluginSidebarMoreMenuItem target="wholesomecode-wholesome-plugin-sidebar">
                { __( 'Display Settings', 'wholesome-plugin') }
                </PluginSidebarMoreMenuItem>
                <PluginSidebar
                    name="wholesomecode-wholesome-plugin-sidebar"
                    title={ __( 'Display Settings', 'wholesome-plugin') }
                >
                    <Panel>
                        <PanelBody
                            title={ __( 'Display Settings', 'wholesome-plugin') }
                            icon="visibility"
                        >
                            <ToggleControl
                                checked={ exampleToggle }
                                help={ __( 'User must be logged-in in to view this post.', 'wholesome-plugin') }
                                label={ __( 'Require Login', 'wholesome-plugin') }
                                onChange={ (value) => {
                                    dispatch( 'core/editor' ).editPost( {
                                        meta: {
                                            '_wholesomecode_wholesome_plugin_require_login': value,
                                        },
                                    } );
                                    this.setState( { exampleToggle: value } );
                                } }
                            />
                        </PanelBody>
                    </Panel>
                </PluginSidebar>
            </Fragment>
        );
    }
}

C’est mieux, nous avons utilisé exactement le même code que dans notre exemple de barre latérale de publication précédente, mais maintenant, il ressemble à la pièce.

Maintenant que nous avons notre code en place, n’oubliez pas de le lancer npm startpour le compiler, et il devrait maintenant ressembler à ceci :

Notre barre latérale personnalisée en action

Comme dans notre guide de la barre latérale des plugins, nous basculons la bascule de connexion requise, actualisons une publication déconnectée, la désactivons et actualisons à nouveau la publication. Lorsqu’il est activé, nous ne pouvons pas accéder au message.

Le nom de notre barre latérale est wholesomecode-wholesome-plugin-sidebar'. Si nous le souhaitons, nous pouvons automatiquement ouvrir et fermer cette barre latérale depuis n’importe où dans l’éditeur. Disons que nous avons un bouton avec une action de clic qui fait cela.

Le code pour ouvrir la barre latérale dynamiquement est le suivant :

wp.data.dispatch('core/edit-post').openGeneralSidebar( 'wholesomecode-wholesome-plugin-sidebar/wholesomecode-wholesome-plugin-sidebar' );

De même, nous pouvons fermer dynamiquement la barre latérale comme suit :

wp.data.dispatch('core/edit-post').closeGeneralSidebar( 'wholesomecode-wholesome-plugin-sidebar/wholesomecode-wholesome-plugin-sidebar' );

• Découvrez comment créer des blocs enfants imbriqués avec le InnerBlockscomposant
• Jetez un œil à l’utilisation des champs post-méta dans les blocs Gutenberg (si vous ne l’avez pas déjà fait) et des boîtes méta personnalisées pilotées par les composants Gutenberg
• Jetez un œil à la création d’une page de paramètres avec les composants Gutenberg