Share
Bentornati alla nostra serie sulla creazione di blocchi personalizzati con l'API di WordPress Gutenberg Block. Questo tutorial si occupa di estendere il blocco di immagini casuali che abbiamo creato nel post precedente. Siamo arrivati ad aggiungere un controllo a discesa per selezionare una categoria di immagini. Continueremo con questo aggiungendo ulteriori opzioni di blocco per consentire ulteriori personalizzazioni.
Nello specifico, vedremo come aggiungere impostazioni di blocco in varie parti dell'editor. Esatto, non sei solo limitato ad aggiungere i controlli di blocco direttamente sul blocco stesso!
Il finale my-custom-block il codice del plugin è disponibile per il download. Basta fare clic sul collegamento nella barra laterale a destra e scaricare il file zip sul computer e installarlo come faresti con qualsiasi altro plug-in di WordPress. Puoi anche trovare il codice sorgente nel nostro repository GitHub.
Lo sviluppo di Gutenberg sta procedendo a un buon ritmo e c'è stata una nuova versione significativa dall'ultima esercitazione. La versione di Gutenberg usata in questo tutorial è stata aggiornata alla 3.0.1, e alcune delle interfacce utente dell'editor possono apparire leggermente diverse dagli screenshot mostrati nei precedenti tutorial di questa serie.
Il controllo a discesa aggiunto nel tutorial precedente si trovava all'interno dell'editor, direttamente sotto il markup per l'immagine casuale. Questo era conveniente, ma abbiamo anche altre scelte.
Possiamo anche aggiungere controlli di blocco a una barra degli strumenti a comparsa (che viene visualizzata quando viene selezionato un blocco) e un pannello di ispezione a blocchi.
Nello screenshot qui sopra, possiamo vedere i controlli della barra degli strumenti per il blocco paragrafo [1], così come i controlli associati nell'ispettore del pannello [3]. Posizione [2] mostra il controllo a discesa per il nostro blocco immagine casuale.
Potresti già pensare a quale posizione scegliere per le proprie impostazioni di blocco, ma non devi scegliere solo una di queste posizioni. Non si escludono a vicenda. Ad esempio, per il blocco di paragrafo (mostrato sopra), è possibile vedere che le impostazioni sono suddivise tra il pannello dell'ispettore di blocco e la barra degli strumenti.
Inoltre, è perfettamente OK avere due controlli separati in diverse posizioni nell'editor che influenzano il stesso ambientazione. Potresti non volerlo fare troppo spesso, ma è utile sapere come implementarlo, quindi vedremo come farlo un po 'più avanti.
Iniziamo con il modo più semplice per aggiungere funzionalità al blocco, che è direttamente all'interno del blocco modificare funzione. Abbiamo già utilizzato questo approccio per aggiungere il controllo a discesa delle immagini casuali perché richiede pochissimi sforzi aggiuntivi.
Non andremo oltre ad aggiungere nuovi controlli al blocco stesso, ma possiamo modificare il comportamento del controllo a discesa per renderlo un po 'più intuitivo. Per renderlo il più vicino possibile al front-end, possiamo restringere l'elenco a meno che non sia selezionato il blocco.
Facciamo questo cambiamento ora. Se stai seguendo questo tutorial dall'ultima volta, apri /my-custom-block/src/random-image/index.js nel tuo editor preferito. Questo è il principale file JavaScript per il nostro blocco di immagini casuali.
Uno degli oggetti di scena passati a tutti i blocchi è è selezionato, che mantiene lo stato della visibilità del blocco. Possiamo usarlo per visualizzare in modo condizionale il controllo a discesa della categoria.
Innanzitutto, tira fuori è selezionato dal oggetti di scena oggetto e aggiungilo all'elenco delle costanti all'interno di modificare funzione. Questo è utile in modo che possiamo fare riferimento a un nome abbreviato (ad es. è selezionato piuttosto che props.isSelected).
const attributes: category, setAttributes, isSelected = props;
Successivamente, possiamo usare questa proprietà per determinare se il controllo a discesa debba essere visualizzato:
è selezionato && ()
Questo è un modo sintetico per testarlo è selezionato è vero, dal momento che non possiamo usare un JavaScript completo Se dichiarazione all'interno del codice JSX.
Assicurati di continuare a guardare i file per le modifiche in modo che qualsiasi codice sorgente di blocco (JSX, ES6 +, Sass, ecc.) Venga trasposto in JavaScript e CSS validi. Se al momento non stai guardando i file per le modifiche, apri una finestra della riga di comando all'interno di my-custom-block plug-in cartella principale e invio inizio di npm.
Apri l'editor Gutenberg e aggiungi il blocco immagine casuale. Questa volta, il controllo a discesa non è visibile se il blocco non è stato ancora fatto clic.
Ciò conferisce al blocco un aspetto molto più interattivo.
Se hai utilizzato uno dei blocchi Gutenberg principali (come il blocco di paragrafo), avrai familiarità con le impostazioni della barra degli strumenti. Non appena viene selezionato il blocco Paragrafo, viene visualizzata una barra degli strumenti a comparsa contenente i pulsanti per la formattazione del testo. Questo tipo di controllo è ottimo per le impostazioni di blocco che hanno uno stato di tipo on / off, ad esempio allineamento del testo o formattazione come grassetto o corsivo.
Useremo il controllo della barra degli strumenti di allineamento integrato per consentire il controllo della categoria di immagini a discesa (predefinito), destra o allineato al centro.
In primo luogo, abbiamo bisogno di tirare fuori il AlignmentToolBar e BlockControls componenti da wp.blocks. Questi ci permettono di mostrare i controlli di allineamento all'interno di una barra degli strumenti mobile sopra il nostro blocco quando è selezionato. Questi sono parte dei componenti principali che possiamo usare nei nostri blocchi.
const AlignmentToolbar, BlockControls, registerBlockType = wp.blocks;
Il BlockControls componente funge da contenitore della barra degli strumenti e AlignmentToolbar è posto all'interno.
Abbiamo ancora bisogno di collegare manualmente il comportamento della barra degli strumenti di allineamento, cosa che possiamo fare aggiungendo un nuovo categoryAlign attributo per memorizzare lo stato dell'allineamento del blocco (a sinistra, a destra o al centro).
Nostro attributi oggetto ora contiene due impostazioni.
attributes: category: tipo: 'string', default: 'nature', categoryAlign: tipo: 'string' default: "
L'impostazione predefinita per categoryAlign l'attributo è una stringa vuota, che comporterà l'assenza di allineamento applicato di default.
Per fare riferimento al nuovo attributo, possiamo estrapolare questo valore nella sua variabile costante nello stesso modo in cui lo abbiamo fatto per il menu a discesa categoria attributo.
const attributi: categoria, categoriaAlign, setAttributes, isSelected = props;
Tutto quello che dobbiamo fare ora è rilasciare i due nuovi componenti nel modificare funzione e configurare le proprietà.
setAttributes (categoryAlign: valore) />
Come puoi vedere tutto quello che dovevamo fare era assegnare il valore attributo di Alignmenttoolbar a categoryAlign attributo e chiama il setAttributes funzione ogni volta che si fa clic su un nuovo pulsante della barra degli strumenti. Questa funzione a sua volta aggiorna il categoryAlign attributo e mantiene tutto sincronizzato.
Per applicare lo stile di allineamento del controllo a discesa, è necessario aggiungere una proprietà di stile all'elemento del modulo.
);Questa funzione può quindi essere referenziata ogni volta che è necessario il controllo a discesa della categoria renderizzato. Il markup per il pannello di controllo blocco deve essere al di fuori del markup del blocco, in modo che possiamo usare il
Successivamente, è necessario aggiungere i componenti dell'ispettore blocco per i menu a discesa Categoria e Filtro immagine. Questi devono essere definiti all'interno onChange evento. Questo è molto simile al codice a discesa della categoria dell'ultimo tutorial, quindi dovrebbe esserti già familiare.
Mettendo tutto questo insieme, il modificare Il metodo di ritorno la funzione ora è simile a questa:
ritorno (); showForm () setAttributes (categoryAlign: valore) /> isSelected && (showForm ())
E il setFilter la callback è definita come:
Accentsconagua
function setFilter (event) const selected = event.target.querySelector ('# image-filter option: checked'); setAttributes (imageFilter: selected.value); event.preventDefault (); Per ottenere l'immagine filtrata, è necessario aggiornare il RandomImage componente per accettare il nuovo valore del filtro ogni volta che viene modificato il menu a discesa.
function RandomImage (category, filter) if (filter) filter = '/' + filter; const src = 'https://placeimg.com/320/220/' + categoria + filtro; ritorno;
Si noti come stiamo usando questa nuova proprietà del componente in modificare metodo per inviare il nuovo valore del filtro a PlaceIMG.
Tutte queste modifiche al codice determinano la creazione di un nuovo pannello di controllo blocco con due controlli a discesa per modificare la categoria e il filtro dell'immagine.
Per far funzionare la nuova proprietà del filtro anche per il front-end, dobbiamo solo aggiornare il salvare metodo.
save: function (props) const attributes: category, imageFilter = oggetti di scena; ritorno ();
In questo post abbiamo trattato tre diversi metodi per aggiungere impostazioni a un blocco:
Abbiamo aggiunto solo le impostazioni di base per ciascun blocco, ma abbiamo potuto facilmente fare ciò aggiungendo il supporto per più immagini, aggiungendo didascalie di immagini e controllando stili come il colore del bordo, il raggio o la dimensione dell'immagine casuale.
Sono sicuro che ormai avrai probabilmente qualche idea per creare i tuoi blocchi personalizzati. Mi piacerebbe sapere che tipo di blocchi potresti trovare utile nei tuoi progetti!
Abbiamo appena iniziato con Gutenberg qui su Envato Tuts +, quindi se ci sono particolari aspetti dello sviluppo di blocchi di Gutenberg che vorresti vedere trattati in modo più approfondito nei tutorial futuri, ti preghiamo di comunicarcelo tramite i commenti.
