Crie uma barra lateral personalizada com o PluginSidebar

Demos uma olhada nas barras laterais de bloco personalizadas, barras laterais de bloco de terceiros via InspectorControls e como adicionar controles à barra lateral de postagem. Neste guia, veremos como colocar nossos controles em sua própria barra lateral personalizada.

Nossa barra lateral personalizada

A captura de tela acima mostra o que vamos construir. Na maioria das vezes, vamos apenas alterar um pouco o código que construímos no guia Post Sidebar, portanto, certifique-se de ter concluído esse guia primeiro.

Pré-requisitos

• Ter seguido o guia Criando um Plugin para o Editor de Blocos do WordPress (Gutenberg)
• Leia os guias anteriores da barra lateral (barra lateral para um bloco personalizado e barra lateral para um bloco existente )
• Seguiu o guia Adicionar controles à barra lateral de postagem com PluginDocumentSettingPanel

Vamos usar o código do guia Post Sidebar, portanto, se você não tiver concluído esse guia, faça isso. Está tudo bem, vou esperar.

Abra o /components/Sidebar.jsarquivo que você criou no guia anterior. Vamos substituir a linha que importa o PluginDocumentSettingPanelpelo seguinte código:

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

Agora substitua a marcação <PluginDocumentSettingPanel...por <PluginSidebar...e trabalho feito! Certo?

Bem, sim e não. Isso nos dá uma barra lateral, mas é feio! Precisamos de alguns painéis para que os controles sejam formatados corretamente.

Além disso, a barra lateral está faltando no menu ‘Opções’. Para resolver isso, precisamos implementar o PluginSidebarMoreMenuItem.

Edite /components/Sidebar.jsnovamente e cole o seguinte 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>
        );
    }
}

Isso é melhor, nós usamos exatamente o mesmo código do nosso exemplo de barra lateral do post anterior, mas agora parece a parte.

Agora que temos nosso código no lugar, não se esqueça de executá npm start-lo para compilá-lo, e agora deve se parecer com o seguinte:

Nossa barra lateral personalizada em ação

Como em nosso guia da barra lateral de plugins, alternamos a alternância de login obrigatório, atualizamos uma postagem desconectada, desligamos novamente e atualizamos a postagem novamente. Quando alternado, não podemos acessar a postagem.

O nome da nossa barra lateral é wholesomecode-wholesome-plugin-sidebar'. Se desejarmos, podemos abrir e fechar automaticamente esta barra lateral de outro lugar no editor. Digamos que temos um botão com uma ação de clique que faz isso.

O código para abrir a barra lateral dinamicamente é o seguinte:

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

Da mesma forma, podemos fechar dinamicamente a barra lateral assim:

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

• Dê uma olhada na criação de blocos filho aninhados com o InnerBlockscomponente
• Dê uma olhada no uso de meta campos post em blocos Gutenberg (se você ainda não o fez) e caixas meta personalizadas guiadas por componentes Gutenberg
• Dê uma olhada na criação de uma página de configurações com os componentes do Gutenberg