Come Usare i Blocchi di WordPress (+ Come Creare i Tuoi!)

Sarebbe strano se menzionassi come mia moglie stia tenendo un kit Lego Star Wars BB-8 in edizione limitata, intatto e mai aperto?

Quelle cose si vendono per circa $500!

Okay. Sarebbe strano. Capito, forte e chiaro… Ma tutto questo avrà più senso tra un attimo.

In questo post, copriremo tutto ciò che devi sapere sui blocchi di WordPress. Se sei un utente WP della vecchia scuola come me, probabilmente pensi ancora ai blocchi come una novità di WordPress perché hai iniziato utilizzando l’editor classico.

Sono passati più di cinque anni da quando WordPress ha introdotto i blocchi, ma sono ancora una delle funzionalità del CMS più fraintese e sottovalutate.

I blocchi WordPress sono un po’ come i Lego —vedi, te l’avevo detto che avrebbe avuto senso — ti permettono di costruire e personalizzare il tuo sito web in un modo che avrebbe richiesto l’assunzione di un designer e sviluppatore web professionista solo pochi anni fa.

Ed è proprio uno dei motivi per cui le persone li amano così tanto. Una volta che li capiscono, ovviamente.

Dopo che ti avrò spiegato come funzionano, non c’è dubbio che anche tu li adorerai.

Cosa Sono i Blocchi WordPress?

I blocchi WordPress sono, come suggerisce il nome, come dei blocchi da costruzione impilabili che puoi aggiungere alle pagine e ai post sul tuo sito WordPress.

Sono stati aggiunti a WordPress 5.0 insieme all’inclusione dell’editor Gutenberg con cui molti di noi sono ormai familiari. I blocchi sono ora il modo standard per personalizzare il tuo sito WordPress — e puoi utilizzare i blocchi in tutto il sito, non solo nei post.

Pensalo un po’ come un costruttore di siti o pagine. Puoi cliccare sul pulsante “+” per aggiungere un blocco a una pagina o un post e poi scegliere tra varie opzioni di blocco. La versione attuale di WordPress include più di 90 opzioni disponibili immediatamente.

Ogni blocco è essenzialmente un widget. Possono fare varie cose, come incorporare contenuti da un altro sito o servizio, aggiungere nuove funzionalità come calendari o moduli di contatto alla pagina, o anche aggiungere contenuti specifici con formattazione predefinita.

Inoltre, la maggior parte dei blocchi ha opzioni di personalizzazione che ti permettono di regolare il modo in cui vengono visualizzati o funzionano sul tuo sito.

L’editor di blocchi di WordPress rappresenta un notevole miglioramento rispetto all’editor classico. Nei giorni precedenti a Gutenberg, gli utenti di WordPress potevano solo aggiungere testo e immagini a un post prima di dover ricorrere a codice personalizzato.

Nota per i Nerd: Se per qualche motivo, non hai accesso ai blocchi dall’editor di WordPress, potrebbe essere per una di due ragioni: Una è che la tua installazione di WordPress potrebbe essere terribilmente obsoleta (di anni e anni fa). In secondo luogo, è possibile che l’editor a blocchi sia stato disabilitato dal plugin Classic Editor. Quando attivo su un sito WordPress, questo plugin ti riporta all’esperienza dell’editor classico. Controlla la tua pagina dei plugin da wp-admin per capire se questo è il caso per te.

Quali Blocchi Sono Già Presenti in WordPress?

Di default, l’editor di blocchi offre un enorme numero di blocchi disponibili. Puoi utilizzare questi blocchi per personalizzare il tuo tema WordPress, permettere a scrittori e blogger di aggiungere contenuti ricchi ai loro post, integrare contenuti dai social media e molto altro ancora.

Diamo un’occhiata ad alcuni dei blocchi Gutenberg predefiniti più popolari e utili.

Blocchi Più Comuni

Aggiungere qualsiasi tipo di testo o immagine viene eseguito utilizzando un blocco. Questo significa che i blocchi più comuni sono generalmente i diversi stili e tipi di elementi di testo o immagine che potresti aggiungere a una pagina.

Cose come:

• Blocco di Testo — Ogni paragrafo che scrivi nell’editor di blocchi risiede nel proprio blocco di testo, ma i blocchi di testo non sono limitati ai paragrafi. Scrivi poco o scrivi molto.
• Blocco Immagine — Per quando vuoi mostrare oltre che raccontare, aggiungi un’immagine per un tocco di stile in più.
• Blocco Lista — Hai bisogno di scrivere un sommario? Cosa ne dici di una lista ordinata? Puoi fare tutto con il blocco lista!
• Blocco Galleria Immagini — Condividere foto di vacanze o scatti di prodotti non è mai stato così bello.
• Blocco Tabella — Crea una tabella dei prezzi o condividi alcuni dati di un foglio di calcolo con facilità.
• Blocco Citazione — Vuoi attirare l’attenzione su una particolare osservazione? Ispirato da una citazione che è rilevante per il post che stai scrivendo? Evidenzialo con il blocco citazione!

Ognuno di questi è un elemento che puoi aggiungere al tuo sito web con l’editor di blocchi. Quindi, puoi posizionarli e stilizzarli nella sezione contenuti della pagina.

Blocchi di Contenuto Incorporati

I blocchi rendono estremamente facile incorporare contenuti esterni e widget nel tuo sito web WordPress senza la necessità di aggiungere un nuovo plugin o componente aggiuntivo di terze parti.

Alcuni dei tipi di blocchi di incorporamento più popolari per importare contenuti esterni:

• Blocco Calendly
• Blocco HTML Personalizzato
• Blocco Twitter
• Blocco YouTube
• Testimonianze
• WooCommerce
• Moduli di Contatto
• Domande frequenti

Utilizzando questi tipi di blocchi, puoi andare oltre l’editor di testo di base e creare contenuti interattivi che includono ogni tipo di funzionalità e caratteristiche.

Blocchi Specializzati

Ecco dove le cose diventano davvero piccanti.

Oltre le basi e i contenuti incorporati, ci sono anche un enorme numero di blocchi avanzati che puoi utilizzare per casi speciali. Come quando vuoi migliorare la navigazione e l’UX del tuo sito, o usare WordPress come un vero e proprio costruttore di siti.

Ecco alcuni da controllare:

• Blocco di Pulsanti
• Blocco di Colonne
• Blocco di Gruppo
• Blocco Carosello di Articoli
• Blocco Contenuto di Articoli
• Blocco Loop di Query
• Blocco Riutilizzabile
• Blocco Shortcode
• Blocco Indice dei Contenuti

Con questi blocchi, puoi importare contenuti personalizzati direttamente dal database di WordPress o personalizzare completamente il layout, lo spazio e il flusso di ogni pagina o post sul tuo sito web.

È tutto fantastico e d’effetto.

Ma cosa succede se hai bisogno di un blocco che non è incluso in WordPress di default? 

Fortunatamente, i blocchi sono anche personalizzabili. Proprio come i widget, puoi aggiungere nuovi blocchi e persino crearne di propri per adattarsi alle esigenze del design del tuo sito web e del template.

Come Creare Blocchi Personalizzati Con Un Plugin WordPress

Di gran lunga, il modo più semplice per creare un blocco personalizzato è utilizzare un plugin.

Il Plugin Genesis Custom Blocks rende la creazione e il lancio dei tuoi blocchi personalizzati abbastanza semplice. Avrai bisogno di una conoscenza di base di HTML e CSS per creare e stilizzare il blocco secondo le tue necessità.

Con queste competenze di base, il plugin si occupa di tutta la configurazione e l’installazione difficili per implementare un nuovo blocco.

Passo 1: Installa il Plugin Genesis Block

Prima di tutto: vai alla directory dei plugin di WordPress e installa il Plugin Genesis Custom Block.

(Non dimenticare di andare nella scheda Plugins e attivarlo.)

Passo 2: Aggiungi Un Nuovo Blocco

Una volta installato e attivato, dovresti vedere una nuova opzione nel pannello di amministrazione WP nella navigazione a sinistra.

Clic su Blocchi Personalizzati > Aggiungi Nuovo.

Passo 3: Personalizza I Campi Dell’Editor

Ora, siamo pronti per iniziare a costruire il blocco personalizzato.

Il primo passo sarà impostare i campi e le opzioni di personalizzazione che appariranno quando utilizzi il blocco sul tuo sito web.

Puoi pensare a questo un po’ come a una versione ridotta dell’editor di blocchi stesso. Aggiungerai campi personalizzati e dati che saranno o precompilati dal blocco stesso o raccolti dall’editor o dall’utente che sta aggiungendo il blocco a una pagina o a un post.

Ad esempio, se stai costruendo un blocco personalizzato per l’invito all’azione (CTA), potresti aggiungere campi come:

• Testo del titolo
• Testo del sottotitolo
• Testo del pulsante
• URL del pulsante CTA

Ogni campo avrà un’etichetta, un nome e un tipo. Puoi anche personalizzare la larghezza o aggiungere testo di aiuto per rendere più semplice l’utilizzo da parte di altri redattori o scrittori.

Passo 4: Personalizza Il Markup E Il CSS

Ora che abbiamo configurato il backend del blocco, dobbiamo dire a WordPress come visualizzare effettivamente il contenuto che viene aggiunto.

Qui è dove qualsiasi conoscenza precedente di HTML o CSS che potresti avere ti sarà utile.

In questo prossimo passo, scriverai essenzialmente il blocco di codice che sarà generato dinamicamente dagli input configurati per l’editor di blocchi.

Puoi scrivere questo in HTML e CSS puro.

Puoi anche importare le variabili dall’editor di blocchi usando le doppie parentesi e il nome del campo (slug) dall’editor. (Ad esempio, “{{button-text}}”)

Passo 5: Aggiungi Il Blocco

Una volta che hai configurato il blocco utilizzando il plugin Genesis, dovrebbe apparire nell’elenco dei blocchi disponibili nel editor Gutenberg di WordPress.

Semplicemente clicca il “+” e poi trova il nuovo blocco per il suo nome.

Una volta aggiunto, dovresti vedere la schermata dell’editor di blocchi Gutenberg con i campi e le opzioni che hai configurato.

Ecco fatto!

Ora puoi usare il tuo blocco personalizzato, aggiungendolo a pagine, post, barre laterali o dove ne hai bisogno.

Come Creare Blocchi WordPress Personalizzati Senza Un Plugin

Se vuoi approfondire e imparare davvero come creare nuovi blocchi da zero, avrai bisogno di conoscenze un po’ più avanzate.

In questa guida, ti spiegheremo i passaggi fondamentali per utilizzare lo strumento create-block che ti permetterà di creare blocchi completamente personalizzati senza dover utilizzare un plugin.

Avviso importante: Questo è un flusso di lavoro avanzato. Sarà necessario immergersi nella linea di comando.

Dovrai conoscere PHP, JavaScript, HTML e CSS.

Non dire che non ti abbiamo avvisato!

Passo #1: Configura Node.js, NPM e l’installazione locale di WordPress

Prima di poter usare create-block, dobbiamo avere la configurazione e l’accesso corretti.

Ecco i prerequisiti:

• Una installazione locale di WordPress
• Configurazione del terminale o della riga di comando
• Node.js e npm

Potresti anche voler utilizzare nvm (gestore delle versioni di Node) per installare o aggiornare una versione compatibile di Node.js

Con questa configurazione, utilizzeremo il comando di NPM “npx” per eseguire il pacchetto create-block direttamente dalla sua directory ospitata nel cloud.

Passo #2: Esegui Il Pacchetto create-block

Ora, il passo facile.

Dal terminale, naviga alla directory /wp-content/plugins del tuo sito web sulla tua macchina locale.

Poi esegui il pacchetto create-block usando NPX:

npx @wordpress/create-block {{block-name}}

Questo pacchetto eseguirà il processo di configurazione di ciò che è noto come “impalcatura del blocco”. Registrerà tutti gli elementi rilevanti, avvierà la corretta struttura di file e directory e genererà il codice predefinito per l’intero blocco affinché sia modificabile e utilizzabile.

Passo #3: Attiva Il Plugin

Il nuovo blocco avrà la forma di un plugin.

Una volta completato il pacchetto create-block, dovrai passare all’amministrazione WP.

Vai alla pagina dei Plugin e attiva il nuovo plugin che è stato creato, che dovrebbe avere il nome del blocco che hai usato nel tuo comando npx.

Passaggio #4: Personalizza Il Codice del Blocco

Personalizzerai il contenuto e le funzionalità del blocco all’interno della cartella /src/ nella directory del plugin.

Index.js è dove registrerai il blocco e programmerai l’output principale:

Nota che la funzione registerBlockType è impostata per gestire sia gli input dell’editor di blocchi (“edit”) che la visualizzazione nel frontend (“save”).

Questo è solo l’inizio della costruzione di un blocco funzionale.

Probabilmente vorrai approfondire la documentazione completa per scrivere blocchi funzionali utilizzando il WordPress Block API.

Una volta che hai imparato le basi, puoi aggiungere altre dipendenze, accedere a fonti di dati esterne e praticamente tutto ciò che desideri.

Passaggio #5: Aggiungi Il Blocco Dall’Editor Gutenberg

Con il plugin attivato, puoi aggiungere il tuo blocco a qualsiasi pagina o post dall’editor Gutenberg.

Accedici utilizzando il pulsante “+” o il comando “/”, proprio come qualsiasi altro blocco.

Il Cielo È Il Limite

Bene, siamo passati dalle nozioni di base a quelle avanzate, ma la buona notizia è che ora sei inarrestabile.

Tra le opzioni di blocco predefinite, il plugin Genesis e la possibilità di creare i tuoi blocchi da zero — non c’è nulla che non puoi fare!

E poiché i blocchi sono così incredibilmente potenti e flessibili, non c’è praticamente nulla che tu non possa costruire. Il tuo sito WordPress ora ha una funzionalità praticamente infinita, e puoi realizzare il sito, l’app o il progetto dei tuoi sogni.