Gutenberg: editor a blocchi per WordPress

Tempo di lettura: 4 minuti

Sono sicura che la maggior parte di voi lo conosca e lo usi -quasi -correntemente, ma spesso non se ne conoscono le potenzialità e i dettagli.


Ricco di funzionalità, facile da usare, compatibile con tutti i temi, veloce da imparare, personalizzabile e scalabile.


Di cosa sto parlando?


Di Gutenberg, ovviamente!

Gutenberg è il plugin, ormai diventato lo standard (lo troverai infatti già presente nell’installazione di WordPress), che ti permetti di creare contenuti per le tue pagine con un semplice click.


Questo strumento è diventato così famoso e potente grazie alla sua peculiare funzionalità a blocchi: cosa significa?


Con Gutenberg puoi costruire la tua pagina o il tuo articolo mixando blocchi di vario tipo senza però dover ricorrere a page builder, che possono non essere sempre compatibili con i temi, o rallentare il sito se quest’ultimo fosse già di suo molto grande.


Che tipologia di blocchi esistono?


Di tutti i tipi, soprattutto perché molti plugin hanno dei priori blocchi di Gutenberg e perché, se sei uno sviluppatore, puoi creare i tuoi blocchi personalizzati.

Ma partiamo dalle basi: come usarlo?

Dopo aver creato una pagina o un nuovo articolo vi troverete davanti un pagina bianca.

In alto a sinistra, però, troverete un gruppo di icone, vediamole insieme:

Add Block

Per aggiungere un nuovo blocco, cliccando su di essa comparirà una lista di blocchi che possiamo aggiungere (vedremo blocco per blocco successivamente in questo articolo e nei prossimi articoli dedicati a Gutenberg).

Annulla e ripeti

Niente di più della già famosa funziona CTRL+Z (⌘+Z per Mac) e CTRL+Z+Shift (⌘+Z+Shift per Mac).

Struttura del contenuto

Ti aiuta a capire come stai strutturando la pagina, con numero di parole, numero di blocchi utilizzati, etc.

Block Navigation

In breve la lista dei blocchi che hai utilizzato finora nella tua pagina.


Quindi, per inserire un nuovo blocco non dovremo fare altro che selezionare la prima icona e aggiungere un blocco.


Vediamo ora blocco per blocco partendo dai blocchi più utilizzati, come si presentano e le loro funzionalità.

Paragrafo

Forse il blocco che utilizzerai di più, è infatti un paragrafo di testo semplice che puoi formattare grazie agli strumenti contestuali che troverai nella sidebar a destra e grazie alla barra degli strumenti che troverai in alto a sinistra di ogni blocco paragrafo.

Puoi modificare colore, grandezza, allineamento, inserire link e capolettera, colorare lo sfondo o dare un effetto bold o italic al tuo testo.

Titolo

Con le stesso funzionalità di formattazione del paragrafo ma con la misura tipica dei titoli.

Puoi scegliere tra diverse grandezze: h2, h3, h4, h5, etc., modificare allineamento, grandezza, etc.

Immagine

Con questa funzione puoi inserire direttamente un’immagine nella pagina, una volta selezionato il blocco avrai questa schermata:

Ora puoi trascinare all’interno del box un’immagine oppure cliccare su Upload (o su Media Library se già è presente nei media di WordPress).

Se vuoi puoi decidere di inserirla direttamente tramite url.

In alto a sinistra invece troverai le opzioni di allineamento e, se desideri ingrandirla o rimpicciolirla, basterà selezionare le maniglie blu intorno all’immagine o inserire le misure esatte direttamente nella sidebar contestuale a destra.

Ricorda sempre di inserire nel box della sidebar a destra il Tag Alt!

Citazione

Se vuoi mettere in risalto una frase puoi usare questo blocco: darà un bell’effetto ad un paragrafo che vuoi enfatizzare, come questo:

I blocchi di Gutenberg

Spazio vuoto

Semplice ma indispensabile ti permette di inserire degli spazi vuoti tra due blocchi.

Puoi impostare l’altezza con le maniglie o inserendo i pixel direttamente nella sidebar.

Galleria

Con questo blocco puoi inserire una galleria di immagini in solo 5 minuti:

  • Seleziona il blocco
  • Clicca su Upload (o su Media Library se le immagini sono già presenti nelle Media di WordPress)
  • Seleziona tutte le immagini che vuoi inserire
  • Clicca su Crea una nuova galleria

La tua galleria è stata creata, facile no?

Elenco

Sebbene molto utile, c’è poco da dire su questo blocco: ti permette di inserire un elenco puntato e, grazie agli strumenti, puoi modificare aspetto, inserire elenchi numerati, indentare i punti, etc.

Audio

Con un click inserisci un file audio nella tua pagina: una volta inserito, nella versione front end, vedrai apparire i comandi di riproduzione (play, pausa, stop, avanti, indietro, etc).

Copertina

Si inserisce e modifica esattamente come il blocco immagine, la vera differenza si troverà nel front end:

Sull’immagine sarà, infatti, possibile inserire un filtro (scegliendo colore e opacità), inserire un testo e, spuntando la casella che troverai nella sidebar “Sfondo fisso”, si creerà un bellissimo effetto parallax, come questo:

Gutenberg


Questi erano soltanto i blocchi di Gutenberg più utilizzati, continua a seguirci ed iscriviti alla newsletter (la trovi qui sotti) per essere il primo a leggere i prossimi articoli sui blocchi Gutenberg:

parleremo dei blocchi di formattazione, degli elementi di layout, dei widget, degli incorporamenti e ti darò anche qualche trucco sui blocchi speciali di alcuni plugin 😉

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *