Crear una barra lateral personalizada con PluginSidebar

Hemos echado un vistazo a las barras laterales de bloques personalizadas, las barras laterales de bloques de terceros a través de InspectorControls y cómo agregar controles a la barra lateral de la publicación. En esta guía, veremos cómo colocar nuestros controles en su propia barra lateral personalizada.

Nuestra barra lateral personalizada

La captura de pantalla de arriba muestra lo que vamos a construir. En su mayor parte, solo vamos a modificar ligeramente el código que construimos en la guía Post Sidebar, así que asegúrese de haber completado esa guía primero.

requisitos previos

• Haber seguido la guía Crear un complemento para el editor de bloques de WordPress (Gutenberg)
• Lea las guías de la barra lateral anterior (barra lateral para un bloque personalizado y barra lateral para un bloque existente )
• Haber seguido la guía Agregar controles a la barra lateral de publicación con PluginDocumentSettingPanel

Vamos a usar el código de la guía Post Sidebar, así que si no ha completado esa guía, hágalo. Está bien, esperaré.

Abre el /components/Sidebar.jsarchivo que creaste en la guía anterior. Vamos a reemplazar la línea que importa PluginDocumentSettingPanelcon el siguiente código:

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

¡ Ahora reemplace el marcado <PluginDocumentSettingPanel...con <PluginSidebar...y trabajo hecho! ¿Derecha?

Bueno, sí y no. Eso nos da una barra lateral, ¡pero es feo! Necesitamos algunos paneles para que los controles estén formateados correctamente.

También falta la barra lateral en el menú ‘Opciones’. Para solucionar esto necesitamos implementar PluginSidebarMoreMenuItem.

Edite /components/Sidebar.jsde nuevo y pegue el siguiente código:

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

Eso es mejor, hemos usado exactamente el mismo código que en nuestro ejemplo de barra lateral de publicación anterior, pero ahora se ve bien.

Ahora que tenemos nuestro código en su lugar, no olvides ejecutarlo npm startpara compilarlo, y ahora debería tener el siguiente aspecto:

Nuestra barra lateral personalizada en acción

Al igual que en nuestra guía de la barra lateral de complementos, cambiamos el interruptor de inicio de sesión requerido, actualizamos una publicación cerrada, la apagamos y actualizamos la publicación nuevamente. Cuando se activa, no podemos acceder a la publicación.

El nombre de nuestra barra lateral es wholesomecode-wholesome-plugin-sidebar'. Si lo deseamos, podemos abrir y cerrar automáticamente esta barra lateral desde cualquier otro lugar del editor. Digamos que tenemos un botón con una acción de clic que hace esto.

El código para abrir la barra lateral de forma dinámica es el siguiente:

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

Del mismo modo, podemos cerrar dinámicamente la barra lateral así:

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

• Eche un vistazo a la creación de bloques secundarios anidados con el InnerBlockscomponente
• Eche un vistazo al uso de metacampos de publicación en bloques de Gutenberg (si aún no lo ha hecho) y metaboxes personalizados controlados por componentes de Gutenberg
• Eche un vistazo a la creación de una página de configuración con Gutenberg Components