In questo post verrà illustrato il funzionamento dei blocchi Gutenberg. Se non l’hai ancora letto, ti consigliamo di dare un’occhiata prima alla Guida di Gutenberg, in modo da comprendere al meglio le spiegazioni contenute su questa pagina.

Cosa sono i blocchi di Gutenberg

I blocchi di Gutenberg, il nuovo editor di WordPress, sono un sistema totalmente nuovo per modificare post e pagine di WordPress.
I Blocchi sono, in altre parole, dei contenitori che racchiudono ciascuno un elemento del post o della pagina e possono contenere ad esempio dei paragrafi di testo, delle immagini, dei video, dei pulsanti e così via.
Conseguentemente, ciascun blocco può essere modificato in modo indipendente dagli altri blocchi. Ed è inoltre possibile riorganizzare completamente la struttura di un post o di una pagina, trascinando il blocco selezionato nella posizione desiderata.

Con i blocchi puoi creare senza problemi post o pagine con diversi contenuti (testi, immagini, video e altro) e diverse formattazioni (colonne, tabelle, liste, ecc.) senza dover conoscere e senza usare alcun codice.

Continua a leggere per scoprire come sfruttare al massimo le loro potenzialità e come usarli al meglio.

---

Come inserire i blocchi Gutenberg nei post e nelle pagine WordPress

Nella pagina di modifica dei singoli post o delle singole pagine, nel menu in alto trovi l’icona +. Si tratta dell’opzione Aggiungi blocco. Cliccando su di essa, puoi visualizzare tutti i blocchi di Gutenberg disponibili.
Puoi filtrare i risultati con il campo di ricerca, scegliere tra i blocchi più usati recentemente oppure selezionare una delle categorie elencate.

• Blocchi comuni
• Formattazione
• Elementi del layout
• Widget
• Incorporamenti
• Plugin

Cliccando sull’icona del blocco desiderato, questo verrà aggiunto al tuo post o alla tua pagina.

Non è però sempre necessario scegliere il pulsante nella barra in alto. Se piazzi il mouse tra 2 blocchi esistenti, la stessa icona + verrà visualizzata, consentendoti di effettuare la stessa scelta senza lasciare la parte principale della pagina.

Inoltre, se vai a capo da un blocco paragrafo o da un blocco titolo viene automaticamente creato un nuovo blocco paragrafo.

Dopo di che, puoi continuare a scrivere senza interruzioni oppure, puoi selezionare una delle 3 icone che appaiono sulla destra se effettui un rollover con il mouse. Quelle che appaiono sono le icone degli ultimi 3 blocchi che hai usato, che ti consentiranno di effettuare velocemente la tua scelta senza perdere troppo tempo.

---

I 9 blocchi Gutenberg più utilizzati

Nella prima sezione della finestrella “Aggiungi blocco” vengono visualizzati i 9 blocchi di Gutenberg che utilizzi più spesso.
Questi blocchi possono appartenere a qualsiasi categoria e cambiano a seconda dell’utente.

Perciò, per scoprire il funzionamento di un blocco presente in questa sezione, devi cercalo in una delle seguenti categorie.

---

I 10 blocchi Gutenberg più comuni

In questa categoria sono elencati i blocchi dei quali presumibilmente avrai più bisogno e che userai più spesso.
Continua a leggere per scoprire di che blocchi si tratta e capire come funzionano.

1. Paragrafo

Questo blocco ti serve per aggiungere un singolo paragrafo di contenuto e sarà molto probabilmente il blocco più usato nei tuoi post e nelle tue pagine.

Esempio:

Questo testo fa parte di un blocco paragrafo.
Posso andare a capo all’interno dello stesso blocco premendo i pulsanti Maiuscolo + Invio (a Capo).

Se schiaccio solamente il pulsante Invio viene creato automaticamente un nuovo blocco paragrafo come in questo caso.

In questo terzo paragrafo ho aumentato la dimensione del carattere.

Mentre in questo quarto paragrafo ho aggiunto l’opzione Capolettera e mi sono divertito a scrivere con un colore diverso. Queste opzioni si possono scegliere nella barra laterale a destra, nel menu delle impostazioni di blocco.

Nel menu a scelta rapida che appare sopra il paragrafo si possono scegliere le seguenti opzioni:

1. Allinea il paragrafo a sinistra
2. Allinealo al centro
3. Oppure a destra
4. Grassetto
5. Corsivo
6. Inserisci link
7. Testo barrato
8. Scrivi del codice
9. Inserisci immagine in linea

Come abbiamo già discusso nel post precedente, la prima icona a sinistra consente di cambiare tipologia di blocco, mentre l’ultima icona a destra ti mostra delle opzioni aggiuntive.

Nel menu delle Impostazioni Blocco nella barra laterale puoi personalizzare:

2. Titolo

Scegli questo blocco per dividere la tua pagina in sezioni e inserire un’intestazione. Ogni intestazione dovrebbe indicare l’inizio di un nuovo argomento.

Esempio:

Questa è un’intestazione h2

In questa riga trovi un’intestazione h3

Invece questa è un’intestazione h4

Nel menu a scelta rapida che appare sopra il titolo si possono scegliere le seguenti opzioni:

1. Scegli la dimensione dell’intestazione
2. Grassetto
3. Corsivo
4. Inserisci link
5. Testo barrato
6. Scrivi del codice
7. Inserisci immagine in linea

Nel menu delle Impostazioni Blocco nella barra laterale puoi modificare:

Le dimensioni delle varie intestazioni (h1, h2, h3, h4, h5, h6) vengono ereditate dallo stile del tuo tema; non è quindi possibile cambiarle qui, se non con l’inserimento di una classe CSS aggiuntiva.

3. Elenco

Usa questo blocco quando vuoi inserire una lista.

Esempio:

• questo è un elenco non ordinato
• gli elementi sono preceduti da un dischetto
  • posso anche aumentare il rientro
  • visto?
• e posso tornare al rientro normale
• posso anche scrivere in grassetto
• o in corsivo

1. questo è un elenco ordinato
2. gli elementi sono preceduti da un numero
   1. anche in questo caso posso aumentare il rientro
   2. in questo modo la numerazione ricomincia dall’inizio
3. si possono anche combinare ordinato/non ordinato
   • ho aumentato il rientro e ho cambiato a lista non ordinata
   • forte eh?
   • si ok, lo so, mi entusiasmo per poco…

Nel menu a scelta rapida che appare sopra il blocco dell’elenco si possono scegliere le seguenti opzioni:

1. Converti in lista non ordinata (con dischetti)
2. O in lista ordinata (con numeri)
3. Riduci il rientro
4. Aumenta il rientro
5. Grassetto
6. Corsivo
7. Inserisci link
8. Testo barrato
9. Scrivi del codice
10. Inserisci immagine in linea

Nel menu delle impostazioni di blocco, l’unica opzione disponibile è la classe css aggiuntiva

4. Immagine

Questo blocco ti consente di inserire una singola immagine nel tuo contenuto ed è molto simile alla funzione Aggiungi media che era presente nel vecchio editor.

Esempio:

Le opzioni disponibili nel menu a scelta rapida sono le seguenti:

1. Per allineare l’immagine a sinistra
2. Per allinearla al centro
3. Oppure a destra

Nello spazio principale ti vengono inoltre mostrate le seguenti opzioni di inserimento:

4. Carica, ti consente di inserire un’immagine presente nel tuo computer
5. Libreria media, ti consente di inserire un immagine già presente nella tua libreria
6. Inserisci dall’URL, ti consente di inserire il link diretto all’immagine

Per agire più velocemente, è comunque possibile trascinare direttamente l’immagine nel riquadro principale senza entrare prima nella libreria media. Questo vale sia per questo blocco, sia per gli altri blocchi che prevedono un upload.

Quando avrai caricato la tua immagine, nel menu delle impostazioni di blocco, potrai personalizzare le seguenti caratteristiche:

5. Citazione

Puoi usare questo blocco quando vuoi inserire una citazione nel tuo post.

Esempio:

Bisogna sempre perdonare i propri nemici. 
Niente li infastidisce di più.

Oscar Wilde

Nel menu a scelta rapida del blocco citazione trovi le seguenti opzioni:

1. Disponi la citazioni a sinistra
2. Centra la citazione
3. Disponila a destra
4. Grassetto
5. Corsivo
6. Inserisci link
7. Testo barrato
8. Scrivi del codice
9. Inserisci immagine in linea

Nel menu delle impostazione nella barra laterale, puoi scegliere tra:

6. Galleria

Se vuoi creare una galleria fotografica con numerose immagini, puoi usare il blocco Galleria, che ti permetterà di mostrarle in modo ordinato e con il numero di colonne che desideri.

Esempio:

• 

• 

• 

• 

Il menu a scelta rapida di questo blocco presenta le seguenti opzioni di allineamento:

1. A sinistra
2. Al centro
3. A destra

e nella spazio principale del blocco puoi scegliere:

4. Carica, ti consente di inserire un’immagine presente nel tuo computer
5. Libreria media, ti consente di inserire un immagine già presente nella tua libreria

Se carichi immagini dal tuo computer puoi, come per il blocco immagine, trascinare le immagini direttamente nel riquadro principale. Queste foto saranno aggiunte in automatico alla libreria media, senza bisogno di entrarci, al momento della creazione della galleria.

Per effettuare delle modifiche, come ad esempio, cambiare l’ordine delle immagini oppure aggiungere una didascalia, puoi in ogni momento cliccare sull’icona Modifica, a forma di matita.

Oltre a ciò, nel menu delle impostazioni di blocco, potrai scegliere:

7. Audio

Usa questo blocco per inserire nel tuo post o nella tua pagina un file audio.

Esempio:

Per questo blocco le opzioni disponibili nel menu a scelta rapida sono:

1. La disposizione a sinistra
2. Quella al centro
3. E infine quella a destra

in aggiunta, nello spazio principale del blocco, hai le seguenti scelte:

4. Carica, per caricare un’immagine presente nel tuo computer
5. Libreria media, per inserire un immagine già presente nella tua libreria
6. Inserisci dall’URL, per inserire un indirizzo specifico di un’immagine

Se vuoi caricare un file dal tuo computer puoi trascinarlo direttamente nel riquadro principale, e verrà aggiunto automaticamente alla tua libreria media.

Nel menu delle impostazioni di blocco nella barra laterale, sono disponibili le seguenti opzioni:

8. Copertina

Questo blocco ti consente di assegnare al tuo post o alla tua pagina un immagine di copertina, ma devi verificare che il tema del tuo sito supporti questa funzione.
Questo blocco è stato pensato originariamente come l’intestazione principale del tuo post, con il titolo che viene sovrapposto ad un’immagine di sfondo. Ma nessuno ci vieta, se lo desideriamo, di usarlo anche all’interno del nostro contenuto.

Esempio:

Per il blocco di copertina puoi scegliere se:

1. Allineare il blocco di copertina a sinistra
2. Allinearlo al centro
3. Oppure a destra

e nella spazio principale del blocco puoi scegliere:

4. Carica, dove puoi inserire un’immagine presente nel tuo computer
5. Libreria media, dove puoi inserire un immagine già presente nella tua libreria

Quando inserisci un’immagine in questo blocco ti verrà inoltre data la possibilità di inserire un’intestazione sopra di essa. Questa intestazione viene trattata esattamente come il blocco titolo e presenta le stesse scelte e le stesse opzioni.

Nel menu delle impostazioni per il blocco copertina trovi le seguenti scelte:

9. File

Con questo blocco puoi inserire nel tuo post o nella tua pagina un file e creare un pulsante che permetta di scaricare il file in questione.

Esempio:

Nel menu a scelta rapida puoi scegliere tra le consuete opzioni di allineamento:

1. A sinistra
2. Al centro
3. O a destra

Nello spazio principale puoi inoltre scegliere:

4. Se caricare un file dal tuo computer
5. oppure se sceglierlo dalla Libreria media

Nel menu delle impostazioni puoi determinare:

10. Video

L’ultimo blocco presente nei blocchi più comuni è quello per l’inserimento di un video.

Esempio:

Nel menu a scelta rapida puoi selezionare:

1. il pulsante per allineare il video a sinistra
2. quello per allinearlo al centro
3. oppure quello per l’allineamento a destra

Nello spazio principale puoi scegliere tra le seguenti opzioni:

4. Carica, ti consente di inserire un video presente nel tuo computer
5. Libreria media, ti consente di inserire un video già presente nella tua libreria
6. Inserisci dall’URL, ti consente di inserire il link diretto al video

Se carichi un video con il pulsante Carica oppure lo scegli dalla libreria media, nella barra laterale potrai scegliere tra le seguenti opzioni.

Se invece inserisci un link diretto, per esempio da YouTube, il blocco verrà convertito automaticamente in un blocco di incorporamento YouTube.

---

I 7 Blocchi Gutenberg di formattazione

In questa categoria sono compresi altri blocchi che potrebbero venirti utili, ma che di norma non sono usati così spesso come i blocchi precedenti.
Vediamo assieme di quali blocchi stiamo parlando.

1. HTML Personalizzato

Puoi usare questo blocco in quelle rare occasioni in cui i blocchi non riescono a fornirti ciò di cui hai bisogno. Con questo blocco puoi aggiungere del codice HTML personalizzato, tuttavia, per usare questo elemento, devi cavartela piuttosto bene con il codice HTML.

Esempio:

Blocco HTML personalizzato

Questo blocco contiene del codice HTML personalizzato, con vari elementi ciascuno con degli attributi CSS personali.

Una simile visualizzazione sarebbe quasi impossibile da realizzare usando solo i blocchi standard.

Fortunatamente simile esigenze sono molto rare…

Nel menu a scelta rapida trovi infatti le seguenti opzioni:

1. L’inserimento di codice HTML
2. La visualizzazione dell’Anteprima

Nel menu delle impostazioni per il blocco HTML non sono disponibili ulteriori opzioni.

2. Editor classico

Se trovi la necessità di usare ancora il vecchio editor, puoi inserire questo blocco. L’interfaccia la dovresti già conoscere bene. Nel menu trovi le seguenti funzioni:

1. Le impostazioni paragrafo/titolo
2. Il testo in grassetto
3. Oppure in corsivo
4. L’elenco puntato
5. L’elenco numerato
6. La citazione
7. L’allineamento a sinistra
8. Al centro
9. Oppure a destra
10. L’inserimento link
11. La rimozione link
12. Il tag leggi tutto
13. L’inserimento di file media
14. Il pulsante per mostrare/nascondere la seconda riga di comandi
15. Il testo barrato
16. La linea orizzontale
17. Il colore del testo
18. La funzione Incolla come testo
19. La rimozione della formattazione
20. I caratteri speciali
21. La diminuzione del rientro delle liste
22. L’aumento del rientro delle liste
23. La funzione Annulla
24. La funzione Ripeti
25. Le scorciatoie da tastiera

Anche per questo blocco non sono presenti ulteriori impostazioni nella barra laterale.

3. Preformattato

Il blocco Preformattato è molto simile al blocco codice che vedi sotto. Le uniche differenze sono che questo elemento mantiene gli spazi e gli a capo intatti, mostrando il testo esattamente come viene inserito e non usano il tag <code>

Esempio:

Questo testo e scritto in un blocco preformatto. 
Posso anche scrivere 
in grassetto, 
in corsivo, 
inserire un link,
barrare il testo, 
inserire del <b>codice</b> 
o un immagine in linea.

Il blocco preformattato presenta inoltre alcune opzioni di formattazione nel proprio menu:

1. Il testo in grassetto
2. Oppure in corsivo
3. L’inserimento di link
4. Il testo barrato, il codice e l’immagine in linea

Nel menu laterale puoi in aggiunta trovare l’opzione avanzata per l’inserimento di una classe CSS.

4. Codice

Il blocco codice viene usato per inserire nel tuo post o nella tua pagina delle porzioni di codice HTML, CSS, JavaScript, PHP o qualsiasi altro codice supportato.

Esempio:

//quello che segue è del codice HTML che ho usato in precedenza nel blocco HTML

<header style="background: linear-gradient(180deg,#0d0630,#083d77); padding: 30px; text-align: center; font-size: 35px;">
  <h2 style="color: white;">Blocco HTML personalizzato</h2>
</header>

<section style="background-color: #f1f1f1; height: 300px; padding:20px">
<p>Questo blocco contiene del codice HTML personalizzato, con vari elementi ciascuno con degli attributi CSS personali.</p>
<p>Una simile visualizzazione sarebbe quasi impossibile da realizzare usando solo i blocchi standard.</p>
<p>Fortunatamente simile esigenze sono molto rare...</p>
</section>

<footer style="background: linear-gradient(180deg,#083d77,#0d0630); padding: 10px; text-align: right; color: white; padding:20px">
  <p>advancedweb.ch</p>
</footer>

Il menu di questo blocco non presenta nessuna opzione oltre ai due pulsanti standard.

Mentre nelle impostazioni nella barra laterale hai la possibilità di inserire una classe CSS aggiuntiva.

5. Citazione evidenziata

Il blocco Citazione Evidenziata è pensato per mettere in evidenza in modo grafico una parte del tuo testo.
Mentre il blocco Citazione standard di solito cita una fonte esterna, una Citazione Evidenziata è usato di norma per citare il tuo articolo.

Esempio:

Il blocco Citazione Evidenziata è pensato per mettere in evidenza in modo grafico una parte del tuo testo.

Il menu a scelta rapida di questo blocco ti offre le seguenti opzioni:

1. Disponi la citazione a sinistra
2. Disponila a destra
3. Converti il testo in grassetto
4. Convertilo in corsivo
5. Inserisci link
6. Il testo barrato, il codice e l’immagine in linea

Nelle impostazioni del blocco puoi trovare le seguenti opzioni aggiuntive:

6. Tabella

Quando necessiti di mostrare dei dati in formato tabellare puoi usare questo blocco.

Esempio:

		nome	cognome
1		Gino	Verdi
2		Giovanna	Rossi
3		Luca	Bianchi

Quando inserisci il blocco nel tuo contenuto ti apparirà la seguente schermata con le seguenti opzioni.

1. Se vuoi che la tua tabella appaia a sinistra
2. Se vuoi centrare la tabella
3. O se la vuoi visualizzare a destra

Quando avrai scelto il numero di colonne e di righe ti apparirà un’altra schermata con un menu più completo:

1. Disposizione a sinistra
2. Al centro
3. Oppure a destra
4. Modifica tabella
   1. Aggiungi riga prima
   2. Aggiungi riga dopo
   3. Elimina riga
   4. Aggiungi colonna prima
   5. Aggiungi colonna dopo
   6. Elimina colonna
5. Testo in grassetto
6. Testo in corsivo
7. Inserisci Link
8. Testo barrato, codice e immagine in linea

Nel menu delle impostazioni del blocco tabella puoi trovare ulteriori possibilità di personalizzazione:

7. Verso

Puoi usare il blocco dei versi per includere poesie, testi di canzoni o altre espressioni letterarie. A differenza del testo di paragrafo tradizionale, questo blocco lascia intatti tutti gli spazi e le interruzioni di riga, mostrandoli esattamente mentre li inserisci.

Esempio:

Canzone - Vasco Rossi

E nell'aria ancora il tuo profumo dolce caldo e morbido,
come questa sera, mentre tu... mentre tu non ci sei piu'.

E questa sera nel letto metterò qualche coperta in più perché sennò,
sennò avrò freddo senza averti sempre,
senza averti sempre addosso...

E sarà triste lo so, 
ma la tristezza però 
si puo' racchiudere dentro una canzone che canterò.

Ogni volta che avrò voglia di parlarti, di vederti, di toccarti,
di sentirti ancora mia.
E' stato splendida però amarti!

E senza averti sempre addosso...
Dentro una canzone....

E quando un giorno t'incontrerò, magari per la strada
magari prorpio sotto casa tua
Eh! Ma guarda il caso però! Guarda il destino!

E intanto i giorni passano, 
ed i ricordi sbiadiscono,
e le abitudini cambiano.

E' stato splendido... 

Nel menu del blocco verso hai le seguenti voci tra cui scegliere:

1. Verso allineato a sinistra
2. Allineato al centro
3. Oppure allineato a destra
4. Grassetto
5. Corsivo
6. Inserisci link
7. Testo barrato, Codice, immagine in linea

Mentre nella barra laterale con le impostazioni hai solamente l’opzione avanzata per l’aggiunta di una classe CSS.

---

I 7 Elementi del layout Gutenberg

I blocchi contenuti in questa categoria ti consentono di meglio organizzare il layout dei tuoi contenuti, aggiungendo ad esempio colonne, separazioni, spazi, ecc.

Continua a leggere per scoprire queste possibilità di impaginazione.

1. Separatore

A volte per meglio suddividere il proprio contenuto e renderlo più ordinato, è necessario separare le varie sezioni. Per fare questo puoi usare il blocco Separatore.

Esempio:

Questo paragrafi sono separati da una linea per una miglior suddivisione o per sottolineare il fatto che viene chiuso un importante capitolo e ne viene aperto un altro.

---

Posso anche scegliere di usare un altro stile, ad esempio questi tre puntini.

---

Nel menu del blocco non ci sono opzioni:

Ma nella barra laterale puoi effettuare le seguenti scelte:

2. Colonne

Il blocco colonne ti consente di creare dei layout a più colonne all’interno della tua area del contenuto, dandoti la possibilità di includere altri blocchi all’interno di ciascuna colonna.

Questo blocco delle colonne è ancora sperimentale, molto probabilmente in futuro subirà dei cambiamenti e verranno implementate ulteriori funzioni.

Esempio:

Al momento dell’inserimento il blocco appare nel modo seguente, e non presenta nessun comando supplementare nel proprio menu.

Nel menu delle impostazioni al momento sono presenti le seguenti opzioni:

3. Pulsante

Il blocco dei pulsanti fa esattamente ciò che ti aspetti: crea un pulsante all’interno del tuo contenuto e lo linka ad un altro URL.

Esempio:

Nel menu a scelta rapida di questo blocco puoi scegliere tra le seguenti funzioni:

1. Piazza il pusante a sinistra
2. Piazzalo al centro
3. Oppure a destra
4. Metti il testo in grassetto
5. Metti il testo in corsivo
6. Barra il testo, Inserisci del codice, Inserisci un’immagine in linea
7. Modifica il testo del pulsante
8. Inserisci il link di destinazione

Nel menu delle impostazioni puoi scegliere tra le seguente opzioni:

4. Media e testo

Puoi usare il blocco Media e Testo quando vuoi inserire un contenuto media, ad esempio un’immagine, affiancato da una descrizione testuale.

Esempio:

Quando inserisci questo blocco hai a disposizione i seguenti comandi:

1. Media a sinistra / testo a destra
2. Testo a sinistra / media a destra
3. Carica dal computer
4. Scegli dalla libreria media
5. Inserisci il contenuto

Nel menu delle impostazioni puoi scegliere tra queste opzioni:

5. Leggi tutto

Il blocco Leggi tutto viene utilizzato quando si desidera includere un breve riassunto nella pagina del blog e nelle pagine di archivio, che colleghi alla parte restante dell’articolo.

NB: il blocco Leggi tutto non viene visualizzato in nessun punto sui singoli post.

Nel menu del blocco in questione non ci sono comandi specifici:

L’unica modifica che puoi apportare è la modifica del testo.

Nel menu laterale a destra puoi usufruire di questa singola scelta:

6. Interruzione di pagina

Puoi usare il blocco Interruzione di pagina quando vuoi suddividere il tuo contenuto su più pagine.

Quando inserisci il blocco vedrai questa schermata:

In questo caso non c’è nessuna opzione da personalizzare. Il tema del tuo sito si occuperò in modo automatico di creare una nuova pagina dopo questo blocco e ti mostrerà una navigazione per muoverti tra le pagine create.

7. Spazio vuoto

Puoi usare questo blocco per inserire uno spazio tra 2 blocchi per meglio separare e organizzare il tuo contenuto e per dargli un po più di respiro.

Esempio:

Nel menu del blocco non trovi logicamente nessun comando.

Nella barra laterale puoi trovare le seguenti impostazioni:

---

I 9 blocchi widget di Gutenberg

In questa categoria di blocchi sono compresi vari widget che fino ad ora era possibile inserire solo negli spazi appositi, ad esempio nella barra laterale.
Con questi nuovi blocchi è ora possibile, se lo desideri, inserirli anche all’interno delle tue pagine o dei tuoi post.

Vediamo assieme questi nuovi blocchi e impariamone il loro funzionamento!

1. Shortcode

Il blocco shortcode non è un vero e proprio widget, ma è stato inserito comunque in questa categoria.
Di cosa si tratta esattamente?
Alcuni plugin, per inserire i loro contenuti nei tuoi post ti forniscono un cosiddetto shortcode – una porzione di codice che viene racchiusa tra parantesi quadre – che andrà a richiamare una o più funzioni dei plugin stessi.

Posso ad esempio inserire in una pagina lo shortcode di un form di contatto, e nella pagina stessa verrà visualizzato il formulario che avevo creato in precedenza con l’aiuto del plugin apposito.

Esempio:

[contact-form-7 id=”428″ title=”Modulo di contatto generico”]

Questo blocco non ha nessun comando apposito e nessuna impostazione particolare, dispone solamente di un campo di testo dove inserire lo shortcode racchiuso nelle parentesi quadre.

Per inserire il form nell’esempio qui sopra ho incollato nel campo di testo lo shortcode fornitomi dal plugin Contact Form 7: [contact-form-7 id=”xx”]

2. Archivi

Puoi usare questo blocco se vuoi inserire nel tuo post o nella tua pagina un widget con gli archivi del tuo sito.

Esempio:

• Febbraio 2022
• Luglio 2021
• Aprile 2021
• Novembre 2020
• Luglio 2020
• Marzo 2020
• Gennaio 2020
• Ottobre 2019
• Settembre 2019
• Aprile 2019
• Marzo 2019
• Febbraio 2019
• Gennaio 2019
• Dicembre 2018
• Ottobre 2018
• Luglio 2018
• Marzo 2018
• Febbraio 2018
• Giugno 2017
• Marzo 2017
• Gennaio 2017
• Ottobre 2016
• Agosto 2016
• Luglio 2016
• Giugno 2016
• Aprile 2016

Nel menu di questo blocco puoi personalizzare l’allineamento:

1. A sinistra
2. Al centro
3. A destra

Mentre nel menu delle impostazioni puoi scegliere tra le seguenti opzioni:

3. Calendario

Questo blocco può venir usato, come lo suggerisce il nome, per inserire un calendario che mostri quando sono stati pubblicati i tuoi post.

Esempio:

Nel menu a scelta rapida di questo blocco puoi trovare le consuete scelte di allineamento:

1. A sinistra
2. Al centro
3. A destra

Nel menu della barra laterale è presente solamente l’impostazione avanzata riguardante la classe CSS aggiuntiva.

4. Categorie

Il blocco categorie lo puoi usare per mostrare in un post le categorie che hai usato fino ad ora nel tuo sito. Gli elementi di questo elenco presentano dei collegamenti alle pagine delle rispettive categorie.

Esempio:

• advancedWeb (2)
• copywriting (1)
• e-commerce (2)
• grafica (5)
• mac (1)
• marketing (6)
• seo (3)
• social media (2)
• special offer (1)
• web consulting (2)
• web development (4)
• webdesign (13)
• wordpress (7)

Nel menu del blocco categorie puoi trovare le opzioni:

1. Categorie allineate a sinistra
2. Allineate al centro
3. Oppure allineate a destra

E nel menu delle impostazioni:

5. Ultimi commenti

Con questo blocco puoi inserire nel tuo post un elenco degli ultimi commenti ricevuti su tutti i post.

Esempio:

1. 

   Grazie Mike! eh vecchio… le mie capacità come chitarrista non sono più quelle di una volta, e in ogni caso…

2. 

   Se tu sei uno scarso chitarrista, io che cazzo sono? Bravo Spagno per l’impegno, ti auguro tanto successo

3. 

   forza e avanti così

Come per gli altri blocchi widget visti in precedenza, anche il blocco degli ultimi commenti presenta nel proprio menu le opzioni di allineamento:

1. Commenti a sinistra
2. Commenti al centro
3. Oppure commenti a destra

Nel menu delle impostazioni puoi effettuare le seguenti scelte:

6. Articoli Recenti

Puoi usare il blocco Articoli recenti per inserire nel tuo post un elenco degli ultimi articoli pubblicati nel blog.

Esempio:

• Il significato del logo delle Olimpiadi invernali di Pechino 20228 Feb 2022
• Olimpiadi di Tokyo 2020: il significato del logoUltima modifica 23 Lug 2021
• Scopri le 5 tipologie di copywriter!Ultima modifica 18 Apr 2021
• Come funziona la Lead Generation?Ultima modifica 18 Nov 2020
• Cos’è l’E-mail Marketing e come funzionaUltima modifica 25 Lug 2020

Nel menu di questo blocco puoi effettuare le seguenti operazioni:

1. Allineare l’elenco a sinistra
2. Centrarlo
3. Allinearlo a destra
4. Visualizzare gli ultimi post sottoforma di elenco
5. Visualizzare gli ultimi post con la visualizzazione a griglia

Nel menu delle impostazioni puoi fare le seguenti scelte:

7. RSS

Con questo blocco puoi invece inserire nel tuo post qualsiasi feed RSS.

Esempio:

Quando inserisci questo blocco, l’unica opzione che ti viene offerta, è l’inserimento del link RSS.

In seguito potrai scegliere dal menu le seguenti opzioni

1. Modifica il link RSS
2. Visualizza come elenco
3. Visualizza come griglia

Nella impostazione della barra laterale potrai invece stabilire:

8. Cerca

Questo blocco widget ti da la possibilità di inserire un campo di ricerca per i contenuti del tuo sito.

Esempio:

Cerca

Cerca

Il menu di questo blocco non fornisce ulteriori opzioni e anche nella barra laterale, oltre alla consueta classe CSS aggiuntiva, non ci sono ulteriori impostazioni tra cui scegliere.

9. Tag Cloud

L’ultimo blocco di questa categoria è quello del tag cloud, ovvero un elenco dei tag usati nei tuoi post, dove i tag più usati sono messi in risalto da una maggior dimensione del carattere.

Esempio:

business euro 2016 gutenberg iMac logo siti internet siti internet famosi sito dinamico sito statico storia di internet webdesign wordpress

Nel menu di questo blocco puoi scegliere se allineare la tag cloud:

1. A sinistra
2. Al Centro
3. A destra

Nel menu delle impostazioni hai le seguenti scelte a disposizione:

---

I 33 blocchi Gutenberg per l’incorporamento

In questa categoria di blocchi sono compresi vari servizi web che consentono di incorporare parte dei loro contenuti su altri siti.

Per incorporare il contenuto desiderato puoi scegliere il blocco del rispettivo servizio web, oppure scegliere il blocco di incorporamento generico che riconoscerà il servizio che state usando è trasformerà il blocco per voi.

Esempio:

I blocchi presenti in questa categoria al momento sono i seguenti:

1. Incorporamento generico
2. YouTube
3. Facebook
4. SoundCloud
5. Twitter
6. Instagram
7. WordPress
8. Spotify
9. Flickr
10. Vimeo
11. Animoto
12. Cloudup
13. CollegeHumor
14. Crowdsignal
15. Dailymotion
16. Hulu
17. Imgur
18. Issuu
19. Kickstarter
20. Meetup.com
21. Mixcloud
22. Reddit
23. ReverbNation
24. Screencast
25. Scribd
26. Slideshare
27. SmugMug
28. Speaker Deck
29. TED
30. Tumblr
31. VideoPress
32. WordPress.tv
33. Amazon Kindle

Nel menu dei blocchi presenti in questa categoria, trovate le opzioni di allineamento:

• A sinistra
• Al centro
• A destra

Nel menu delle impostazioni della barra laterale è presente invece solamente l’opzione di inserimento della classe CSS.

I blocchi dei Plugin

In questa posizione vengono inseriti gli elementi dei plugin che prevedono l’uso di blocchi. Questa categoria varierà a seconda dei plugin che avete installato, sarà quindi diversa da utente a utente.

I blocchi riutilizzabili

In questa ultima categoria invece potrai trovare tutti i blocchi che hai salvato. Se hai inserito un blocco che userai frequentemente, potrai salvarlo in modo da poterlo riutilizzare senza doverlo ricreare da zero.

Per salvare un blocco devi scegliere dall’icona con i tre puntini l’opzione Salva come riutilizzabile.

---

Come hai potuto vedere in questa guida, a partire da WordPress 5.0 hai a disposizione una vasta scelta di blocchi da usare nel nuovo editor Gutenberg. Inizialmente forse questo nuovo sistema potrà richiedere una breve curva di apprendimento, sono però convinto, che dopo averlo usato per un po’, tutti ne potranno apprezzare le grandi potenzialità che offre.

Per questo motivo, vi invito a non insistere troppo con il vecchio editor e di sperimentare con queste novità!

In conclusione non mi resta che augurare a tutti un buon divertimento con i blocchi Gutenberg!