Gutenberg WordPress: editor a blocchi e Site Editor

Gutenberg WordPress è il nome con cui viene comunemente indicato il progetto dell’editor a blocchi. Dal 2018 l’editor a blocchi è l’esperienza predefinita per scrivere pagine e articoli; con un tema compatibile, lo stesso sistema permette di modificare template, header, footer e altre parti del sito.

Capire la differenza tra editor dei contenuti, Editor del sito, blocchi, pattern e template evita molti errori di progettazione. In questa guida vediamo cosa sono, quando usarli e come organizzare un flusso di lavoro sostenibile.

Che cos’è Gutenberg in WordPress

Gutenberg è il progetto che ha introdotto in WordPress un sistema di composizione basato su blocchi. Nel linguaggio quotidiano il nome viene usato per l’editor, ma è utile distinguere tre elementi:

• Editor a blocchi: lo strumento integrato in WordPress per creare pagine e articoli.
• Editor del sito: l’ambiente disponibile con i temi a blocchi per modificare template, stili e parti globali.
• Plugin Gutenberg: l’estensione ufficiale con cui vengono sviluppate e provate funzioni che possono arrivare successivamente nel core.

Per usare il normale editor a blocchi non devi installare il plugin Gutenberg: è già incluso in WordPress. Il plugin Gutenberg nel repository ufficiale serve soprattutto a chi vuole testare in anticipo l’evoluzione del progetto e accetta un ciclo di aggiornamenti più frequente.

Come funzionano i blocchi

Ogni elemento del contenuto è rappresentato da un blocco: paragrafo, titolo, immagine, elenco, pulsante, colonne, gruppo, citazione, query e così via. Ogni blocco conserva contenuto e attributi; il tema determina come vengono presentati sul front-end.

La struttura a blocchi consente di spostare, duplicare e trasformare gli elementi senza scrivere manualmente tutto l’HTML. Non elimina però la necessità di una buona gerarchia: un titolo H2 non va scelto per la sua dimensione grafica, ma perché introduce una sezione di secondo livello.

Vista elenco

La Vista elenco mostra la gerarchia dei blocchi e aiuta a selezionare elementi annidati dentro gruppi, colonne e copertine. Usala per controllare l’ordine logico, assegnare nomi ai gruppi importanti e ridurre strutture inutilmente profonde.

Impostazioni e barra degli strumenti

Le opzioni del blocco possono trovarsi nella barra contestuale o nella colonna laterale. Mantieni il contenuto indipendente dalle scelte decorative: usa gli stili globali e le varianti predisposte dal tema invece di assegnare colori e dimensioni diversi a ogni elemento.

Pattern, blocchi sincronizzati e template

Questi strumenti risolvono problemi diversi:

• Pattern non sincronizzato: inserisce una composizione pronta che, dopo l’aggiunta, può essere modificata in modo indipendente.
• Pattern sincronizzato: riutilizza lo stesso contenuto in più punti; una modifica viene applicata a tutte le occorrenze.
• Template: stabilisce la struttura di una tipologia di pagina, per esempio singolo articolo o archivio.
• Parte del template: rappresenta un’area globale come header o footer nei temi a blocchi.

Usa un pattern sincronizzato solo quando anche il contenuto deve restare uguale. Per una struttura ripetibile con testi diversi è più adatto un pattern non sincronizzato. La guida ufficiale ai pattern di blocchi illustra le modalità disponibili.

Che cos’è l’Editor del sito

L’Editor del sito consente di intervenire su template, parti globali, navigazione e stili quando è attivo un tema a blocchi. Non va confuso con l’editor della singola pagina: modificare il template “Articolo singolo” può cambiare tutti gli articoli che lo usano.

Prima di intervenire verifica sempre quale livello stai modificando:

1. il contenuto della singola pagina;
2. un pattern sincronizzato usato in più pagine;
3. un template applicato a una classe di contenuti;
4. uno stile globale che può influire su tutto il sito.

Questa distinzione evita correzioni locali ripetute e modifiche globali accidentali. Se devi scegliere la base grafica del progetto, consulta anche la guida ai temi WordPress e la guida completa su come creare un sito WordPress.

Gutenberg e page builder: quali differenze

L’editor a blocchi fa parte di WordPress e usa le sue API. I page builder sono plugin o sistemi offerti da temi e fornitori esterni, spesso con componenti e interfacce proprie. Possono offrire controlli visuali avanzati, ma aumentare dipendenze, codice caricato e costi di migrazione.

La domanda corretta non è quale strumento “vince”, ma quali requisiti non sono coperti dai blocchi standard e quanto costa mantenere la soluzione. Non installare un page builder solo per riprodurre layout che blocchi, pattern e stili possono già gestire.

Un flusso di lavoro efficace con i blocchi

1. Definisci contenuto e obiettivo: chiarisci messaggio, pubblico e azione richiesta.
2. Progetta la gerarchia: organizza titolo, introduzione, sezioni e collegamenti prima della decorazione.
3. Usa i blocchi core: aggiungi blocchi esterni solo quando il requisito non è coperto.
4. Applica gli stili globali: limita variazioni manuali di colore, font e spaziatura.
5. Crea pattern: standardizza call to action, schede, testimonianze e altre composizioni ricorrenti.
6. Controlla la Vista elenco: elimina gruppi superflui e verifica l’ordine del documento.
7. Prova su più schermi: controlla righe, colonne, navigazione e aree cliccabili.
8. Verifica il front-end: anteprima ed editor non sempre riproducono ogni dettaglio del tema.

SEO, semantica e accessibilità

Gutenberg non migliora automaticamente la SEO. Può però facilitare una struttura leggibile se usi titoli, elenchi, tabelle e immagini in modo corretto. Evita di inserire titoli vuoti per creare spazio e di scegliere un livello H3 senza un H2 che lo contenga.

Per le immagini compila un testo alternativo quando trasmettono informazioni, lasciandolo vuoto quando sono puramente decorative. La guida sul testo alternativo delle immagini spiega come decidere.

Controlla il contrasto, la visibilità del focus, l’ordine di lettura e le etichette dei link. Le colonne che sembrano ordinate visivamente possono produrre una sequenza diversa su mobile o per tecnologie assistive.

Blocchi aggiuntivi: quando installarli

I plugin di blocchi possono fornire componenti utili, ma ogni raccolta aggiunge dipendenze. Prima di installarne una verifica:

• quali blocchi userai realmente;
• se puoi disattivare quelli inutili;
• quali risorse carica sul front-end;
• come conserva i contenuti e cosa resta dopo la disinstallazione;
• frequenza degli aggiornamenti e compatibilità con il tema;
• se duplica funzioni già presenti in WordPress.

Per diagnosticare conflitti puoi usare Health Check & Troubleshooting in un ambiente controllato. Per capire come valutare le estensioni consulta la guida ai plugin WordPress.

Prestazioni e codice generato

I blocchi core producono in genere un markup prevedibile, ma layout molto annidati, video, gallerie, font e librerie esterne possono comunque appesantire la pagina. Riduci gli elementi non necessari e misura il risultato reale seguendo la guida per velocizzare WordPress.

Non usare il punteggio di un singolo test come unico criterio. Controlla tempi di caricamento, stabilità visiva, interazione e differenze fra pagine. Un blocco può essere leggero su una pagina e costoso se ripetuto centinaia di volte o collegato a query complesse.

Problemi comuni e diagnosi

• Blocco non valido: può dipendere da markup modificato, aggiornamenti o filtri del tema e dei plugin. Prima di convertirlo in HTML, conserva una revisione e individua la causa.
• Editor diverso dal front-end: verifica stili del tema, cache e CSS caricati soltanto in uno dei due contesti.
• Impossibile selezionare un elemento: usa la Vista elenco per raggiungere il blocco annidato.
• Modifica applicata ovunque: controlla se stai lavorando su un pattern sincronizzato, un template o uno stile globale.
• Editor lento: prova senza estensioni non essenziali, controlla errori nel browser e quantità di blocchi nella pagina.

Domande frequenti su Gutenberg

Gutenberg è un plugin?

Esiste un plugin ufficiale con questo nome, ma l’editor a blocchi è già integrato in WordPress. Il plugin anticipa e sperimenta funzioni del progetto.

L’Editor del sito è disponibile con tutti i temi?

No. L’esperienza completa dipende da un tema a blocchi; temi classici e ibridi possono offrire strumenti differenti.

I pattern sostituiscono i template?

No. Un pattern è una composizione di blocchi da inserire o riutilizzare; un template definisce la struttura con cui viene visualizzato un tipo di contenuto.

Progettare un sistema, non singole pagine

Il vantaggio dei blocchi emerge quando definisci regole coerenti: pochi componenti, stili globali, pattern documentati e template controllati. In questo modo l’editor diventa uno strumento editoriale, non un insieme di eccezioni grafiche pagina per pagina.