In questo post impareremo come aggiungere le barre degli strumenti di WordPress al nostro blocco, ovvero per l’allineamento e l’allineamento dei blocchi. Impareremo anche ad aggiungere le nostre barre degli strumenti con i nostri pulsanti per eseguire azioni personalizzate.
Aggiunta di barre degli strumenti
Per aggiungere qualcosa alla barra degli strumenti per il nostro blocco, dovremo racchiudere ciò che vogliamo in esso all’interno di un componente chiamato BlockControls(da wp.blockEditor). All’interno di questo componente possiamo aggiungere uno dei componenti di WordPress per le barre degli strumenti standard che conosciamo da altri blocchi (ad esempio l’allineamento) oppure possiamo aggiungere la nostra barra degli strumenti.
Di default un blocco avrà una barra degli strumenti contenente solo l’icona del blocco (per la funzionalità Trasforma in) e il menu del blocco per es. rimuovere il blocco. Non possiamo rimuoverli, ma possiamo aggiungere i nostri pulsanti e barre degli strumenti nel mezzo.
Tuttavia, alcuni componenti di WordPress aggiungeranno da soli le proprie barre degli strumenti. A partire da ora il nostro blocco mostra una barra degli strumenti per la formattazione del testo che proviene dal RichTextcomponente che abbiamo aggiunto.
Aggiunta di una barra degli strumenti di allineamento dei blocchi
La barra degli strumenti di allineamento dei blocchi esiste praticamente su tutti i tipi di blocchi di WordPress, quindi aggiungiamo anche quella al nostro blocco. Dietro le quinte esiste un componente BlockAlignmentToolbarche potremmo aggiungere, tuttavia mi raccomando di non farlo. Il suo utilizzo richiede di gestire manualmente le classi per l’allineamento dei blocchi e assicurarsi che il blocco estenda la sua larghezza nell’editor quando si sceglie "Larghezza ampia" o "Larghezza intera". Fortunatamente WordPress ha reso davvero semplice l’implementazione, completamente automatica.
PS: il tema attivo deve avere attivamente aggiunto il supporto del tema per questi due allineamenti di blocchi. Puoi aggiungere il supporto per questi avendo add_theme_support('align-wide')nel after_setup_themegancio.
Possiamo aggiungere una nuova proprietà alla nostra configurazione di oggetti in registerBlockType(), chiamata supports. Ci sono alcune altre funzionalità, ma ciò che ci interessa qui è align. Possiamo impostare alignper trueaggiungere tutti i possibili allineamenti, oppure possiamo fornire una matrice di esattamente quali allineamenti consentiamo per il nostro blocco.
Il che ci dà questo nell’editor:
Se si desidera, ad esempio, impedire a chiunque di utilizzare Wide Width o Full Width, è possibile fornire un array ed escludere quei due. I nomi degli allineamenti dei blocchi sono i seguenti: left, right, center, wide, e full.
supports: {
align: ['left', 'right', 'center']
},Hai bisogno di un allineamento predefinito?
Per impostazione predefinita, il blocco non ottiene alcun allineamento del blocco. Se lo desideri, puoi impostare un valore predefinito creando un attributo con la chiave align, imposta il tipo su stringe imposta lì il valore predefinito. WordPress collegherà automaticamente questo attributo all’allineamento dei blocchi.
attributes: {
align: {
type: 'string',
default: 'center'
}
},
supports: {
align: true
},Con questo ogni volta che viene creato un nuovo blocco del nostro tipo, l’allineamento del blocco predefinito è centrato.
Blocca il disordine dello stile di allineamento? Non è colpa nostra
Nota: lo stile di blocco predefinito di WordPress rovinerà il flusso del contenuto del tuo post quando utilizzi l’allineamento dei blocchi sinistro e destro. La stessa cosa accade anche con altri tipi di blocchi di WordPress e non è esclusivamente un problema del nostro blocco. Ciò è causato dall’aggiunta di float all’elemento, che comprime l’elemento padre. Credimi, ho provato a costruire il blocco per evitare questo problema. L’unica cosa che ho scoperto che funziona correttamente senza pasticciare con gli altri allineamenti di blocchi è l’aggiunta di uno stile all’editor e la regolazione dello stile del float.
Indipendentemente da ciò, WordPress ha semplificato l’implementazione dell’allineamento dei blocchi. Ora diamo un’occhiata ad altre barre degli strumenti che possiamo usare.
Aggiunta di una barra degli strumenti di allineamento del testo
Se preferisci la barra degli strumenti per l’allineamento del testo, puoi farlo invece dell’allineamento a blocchi: in questa barra degli strumenti abbiamo solo l’allineamento a sinistra, al centro e a destra. In effetti, puoi utilizzare sia l’allineamento del testo che l’allineamento dei blocchi insieme: funzionano separatamente. Per non confondere gli utenti, puoi ad esempio aggiungere solo il supporto per l’allineamento dei blocchi a larghezza e larghezza intera e utilizzare la barra degli strumenti di allineamento del testo per controllare l’allineamento a sinistra, al centro o a destra. In questo modo eviti il problema sopra menzionato con il flusso di blocchi nell’editor. Sta a te decidere come vuoi che funzioni il tuo blocco.
WordPress ha un componente per l’output della barra degli strumenti di allineamento del testo, tuttavia nessuna gestione automatica dell’aggiunta delle classi corrette per allineare effettivamente il contenuto, sia all’interno dell’editor che nel frontend (per quanto ho scoperto almeno!). Dobbiamo aggiungere e aggiornare manualmente un attributo per l’allineamento del testo.
Aggiunta BlockControlseAlignmentToolbar
Infine aggiungiamo BlockControlsalla nostra editfunzione per il nostro output nella barra degli strumenti. Il componente per l’allineamento del testo AlignmentToolbarproviene dal wp.blockEditorpacchetto.
Nota che ho escluso il contenuto di tutto ciò che abbiamo creato nel InspectorControlspassaggio precedente per abbreviare il codice.
Tra la riga #37e #42l’altro c’è l’intero contenuto della nostra barra degli strumenti (a parte l’allineamento dei blocchi automaticamente aggiunto dalla supportsproprietà e la formattazione del testo aggiunta dai nostri RichTextcomponenti). Usiamo BlockControlsper accedere alla barra degli strumenti e all’interno aggiungiamo il AlignmentToolbarcomponente.
Come abbiamo fatto diverse volte con gli input, forniamo un valuesupporto per mostrare il valore salvato e un onChangesupporto per aggiornare il nostro attributo al AlignmentToolbarcomponente. L’attributo che utilizzeremo per memorizzare l’allineamento del testo scelto è definito textAlignmente deve essere di tipo string. Come al solito puoi fornire un defaultper assicurarti che i blocchi appena creati ottengano un allineamento predefinito.
Per garantire che il blocco emetta le informazioni sull’allineamento e venga anche disegnato correttamente (quindi vediamo effettivamente l’allineamento della modifica del testo) sia nell’editor che nel frontend, è necessario impostare manualmente la classe corretta sul div di wrapping. In entrambi edite savedefinisco una variabile che controlla se attributes.textAlignmentè impostata. Se lo è, costruisco il nome della classe seguendo gli standard di WordPress per gli allineamenti del testo, che è "has-text-align-(left|center|right)". Con questa classe WordPress applicherà il suo stile al nostro blocco e si assicurerà che il nostro blocco venga allineato visivamente correttamente, sia nell’editor che nel frontend.
Aggiunta di barre degli strumenti personalizzate con i nostri pulsanti
Puoi anche aggiungere i tuoi pulsanti nella barra degli strumenti per fare tutto ciò che desideri quando fai clic su di essi. Per fare ciò ti consigliamo di aggiungere il componente Toolbare all’interno di questo elemento aggiungere un IconButton(entrambi nel wp.componentspacchetto). Tutto dentro BlockControlsovviamente.
Nota: secondo WordPress, il log delle modifiche di Gutenberg IconButtonè deprecato a favore dell’utilizzo di Button. Tuttavia, non riesco a visualizzare un’icona utilizzando il Buttoncomponente, indipendentemente da ciò che faccio, anche se dovrebbe supportarlo. Quindi d’ora in poi userò IconButton.
Ovviamente puoi combinare più componenti della barra degli strumenti all’interno di BlockControls. Con il codice qui sotto aggiungiamo la barra degli strumenti di allineamento del testo e la nostra barra degli strumenti personalizzata con un pulsante dopo di essa.
Il componente IconButton accetta un’icona dashicon di WordPress o un SVG per il prop icon. Possiamo fornire alcuni altri oggetti di scena come classNamee label(appariranno nel suggerimento quando si passa il mouse sopra il pulsante). L’elica che ci interessa di più è ovviamente l’ onClickelica che si attiva quando si fa clic sul pulsante. Qui possiamo fornire una funzione e sostanzialmente fare quello che vogliamo. Le possibilità sono infinite e dipendono da cosa vuoi fare. Nel codice sopra ho semplicemente console di registro qualcosa quando si fa clic sul pulsante. Man mano che avanziamo in questa serie di tutorial, probabilmente avrai alcune idee su come fare in modo che il tuo pulsante personalizzato faccia ciò che vuoi che faccia.
Questo è ciò che abbiamo fatto finora. Nella fase successiva della serie inizieremo a guardare cose più avanzate e impareremo come creare i nostri componenti per utilizzare lo stato e altri vantaggi.