Crea un blocco Gutenberg personalizzato – Parte 5: Impostazioni dell’ispettore

Nei passaggi precedenti abbiamo appreso le nozioni di base su come eseguire il rendering di componenti e attributi in un blocco. In questo passaggio ci concentreremo su ciò che WordPress (almeno nel codice) chiama Inspector: la barra laterale sul lato destro nell’editor. Toccheremo alcuni nuovi componenti che hanno senso posizionare nella barra laterale e come gestirli.

Componente Ispettore/barra laterale

Per inserire le impostazioni personalizzate e l’HTML nella barra laterale di Inspector, avvolgerai tutto all’interno di un componente chiamato InspectorControls. Qualunque cosa tu metta all’interno di questo componente verrà emessa nella barra laterale e non all’interno del blocco/editor stesso. Puoi praticamente mettere il componente e il suo contenuto ovunque nella restituzione della editfunzione.

A parte questo, gestiresti le impostazioni all’interno della barra laterale come se fossero all’interno del blocco. Ogni impostazione richiede un attributo e tu carichi e aggiorni gli attributi allo stesso modo.

Diamo prima una rapida occhiata a come appare la barra laterale del nostro blocco (quando il nostro blocco è attivo nell’editor), in base al codice che abbiamo trovato nel passaggio precedente.

Tutti i blocchi mostreranno per impostazione predefinita l’icona, il nome e la descrizione del blocco e la sezione Avanzate – compresso. All’interno di Advanced troverai un input di testo per fornire una classe CSS per il blocco.

Aggiunta di una sezione della barra laterale e di alcune impostazioni

La barra laterale è suddivisa in sezioni (denominate pannelli nel codice) e per un design e una funzionalità ottimali (inclusa la funzionalità di compressione aperta) dovremmo utilizzare i componenti di WordPress per produrre correttamente i pannelli.

Utilizza il componente PanelBodyper aggiungere una sezione (quelle che puoi aprire o comprimere), che si trova nel wp.componentspacchetto. Il componente accetta alcuni oggetti di scena, ad esempio per il titolo e se il pannello deve essere aperto o chiuso come predefinito. Puoi anche fornire una classe personalizzata, un’icona e allegare una funzione evento al trigger di apertura-chiusura.

All’interno PanelBodydi WordPress consiglia quindi di utilizzare il PanelRowcomponente che agisce come contenitori generici all’interno del pannello, per garantire la razionalizzazione del design. Questo componente applica automaticamente uno stile di margine e riga flessibile per i tuoi contenuti. A causa dello flex-direction: rowstile " ", dovresti avvolgere ogni impostazione all’interno di uno PanelRow. Oppure puoi saltarlo del tutto e assumerti la responsabilità di modellarlo tu stesso con div e simili.

Aggiunta di un pannello e delle impostazioni

Aggiungiamo un pannello della barra laterale per il nostro blocco con alcune impostazioni all’interno, solo per vederlo in pratica. Aggiungeremo un controllo di attivazione/disattivazione, un input selezionato, un colorpicker e una casella di controllo, solo per fare un po’ di esperienza con diversi tipi di componenti di input. Ho lasciato il contenuto del blocco (con le due RichTexts) e la savefunzione proprio come prima.

Come sempre iniziamo destrutturando i componenti e la funzione che vogliamo utilizzare. All’interno definiamo un attributo per input e abbiniamo il tipo, ad esempio il controllo toggle si aspetta un valore booleano e poiché i valori del menu a discesa sono stringhe anche quell’attributo dovrebbe essere una stringa di tipo attributes.registerBlockType()

Alla riga #41iniziamo il InspectorControlscomponente e tutto da quel punto fino alla riga #80apparirà nella barra laterale. Il resto apparirà all’interno dell’editor stesso e non ho apportato modifiche lì.

All’interno creiamo prima un pannello con PanelBodye con il prop initialOpenimpostato su true diciamo a Gutenberg che questo pannello dovrebbe essere aperto per impostazione predefinita. E poi sta a noi cosa aggiungere all’interno di ogni PanelRow.

Per il componente ToggleControlutilizziamo gli stessi prop come abbiamo fatto prima con gli input di testo, tranne per il fatto che al posto del prop valueforniamo il valore dell’attributo all’interno del prop checked. Questo si applica a tutti gli input che si aspettano un attributo selezionato in HTML semplice, ad esempio le caselle di controllo. Per i pulsanti di opzione useresti il ​​supporto selectedin quanto questo è ciò che useresti anche nel semplice HTML. Tieni presente che l’attributo per questo input deve essere di tipo boolean.

Per quanto riguarda la CheckboxControlgestione di una casella di controllo singolare funziona esattamente come ToggleControl: restituisce un booleano indipendentemente dal fatto che sia selezionato o meno.

Il SelectControlgenera un menu a tendina select e si aspetta le possibili scelte come un array nel prop options. Ogni elemento deve essere un oggetto con le proprietà labele value. Lo stesso vale per le caselle di controllo e i pulsanti di opzione (RadioControl). In circostanze normali probabilmente genereresti le scelte come variabile al di fuori dell’output HTML.

Potresti notare che ColorPickerfunziona in modo leggermente diverso dagli altri poiché si tratta di un componente più complesso e non di un input HTML standard. Fornisci il supporto colorper il colore salvato e invece di onChange(si attiva una volta quando si fa clic ma anche ogni volta che il valore viene modificato durante il trascinamento, il che può causare molti incendi) utilizzare onChangeComplete. Il prop restituito in questo evento è anche un oggetto in cui dobbiamo decidere quale parte vogliamo salvare nel nostro attributo. In questo esempio vogliamo salvare il valore esadecimale (senza alfa/opacità), quindi all’interno setAttributes()estraiamo la hexproprietà colordell’oggetto restituito. Anche per questo aggiungiamo la proprietàdisableAlphacome rimuovere l’interfaccia utente del canale alfa (per controllare l’opacità) poiché non ha senso offrire all’utente questo quando non salviamo mai il valore di opacità.

Ciascuno dei componenti ha un labelsupporto disponibile tranne il colorpicker. Se vuoi produrre un’etichetta o un testo prima di esso, dovrai giocherellare con HTML o stile per assicurarti che abbia un bell’aspetto.

Ovviamente puoi aggiungere tutti i pannelli che vuoi, basta aggiungere un altro PanelBodycomponente dopo il precedente.

Se sei interessato a saperne di più sull’aggiunta di impostazioni di blocco, ho tutorial separati per impostazioni e componenti più complessi per Inspector; Come aggiungere una selezione di immagini e come aggiungere un pannello delle impostazioni del colore.

Gestionesave

Ho lasciato la savefunzione come era prima. Dipende da te e tutto dipende da ciò che le impostazioni controllano nell’output. Sai già come ottenere i valori di ogni impostazione. Ad esempio, supponiamo che l’attributo booleano activateLaserscontrolli se un elemento HTML personalizzato viene visualizzato o meno. Se l’attributo è trueun div dovrebbe essere emesso, altrimenti no. Potresti farlo con il tradizionale se-check o utilizzare l’inline ife l’ &&operatore di JSX. Maggiori informazioni su questo nella guida di React per il rendering condizionale.

Poiché utilizziamo RichTextquesto output non sarebbe visibile nell’editor, ma apparirà nel frontend.

Troverai più componenti nel wp.components repository Github. La maggior parte di queste cartelle dovrebbe fornire un file readme con della documentazione su come utilizzarlo. Ho imparato la maggior parte di questo guardando in questo repository e anche sui componenti principali di WordPress come hanno fatto.

Nella fase successiva della serie ci concentreremo su come controllare la barra degli strumenti del blocco. Impareremo come gestire, ad esempio, l’allineamento di un blocco e aggiungere pulsanti personalizzati alla barra degli strumenti.