Abbiamo esaminato le barre laterali dei blocchi personalizzate, le barre laterali dei blocchi di terze parti tramite InspectorControls e come aggiungere controlli alla barra laterale dei post. In questa guida vedremo come inserire i nostri controlli nella loro barra laterale personalizzata.
La nostra barra laterale personalizzata
Lo screenshot qui sopra mostra cosa costruiremo. Per la maggior parte, modificheremo leggermente il codice che abbiamo creato nella guida Post Sidebar, quindi assicurati di aver completato prima quella guida.
Prerequisiti
- Ho seguito la guida Creazione di un plug-in per l’editor di blocchi di WordPress (Gutenberg).
- Leggi le precedenti guide della barra laterale (barra laterale per un blocco personalizzato e barra laterale per un blocco esistente )
- Ho seguito la guida Aggiungi controlli alla barra laterale del post con la guida PluginDocumentSettingPanel
Utilizzeremo il codice della guida Post Sidebar, quindi se non hai completato quella guida, fallo. Va bene, aspetterò.
Apri il /components/Sidebar.jsfile che hai creato nella guida precedente. Sostituiremo la riga che importa il PluginDocumentSettingPanelcon il seguente codice:
import { PluginSidebar, PluginSidebarMoreMenuItem } from '@wordpress/edit-post';
Ora sostituisci il markup <PluginDocumentSettingPanel...con <PluginSidebar...e lavoro fatto! Destra?
Ebbene sì e no. Questo ci dà una barra laterale, ma è brutto! Abbiamo bisogno di alcuni pannelli in modo che i controlli siano formattati correttamente.
Anche la barra laterale non è presente nel menu "Opzioni". Per risolvere questo abbiamo bisogno di implementare PluginSidebarMoreMenuItem.
Modifica /components/Sidebar.jsdi nuovo e incolla il codice seguente:
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>
);
}
}
È meglio, abbiamo usato lo stesso identico codice del nostro precedente esempio della barra laterale del post, ma ora sembra la parte.
Ora che abbiamo il nostro codice in atto, non dimenticare di eseguire npm startper compilarlo e ora dovrebbe apparire come segue:
La nostra barra laterale personalizzata in azione
Come nella nostra guida alla barra laterale dei plug-in, cambiamo l’interruttore di accesso richiesto, aggiorniamo un post disconnesso, lo riattiviamo e aggiorniamo nuovamente il post. Se attivato, non possiamo accedere al post.
Il nome della nostra barra laterale è wholesomecode-wholesome-plugin-sidebar'. Se lo desideriamo, possiamo aprire e chiudere automaticamente questa barra laterale da un’altra parte dell’editor. Diciamo che abbiamo un pulsante con un’azione di clic che fa questo.
Il codice per aprire dinamicamente la barra laterale è il seguente:
wp.data.dispatch('core/edit-post').openGeneralSidebar( 'wholesomecode-wholesome-plugin-sidebar/wholesomecode-wholesome-plugin-sidebar' );
Allo stesso modo possiamo chiudere dinamicamente la barra laterale in questo modo:
wp.data.dispatch('core/edit-post').closeGeneralSidebar( 'wholesomecode-wholesome-plugin-sidebar/wholesomecode-wholesome-plugin-sidebar' );
- Dai un’occhiata alla creazione di blocchi figlio nidificati con il
InnerBlockscomponente - Dai un’occhiata all’utilizzo dei meta campi post nei blocchi Gutenberg (se non l’hai già fatto) e nelle meta box personalizzate guidate da componenti Gutenberg
- Dai un’occhiata alla creazione di una pagina delle impostazioni con i componenti Gutenberg