Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. WordPress Gutenberg
Code

Block API di WordPress Gutenberg: estendere i blocchi

by
Difficulty:IntermediateLength:MediumLanguages:
This post is part of a series called WordPress Gutenberg Block API.
WordPress Gutenberg Block API: Creating Custom Blocks

Italian (Italiano) translation by Cinzia Sgariglia (you can also view the original English article)

Bentornati alla nostra serie sulla creazione di blocchi personalizzati con l'API Block di Gutenberg di WordPress. Questo tutorial è tutto sull'estensione del blocco immagine casuale che abbiamo creato nel post precedente. Siamo arrivati fin qui aggiungendo un controllo per il menu a discesa per selezionare una categoria di immagini. Continueremo con l'aggiunta di ulteriori opzioni di blocco per consentire la personalizzazione.

In particolare, vedremo come aggiungere le impostazioni del blocco in varie parti dell'editor. È vero, che non vi siete solo limitati ad aggiungere controlli di blocco direttamente sul blocco!

Il codice finale del plugin del mio-blocco-personalizzato è disponibile per il download. Basta fare clic sul collegamento nella barra laterale a destra e scaricare il file zip sul vostro computer e installarlo come si farebbe con qualsiasi altro plugin di WordPress. Potete anche trovare il codice sorgente nel nostro repository su GitHub.

Lo sviluppo di Gutenberg procede velocemente al giusto ritmo, e c'è stato un nuovo rilascio significativo dall'ultimo tutorial che è stato pubblicato. La versione di Gutenberg utilizzata in questo tutorial è stata aggiornata alla 3.0.1, e qualcosa dell'interfaccia utente dell'editor può apparire leggermente diversa dagli screenshot mostrati nel tutorial precedente di questa serie.

Estendiamo!

Il controllo del menu a discesa che abbiamo aggiunto nel precedente tutorial era situato all'interno dell'editor, direttamente sotto il markup per l'immagine casuale. Questo era molto conveniente, ma abbiamo anche altre scelte.

Possiamo anche aggiungere dei controlli del blocco per una barra a comparsa (che appare quando è selezionato un blocco) e un pannello di ispezione del blocco.

Block control locations

Nella schermata sopra, possiamo vedere i controlli della barra degli strumenti per il blocco del paragrafo [1], così come i controlli associati nella finestra di ispezione del pannello [3]. La posizione [2] illustra il controllo del menu a discesa per il nostro blocco per l'immagine casuale.

Potreste già pensare a quale posizione sceglierete per le vostre impostazioni del blocco, ma non dovete scegliere solo uno di questi percorsi. Non si escludono a vicenda. A esempio, per il blocco di paragrafo (vedi sopra), potete vedere che le impostazioni sono suddivise tra il pannello di ispezione del blocco e la barra degli strumenti.

Inoltre, è perfettamente OK avere due controlli separati in diverse posizioni nell'editor che interessano la stessa impostazione. Potreste non voler farlo troppo spesso, ma è utile sapere come realizzarlo, quindi vedremo come farlo un po' più avanti.

Impostazioni del blocco diretto

Cominciamo con il modo più semplice per aggiungere funzionalità al vostro blocco, che è direttamente all'interno della funzione edit del blocco. Abbiamo già abbiamo utilizzato questo approccio per aggiungere il nostro controllo per il menu a discesa dell'immagine casuale perché richiede poco sforzo supplementare.

Non andremo oltre l'aggiunta di nuovi controlli per il blocco stesso, ma possiamo modificare il comportamento del controllo del menu a discesa per essere un po' più intuitivo. Per renderlo il più vicino possibile al front end, possiamo limitare che il menu a discesa sia visualizzato a meno che il blocco venga selezionato.

Facciamo ora questo cambiamento. Se state seguendo questo tutorial dall'ultima volta allora aprite /my-custom-block/src/random-image/index.js nel vostro editor preferito. Questo è il principale file JavaScript per il nostro blocco per l'immagine casuale.

Uno dei props passati a tutti i blocchi è isSelected, che detiene lo status della visibilità del blocco. Possiamo usarlo per visualizzare in modo condizionale il controllo del menu a discesa della categoria.

In primo luogo, tirate fuori isSelected dall'oggetto props e aggiungetelo al menu delle costanti all'interno della funzione edit. Si tratta di un utile modo a cui possiamo fare riferimento con un nome abbreviato (cioè isSelected anziché props.isSelected).

Successivamente, possiamo utilizzare questa proprietà per determinare se il controllo del menu a discesa deve essere visualizzato:

Si tratta di una forma abbreviata di testare che isSelected sia true, poiché non possiamo usare un'istruzione JavaScript completa if all'interno di codice JSX.

Assicuratevi che state ancora guardando i file per le modifiche poiché qualsiasi codice sorgente del blocco (JSX, ES6 +, Sass, ecc.) è tradotto in JavaScript e CSS validi. Se non state attualmente guardando i file per le modifiche, allora aprite una finestra a riga di comando all'interno della cartella radice del plugin mio-blocco-personalizzato e immettete npm start.

Aprite l'editor Gutenberg e aggiungete il blocco per l'immagine casuale. Questa volta, il controllo del menu a discesa non è visibile se sul blocco non è ancora stato fatto clic.

Conditional Block Control

Questo dà al blocco una sensazione molto più interattiva.

I controlli della barra degli strumenti

Se avete utilizzato uno dei core dei blocchi di Gutenberg (a esempio il blocco del paragrafo), allora avrete familiarità con le impostazioni della barra degli strumenti. Non appena il blocco del paragrafo è selezionato, una barra a comparsa viene visualizzata contenente pulsanti per la formattazione del testo. Questo tipo di controllo è favoloso per le impostazioni del blocco che hanno un tipo di stato on/off — a esempio, l'allineamento del testo o la formattazione come grassetto o corsivo.

Useremo il controllo della barra degli strumenti dell'allineamento integrata per consentire al controllo della categoria a discesa dell'immagine di stare a sinistra (impostazione predefinita), a destra, o allineato al centro.

In primo luogo, abbiamo bisogno di prendere i componenti AlignmentToolBar e BlockControls da wp.blocks. Questi vi permettono di visualizzare i controlli di allineamento all'interno di una barra degli strumenti mobile sopra il nostro blocco quando è selezionato. Sono parte dei componenti di base che possiamo usare nei nostri blocchi.

I componenti BlockControls agiscono come contenitore della barra degli strumenti, e AlignmentToolbar è posizionato all'interno.

Abbiamo ancora bisogno di collegare il comportamento della barra degli strumenti di allineamento manualmente, cosa che possiamo fare con l'aggiunta di un nuovo attributo categoryAlign per memorizzare lo stato di allineamento del blocco (sinistra, destra o al centro).

Il nostro oggetto attributes ora contiene due impostazioni.

Il valore predefinito per l'attributo categoryAlign è una stringa vuota, che si tradurrà in nessun allineamento applicato per impostazione predefinita.

Per fare riferimento al nuovo attributo, possiamo estrarre questo valore dalla propria variabile costante allo stesso modo che abbiamo fatto per l'attributo di menu a discesa category.

Tutto quello che dobbiamo fare ora è rilasciare i due nuovi componenti della funzione edit e configurare le proprietà.

Come potete vedere tutto quello che dovevamo fare era di assegnare l'attributo value di Alignmenttoolbar all'attributo categoryAlign e chiamare la funzione setAttributes ogni volta che un nuovo pulsante della barra degli strumenti è stato cliccato. Questa funzione, a sua volta, aggiorna l'attributo categoryAlign e mantiene tutto sincronizzato.

Per applicare lo stile di allineamento del controllo del menu a discesa, abbiamo bisogno di aggiungere una proprietà di stile per il nostro elemento form.

Control Alignment

Notate che non abbiamo bisogno di questo controllo per incidere in qualche modo sul front-end, quindi non abbiamo bisogno di aggiungere alcun codice per la funzione del blocco save.

Aggiungere un pannello impostazioni

Il pannello di ispezione del blocco vi offre una grande area per aggiungere controlli del blocco ed è un'ottima posizione per i controlli più complessi.

Ci concentreremo su come aggiungere due controlli con menu a discesa per il pannello di ispezione. Il primo sarà un duplicato del controllo con menu a discesa della categoria per selezionare il tipo di immagine casuale. Questo dimostra come avere più di un controllo aggiornando un attributo comune.

Quando un controllo viene aggiornato, anche quello corrispondente verrà automaticamente aggiornato! In pratica, però, di solito volete solo un controllo per ogni impostazione.

Il secondo controllo con menu a discesa vi consente di selezionare il filtro applicato all'immagine casuale. Il servizio web PlaceIMG supporta due tipi di filtro — in scala di grigi e seppia — e possiamo scegliere tra loro semplicemente aggiungendo sepia o grayscale all'URL della richiesta HTTP. Se non specificate un filtro quindi verrà restituita un'immagine colorata standard.

Il codice per i due menu a discesa è piuttosto simile, quindi li aggiungeremo insieme.

Prima di tutto, cerchiamo di definire i nuovi blocchi e i componenti di cui abbiamo bisogno.

Qui, le nuove variabili sono InspectorControls, PanelBody, PanelRow e Fragment, che sono tutti utilizzati per aiutare a creare il pannello di ispezione dell'interfaccia utente.

Il componente <Fragment> è molto utile quando avete bisogno di restituire elementi di livello superiore multipli dalle funzioni edit e save ma non volete avvolgerli in un elemento che sarà prodotto.

<Fragment> non produce nessun markup sul front-end e agisce come un contenitore invisibile. È solo un modo conveniente per restituire più elementi di livello superiore ed è un'alternativa al metodo precedente di restituire un array di elementi.

Abbiamo solo bisogno di aggiungere un nuovo attributo denominato imageFilter poiché l'attributo category esistente può essere riutilizzato.

All'interno della funzione edit, abbiamo bisogno di aggiungere una nuova variabile con riferimenti al nuovo attributo.

Aggiungere un pannello di controllo del blocco è sorprendentemente facile. La struttura del componente che useremo è la seguente:

Il componente <InspectorControls> funge da contenitore di ispettore dei blocchi, e <PanelBody> definisce le singole sezioni comprimibili. All'interno di ciascuno di questi, si può avere un numero qualsiasi di componenti <PanelRow>, che a loro volta contengono i controlli.

Abbiamo già definito il markup per il nostro controllo a discesa della categoria che possiamo riutilizzare. Per effettuare questa operazione, trasformiamolo in una funzione separata:

Si può fare riferimento a questa funzione ogni volta che abbiamo bisogno del controllo con menu a discesa della categoria prodotta. Il markup per il pannello di ispezione del blocco deve essere fuori dal codice del blocco, quindi possiamo usare il componente <Fragment> per avvolgerli entrambi prima che vengano restituiti.

Poi, abbiamo bisogno di aggiungere i componenti di ispettore del blocco per la categoria e il filtro dell'immagine con i menu a discesa. Questi devono essere definiti all'interno dei componenti <PanelRow> e dobbiamo anche definire una nuova funzione di callback per gestire l'evento onChange. Questo è molto simile al codice della categoria con menu a discesa dell'ultimo tutorial, quindi dovrebbe esservi familiare adesso.

Mettendo tutto insieme, la funzione return del metodo edit ora assomiglia a questo:

E il callback setFilter è definito come:

Per ottenere l'immagine filtrata, abbiamo bisogno di aggiornare il componente RandomImage affinché accetti il nuovo valore del filtro ogni volta che viene modificato il menu a discesa.

Notate come stiamo usando questa nuova proprietà del componente nel metodo edit per inviare il nuovo valore del filtro a PlaceIMG.

Tutti questi cambiamenti del codice risultano in un nuovo pannello di ispettore del blocco che viene creato con due controlli con menu a discesa per modificare la categoria  immagine e filtro.

Block Inspector Controls

Per ottenere la nuova proprietà del filtro funzioni anche per il front-end, abbiamo solo bisogno di aggiornare il metodo save.

Frontend Image Filter

Conclusione

In questo post, abbiamo coperto tre diversi metodi per aggiungere le impostazioni a un blocco:

  • barra a comparsa
  • direttamente sul blocco
  • pannello di ispezione del blocco

Abbiamo aggiunto solo le impostazioni di base per ogni blocco, ma potevamo facilmente andare oltre aggiungendo il supporto per le immagini multiple, l'aggiunta di didascalie alle immagini e controllando gli stili come il colore del bordo, il raggio o il formato dell'immagine casuale.

Sono sicuro che ormai probabilmente avete alcune idee per la creazione dei  vostri blocchi personalizzati. Mi piacerebbe sentire che tipo di blocchi trovereste utili nei vostri progetti!

Abbiamo appena iniziato con Gutenberg qui su Envato Tuts+, così se ci sono aspetti particolari dello sviluppo del blocco di Gutenberg che vi piacerebbe vedere in modo più approfondito in un futuro tutorial, fatecelo sapere tramite i commenti.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.