{"id":167451,"date":"2026-01-26T09:00:00","date_gmt":"2026-01-26T09:00:00","guid":{"rendered":"https:\/\/gtechgroup.it\/blog\/gutenberg-guida-completa-ai-blocchi-del-nuovo-editor-wordpress\/"},"modified":"2026-05-30T10:00:00","modified_gmt":"2026-05-30T08:00:00","slug":"gutenberg-guida-completa-ai-blocchi-del-nuovo-editor-wordpress","status":"publish","type":"post","link":"https:\/\/gtechgroup.it\/blog\/gutenberg-guida-completa-ai-blocchi-del-nuovo-editor-wordpress\/","title":{"rendered":"Gutenberg: Guida Completa ai Blocchi del Nuovo Editor WordPress"},"content":{"rendered":"

Gutenberg: Guida Completa ai Blocchi del Nuovo Editor WordPress<\/h2>\n

Gutenberg ha rivoluzionato il modo di creare contenuti su WordPress. Introdotto come editor predefinito a partire da WordPress 5.0, nel 2026 \u00e8 diventato un sistema maturo e potente che va ben oltre la semplice scrittura di articoli. Con il Full Site Editing, i blocchi di Gutenberg permettono ora di personalizzare l’intero sito \u2014 header, footer, sidebar e template \u2014 senza toccare una riga di codice. In questa guida completa esploreremo ogni aspetto dell’editor a blocchi per sfruttarlo al massimo delle sue potenzialit\u00e0.<\/p>\n

Se hai iniziato a usare WordPress con il vecchio editor classico (TinyMCE), la transizione a Gutenberg potrebbe sembrarti un po’ disorientante all’inizio. Ma una volta compreso il paradigma dei blocchi, scoprirai che Gutenberg offre una flessibilit\u00e0 creativa enormemente superiore, permettendoti di creare layout complessi che prima richiedevano un page builder a pagamento o conoscenze di HTML e CSS.<\/p>\n

Cos’\u00e8 Gutenberg e come funziona<\/h3>\n

Gutenberg prende il nome da Johannes Gutenberg, l’inventore della stampa a caratteri mobili. L’analogia \u00e8 calzante: come i caratteri mobili permettevano di comporre pagine combinando singoli elementi, l’editor Gutenberg permette di costruire contenuti combinando "blocchi", ciascuno con una funzione specifica.<\/p>\n

Un blocco \u00e8 un’unit\u00e0 di contenuto: pu\u00f2 essere un paragrafo di testo, un’immagine, un titolo, un elenco, un video, una tabella, una galleria, un pulsante o qualsiasi altro elemento. Ogni blocco pu\u00f2 essere aggiunto, spostato, duplicato, modificato e rimosso indipendentemente dagli altri. Questa modularit\u00e0 rende la creazione di pagine intuitiva e visuale.<\/p>\n

Nel 2026, WordPress include oltre 90 blocchi nativi suddivisi in categorie: Testo, Media, Design, Widget, Tema e Embed. A questi si aggiungono centinaia di blocchi forniti da plugin di terze parti.<\/p>\n

L’interfaccia dell’editor a blocchi<\/h3>\n

Quando apri un articolo o una pagina per la modifica, l’editor a blocchi ti accoglie con un’interfaccia pulita e minimalista. Ecco gli elementi principali:<\/p>\n

Barra superiore<\/strong>: contiene il pulsante per aggiungere blocchi (+), i pulsanti Annulla\/Ripristina, la vista elenco dei blocchi, il pulsante Salva bozza, l’Anteprima e il pulsante Pubblica. L’icona dell’ingranaggio apre il pannello laterale delle impostazioni.<\/p>\n

Area di contenuto<\/strong>: \u00e8 lo spazio centrale dove scrivi e organizzi i blocchi. Funziona in modo WYSIWYG (What You See Is What You Get), mostrando un’anteprima approssimativa di come apparir\u00e0 il contenuto pubblicato.<\/p>\n

Pannello laterale<\/strong>: mostra le impostazioni del blocco selezionato (tab "Blocco") o le impostazioni generali dell’articolo\/pagina (tab "Articolo"). Le impostazioni dell’articolo includono categorie, tag, immagine in evidenza, excerpt e opzioni di pubblicazione.<\/p>\n

Toolbar del blocco<\/strong>: quando selezioni un blocco, appare una barra degli strumenti fluttuante con le opzioni specifiche per quel tipo di blocco (allineamento, formattazione, trasformazione in altro tipo di blocco).<\/p>\n

\"Interfaccia<\/p>\n

Blocchi di testo essenziali<\/h3>\n

Paragrafo<\/strong>: il blocco pi\u00f9 basilare. Ogni volta che premi Invio, crei un nuovo blocco paragrafo. Supporta grassetto, corsivo, link, testo barrato, codice inline e allineamento. Puoi personalizzare la dimensione del carattere, il colore del testo e dello sfondo.<\/p>\n

Intestazione (Heading)<\/strong>: per i titoli, da H1 a H6. Fondamentale per la struttura gerarchica dei contenuti e per la SEO. Ricorda: ogni pagina dovrebbe avere un solo H1 (solitamente il titolo dell’articolo), seguito da H2 per le sezioni principali e H3 per le sottosezioni.<\/p>\n

Elenco<\/strong>: crea elenchi puntati o numerati. Supporta l’annidamento (elenchi dentro elenchi) e la personalizzazione dei marcatori. Puoi convertire facilmente un elenco puntato in numerato e viceversa.<\/p>\n

Citazione<\/strong>: per evidenziare citazioni o frasi importanti. WordPress offre due stili: citazione standard (con bordo laterale) e citazione in evidenza (testo grande e centrato). Puoi aggiungere l’attribuzione della fonte sotto la citazione.<\/p>\n

Codice e HTML personalizzato<\/strong>: il blocco Codice mostra testo formattato come codice (monospace), utile per tutorial tecnici. Il blocco HTML personalizzato permette di inserire codice HTML arbitrario, utile per widget esterni o markup specifico.<\/p>\n

Tabella<\/strong>: crea tabelle con righe e colonne personalizzabili. Puoi aggiungere intestazioni di riga e colonna, scegliere lo stile (predefinito o a righe alternate) e regolare l’allineamento del testo in ogni cella.<\/p>\n

Blocchi media<\/h3>\n

Immagine<\/strong>: inserisci immagini dalla libreria media, dal computer o da un URL. Ogni immagine pu\u00f2 avere titolo, didascalia, testo alternativo (fondamentale per SEO e accessibilit\u00e0) e link. Puoi ridimensionare l’immagine, applicare filtri duotone e scegliere tra diversi stili (arrotondata, con bordo).<\/p>\n

Galleria<\/strong>: crea griglie di immagini con layout automatico. Puoi scegliere il numero di colonne, abilitare il ritaglio automatico per uniformare le dimensioni e collegare ogni immagine alla pagina dell’allegato o al file media.<\/p>\n

Video<\/strong>: inserisci video caricati nella libreria media. Per video da YouTube o Vimeo, usa invece il blocco Embed dedicato. I video caricati supportano l’autoplay, il loop e i controlli personalizzati.<\/p>\n

Audio<\/strong>: per file audio (podcast, musica, registrazioni). Mostra un player audio nativo con controlli di riproduzione.<\/p>\n

Copertina (Cover)<\/strong>: un blocco visivamente impattante che sovrappone testo su un’immagine o video di sfondo. Perfetto per creare sezioni hero, banner e call-to-action. Puoi regolare l’opacit\u00e0 dell’overlay, la posizione del punto focale e usare colori sfumati.<\/p>\n

Media e testo<\/strong>: affianca un’immagine (o video) e un blocco di testo. Ideale per creare layout a due colonne con contenuto misto. Su mobile, i due elementi si impilano automaticamente.<\/p>\n

Blocchi di design e layout<\/h3>\n

Colonne<\/strong>: permette di dividere il contenuto in 2, 3 o pi\u00f9 colonne. Puoi scegliere tra layout predefiniti (50\/50, 33\/66, 25\/50\/25, ecc.) o personalizzare la larghezza di ogni colonna. Ogni colonna pu\u00f2 contenere qualsiasi tipo di blocco.<\/p>\n

Gruppo<\/strong>: raggruppa pi\u00f9 blocchi in un contenitore unico. Utile per applicare uno sfondo, un bordo o un padding a un insieme di blocchi. Il gruppo supporta varianti di layout: predefinito, ampio, piena larghezza e flusso.<\/p>\n

Separatore<\/strong>: inserisce una linea orizzontale per separare visivamente le sezioni del contenuto. Tre stili disponibili: linea sottile, linea larga e puntini.<\/p>\n

Spaziatore<\/strong>: aggiunge spazio verticale tra i blocchi. Puoi regolare l’altezza in pixel. Utile per creare respiro visivo tra le sezioni.<\/p>\n

Pulsanti<\/strong>: crea pulsanti call-to-action con testo, link e stile personalizzabili. Puoi aggiungere pi\u00f9 pulsanti affiancati, scegliere tra stile pieno e contorno, e personalizzare colori, bordi arrotondati e dimensioni.<\/p>\n

Riga e Pila (Row\/Stack)<\/strong>: introdotti nelle versioni recenti, permettono di disporre blocchi in orizzontale (Row) o in verticale (Stack) con controllo fine su allineamento, distribuzione e spaziatura. Pi\u00f9 flessibili delle Colonne per layout non uniformi.<\/p>\n

\"Impostazioni<\/p>\n

Pattern e blocchi riutilizzabili<\/h3>\n

Una delle funzionalit\u00e0 pi\u00f9 potenti di Gutenberg \u00e8 la possibilit\u00e0 di salvare e riutilizzare combinazioni di blocchi.<\/p>\n

Pattern (modelli)<\/strong>: sono combinazioni predefinite di blocchi che puoi inserire con un clic. WordPress include pattern nativi per header, call-to-action, testimonianze, FAQ e altro. Puoi anche creare i tuoi pattern personalizzati e condividerli tra le pagine del sito. Nel 2026, la libreria di pattern si \u00e8 arricchita enormemente, con centinaia di opzioni disponibili direttamente dall’editor.<\/p>\n

Blocchi riutilizzabili (Synced Patterns)<\/strong>: quando crei un blocco riutilizzabile, ogni modifica si riflette automaticamente in tutte le pagine dove \u00e8 inserito. Perfetto per elementi che appaiono in pi\u00f9 pagine, come banner promozionali, call-to-action o avvisi. Se modifichi il blocco in un punto, si aggiorna ovunque.<\/p>\n

Per creare un pattern personalizzato: seleziona uno o pi\u00f9 blocchi, clicca sui tre puntini nel menu del blocco e scegli "Crea pattern". Puoi scegliere se renderlo sincronizzato (le modifiche si propagano ovunque) o non sincronizzato (ogni istanza \u00e8 indipendente).<\/p>\n

Full Site Editing: oltre i contenuti<\/h3>\n

Con il Full Site Editing (FSE), Gutenberg non si limita pi\u00f9 all’editing di articoli e pagine ma permette di modificare l’intero sito. Per accedere all’editor del sito, vai su Aspetto \u2192 Editor (disponibile solo con temi a blocchi).<\/p>\n

Nell’editor del sito puoi modificare:<\/p>\n

Template<\/strong>: il layout di base per diversi tipi di contenuto (pagina singola, articolo singolo, archivio, risultati di ricerca, pagina 404). Ogni template \u00e8 composto da blocchi che puoi modificare liberamente.<\/p>\n

Parti del template<\/strong>: elementi riutilizzabili come header e footer che vengono inclusi in pi\u00f9 template. Modifica l’header una volta e si aggiorna su tutte le pagine.<\/p>\n

Stili globali<\/strong>: colori, tipografia, spaziatura e altri elementi di design che si applicano a tutto il sito. Puoi creare variazioni di stile e passare dall’una all’altra con un clic.<\/p>\n

Scorciatoie da tastiera essenziali<\/h3>\n

Padroneggiare le scorciatoie da tastiera velocizza enormemente il lavoro con Gutenberg:<\/p>\n

Ctrl+Shift+D<\/strong>: duplica il blocco selezionato. Utilissimo per replicare strutture simili.<\/p>\n

Ctrl+Alt+T<\/strong>: inserisci un blocco prima del blocco selezionato.<\/p>\n

Ctrl+Alt+Y<\/strong>: inserisci un blocco dopo il blocco selezionato.<\/p>\n

\/<\/strong> (slash): digita \/ all’inizio di un blocco vuoto per cercare e inserire rapidamente un blocco per nome.<\/p>\n

Ctrl+Shift+Z<\/strong>: ripristina l’ultima azione annullata.<\/p>\n

Ctrl+K<\/strong>: inserisci un link nel testo selezionato.<\/p>\n

Esc<\/strong>: seleziona il blocco (passa dalla modalit\u00e0 editing alla modalit\u00e0 selezione).<\/p>\n

Invio<\/strong>: entra nel blocco selezionato (passa dalla modalit\u00e0 selezione alla modalit\u00e0 editing).<\/p>\n

Blocchi embed per contenuti esterni<\/h3>\n

Gutenberg rende semplicissimo incorporare contenuti da piattaforme esterne. Basta incollare l’URL di un contenuto e WordPress lo converte automaticamente nel blocco embed appropriato. Le piattaforme supportate includono: YouTube, Vimeo, Twitter\/X, Instagram, Spotify, SoundCloud, TikTok, Google Maps e decine di altre.<\/p>\n

Per ogni embed puoi personalizzare l’allineamento e, in alcuni casi, le dimensioni. Gli embed sono responsive per impostazione predefinita, adattandosi alla larghezza del contenitore su ogni dispositivo.<\/p>\n

\"Panoramica<\/p>\n

Plugin per estendere Gutenberg<\/h3>\n

L’ecosistema di plugin per Gutenberg \u00e8 cresciuto enormemente. Ecco i migliori plugin per aggiungere blocchi aggiuntivi:<\/p>\n

Spectra<\/strong> (ex UAG): aggiunge oltre 30 blocchi avanzati tra cui slider, timeline, form, post grid, accordion, tabs e marketing elements. Leggero e ben integrato con Astra.<\/p>\n

Stackable<\/strong>: offre blocchi con design premium, effetti di animazione, opzioni tipografiche avanzate e layout responsivi sofisticati. La versione gratuita \u00e8 gi\u00e0 molto completa.<\/p>\n

CoBlocks<\/strong>: aggiunge blocchi specifici per pagine aziendali come pricing table, team members, accordion, alert, gallery masonry e form di contatto.<\/p>\n

Kadence Blocks<\/strong>: uno dei plugin di blocchi pi\u00f9 completi, con row\/layout avanzati, tabs, accordion, advanced gallery, form e info box. Eccellente per creare landing page professionali.<\/p>\n

Suggerimenti avanzati per utenti esperti<\/h3>\n

Blocco query loop<\/strong>: permette di creare elenchi personalizzati di articoli con filtri per categoria, tag, autore, data e altro. Fondamentale per creare pagine di archivio personalizzate senza codice PHP.<\/p>\n

Blocco di navigazione<\/strong>: crea menu di navigazione direttamente nell’editor. Supporta sottomenu, link personalizzati, icone e responsive overlay per mobile.<\/p>\n

CSS aggiuntivo per blocco<\/strong>: ogni blocco supporta classi CSS personalizzate (nelle impostazioni avanzate). Puoi aggiungere stili specifici tramite il CSS aggiuntivo nel Customizer o nel pannello Stili globali.<\/p>\n

Ancoraggio HTML<\/strong>: nelle impostazioni avanzate di ogni blocco puoi impostare un ancoraggio HTML, utile per creare link interni alla pagina (table of contents) e per il tracciamento analytics.<\/p>\n

Conclusioni<\/h3>\n

Gutenberg nel 2026 \u00e8 un editor maturo, potente e in continua evoluzione. Che tu sia un principiante che vuole creare contenuti accattivanti senza codice o uno sviluppatore che cerca flessibilit\u00e0 e performance, l’editor a blocchi offre strumenti per ogni esigenza. Investire tempo nell’apprendimento di Gutenberg \u00e8 un investimento che ripaga enormemente in produttivit\u00e0 e qualit\u00e0 dei contenuti pubblicati.<\/p>\n

Il futuro di WordPress \u00e8 nei blocchi, e padroneggiare Gutenberg oggi significa essere preparati per le evoluzioni della piattaforma negli anni a venire.<\/p>\n

\n

Approfondisci e ricevi assistenza<\/h4>\n