Come usare i blocchi Gutenberg

da Ultima modifica 12 Mag 2020webdesign, wordpress0 commenti

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.

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.

aggiungi blocco

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:

menu paragrafo
  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:

impostazioni paragrafo
  1. Impostazioni del testo
    • Stabilisci la dimensione del carattere scegliendo tra le dimensioni prestabilite: piccolo, normale, medio, grande, enorme. Oppure inserendo la dimensione desiderata in pixel.
    • Attivare l’opzione Capolettera per far apparire la prima lettera del paragrafo più in grande.
  2. Impostazioni colore
    • Seleziona il colore di sfondo del paragrafo, usando i colori prestabiliti oppure scegliendone uno personalizzato.
    • Scegli il colore del testo del paragrafo, usando i colori prestabiliti oppure scegliendone uno personalizzato.
  3. avanzate
    • Puoi aggiungere una classe css per ulteriori opzioni di stile

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:

menu titolo Gutenberg
  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:

impostazioni titolo Gutenberg
  1. La dimensione dell’intestazione, dal più grande al più piccolo, usando le dimensioni stabilite nel tuo tema.
  2. L’allineamento
    • a sinistra
    • al centro
    • a destra
  3. Inserire un’eventuale ancora per i link a una determinata sezione della stessa pagina
  4. Aggiungere un’eventuale classe css supplementare

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:

menu elenco Gutenberg
  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:

Ho inserito l’immagine di un asinello e come vedi posso anche aggiungere una didascalia.

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

menu immagine Gutenberg
  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:

  1. Carica, ti consente di inserire un’immagine presente nel tuo computer
  2. Libreria media, ti consente di inserire un immagine già presente nella tua libreria
  3. 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:

impostazioni immagine Gutenberg
  1. Il testo alternativo (Alt Text)
  2. La dimensione dell’immagine, puoi scegliere tra
    • Miniatura
    • Medio
    • Grande
    • Dimensione reale
    • (o altre dimensioni stabilite dal tuo tema)
  3. Inserire la dimensione in pixel
  4. Scegliere la dimensione secondo percentuale
  5. Scegliere il link di destinazione
    • Nessun link
    • Al file media
    • Alla pagina dell’allegato
    • Ad un URL specifico
  6. Scegliere se aggiungere un’ulteriore classe CSS

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:

menu citazione Gutenberg
  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:

impostazioni citazione Gutenberg
  1. gli stili
    • predefinito
    • grande
  2. l’opzione avanzata per aggiungere la classe css.

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:

menu galleria Gutenberg
  1. A sinistra
  2. Al centro
  3. A destra

e nella spazio principale del blocco puoi scegliere:

  1. Carica, ti consente di inserire un’immagine presente nel tuo computer
  2. 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:

impostazioni galleria Gutenberg
  1. Quante colonne dovrà avere la galleria
  2. Se ritagliare o meno le immagini in modo che siano uniformi
  3. Il link di destinazione
    • Alla pagina dell’allegato
    • Al file media
    • Nessun link
  4. Una classe CSS supplementare

7. Audio

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

Esempio:

Terminal D – Silent Partner

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

menu audio Gutenberg
  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:

  1. Carica, per caricare un’immagine presente nel tuo computer
  2. Libreria media, per inserire un immagine già presente nella tua libreria
  3. 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:

impostazioni audio Gutenberg
  1. Autoplay, per permettere o meno al tuo file audio di avviarsi automaticamente
  2. Ciclo, per far si che il file ricominci dall’inizio ogni volta che arriva alla fine
  3. Il link di destinazione
    • Le opzioni di precaricamento
    • La classe CSS supplementare

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:

Copertina con sfondo fisso

Per il blocco di copertina puoi scegliere se:

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

e nella spazio principale del blocco puoi scegliere:

  1. Carica, dove puoi inserire un’immagine presente nel tuo computer
  2. 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:

impostazioni copertina Gutenberg
  1. Impostazioni copertina, dove puoi scegliere se fissare l’immagine di sfondo.
  2. In caso di sfondo fisso puoi stabilire il punto focale dell’immagine in modo visuale oppure inserendo le corrispondenti percentuali.
  3. Sovrapposizione, dove puoi scegliere il colore da sovrapporre all’immagine, usando uno dei colori prestabiliti, oppure un colore personalizzato
  4. La percentuale di opacità del livello di colore
  5. Il campo per inserire classi CSS supplementari

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:

menu file Gutenberg
  1. A sinistra
  2. Al centro
  3. O a destra

Nello spazio principale puoi inoltre scegliere:

  1. Se caricare un file dal tuo computer
  2. oppure se sceglierlo dalla Libreria media

Nel menu delle impostazioni puoi determinare:

impostazioni file Gutenberg
  1. Il collegamento del pulsante al file media oppure alla pagina dell’allegato
  2. Se aprire il link in una nuova finestra
  3. La visualizzazione del pulsante di download
  4. L’aggiunta di una classe CSS

10. Video

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

Esempio:

Video d’esempio con un cane

Nel menu a scelta rapida puoi selezionare:

menu video Gutenberg
  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:

  1. Carica, ti consente di inserire un video presente nel tuo computer
  2. Libreria media, ti consente di inserire un video già presente nella tua libreria
  3. 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.

impostazioni video Gutenberg
  1. Autoplay, per fare in modo che il video si avvii da solo
  2. Ciclo, per far riavviare il video ogni volta che arriva alla fine
  3. Silenzioso, per togliere l’audio
  4. Controlli di riproduzione, per mostrare i pulsanti del controlli
  5. Scegliere le opzioni di precaricamento
  6. Selezionare un’immagine di anteprima
  7. Inserire se necessario una classe CSS aggiuntiva

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…

advancedweb.ch

Nel menu a scelta rapida trovi infatti le seguenti opzioni:

menu html Gutenberg
  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:

classic editor Gutenberg
  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:

menu preformattato Gutenberg
  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.

menu codice Gutenberg

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:

menu citazione evidenziata
  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:

impostazioni citazione evidenziata
  1. Scegli lo stile
    • Predefinito
    • Tinta unita
  2. Seleziona il colore dello sfondo tra i colori proposti oppure scegliendone uno personalizzato
  3. Scegli il colore del testo tra i colori proposti oppure scegliendone uno personalizzato
  4. Inserire se necessario una classe CSS aggiuntiva

6. Tabella

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

Esempio:

nomecognome
1GinoVerdi
2GiovannaRossi
3LucaBianchi

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

menu 1 tabella
  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:

  1. Scegli lo stile
    • Predefinito
    • Striscie
  2. Scegli le impostazioni della tabella, ovvero se desideri che le celle delle tabelle abbiano una larghezza fissa
  3. Seleziona le impostazioni di colore, se desideri uno sfondo con un colore diverso
  4. Inserire se necessario una classe CSS aggiuntiva

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:

  1. Scegliere lo stile
    • Predefinito
    • Linea Ampia
    • Punti
  2. Aggiungere se necessario una classe CSS aggiuntiva

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:

Questa prima colonna contiene dei paragrafi di testo.

Si possono inserire anche più blocchi per ciascuna colonna.

In questa colonna ho un paragrafo e un’immagine.

La terza colonna contiene un’altro paragrafo e un file audio.

Terminal D – Silent Partner

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:

  1. Scegli il numero di colonne (sono supportate fino a 6 colonne)
  2. Aggiungi eventualmente una classe CSS

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:

menu pulsante
  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:

impostazioni pulsanti
  1. Scegli lo stile
    • Predefinito
    • Bordo in evidenza
    • Squadrato
  2. Seleziona il colore di sfondo, scegliendo dai colori prestabiliti oppure selezionandone uno personalizzato
  3. Scegli il colore del testo, scegliendo dai colori prestabiliti oppure selezionandone uno personalizzato
  4. Inserisci se necessario una classe CSS aggiuntiva

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:

gattino

Guardami!

Sono un gattino nel blocco Media e Testo

Quando inserisci questo blocco hai a disposizione i seguenti comandi:

menu media e testo
  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:

impostazioni media e testo
  1. Decidi se su dispositivi mobili vuoi mantenere la visualizzazione originale (in orizzontale) oppure se disporre i 2 elementi verticalmente
  2. Scegli le impostazioni del colore di sfondo, scegliendo dai colori proposti oppure selezionando un colore personalizzato
  3. Inserisci se richiesto una classe CSS aggiuntiva

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:

menu leggi tutto

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

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

  1. Scegliere se mostrare o meno il riassunto (il contenuto prima del blocco Leggi tutto)

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.

spazio vuoto

Nella barra laterale puoi trovare le seguenti impostazioni:

impostazioni spazio vuoto
  1. L’altezza dello spazio, puoi inserire il valore in pixel dell’altezza desiderata
  2. La classe aggiuntiva CSS opzionale

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”]

blocco shortcode

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:

Nel menu di questo blocco puoi personalizzare l’allineamento:

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

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

  1. La visualizzazione normale oppure come menu a discesa
  2. Se mostrare o meno il conteggio degli articoli
  3. L’inserimento se richiesto di una classe CSS aggiuntiva

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:

Marzo 2024
L M M G V S D
 123
45678910
11121314151617
18192021222324
25262728293031

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

menu calendario
  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:

Nel menu del blocco categorie puoi trovare le opzioni:

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

E nel menu delle impostazioni:

impostazioni categorie
  1. Puoi scegliere se visualizzare l’elenco normalmente oppure come menu a discesa
  2. Decidi se visualizzare la gerarchia
  3. Se mostrare il conteggio degli articoli
  4. E se inserire una classe CSS aggiuntiva

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

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

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

Nel menu delle impostazioni puoi effettuare le seguenti scelte:

impostazioni commenti
  1. Decidi se mostrare o nascondere l’avatar
  2. Imposta la visualizzazione della data
  3. Scegli se mostrare o nascondere il riassunto
  4. Stabilisci il numero di commenti da visualizzare
  5. Aggiungi se necessario una classe CSS

6. Articoli Recenti

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

Esempio:

Nel menu di questo blocco puoi effettuare le seguenti operazioni:

menu articoli recenti
  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:

impostazioni articoli recenti
  1. Ordinare i post:
    • Dal più recente al più vecchio
    • Dal più vecchio al più recente
    • In ordine alfabetico
    • In ordine alfabetico inverso
  2. Selezionare la categoria da mostrare
  3. Scegliere il numero di elementi da mostrare
  4. Stabile se mostrare o meno la data di pubblicazione
  5. Aggiungere una classe CSS opzionale

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.

blocco 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:

  1. Il numero di elementi da visualizzare
  2. La visualizzazione del nome dell’autore
  3. Della data
  4. Del riassunto, con la possibilità di stabilire il numero di parole massimo
  5. L’aggiunta una classe CSS opzionale

8. Cerca

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

Esempio:

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.

blocco cerca

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:

menu tag cloud
  1. A sinistra
  2. Al Centro
  3. A destra

Nel menu delle impostazioni hai le seguenti scelte a disposizione:

impostazioni tag cloud
  1. Scegliere se mostrare i tag o le categorie
  2. Decidere se mostrare o meno il conteggio degli articoli
  3. Aggiungere se necessario una classe CSS opzionale

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.

altre opzioni Gutenberg

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!

Tiziano Spagnolatti
Tiziano Spagnolatti
Scritto da: tiz
Web designer e Web developer, Fondatore e titolare di AdvancedWeb.ch, Consumatore di caffè, Scarso chitarrista ma con una chitarra bellissima.

0 commenti

Invia un commento

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

Post Recenti

Share This