Gutenberg è l’editor a blocchi introdotto in WordPress dalla versione 5.0 (dicembre 2018). Sostituisce l’editor classico basato su TinyMCE con un sistema modulare in cui ogni contenuto, paragrafo, immagine, intestazione, video, pulsante, è un blocco autonomo che puoi aggiungere, spostare, duplicare e personalizzare direttamente nell’editor visuale. L’obiettivo dichiarato del progetto, documentato su make.wordpress.org/core, è rendere la creazione di contenuti ricchi accessibile senza shortcode, HTML personalizzato o plugin esterni. Questa guida copre tutti gli aspetti dell’editor: dai blocchi base al Full Site Editing, con esempi pratici e riferimenti alla documentazione ufficiale.
Cos’è Gutenberg e come funziona
Gutenberg è il nome del progetto di sviluppo che ha portato all’editor a blocchi di WordPress. Il nome è un omaggio a Johannes Gutenberg, inventore della stampa a caratteri mobili: la filosofia è la stessa, modularità e riutilizzo. Ogni blocco è un’unità di contenuto con proprietà proprie. Un blocco paragrafo ha allineamento, dimensione del testo e colore di sfondo. Un blocco immagine ha didascalia, dimensione e possibilità di collegamento. Un blocco intestazione ha livelli da H1 a H6.
L’interfaccia di Gutenberg si compone di tre aree principali: la barra degli strumenti in alto (controlli globali e salvataggio), la barra laterale a destra (impostazioni del blocco selezionato e impostazioni dell’articolo) e l’area di lavoro centrale dove inserisci e disponi i blocchi. La barra laterale cambia dinamicamente: se selezioni un paragrafo mostra opzioni di tipografia, se selezioni una immagine mostra opzioni di didascalia e dimensione.
Il progetto Gutenberg è open source e si sviluppa su GitHub. Il repository contiene i pacchetti block-library (i blocchi base) e components (gli elementi UI comuni). Chiunque può contribuire con codice, design o documentazione, come descritto nel Block Editor Handbook su developer.wordpress.org. Lo sviluppo è attivo e gli aggiornamenti arrivano a cadenza bisettimanale, con nuovi blocchi e miglioramenti che periodicamente confluiscono nel core di WordPress.
Gutenberg vs l’editor classico
L’editor classico (TinyMCE) trattava il contenuto come un unico blocco di testo formattato, simile a un word processor. Per creare layout complessi servivano shortcode, HTML personalizzato o plugin page builder. Gutenberg cambia paradigma: il contenuto è una sequenza di blocchi indipendenti, ognuno con controlli visivi propri.
Le differenze principali sono tre. Prima: il layout è nativo. Con l’editor classico una a due colonne richiedeva uno shortcode o un plugin. Con Gutenberg usi il blocco colonne e vedi il risultato immediatamente. Seconda: la portabilità. I blocchi sono standard WordPress: se cambi tema, il contenuto resta leggibile. Con gli shortcode, cambiare tema significava trovare pagine piene di codice morto. Terza: la curva di apprendimento. L’editor classico era familiare a chi usava Word, ma limitato. Gutenberg richiede un periodo di adattamento, ma offre controllo maggiore senza scrivere codice.
Il plugin Classic Editor è disponibile per chi preferisce il vecchio sistema, ma WordPress lo manterrà solo come supporto transitorio. Per chi gestisce siti con migliaia di articoli scritti nel formato vecchio, WordPress converte automaticamente i post in un blocco “Classic” che preserva il contenuto originale. Puoi poi decidere se convertire i vecchi articoli in blocchi uno per uno o lasciarli nel formato legacy. Se stai migrando da un’altra piattaforma, la nostra guida alla migrazione WordPress spiega come trasferire i contenuti senza perdere dati.
Per chi sceglie un tema compatibile con Gutenberg, la nostra guida alla scelta del tema WordPress spiega i criteri di compatibilità e performance da verificare prima dell’installazione.
I blocchi base di Gutenberg
I blocchi base sono quelli inclusi nel core di WordPress, senza bisogno di plugin aggiuntivi. Coprono la maggior parte delle esigenze di contenuto. Ecco i più usati.
Blocco paragrafo
È il blocco più semplice e più usato. Inserisce un paragrafo di testo con controlli per grassetto, corsivo, collegamento e allineamento. La barra laterale offre dimensione del testo, colore del testo, colore di sfondo e classe CSS aggiuntiva. Il paragrafo è il blocco predefinito: quando premi Invio dopo un paragrafo, Gutenberg ne crea automaticamente uno nuovo sotto.
Blocco immagine
Permette di caricare o selezionare una immagine dalla libreria media. Offre controlli per didascalia, testo alternativo (ALT), dimensione (thumbnail, medium, large, full), allineamento e collegamento. Puoi anche aggiungere un lightbox tramite plugin compatibili. Il blocco immagine supporta il lazy loading nativo di WordPress, che migliora le performance di pagina come documentato nelle linee guida sulla velocità di Google.
Blocco intestazione
Crea titoli da H1 a H6. L’H1 è riservato al titolo dell’articolo, quindi nei contenuti si parte da H2. Il blocco intestazione ha controlli per allineamento e, nella barra laterale, per colore del testo e colore di sfondo. Le intestazioni sono l’elemento principale che i crawler usano per capire la struttura del contenuto: usarle in ordine logico (H2 per le sezioni principali, H3 per le sottosezioni) è una pratica SEO di base.
Blocco lista
Crea liste puntate o numerate. Puoi convertire un paragrafo in lista selezionando il testo e cliccando sull’icona apposita. Le liste supportano il rientro (sotto-liste) trascinando il blocco verso destra. La barra laterale permette di scegliere tra lista ordinata e non ordinare, e di impostare il numero di partenza per le liste numerate.
Altri blocchi base degni di nota: blocco citazione (per citazioni in evidenza), blocco galleria (per griglie di immagini), blocco audio, blocco video, blocco file (per download) e blocco codice (per snippet di codice formattato). Tutti seguono la stessa logica: selezioni il blocco, lo configuri dalla barra laterale, lo sposti trascinando l’icona a sei punti sulla sinistra.
Blocchi avanzati: cover, colonne e gruppo
Oltre ai blocchi base, Gutenberg include blocchi più complessi per layout avanzati. Tre di questi coperti in questa sezione sono cover, colonne e gruppo.
Blocco cover
Il blocco cover inserisce un’immagine di sfondo con testo sovrapposto. È usato per intestazioni visive, banner e sezioni hero. Puoi caricare un’immagine o scegliere un colore solido come sfondo. Il testo sovrapposto è un blocco paragrafo standard, quindi puoi formattarlo liberamente. La barra laterari permette di impostare l’opacità dell’overlay, la posizione del punto focale dell’immagine e l’altezza minima del blocco in pixel o viewport height (vh).
Blocco colonne
Il blocco colonne (Columns) crea layout multi-colonna. Puoi scegliere tra diverse varianti: 50/50, 33/33/33, 33/67, 67/33, 25/50/25. Ogni colonna è un contenitore in cui inserisci altri blocchi. Le colonne supportano il wrapping su mobile: su schermi piccoli le colonne si impilano verticalmente. La barra laterale del blocco colonne permette di regolare lo spazio tra le colonne (gap) e di aggiungere classi CSS personalizzate.
Un dettaglio pratico: le colonne di Gutenberg non sono responsive al 100% come le griglie di un framework CSS. Per layout complessi su mobile, conviene testare sempre il risultato su diversi dispositivi. Per la maggior parte dei siti però, le colonne native bastano per creare layout professionali senza page builder esterni. Se stai valutando un tema che supporti bene Gutenberg, la nostra guida alla scelta del tema WordPress spiega i criteri da verificare.
Blocco gruppo
Il blocco gruppo (Group) è un contenitore che raggruppa più blocchi sotto un’unica unità. Puoi assegnargli un colore di sfondo, un’immagine di sfondo, un margine e un padding. Il gruppo è utile per creare sezioni colorate, card con sfondo differenziato o blocchi di contenuto che vuoi spostare insieme. Se selezioni il gruppo dalla lista blocchi (l’icona a sinistra della barra degli strumenti), tutti i blocchi interni si muovono come un blocco unico.
Un altro blocco avanzato degno di nota è il blocco “Separator” (separatore), che inserisce una linea orizzontale decorativa. E il blocco “Spacer”, che aggiunge spazio vuoto regolabile in pixel. Entrambi sono semplici ma utili per la spaziatura e la separazione visiva delle sezioni.
Blocchi dinamici
I blocchi dinamici sono blocchi che generano contenuto al momento del render, non al momento del salvataggio. A differenza dei blocchi statici (paragrafo, immagine) che salvano il contenuto come HTML nel database, i blocchi dinamici eseguono codice PHP per produrre l’output. Esempi: blocco “Latest Posts” che mostra gli articoli recenti, blocco “Navigation” che mostra un menu, blocco “Query Loop” che mostra un loop di post personalizzato.
Il blocco Query Loop è il più potente. Permette di creare un loop di articoli filtrato per categoria, tag, autore, numero di post e ordine. Puoi scegliere tra diversi pattern di visualizzazione: griglia, lista, lista con immagine. Il Query Loop è il cuore del Full Site Editing: nei template dei temi a blocchi, lo usi per mostrare gli articoli nell’archivio, nella home page, nelle pagine dei tag.
Per creare blocchi dinamici personalizzati, serve sviluppare un plugin con registerBlockType e una funzione render_callback PHP. La documentazione su developer.wordpress.org/block-editor spiega nel dettaglio il processo di registrazione, i blocchi di attributi e il salvataggio dei dati. Per chi non scrive codice, plugin come Genesis Blocks o Stackable aggiungono blocchi dinamici pronti all’uso.
Pattern e template
I pattern sono combinazioni predefinite di blocchi che puoi inserire con un clic. WordPress include pattern ufficiali per intestazioni, sezioni testo+immagine, call to action, prezzi e altro. Puoi anche creare pattern personalizzati dal tuo sito e, se usi un tema che li supporta, condividerli con la community. I pattern si trovano nel pannello dei blocchi, sotto la scheda “Pattern”.
I template sono layout preimpostati per articoli o pagine. Un tema può offrire template diversi: “Blank” (solo contenuto), “Wide” (larghezza piena), “Canvas” (senza intestazione e piè di pagina). I template si selezionano dalla barra laterale, sotto “Post” > “Template”. I temi a blocchi moderni (come Twenty Twenty-Five) offrono template specifici per pagine diverse: home, archivio, singolo prodotto, ricerca.
La differenza tra pattern e template: un template definisce la struttura globale di una pagina (intestazione, contenuto, piè di pagina), mentre un pattern è un blocco di contenuto riutilizzabile all’interno di qualsiasi template. Puoi combinare più pattern in un template per costruire pagine complesse senza partire da zero.
Full Site Editing (FSE)
Il Full Site Editing è l’estensione di Gutenberg all’intero sito, non solo ai contenuti. Introdotto con WordPress 5.9 (gennaio 2022), permette di modificare intestazione, piè di pagina, archivi, pagine 404 e template usando i blocchi. Per usare FSE serve un tema a blocchi (block theme): temi come Twenty Twenty-Four, Twenty Twenty-Five, o temi premium come Kadence e GeneratePress nella loro versione block.
Con FSE accedi al “Site Editor” da Aspetto > Editor. L’interfaccia è simile all’editor degli articoli, ma opere su template globali. Puoi modificare il header aggiungendo un blocco logo, un blocco navigazione e un blocco ricerca. Puoi modificare il footer con blocchi colonne e testo. Puoi creare template personalizzati per categorie specifiche: ad esempio, un template diverso per la categoria “Recensioni” e uno per la categoria “Guide”.
Il Full Site Editing cambia il ruolo del tema. Prima, il tema controllava l’aspetto e il contenuto era separato. Con FSE, il tema diventa un insieme di template a blocchi che puoi modificare liberamente. Questo riduce la dipendenza dai page builder: per molti siti, un tema a blocchi con FSE sostituisce Elementor o Divi. La documentazione ufficiale su wordpress.org descrive nel dettaglio il flusso di lavoro del Site Editor.
Un aspetto pratico: FSE richiede un hosting performante. I template a blocchi generano più query PHP rispetto ai temi classici, quindi un hosting WordPress ottimizzato fa la differenza. Nella nostra guida all’hosting WordPress in Italia spieghiamo come valutare TTFB, storage NVMe e caching server per ottenere tempi di caricamento sotto i 2 secondi. Prima di modificare template e header con FSE, fare un backup completo è la precauzione giusta: la guida al backup WordPress automatico spiega come configurare UpdraftPlus o Duplicator in pochi minuti.
Verdetto
Gutenberg è ormai lo standard per creare contenuti in WordPress. L’editor classico è stato superato in flessibilità e il Full Site Editing sta rendendo opzionale l’uso dei page builder per molti progetti. La curva di apprendimento esiste, ma è ripagata da una maggiore indipendenza: meno plugin, meno shortcode, più controllo visivo. Per chi parte da zero, la raccomandazione è iniziare con i blocchi base (paragrafo, intestazione, immagine, lista) e procedere gradualmente verso colonne, gruppi e cover. Per chi gestisce siti esistenti, la conversione dei vecchi articoli può avvenire un posto alla volta, sfruttando il blocco “Classic” come ponte temporaneo.
Il futuro di WordPress è a blocchi. I temi a blocchi, i pattern e il Full Site Editing sono le direzioni in cui il progetto sta investendo. Imparare a usare Gutenberg non è più opzionale: è la competenza base per chi lavora con WordPress oggi.
Domande frequenti
- Gutenberg è gratuito?
Sì. Gutenberg è incluso nel core di WordPress dalla versione 5.0. Non ci sono costi aggiuntivi. Esiste anche un plugin separato chiamato Gutenberg che permette di testare le funzioni prima che entrino nel core, disponibile gratuitamente su wordpress.org/plugins/gutenberg.
- Posso tornare all'editor classico?
Sì, installando il plugin Classic Editor dal repository ufficiale. Tuttavia, WordPress ha annunciato che il supporto per il plugin terminerà nel 2022. Dopo quella data, l’editor classico non riceverà più aggiornamenti di sicurezza. La raccomandazione è iniziare la transizione il prima possibile.
- Gutenberg funziona con Elementor?
Sì. Elementor e Gutenberg coesistono: puoi usare Elementor per le pagine principali e Gutenberg per gli articoli del blog. Tuttavia, se usi Elementor per tutte le pagine, Gutenberg diventa quasi inutile. La scelta dipende dal workflow preferito.
- I temi classici funzionano con Gutenberg?
Sì, con limitazioni. I temi classici (non block theme) supportano i blocchi nei contenuti, ma non permettono il Full Site Editing. Per usare FSE (modifica di header, footer e template), serve un tema a blocchi come Twenty Twenty-Five o Kadence.
- Come creare un blocco personalizzato?
Registri un blocco con
registerBlockTypein un plugin, definisci gli attributi inblock.jsone scrivi le funzionieditesavein JavaScript. Per blocchi dinamici, usirender_callbackin PHP. La documentazione completa è su developer.wordpress.org/block-editor.
Price alerts (MadLinks)
Ricevi novità, aggiornamenti e contenuti esclusivi nella tua casella.
Lascia un commento