Gutenberg: il nuovo modo di creare contenuti
Gutenberg, introdotto in WordPress 5.0 come Block Editor, ha rivoluzionato il modo di creare e gestire i contenuti. Ogni elemento della pagina è un blocco: paragrafi, immagini, gallerie, colonne, bottoni e molto altro. L’editor a blocchi offre un’esperienza visiva che avvicina WordPress ai costruttori di pagine, ma con un approccio nativo e standardizzato. La curva di apprendimento è breve, ma padroneggiare tutti i blocchi disponibili richiede pratica.
Gutenberg non è solo un editor: è il fondamento della Full Site Editing (FSE), l’evoluzione che permette di personalizzare ogni parte del tema direttamente dall’editor, senza bisogno di codice o pannelli di personalizzazione separati.
Blocchi essenziali del core
Il paragrafo è il blocco più utilizzato e supporta formattazione avanzata: grassetto, corsivo, elenchi puntati, link, e allineamento del testo. La scorciatoia da tastiera / apre il menu di ricerca rapida dei blocchi. Usa Shift+Invio per andare a capo senza creare un nuovo paragrafo.
Il blocco Heading genera titoli da H1 a H6. Usa H1 per il titolo della pagina (di solito gestito dal tema), H2 per le sezioni principali e H3 per le sottosezioni. La gerarchia dei titoli è importante per l’accessibilità e la SEO: non saltare livelli e mantieni una struttura ordinata.
Il blocco Image supporta formati WebP, JPEG e PNG. Dopo aver inserito l’immagine, puoi impostare testo alternativo (ALT), didascalia, dimensioni e allineamento. Il lazyloading è attivo di default per migliorare le performance. La galleria nativa di Gutenberg ha sostituito il vecchio shortcode
Il blocco Columns è il più potente per creare layout complessi. Puoi dividere la pagina in colonne (da 2 a 6) e inserire qualsiasi altro blocco all’interno di ogni colonna. La larghezza delle colonne è regolabile singolarmente. Usa le colonne per creare layout a griglia, confronti prodotto o sezioni con testo e immagine affiancati.
Il blocco Cover crea un contenitore con immagine o video di sfondo, overlay colore e contenuto sovrapposto. È ideale per hero section, banner promo e intestazioni di categoria. Puoi regolare la nitidezza dello sfondo, l’opacità dell’overlay e la posizione del contenuto.
Il blocco Buttons permette di aggiungere call-to-action con stili personalizzabili: colore, dimensione, bordo, ombra e icona. Ogni pulsante può avere un link, un comportamento di apertura (stessa finestra o nuova scheda) e un attributo rel per SEO o sicurezza.
Il blocco Group è un contenitore generico che raggruppa più blocchi. A differenza di Columns, non crea layout a colonne ma permette di applicare stili comuni a tutti i blocchi contenuti: sfondo, padding, margine e larghezza. È essenziale per sezioni complesse e per creare pattern personalizzati.
Pannello delle impostazioni del blocco
Ogni blocco ha un pannello delle impostazioni nella colonna di destra. Qui trovi opzioni specifiche per il blocco selezionato: dimensioni, colori, tipografia, margini e altro. Le impostazioni sono divise in sezioni richiudibili per non sovraccaricare l’interfaccia. Per i blocchi paragrafo, trovi impostazioni di tipografia (dimensione font, altezza linea, letter spacing), colore del testo e dello sfondo e dimensione del drop cap.
Il pannello “Style” permette di variare lo stile del blocco tra le opzioni disponibili (per esempio, stili di pulsante outline vs filled). Le variazioni di stile sono definite dal tema o dal blocco stesso e offrono un modo rapido per cambiare l’aspetto senza configurazioni manuali.
Blocchi riutilizzabili
I blocchi riutilizzabili sono la risposta di Gutenberg ai contenuti che appaiono in più pagine. Crea un blocco (es. una call-to-action, un disclaimer, un box informativo), salvalo come riutilizzabile e potrai inserirlo in qualsiasi post o pagina. Quando modifichi il blocco originale, tutte le istanze si aggiornano automaticamente.
Per creare un blocco riutilizzabile, seleziona il blocco, clicca sui tre puntini e scegli “Aggiungi a blocchi riutilizzabili”. Assegna un nome descrittivo e organizzali con prefissi come “CTA – Newsletter” o “Box – Disclaimer”. I blocchi riutilizzabili sono salvati come post type ‘wp_block’ e possono essere gestiti anche da Tools > Blocchi riutilizzabili nel menu di amministrazione.
Pattern di blocchi
I pattern di blocchi sono layout predefiniti che combinano più blocchi in una sezione completa. WordPress include pattern nativi per hero, chi siamo, prezzi, testimonianze e contatti. Puoi inserirli con il selettore dei pattern (icona blu +) o con la scorciatoia /pattern-name.
I temi e i plugin possono registrare pattern personalizzati. Per registrare un pattern, usa la funzione register_block_pattern() in PHP o il file patterns/ del tema. I pattern accelerano la creazione di pagine complesse: invece di costruire sezione per sezione, inserisci un pattern e personalizzi i contenuti.
Full Site Editing (FSE)
La Full Site Editing è l’evoluzione più recente di Gutenberg. Con un tema FSE come Twenty Twenty-Four o TT3, puoi modificare tutte le parti del sito dall’editor a blocchi: header, footer, template di pagina, archivio, singolo post e 404. Non serve più il Personalizzatore o il menu Aspetto. I temi FSE usano file HTML per i template, con blocchi che rappresentano ogni elemento.
Per i temi classici, FSE non è disponibile, ma puoi comunque usare Gutenberg per i contenuti. La transizione ai temi FSE è graduale: molti sviluppatori mantengono temi ibridi che supportano sia i metodi tradizionali che la nuova architettura.
Blocchi personalizzati con ACF e plugin
Advanced Custom Fields (ACF) permette di creare blocchi Gutenberg personalizzati con campi flessibili. Con ACF Pro, la funzione acf_register_block_type() registra un blocco con nome, titolo, icona, categoria e callback di rendering. I campi ACF diventano i controlli del blocco, e il template PHP gestisce la visualizzazione.
Plugin come Advanced Forms, Kadence Blocks e GenerateBlocks offrono blocchi aggiuntivi per funzionalità specifiche: form avanzati, slider, tabelle di prezzi, FAQ, accordion. Valuta sempre se un blocco di terze parti è necessario o se puoi ottenere lo stesso risultato con i blocchi core. Meno plugin significa meno complessità e migliori performance.
Produttività con l’editor a blocchi
Le scorciatoie da tastiera accelerano il lavoro: Ctrl+Shift+D duplica il blocco, Ctrl+Shift+Z ripristina, Ctrl+Shift+, mostra le scorciatoie complete. Usa la List View (icona con tre linee in alto a sinistra) per navigare blocchi in profondità, rinominarli e riordinarli con drag-and-drop.
Il selettore rapido dei blocchi con / è il modo più veloce per inserire qualsiasi blocco. Impara i nomi dei blocchi che usi più frequentemente: scrivere /columns, /cover, /buttons è più rapido che cercarli nei menu. Organizza il contenuto con la List View quando lavori su pagine lunghe: la vista ad albero ti permette di vedere la struttura completa e spostare blocchi tra sezioni.
Conclusioni
Gutenberg ha trasformato WordPress da un editor di testo a una piattaforma di content design. Padroneggiare i blocchi essenziali, i pattern, i blocchi riutilizzabili e le scorciatoie di produttività ti permetterà di creare pagine complesse in metà tempo. Che tu sia un principiante o un utente esperto, Gutenberg offre strumenti per esprimere la tua creatività senza scrivere una riga di codice.