L'editor a blocchi

Modulo 4: Creare contenuti · Tempo di lettura: 8 minuti

Obiettivo della lezione: Dopo questa lezione sarà in grado di costruire una pagina con blocchi e pattern, e saprà come funzionano le bozze, la programmazione e le revisioni.

Concetti chiave: blocco, impostazioni del blocco, barra degli strumenti, vista elenco, gruppo, colonne, pattern, pattern sincronizzato, bozza, privato, programmazione, revisioni, anteprima

Tutto è un blocco

Dalla versione 5.0 di WordPress (fine 2018) i contenuti si creano nell'editor a blocchi (chiamato anche Gutenberg, dal nome del progetto). Una pagina è composta da singoli blocchi: un titolo, un paragrafo, un'immagine, un pulsante, un elenco, una tabella, un video incorporato. Ogni blocco ha le proprie impostazioni. I blocchi si possono mettere uno sotto l'altro, uno accanto all'altro (in colonne) oppure uno dentro l'altro (in un gruppo).

Perché i blocchi? Nel vecchio editor una pagina era un unico grande campo di testo. Se voleva due colonne o un pulsante, doveva usare un site builder, degli shortcode o del codice HTML. Con i blocchi tutto questo è possibile direttamente in WordPress, e il risultato è un HTML pulito che il tema si occupa di formattare.

Dietro le quinte, WordPress salva i blocchi come HTML racchiuso tra commenti:

<!-- wp:heading -->
<h2 class="wp-block-heading">Orari di apertura</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Siamo aperti da martedì a sabato.</p>
<!-- /wp:paragraph -->

È utile saperlo: il contenuto rimane HTML leggibile, anche se in seguito cambierà tema o se un blocco non esisterà più. Lo si può vedere scegliendo per un blocco l'opzione "Modifica come HTML", oppure nell'editor del codice (Ctrl+Shift+Alt+M).

L'editor in tre parti

1. Il canvas al centro: la pagina così come apparirà, all'incirca.
2. La barra degli strumenti sopra un blocco selezionato: grassetto, corsivo, link, allineamento e la possibilità di trasformare il blocco in un altro tipo (un paragrafo diventa un elenco, un'immagine diventa una galleria).
3. La barra laterale a destra con due schede: Pagina (o Articolo) con le impostazioni dell'intera pagina, e Blocco con le impostazioni del blocco selezionato, come colore, spaziatura e dimensione del carattere.

Due strumenti che rendono il lavoro molto più semplice:

• Vista elenco (l'icona con tre trattini in alto a sinistra): la struttura della pagina rappresentata come un albero. Con questa è possibile selezionare esattamente il blocco desiderato, anche se si trova in un gruppo dentro una colonna.
• Comandi con lo slash: digiti in una riga vuota / seguito dal nome di un blocco (/titolo, /pulsante, /immagine) e prema Invio.

Costruire con gruppi e colonne

Una buona pagina ha una struttura chiara. Per ottenerla si usano tre elementi di base:

• Gruppo: un contenitore attorno a più blocchi, con un proprio sfondo o spaziatura. Per esempio un blocco colorato con un titolo, una frase e un pulsante.
• Colonne: blocchi affiancati. Su uno smartphone si dispongono uno sotto l'altro.
• Riga e Pila: varianti di un gruppo che ordinano i blocchi in orizzontale o in verticale.

Utilizzi i titoli nel modo corretto: un solo H1 (il titolo della pagina, che di solito è generato dal tema), sotto di esso H2 per i capitoli e H3 per le sezioni al loro interno. Non scelga un livello di titolo in base alla dimensione del carattere; quella si regola nelle impostazioni del blocco. Gli screen reader e i motori di ricerca usano i titoli per comprendere la struttura della pagina (lezione 9.2).

Pattern: non ricominciare sempre da capo

Un pattern è un gruppo di blocchi già pronto: un titolo con testo e immagine, una tabella dei prezzi, tre colonne con icone. Si inseriscono tramite il pulsante di inserimento (il simbolo più), scheda Pattern. Il Suo tema spesso ne include già alcuni, e nella libreria di pattern di wordpress.org se ne trovano centinaia.

È anche possibile creare pattern personalizzati: selezioni alcuni blocchi, scelga nella barra degli strumenti i tre puntini e Crea pattern. In quel momento può scegliere se il pattern deve essere sincronizzato:

• Non sincronizzato: ogni volta che lo inserisce, ottiene una copia indipendente. Se la modifica, cambia solo quella copia. Utile come modello.
• Sincronizzato: ovunque sia presente, è identico. Se lo modifica in un punto, cambia ovunque. Utile per un blocco "Contatti e orari di apertura" presente su dieci pagine. (In passato venivano chiamati "blocchi riutilizzabili".)

Un'insidia: un pattern sincronizzato che modifica "velocemente" su una pagina cambia anche su tutte le altre pagine. Se desidera qualcosa di diverso in un solo punto, trasformi quella copia in un gruppo normale (scollegandola).

Salvare, pubblicare e programmare

Una pagina ha uno stato:

Utilizzi Anteprima per vedere la pagina come la vedrà un visitatore, anche su cellulare e tablet, prima di pubblicarla.

Revisioni: tornare indietro nel tempo

Ogni volta che salva, WordPress conserva una revisione: la versione di quel momento. Nella barra laterale, accanto alla pagina, vede quante revisioni sono presenti. Facendo clic su di esse, vede con un cursore le differenze tra due versioni e può ripristinare una versione precedente.

Le revisioni sono la Sua prima rete di sicurezza in caso di errore ("ho cancellato per sbaglio metà pagina"). Sono comunque tutte salvate nel database. Un sito con migliaia di revisioni diventa più pesante e talvolta più lento. Può limitarne il numero in wp-config.php:

define( 'WP_POST_REVISIONS', 20 );

La lezione 6.3 tratta la pulizia delle vecchie revisioni.

Dove finisce l'editor

L'editor a blocchi crea il contenuto di una pagina. Ciò che sta attorno al contenuto (l'intestazione del sito, il menu, il piè di pagina) appartiene al tema. Con un tema a blocchi, questo si modifica nell'Editor del sito (Aspetto > Editor) utilizzando gli stessi blocchi; con un tema classico, nel Personalizza e nei Widget (lezione 5.1). Se utilizza un site builder come Elementor o Divi, lavorerà in quel programma invece che nell'editor a blocchi; gli svantaggi di questa scelta sono trattati nella lezione 5.1.

Riepilogo

• Una pagina è composta da blocchi che si dispongono uno sotto, accanto e dentro l'altro; WordPress li salva come HTML racchiuso tra commenti.
• La vista elenco e i comandi con lo slash rendono la costruzione rapida e precisa.
• Utilizzi i titoli per la struttura (H2, H3), non per la dimensione del carattere.
• I pattern fanno risparmiare lavoro; un pattern sincronizzato cambia ovunque contemporaneamente.
• Bozza, programmato, privato e revisioni Le danno il controllo su cosa è visibile e quando, e una via per tornare indietro.

Quiz

Esercizio

Esercizio D4.1: Costruisca una pagina con i blocchi. Crei una pagina in bozza "Chi siamo" con: un H2 e un H3, almeno due paragrafi, un'immagine con testo alternativo, un blocco colonne con due colonne, un pulsante con un link, e un pattern dalla libreria. Trasformi un gruppo in un pattern sincronizzato personalizzato e lo inserisca in una seconda pagina in bozza. Lo modifichi poi in un solo punto e verifichi cosa succede nell'altra pagina. Infine, ripristini una revisione precedente. Segni ogni passaggio e descriva in due frasi quando userebbe, e quando non userebbe, un pattern sincronizzato.

Per approfondire

Per il lavoro all'interno di WordPress non abbiamo ancora articoli nostri; la documentazione ufficiale di WordPress è comunque molto ampia.

• L'editor a blocchi (wordpress.org, in inglese): https://wordpress.org/documentation/article/wordpress-block-editor/
• Pattern (wordpress.org, in inglese): https://wordpress.org/documentation/article/block-pattern/
• Revisioni (wordpress.org, in inglese): https://wordpress.org/documentation/article/revisions/