Gutenberg è l'editor di contenuti predefinito in WordPress. È stato introdotto in WordPress 5.0, rilasciato nel dicembre 2018, in sostituzione del Classic Editor che era stato lo standard per oltre un decennio. Il nome è un riferimento a Johannes Gutenberg, l'inventore della stampa a caratteri mobili. L'idea di base è semplice: invece di un'unica casella di testo in cui formatti tutto in linea, ogni elemento di contenuto è un "blocco" autonomo che puoi spostare, configurare e stilizzare in modo indipendente.
La storia di Gutenberg
Prima di Gutenberg, WordPress utilizzava TinyMCE, un classico editor WYSIWYG (What You See Is What You Get) per il testo formattato. TinyMCE ha servito bene WordPress per anni, ma aveva dei limiti. Per layout complessi, come sezioni a più colonne o riquadri call-to-action formattati, erano in genere necessari shortcode, HTML personalizzato o plugin page builder. Il core team di WordPress ha avviato il progetto Gutenberg nel 2017 con l'obiettivo di rendere accessibile la creazione di contenuti ricchi a chiunque, non solo agli sviluppatori o agli utenti disposti a installare page builder di terze parti. Quando WordPress 5.0 è uscito nel dicembre 2018, Gutenberg è diventato l'editor predefinito per tutti i nuovi articoli e pagine.
Come funziona l'editor a blocchi
Tutto in Gutenberg è un blocco. Un paragrafo è un blocco. Un'immagine è un blocco. Un titolo, un elenco, un video incorporato, un pulsante, una tabella: tutti blocchi. Costruisci una pagina impilando questi blocchi verticalmente e configurando ciascuno tramite la propria barra degli strumenti e il pannello delle impostazioni. I blocchi possono essere riordinati trascinandoli o utilizzando le frecce su/giù. Ogni blocco salva il proprio contenuto e la propria configurazione come una combinazione di HTML e commenti HTML speciali che WordPress utilizza per ricostruire il blocco nell'editor.
Categorie e tipi di blocchi
WordPress include decine di blocchi integrati, suddivisi in categorie:
- Blocchi di testo: Paragrafo, Titolo, Elenco, Citazione, Codice, Preformattato, Pull quote, Verso, Tabella.
- Blocchi multimediali: Immagine, Galleria, Audio, Video, Cover, File, Media e Testo.
- Blocchi di design: Colonne, Gruppo, Riga, Stack, Separatore, Spaziatore, Pulsanti, Dettagli.
- Blocchi widget: Articoli recenti, Commenti recenti, Archivi, Categorie, Elenco pagine, Ricerca, Nuvola di tag, Icone social, Calendario.
- Blocchi embed: YouTube, Vimeo, Twitter/X, Spotify, SoundCloud, TikTok e molti altri servizi compatibili con oEmbed.
Blocchi riutilizzabili e pattern di blocchi
I blocchi riutilizzabili (chiamati "Synced Patterns" dalla versione 6.3 di WordPress) ti permettono di salvare un blocco o un gruppo di blocchi e inserirli in più articoli o pagine. Quando aggiorni un synced pattern, la modifica si propaga ovunque venga utilizzato. Questo è utile per elementi come sezioni call-to-action, disclaimer o riquadri biografia dell'autore che appaiono su molte pagine. I pattern di blocchi sono disposizioni preprogettate di blocchi, ad esempio una sezione hero con immagine di sfondo, titolo e pulsante. Il core di WordPress include pattern integrati, i temi possono registrare i propri pattern e puoi sfogliarne centinaia altri nella WordPress Pattern Directory.
Full Site Editing e temi a blocchi
Gutenberg si è esteso ben oltre il contenuto degli articoli. Con il Full Site Editing (FSE), introdotto gradualmente a partire da WordPress 5.9, puoi modificare l'intero layout del tuo sito utilizzando i blocchi: intestazioni, piè di pagina, barre laterali, template di archivio, template di singolo articolo, pagine 404 e altro ancora. Per utilizzare FSE, hai bisogno di un "tema a blocchi" (come i temi predefiniti Twenty Twenty-Four o Twenty Twenty-Five). I temi a blocchi sostituiscono la tradizionale gerarchia di template PHP con template basati su HTML che utilizzano blocchi. Il Site Editor (Aspetto > Editor) fornisce un'interfaccia visuale per personalizzare ogni parte del tuo sito senza scrivere codice. I tradizionali "temi classici" continuano a funzionare, ma non supportano FSE.
Il plugin Classic Editor
Non tutti hanno accolto il cambiamento. Il plugin Classic Editor è stato rilasciato dal team di WordPress come modo ufficiale per ripristinare il vecchio editor TinyMCE. È uno dei plugin WordPress più installati, con milioni di installazioni attive. WordPress si è originariamente impegnata a supportare il Classic Editor fino al 2024, e il plugin continua a funzionare e a ricevere aggiornamenti. Molti siti di lunga data, in particolare quelli con configurazioni TinyMCE molto personalizzate o layout complessi basati su shortcode, lo utilizzano ancora. Tuttavia, per i nuovi siti, l'editor a blocchi è chiaramente la direzione in cui WordPress sta andando.
Plugin Gutenberg vs WordPress core
C'è una distinzione importante tra il plugin Gutenberg e l'editor a blocchi integrato nel core di WordPress. Il plugin Gutenberg è un plugin separato disponibile su wordpress.org e funge da banco di prova per le funzionalità pianificate per le future release di WordPress. Rilascia aggiornamenti circa ogni due settimane e include funzionalità sperimentali che non sono ancora abbastanza stabili per il core. Una volta che una funzionalità nel plugin matura, viene integrata nella prossima major release di WordPress. Se sei uno sviluppatore o un early adopter e vuoi testare le funzionalità future, puoi installare il plugin Gutenberg. Per la maggior parte dei proprietari di siti, la versione fornita con il core di WordPress è la scelta giusta.
Considerazioni sulle prestazioni
Gutenberg è costruito con React sul lato editor e aggiunge CSS e JavaScript specifici per blocco al frontend. Ogni tipo di blocco può accodare il proprio stylesheet, quindi una pagina con molti tipi di blocchi diversi potrebbe caricare più file CSS rispetto a una pagina costruita con il Classic Editor. WordPress ha lavorato per affrontare questo problema: dalla versione 5.8, gli stili dei blocchi vengono caricati per blocco anziché come un unico grande stylesheet. Tuttavia, i siti con molti blocchi o un uso intensivo di plugin di blocchi di terze parti possono ritrovarsi con un overhead frontend percettibile. I proprietari di siti attenti alle prestazioni spesso abbinano Gutenberg a un plugin di caching e a uno strumento di ottimizzazione CSS per mantenere bassi i tempi di caricamento.
Plugin di librerie di blocchi popolari
I blocchi integrati coprono le basi, ma molti proprietari di siti estendono l'editor con librerie di blocchi di terze parti per layout e componenti più avanzati:
- Spectra (di Brainstorm Force): Aggiunge blocchi per tabelle prezzi, griglie di articoli, moduli, conto alla rovescia, valutazioni a stelle e altro. Popolare tra gli utenti del tema Astra.
- Stackable: Offre blocchi orientati al design con opzioni di stile avanzate, impostazioni globali e una propria libreria di design.
- GenerateBlocks: Un plugin leggero del team di GeneratePress. Offre solo quattro blocchi molto flessibili (Container, Headline, Buttons, Grid) che, attraverso le loro opzioni di configurazione, possono sostituire decine di blocchi specializzati.
- Kadence Blocks: Include un blocco row/layout avanzato, elenchi di icone, riquadri informativi, testimonianze e un blocco modulo. Noto per le buone prestazioni e una generosa offerta gratuita.
- CoBlocks: Di GoDaddy, fornisce blocchi per ricette, tabelle prezzi, condivisione sui social, click-to-tweet e altro.
Costruzione di blocchi personalizzati per gli sviluppatori
Gli sviluppatori possono creare blocchi personalizzati utilizzando la Block API di WordPress. Lo strumento ufficiale per scaffoldare un plugin di blocchi è @wordpress/create-block, che genera la struttura dei file, la configurazione di build e il codice boilerplate. I blocchi personalizzati sono costruiti con JavaScript sul lato editor (in genere JSX con React) e possono essere renderizzati tramite JavaScript o PHP server-side sul frontend. Il file block.json definisce metadati come il nome del blocco, la categoria, gli attributi e le funzionalità supportate. Gli sviluppatori che preferiscono workflow basati su PHP possono utilizzare ACF Blocks tramite il plugin Advanced Custom Fields (ACF), che ti consente di creare blocchi personalizzati tramite template PHP e campi ACF senza scrivere codice React.
Cosa controlla InspectWP
InspectWP rileva se il tuo sito WordPress utilizza l'editor Gutenberg scansionando il sorgente della pagina alla ricerca di commenti HTML specifici dei blocchi (come <!-- wp:paragraph -->, <!-- wp:image --> e altri) e di file CSS e JavaScript correlati a Gutenberg. Questo ti dà visibilità sul fatto che un sito abbia adottato l'editor a blocchi o stia ancora utilizzando il Classic Editor.