✅ Notizie, temi, plugin WEB e WordPress. Qui condividiamo suggerimenti e le migliori soluzioni per siti web.

Tutorial: crea uno slider come blocco Gutenberg dinamico

53

Questo tutorial spiega come creare un blocco Gutenberg di WordPress dinamico. Il risultato finale è un dispositivo di scorrimento che mostra l’immagine in primo piano dai post della categoria selezionata. Il codice include l’utilizzo di un componente di ordine superiore (withSelect) per recuperare tutte le categorie all’interno dell’editor di blocchi.

Cosa faremo

Il blocco eseguirà il rendering di un semplice dispositivo di scorrimento utilizzando lo script jQuery Cycle2. Ma puoi usare qualsiasi altro script di scorrimento. Il blocco all’interno dell’editor visualizzerà un elenco di tutte le categorie consentendo all’utente di selezionare una categoria. Quando si visualizza il blocco nel frontend, recupererà dinamicamente i post dalla categoria scelta e mostrerà le loro immagini in primo piano come diapositive. Questo tutorial lo manterrà abbastanza semplice permettendoti di espandere e regolare il tuo dispositivo di scorrimento come preferisci.

Ho scelto di non eseguire il rendering della presentazione all’interno dell’editor. Di solito ti assicuri che il rendering nell’editor e nel frontend sia lo stesso. Ma nel caso di uno slider mi piace mantenerlo semplice per non far esplodere l’utente con animazioni costanti all’interno dell’editor.

Il blocco avrà solo due impostazioni; la scelta della categoria e il numero di diapositive (post). Consiglio di aggiungere più impostazioni come la velocità di scorrimento, le impostazioni per la visualizzazione di pillole, frecce, testo e altre impostazioni tipiche del dispositivo di scorrimento. Dovrebbe essere abbastanza semplice aggiungere tu stesso queste impostazioni.

Tutto il codice è scritto in Javascript ES6 / ES2015+. Tieni presente che questo codice ha bisogno di Babel per trasformare e creare i file Javascript finali. Consulta la guida qui sotto se non sai come fare.

Imposta i file

In questo esempio stiamo creando il blocco all’interno di un tema. Nella cartella del tema ho una sottocartella ‘ gutenberg/‘ dove ho posizionato il mio package.jsone webpack-config.js. All’interno della sottocartella ‘ src/‘ in questa cartella è dove inserisco tutti i miei file di build. La mia configurazione del webpack è impostata per posizionare i file di build nella mia sottocartella del tema ‘ assets/js/‘.

Crea un nuovo file sorgente vuoto theme-folder/gutenberg/src/block-slider.jse imposta Webpack per creare il file di build in theme-folder/assets/js/block-slider.js. Puoi modificare le posizioni e/o i nomi dei file come preferisci, ricorda solo di modificare il codice di seguito.

Dobbiamo anche scaricare lo script di scorrimento necessario. Puoi scaricare Cycle2 a questo link, oppure puoi usare qualsiasi altro script di diapositiva e modificare il codice qui sotto. Sto mettendo il jquery.cycle2.min.jsfile nella cartella della mia cartella del tema /assets/js/.

Preparerò anche un piccolo file CSS che verrà caricato solo nell’editor. Abbiamo solo un piccolo pezzo di styling per rendere la categoria selezionata in modo ottimale. Creo un file vuoto editor-block-slider.csse lo inserisco in theme-folder/assets/css/.

Infine andiamo a un file PHP che viene caricato nel tema. Per semplicità sto facendo la parte PHP nel tema functions.php.

Registra il blocco Gutenberg in PHP

Tutti i blocchi Gutenberg devono essere registrati con [register_block_type](https://developer.wordpress.org/reference/functions/register_block_type/)(). Preferisco chiamarlo all’interno di una funzione agganciata a init. Il primo parametro è il nome del blocco incluso lo spazio dei nomi. Ho deciso di chiamare il mio script di scorrimento awp/slider(regola come preferisci). Il secondo argomento è un array di argomenti.

All’interno della stessa funzione registrerò lo script di build con [wp_register_script](https://developer.wordpress.org/reference/functions/wp_register_script/)()e registrerò il mio file CSS dell’editor con [wp_register_style](https://developer.wordpress.org/reference/functions/wp_register_style/)(). Entrambi questi handle verranno aggiunti come argomenti rispettivamente a ‘ editor_script‘ e ‘ editor_style‘. Per quanto riguarda le dipendenze, ho aggiunto alcuni dei pacchetti più basilari per lo script per garantire che il nostro script di blocco sia caricato nell’ordine corretto. Per quanto riguarda lo stile dell’editor, l’uso di ‘ wp-edit-blocks‘ è una buona dipendenza per evitare che i tuoi stili vengano sovrascritti.

E infine, poiché si tratta di un blocco dinamico, è necessario aggiungere anche l’ render_callbackargomento ‘ ‘, che punta a una funzione responsabile del rendering del blocco nel frontend.

Infine definiamo la funzione render. Otteniamo due parametri per la funzione di callback; una matrice di attributi dal blocco e il contenuto interno (non utilizzato in questo blocco). Restituirò semplicemente una stringa fittizia. Torneremo e completeremo la funzione di rendering in seguito. Ricorda di restituire una stringa, non un’eco.

function awp_gutenberg_slider_render($attributes, $content) { return 'Slider render comes here.'; }

Torneremo alla funzione di rendering PHP alla fine di questo tutorial. Ora è il momento di passare a Javascript!

Registra un blocco Gutenberg personalizzato in Javascript

Apriamo il nostro block-slider.jsfile sorgente. A questo punto avvierò lo script (npm run start) per trasformare tutto ciò che facciamo in questo file nel file di build mentre procediamo. Dobbiamo registrare il blocco usando [registerBlockType](https://developer.wordpress.org/block-editor/developers/block-api/block-registration/)(). Controlla il link per vedere tutti i possibili argomenti.

Come abbiamo deciso in register_block_type()PHP, il nostro blocco si chiama awp/slider. Vogliamo anche aggiungere due attributi al blocco, come accennato in precedenza: uno per l’ID del termine selezionato e uno per il numero di diapositive.

Mi piace aggiungere anche la funzionalità di allineamento dei blocchi. Verrà aggiunto automaticamente aggiungendo ‘ alignsupportsall’oggetto. Se vuoi tutti gli allineamenti dei blocchi puoi semplicemente impostare alignsu true. Tuttavia un dispositivo di scorrimento allineato a sinistra o a destra non ha molto senso, quindi definirò i tipi specifici di allineamento del blocco supportati da questo blocco: "Allinea al centro" (‘ center‘), "Larghezza" (‘ wide‘) e " Full width" (‘ full‘). Inoltre, per definire un align predefinito e renderlo accessibile da PHP, aggiungo ‘ align‘ come attributo al nostro blocco.

Ho impostato l’argomento del blocco editsu un componente separato che creeremo in seguito. E infine la savefunzione restituisce semplicemente null, perché questo è un blocco dinamico.

Dobbiamo definire il componente per la editproprietà. Prima del codice di registrazione definisco un componente di funzione BlockEditche rende semplicemente a dive a Placeholdercon del testo fittizio.

[Placeholder](https://github.com/WordPress/gutenberg/tree/master/packages/components/src/placeholder)è un bel componente per il rendering di un’area per le impostazioni e non necessariamente per il rendering effettivo di un blocco. All’interno del Placeholdercomponente viene visualizzato un elenco di termini tra cui scegliere.

A questo punto il nostro blocco dovrebbe essere disponibile in WordPress Gutenberg! Creiamo un nuovo post, aggiungiamo un nuovo blocco e troviamo il nostro blocco all’interno della categoria Comune. Ecco come appare attualmente il nostro blocco:

Tutorial: crea uno slider come blocco Gutenberg dinamicoTutorial: crea uno slider come blocco Gutenberg dinamico

Aggiunta delle impostazioni dell’Inspector

Aggiungiamo alcune impostazioni all’Inspector (barra laterale destra dell’editor). Come accennato, il nostro blocco ha solo un’impostazione; numero di diapositive. È qui che ti consiglio di aggiungere più impostazioni per il tuo blocco di scorrimento. Ricorda di registrare gli attributi per ogni impostazione che aggiungi.

Per aggiungere qualcosa all’Inspector utilizziamo il componente [InspectorControls](https://github.com/WordPress/gutenberg/tree/master/packages/block-editor/src/components/inspector-controls)( wp.blockEditor). All’interno eseguiamo il rendering di una [PanelBody](https://github.com/WordPress/gutenberg/tree/master/packages/components/src/panel#panelbody)( wp.components) per aggiungere una nuova sezione comprimibile. Quindi eseguiamo semplicemente il rendering di un [RangeControl](https://github.com/WordPress/gutenberg/tree/master/packages/components/src/range-control)( wp.components) per creare un’impostazione di input per scegliere il numero di diapositive. Impostiamo il minimo su 1 e il massimo su 10. Colleghiamo l’ evento valuee onChangeall’attributo numSlides.

Con il codice sopra ora dovremmo ottenere una bella sezione con un dispositivo di scorrimento dell’intervallo per impostare il numero di diapositive.

Tutorial: crea uno slider come blocco Gutenberg dinamico

Ancora una volta, ti consiglio di giocare aggiungendo più impostazioni al tuo dispositivo di scorrimento. Il passaggio successivo è la creazione dell’elemento per il rendering di un elenco di categorie tra cui scegliere.

Creazione di un componente di selezione di categoria

Per mantenere il nostro codice ordinato e riutilizzabile, creiamo il componente selettore di categoria in un file separato. All’interno della cartella build creo un nuovo file awp-category-picker.js.

All’interno di questo file definiamo un componente che scorrerà attraverso tutte le categorie attualmente in WordPress e le renderà in qualche modo. Per ottenere le categorie dobbiamo avvolgerlo all’interno di un cosiddetto componente di ordine superiore, che fornirà al nostro componente ciò di cui abbiamo bisogno tramite oggetti di scena. Per fare questo useremo [withSelect](https://developer.wordpress.org/block-editor/packages/packages-data/#withSelect). All’interno withSelectpossiamo fare una richiesta per recuperare tutte le categorie in WordPress utilizzando il selettore del negozio [select](https://developer.wordpress.org/block-editor/packages/packages-data/#select)(). Possiamo usare:

per recuperare tutti i termini all’interno dello slug della tassonomia fornito. Se non hai familiarità con i componenti e i selettori di ordine superiore in WordPress Gutenberg, ho un post che spiega questo concetto in modo più dettagliato: Crea un blocco Gutenberg personalizzato – Parte 10: Recupero di post e componenti di ordine superiore.

Poiché dobbiamo esportare un componente da questo file, posizioniamo la combinazione di withSelecte il nostro componente definito export defaultnell’istruzione. Il nostro CategorySelectcomponente restituisce semplicemente un div con del testo fittizio in modo da poter vedere che funziona. Dovrebbe fornire il withSelectprop ‘ terms‘ a CategorySelect. Ho aggiunto un console.log()su questo oggetto in modo da poter vedere che funziona.

L’ultima cosa che dobbiamo fare è importare e utilizzare questo componente del selettore di categoria nel nostro blocco personalizzato.

Tornando, block-slider.jsdobbiamo prima importare il componente nella parte superiore del file. E all’interno del nostro Placeholdercomponente eseguiamo semplicemente il rendering del componente.

Con il codice sopra il tuo blocco dovrebbe ora rendere il div dal CategorySelectcomponente. Se apri la Console nel tuo browser dovresti anche vedere alcuni log. Ricorda che withSelectè una query asincrona, il che significa che potrebbe essere visualizzata più volte. La prima volta che i termini prop sono null. Ma gli ultimi log dovrebbero finire con una matrice di termini di categoria.

Grande! Continuiamo a lavorare con il nostro CategorySelectcomponente e facciamo in modo che renda effettivamente l’elenco dei termini consentendo all’utente di selezionarne uno!

Rendering di un elenco di termini tra cui scegliere

Esistono molti modi per eseguire il rendering di un elenco di scelte in cui l’utente può selezionare un elemento. Se vuoi qualcosa di veramente semplice, puoi eseguire il rendering di un menu a discesa di selezione standard ([SelectControl](https://github.com/WordPress/gutenberg/tree/master/packages/components/src/select-control)). Dipende interamente da te. Ho optato per un approccio più pulito e piacevole utilizzando [MenuGroup](https://github.com/WordPress/gutenberg/tree/master/packages/components/src/menu-group)( wp.components) e [MenuItem](https://github.com/WordPress/gutenberg/tree/master/packages/components/src/menu-item)( wp.components).

All’interno di un MenuGroupcomponente abbiamo bisogno di scorrere l’ props.termsarray e per ogni elemento vogliamo visualizzare un MenuItemcomponente che rende il nome del termine. E ovviamente vogliamo renderizzarlo solo se props.termscontiene effettivamente qualcosa (richiesta asincrona, ricordi?).

Ho assegnato al MenuGroupcomponente una classe personalizzata, poiché dovremo indirizzarlo con CSS. E ho impostato l’elica rolesu MenuItemmenuitemradio‘ per assicurarmi che se ne possa scegliere solo uno alla volta. Per impostazione predefinita funzionano come caselle di controllo, consentendo così di scegliere più elementi.

Con il codice sopra il nostro blocco dovrebbe ora (dopo un piccolo secondo) visualizzare un bell’elenco di tutte le categorie nella tua istanza di WordPress.

Potresti notare che il nostro blocco si espanderà per contenere tutte le categorie. Se ci troviamo in un’istanza WordPress con molte categorie, questo diventa rapidamente un problema. Vogliamo assicurarci che il selettore sia un contenitore di altezza massima che ottiene una barra di scorrimento verticale se sono presenti molte categorie. È qui che entra in gioco il nostro file CSS.

Nel nostro editor-block-slider.cssfile aggiungi:

.awp-categoryselect div { max-height: 200px; overflow: hidden scroll; border: 1px solid #b3bcc0; }

Questo CSS prende di mira l’interno divall’interno del nostro MenuGroupe si assicura che non superi mai i 200px. Se il contenuto del MenuGroupdiventa più grande (più categorie) mostrerà una barra di scorrimento verticale. Questo è il minimo indispensabile di CSS per il nostro blocco, ma puoi ovviamente aggiungere più CSS se lo desideri.

L’ultima cosa che dobbiamo correggere nel nostro selettore di categoria è la funzionalità per mostrare l’elemento attualmente selezionato e consentire all’utente di selezionare un termine dall’elenco. Per questo abbiamo bisogno di passare alcuni oggetti di scena a questo componente dal nostro blocco.

In block-slider.jsabbiamo bisogno di passare il termine selezionato corrente (valore dell’attributo termId) e una funzione per aggiornare il termine selezionato (setAttributes) come prop al nostro componente selettore di categoria.

Nel codice sopra alla riga #6definiamo una funzione che aggiorna semplicemente l’attributo termId. Passiamo questo nome di funzione come prop a CategorySelectat line #17. E alla riga #16passiamo il valore corrente di termId. Con possiamo aggiornare il nostro CategorySelectcomponente per riflettere l’elemento scelto e consentire all’utente di scegliere effettivamente un termine.

Di nuovo awp-category-picker.js, aggiungiamo alcuni nuovi oggetti di scena su MenuItem. Ritorniamo trueo falseper l’oggetto di scena indipendentemente dal isSelectedfatto che l’ID del termine corrente sia lo stesso di quello correntemente selezionato. Avviamo la selectTermfunzione onClicknell’evento, passando il termine ID. E per rendere visivo l’elemento selezionato, aggiungiamo condizionatamente un’icona prima di ogni elemento.

Con questo il nostro selettore di categoria dovrebbe apparire così:

Tutorial: crea uno slider come blocco Gutenberg dinamico

L’elenco dovrebbe contrassegnare chiaramente il termine selezionato con un’icona di controllo e puoi invece fare clic su qualsiasi termine per selezionarlo.

Questo era tutto per l’editor e la parte Javascript! Ciò che resta ora è il rendering del frontend, che faremo in PHP.

Rendering del blocco dinamico in PHP

Prima di immergerci nella funzione di rendering, prendiamoci cura di alcune cose prima.

Per prima cosa dobbiamo accodare lo script cycle2 nel frontend in modo che il nostro codice slider si trasformi effettivamente in uno slider. Lo facciamo con una semplice funzione agganciata a wp_enqueue_scripts. Regola quanto segue se hai optato per un altro script di scorrimento.

add_action('wp_enqueue_scripts', function() { wp_enqueue_script( 'cycle2-slider-js', get_template_directory_uri(). '/assets/js/jquery.cycle2.min.js', ['jquery'], '', true ); });

In secondo luogo vogliamo tornare alla register_block_type()chiamata di funzione. Quando gestiamo i blocchi dinamici dovremmo assolutamente aggiungere un nuovo argomento; attributes. In questo argomento definiamo tutti gli attributi che abbiamo definito registerBlockTypein Javascript, inclusi i loro valori predefiniti. In caso contrario, non tutti gli attributi saranno disponibili nel nostro callback di rendering. Se un attributo è stato lasciato invariato nell’editor dei blocchi, l’attributo e il suo valore non saranno disponibili nell’array degli attributi in PHP. Quindi ti consiglio di fare sempre attenzione ad aggiungere l’ attributesarray alla funzione PHP register_block_type()quando lavori con blocchi dinamici. Per il nostro blocco sarebbe simile a questo:

Ora torniamo alla nostra funzione di rendering di callback awp_gutenberg_slider_render(). L’output dipende completamente da te, soprattutto se hai scelto di utilizzare un altro script di scorrimento. Quello che segue è un semplice esempio.

L’idea principale è che controlliamo se è stato scelto o meno un termine ($attributes['termId']). Se è popolato, creiamo un [WP_Query](https://developer.wordpress.org/reference/classes/wp_query/)()argomento con gli argomenti per il numero di post ($attributes['numSlides']) e l’ID della categoria selezionata. Quindi si tratta di generare l’HTML corretto per far funzionare cycle2, scorrere i post e visualizzare le immagini in primo piano come diapositive.

Nota come aggiungo la corretta classe di allineamento dei blocchi in linea #12. Il risultato dovrebbe essere uno slider delle immagini in primo piano. Tieni presente che questo è un esempio di base che presenta alcuni difetti. Ad esempio, recuperiamo gli ultimi tre post dalla categoria selezionata. Ma supponendo che uno di loro non abbia un’immagine in primo piano, il dispositivo di scorrimento mostrerà solo due post.

La cosa importante da ricordare è restituire una stringa e non farla eco. Raccomando anche di utilizzare una sorta di funzionalità di creazione di modelli nel tema per rendering a blocchi dinamici come questi. Può diventare rapidamente una riparazione disordinata e la creazione di HTML come una stringa.

Parole finali

Questo tutorial ti ha mostrato come creare un blocco personalizzato WordPress Gutenberg dinamico in cui esegui il rendering del contenuto del frontend in PHP. E hai visto come utilizzare il componente di ordine superiore per withSelecteseguire query per tutti i termini di categoria e un metodo per visualizzare un elenco selezionabile.

Tutto il codice sopra è scritto nel modo più semplice possibile. Ho solo aggiunto il minimo assoluto di impostazioni. Il dispositivo di scorrimento funziona ma di solito ne vuoi di più, ad esempio creare collegamenti alle diapositive, mostrare i titoli dei post, le frecce del dispositivo di scorrimento o l’opzione per personalizzare la velocità o altre impostazioni del dispositivo di scorrimento. L’idea è di mostrarti le basi e semplificare l’estensione, la costruzione e la modifica per soddisfare le esigenze del tuo progetto.

Fonte di registrazione: awhitepixel.com

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More