Hai cambiato tema e il tuo editor familiare si è trasformato in una tela di blocchi sconosciuta? Chiunque apra Gutenberg per la prima volta vive questo momento di blocco. I pulsanti abituali sono spariti, i campi Metabox si sono spostati e creare un semplice articolo richiede il doppio del tempo.

Ma la verità è questa: l'editor a blocchi di WordPress è il modo più veloce per impaginare contenuti senza codice. Nella pratica, abbiamo riscontrato che dopo un paio d'ore di lavoro con i blocchi, non vorrai più tornare all'editor classico. E se conosci le scorciatoie da tastiera e qualche trucco, Gutenberg inizia a funzionare più velocemente di qualsiasi page builder.

In questa guida troverai un'analisi completa dell'editor a blocchi: dal primo avvio alle scorciatoie. Nessuna teoria fine a sé stessa, solo passaggi concreti che puoi replicare sul tuo sito.

💡 Panoramica rapida:

• Apri l'editor: Articoli → Aggiungi nuovo e ti troverai nell'interfaccia a blocchi di Gutenberg
• Aggiungi contenuti usando i blocchi: ogni paragrafo, titolo, immagine o pulsante è un blocco separato e spostabile
• Inserisci i blocchi tramite l'icona "+" o il tasto /, digita semplicemente il nome del blocco che ti serve
• Configura i blocchi attraverso la barra laterale: le opzioni di formattazione e stile cambiano in base al tipo di blocco selezionato
• Impara le scorciatoie: Shift + Alt + H (Windows) apre un cheat sheet con tutte le scorciatoie

Cos'è l'editor Gutenberg

Gutenberg è l'editor di contenuti a blocchi integrato nel core di WordPress a partire dalla versione 5.0. A differenza del classico editor TinyMCE, dove l'intero articolo era un unico campo di testo, Gutenberg suddivide il contenuto in blocchi indipendenti: paragrafi, titoli, immagini, gallerie, pulsanti, colonne e decine di altri elementi.

Ogni blocco può essere spostato, configurato e stilizzato indipendentemente dagli altri. Il risultato è visibile immediatamente: questo è un editor visuale, non un campo di testo con un pulsante "Anteprima".

Nel 2026, Gutenberg si è evoluto da una novità controversa a un page builder a tutti gli effetti. Con l'introduzione del Full Site Editing (FSE), l'editor a blocchi è andato oltre articoli e pagine. Ora puoi modificare header, footer, template degli articoli e archivi tramite esso. L'editor classico è ancora disponibile come plugin separato, ma WordPress ne ha ufficialmente terminato il supporto nel 2022. Vengono ancora rilasciati aggiornamenti di sicurezza, ma non vengono aggiunte nuove funzionalità.

Se lavori seriamente con WordPress, Gutenberg non è un'opzione ma lo strumento principale. Impararlo vale lo sforzo anche solo per la velocità: una volta presa la mano, gli articoli prendono forma 2-3 volte più velocemente rispetto all'editor classico con la sua pila di campi metabox.

Interfaccia: primo avvio

Per aprire l'editor, vai su Articoli → Aggiungi nuovo (o Pagine → Aggiungi nuovo per le pagine). WordPress caricherà Gutenberg con una schermata di benvenuto e un campo del titolo vuoto.

Sulla destra c'è una barra laterale con due schede: Articolo (o Pagina) e Blocco. La scheda Articolo contiene le impostazioni globali: permalink, categorie, tag, immagine in evidenza, estratto e stato di pubblicazione. La scheda Blocco mostra le impostazioni per il blocco specifico selezionato.

Nota che il campo del permalink è disponibile immediatamente, senza un clic separato sul titolo. Questo fa risparmiare qualche secondo su ogni articolo.

Lavorare con i blocchi di testo

Titolo dell'articolo

Il primo blocco nell'editor è il titolo. Inserisci semplicemente il testo e diventa automaticamente l'H1 dell'articolo. Accanto al titolo c'è un pulsante Modifica che apre la modifica del permalink direttamente nel blocco.

Premi Invio e sotto il titolo compare un nuovo blocco paragrafo. Gutenberg mantiene la navigazione da tastiera familiare a chi usava l'editor classico: Invio crea un nuovo blocco, Backspace lo unisce al precedente.

Paragrafi e barra di formattazione

Il nuovo blocco predefinito è il Paragrafo. Ma prima di inserire il testo, Gutenberg mostra le opzioni: il blocco può essere trasformato in intestazione, immagine, galleria, copertina e decine di altri tipi.

Dopo aver inserito il testo, compare la barra di formattazione:

La barra degli strumenti consente di:

• Trasformare un paragrafo in citazione, intestazione, elenco, codice o testo preformattato
• Applicare grassetto, corsivo, barrato e sottolineato
• Allineare il testo a sinistra, a destra, al centro o giustificato
• Aggiungere un link con l'opzione di aprirlo in una nuova scheda
• Inserire un'immagine in linea direttamente nella riga
• Duplicare, spostare o eliminare il blocco
• Modificare il blocco come HTML
• Salvare il blocco nei Blocchi riutilizzabili

Nella scheda Blocco della barra laterale trovi impostazioni avanzate: dimensione del carattere, capolettera, colore di sfondo e del testo, spaziatura interna e classe CSS personalizzata. I colori possono essere impostati liberamente; la palette non è limitata ai preset del tema.

Aggiungere immagini

Le immagini si possono inserire in tre modi: tramite l'icona "+" → scheda Immagine, trascinando un file dal desktop direttamente nell'editor, oppure con il comando da tastiera /image all'interno di un paragrafo.

Clicca su una qualsiasi icona "+", seleziona la scheda Immagine e compare un blocco con tre fonti: carica dal computer, seleziona dalla libreria media o incolla tramite URL.

Selezionare un blocco dal menu di inserimento è il metodo più visivo, soprattutto all'inizio. Una volta presa confidenza, passerai a /image, ma il menu visivo resta sempre disponibile.

Dopo aver inserito un'immagine, la barra laterale offre: testo alternativo (fondamentale per SEO e accessibilità), dimensione, proporzioni e stili (arrotondamento, bicromia, ombre e bordi).

La finestra di dialogo standard per i file media è la stessa dell'editor classico; qui puoi impostare titolo e descrizione. Ma le impostazioni principali ora sono concentrate nella barra laterale del Blocco.

Nella pratica, consigliamo di compilare sempre il testo alternativo: aiuta sia i motori di ricerca sia chi usa uno screen reader. La descrizione deve essere specifica, di 4-8 parole, e contenere la parola chiave della sezione.

File scaricabili

Il blocco File permette di allegare un PDF, uno ZIP, un'immagine o qualsiasi altro file che i lettori possono scaricare.

Carica un file o selezionalo dalla libreria media; Gutenberg creerà automaticamente un pulsante di download.

Il testo del pulsante e il nome del file sono modificabili. Puoi aggiungere una classe CSS per uno stile personalizzato. Il pulsante si apre in una nuova scheda per impostazione predefinita.

Citazioni e callout

Il blocco Citazione aggiunge una citazione formattata. A differenza di un paragrafo normale, la citazione è evidenziata visivamente; il tema vi applica una formattazione speciale.

La barra laterale del blocco Citazione consente di configurare colore di sfondo, font e spaziatura interna. La citazione può apparire come parte della tua identità visiva anziché come un classico riquadro grigio.

Una citazione accetta lo stesso testo di un paragrafo ma risalta visivamente. Oltre alla Citazione standard, esistono la Citazione in evidenza (un callout più grande) e il blocco Versi (un blocco per la poesia che conserva spazi e interruzioni di riga).

Incorporare video e contenuti esterni

Gutenberg supporta l'incorporamento di contenuti da oltre 30 piattaforme: YouTube, Vimeo, Twitter, Facebook, SoundCloud, WordPress.tv, Slideshare e altre. La procedura è la stessa per tutte: inserisci un blocco Incorporamento, seleziona la piattaforma, incolla l'URL e clicca su Incorpora.

Incolla l'URL, clicca su Incorpora, e il gioco è fatto. Gutenberg recupera automaticamente l'anteprima, il titolo e la miniatura del video da YouTube.

Il video appare direttamente nell'editor; puoi visualizzare l'anteprima senza uscire dal pannello di amministrazione. Per YouTube sono disponibili impostazioni come nascondere i controlli, attivare la riproduzione automatica o impostare un tempo di inizio.

Pulsanti e call to action

Il blocco Pulsanti crea uno o più pulsanti in fila. Perfetto per le call to action: «Scarica», «Iscriviti», «Vai su WordPress.org».

Inserisci il testo, incolla l'URL e configura lo stile: tinta piena, contorno, arrotondamento degli angoli, dimensione. I pulsanti si adattano automaticamente al mobile; sugli schermi stretti si estendono a tutta larghezza.

Gutenberg verifica il contrasto tra il testo del pulsante e lo sfondo: se l'abbinamento cromatico risulta illeggibile, l'editor mostra un avviso. Un piccolo dettaglio, ma fa risparmiare tempo nei controlli di accessibilità.

Colonne e griglie

Il blocco Colonne crea una griglia da 2 a 6 colonne. Puoi inserire qualsiasi altro blocco all'interno di ciascuna colonna: un paragrafo, un'immagine, un pulsante o una citazione.

Di default vengono create due colonne, ma puoi modificarne il numero e la larghezza di ciascuna nelle impostazioni del blocco.

Sui dispositivi mobili, le colonne si impilano automaticamente in verticale; il contenuto non si spezza e resta leggibile. Un tempo questo richiedeva le media query CSS, mentre ora funziona in modo nativo.

Media e testo: immagine affiancata al testo

Il blocco Media e testo è uno dei più utili per l'impaginazione: un'immagine o un video a sinistra (o a destra), testo con un pulsante a destra (o a sinistra).

Carica un'immagine, aggiungi il testo e, se vuoi, un pulsante. I lati si possono invertire con un solo clic.

Ed ecco come appare nel front-end:

Ha un aspetto professionale e si crea in un minuto. Per questo tipo di layout non serve alcun page builder.

Blocchi di terze parti: i plugin estendono Gutenberg

Molti plugin aggiungono blocchi propri a Gutenberg. WooCommerce è l'esempio più noto: dopo aver installato il plugin, nell'editor compaiono blocchi per inserire prodotti, carrelli, filtri e categorie del negozio.

Jetpack aggiunge blocchi per form, iscrizioni e icone social. Yoast SEO integra l'analisi di leggibilità e suggerimenti SEO direttamente nella barra laterale dell'editor. Contact Form 7 mette a disposizione un blocco per il form di contatto.

Il principio è sempre lo stesso: installi il plugin e i blocchi compaiono nel menu di inserimento. Non serve altro codice.

Scorciatoie da tastiera e consigli

Il consiglio più utile per Gutenberg è il tasto /. Mentre sei in un paragrafo qualsiasi, digita / e inizia a inserire il nome del blocco. L'editor mostrerà le opzioni corrispondenti; seleziona con i tasti freccia e premi Invio.

Ad esempio: /image → blocco immagine, /heading → intestazione, /table → tabella, /column → colonne. Dopo una settimana di utilizzo, questo trucco accelera notevolmente il lavoro.

Elenco completo delle scorciatoie da tastiera: Shift + Alt + H (Windows) o Opt + Ctrl + H (Mac). Si apre un cheat sheet con tutte le scorciatoie, dallo spostamento dei blocchi al passaggio tra le modalità di modifica.

Alcune altre tecniche che usiamo nella pratica:

• Ctrl + Shift + D: duplica il blocco selezionato
• Ctrl + Alt + T: inserisce un nuovo blocco prima di quello corrente
• Ctrl + Alt + Y: inserisce un nuovo blocco dopo quello corrente
• Clicca l'icona i nella barra degli strumenti in alto: mostra la struttura del documento (intestazioni, conteggio parole, paragrafi)
• Vista elenco (icona con tre linee in alto a sinistra): naviga tutti i blocchi del post come un albero, comoda per articoli lunghi

E infine: l'errore "Aggiornamento fallito" è solitamente causato da una connessione internet instabile, non da un problema dell'editor. Verifica la connessione e prova a salvare di nuovo.

Video: Gutenberg in 15 minuti

Vuoi vedere tutto in azione? Questo breve video di WPBeginner mostra il ciclo completo di creazione di un post in Gutenberg, dal primo blocco alla pubblicazione:

⁉️🤔 Domande frequenti

Devo installare Gutenberg separatamente?

No, l'editor a blocchi è integrato nel core di WordPress dalla versione 5.0 (rilasciata a dicembre 2018). Se hai una versione recente di WordPress, Gutenberg è già operativo. Il plugin Gutenberg separato esiste solo per chi vuole testare nuovi blocchi prima che vengano inclusi nel core.

Posso tornare all'editor classico?

Sì, installa il plugin gratuito Classic Editor. Disabilita completamente Gutenberg e ripristina il familiare TinyMCE. Ma tieni presente: WordPress ha ufficialmente terminato il supporto per l'editor classico nel 2022. Le versioni attuali di WordPress (6.x nel 2026) funzionano ancora con Classic Editor, ma le nuove funzionalità (Full Site Editing, Block Themes, Patterns) sono disponibili solo in Gutenberg.

In cosa Gutenberg è diverso da Elementor o Divi?

Gutenberg è l'editor di contenuti integrato di WordPress: gratuito e senza dipendenze esterne. Elementor e Divi sono page builder commerciali con capacità di design più ampie: popup, slider, integrazioni di marketing. Per un tipico blog o sito aziendale, Gutenberg copre le principali esigenze di layout. Se guadagni dal tuo sito (negozio, landing page, funnel), un page builder offre maggiore flessibilità. Buona notizia: Gutenberg e i page builder funzionano simultaneamente. Puoi costruire pagine in Elementor gestendo i post nell'editor a blocchi.

Cosa fare se i blocchi si sovrappongono o si rompono su mobile?

Di solito, il problema è del tema, non di Gutenberg. Verifica: (1) se il tuo tema attivo supporta l'editor a blocchi (i Block Themes garantiscono un layout corretto); (2) se CSS personalizzati stanno sovrascrivendo padding e larghezza dei blocchi. Passa al tema standard Twenty Twenty-Four per testare; se i blocchi vengono visualizzati correttamente, il problema è del tuo tema.

Come aggiungo un blocco che non è nel set predefinito?

Due opzioni: (1) cerca un plugin che aggiunga il blocco di cui hai bisogno (ad esempio, Otter Blocks o Spectra forniscono dozzine di blocchi aggiuntivi), oppure (2) crea un blocco personalizzato tramite Advanced Custom Fields (ACF), che è più semplice che scrivere un blocco in React. Per la maggior parte delle attività, i plugin sono sufficienti: installa e usa.

Gutenberg funziona con i custom post type (CPT)?

Sì, pienamente. Quando registri un CPT, specifica 'show_in_rest' => true e 'supports' => array('editor'), e l'editor a blocchi si attiverà automaticamente. Per CPT esistenti senza supporto API REST, esistono plugin adattatori, ma è meglio aggiornare la registrazione del post type.

Cosa scegliere: Gutenberg o page builder

Gutenberg si è evoluto da una "funzionalità" sperimentale a un editor maturo che alimenta milioni di siti. Per i creatori di contenuti, questo significa un aumento diretto della produttività: layout visivo, anteprima immediata e scorciatoie da tastiera fanno risparmiare da 30 a 60 minuti su ogni post rispetto all'editor classico e ai plugin shortcode.

Se gestisci un blog, un sito di notizie o un portale aziendale, Gutenberg copre le attività principali. Gratuito, senza codice esterno e senza carico aggiuntivo sul server.

Se stai costruendo landing page complesse, un negozio online con layout personalizzati o funnel di marketing, dai un'occhiata ai page builder. Per il lavoro quotidiano sui contenuti, avvia Gutenberg, digita /heading e inizia semplicemente a scrivere.