Nei mesi precedenti con Gutenberg, WordPress è stato dotato di una nuova esperienza editoriale che ha rivoluzionato la gestione dei contenuti e che ha sostituito TinyMCE editor.
Gutenberg introduce un nuovo modo di gestire le pagine con un metodo molto più simile ad un Visual Composer ed è progettato per integrarsi perfettamente con il core di WordPress.
È stato rilasciato in modo nativo con WordPress 5.0, precedentemente era disponibile solo come plugin.
Permette di aggiungere in modo intuitivo blocchi di contenuti e funzionalità alle pagine di ogni sito web. Anche se il classico editor supporta già questi elementi, Gutenberg rende l’integrazione di contenuti più facile ed intuitiva senza richiedere una conoscenza approfondita del codice.
Impiega uno svariato numero di blocchi che si possono usare per personalizzare il contenuto e il layout nell’editor.
| Elementi | Formattazione | Layout | Widget |
|---|---|---|---|
| Paragraph | Pull Quote | Separator | Latest Posts |
| Image | Table | More | Categories |
| Gallery | Preformatted | Button | Shortcode |
| Heading | Code | Text Columns | |
| Quote | Custom HTML | ||
| List | Custom Test | ||
| Cover Image | Verse | ||
| Video | |||
| Audio |
Aggiunge inoltre un supporto all’integrazione di risorse esterne per facilitare la loro integrazione senza l’ausilio di plugin aggiuntivi.
| Animoto | Meetup.com | SmugMug | |
| YouTube | Cloudup | Mixcloud | Speaker |
| CollegeHumor | Photobucket | TED | |
| Dailymotion | Polldaddy | Tumblr | |
| WordPress | Funny or Die | VideoPress | |
| SoundCloud | Hulu | ReverbNation | Vine |
| Spotify | Imgur | Screencast | WordPress.tv |
| Flickr | Issuu | Scribd | |
| Vimeo | Kickstarter | Slideshare |
Novità e funzionalità
Gutenberg migliora le capacità di storytelling all’interno di WordPress e consente agli sviluppatori di temi e plugin di proporre nuovi strumenti.
Incorpora moltissime nuove funzionalità ed è pensato per facilitare la creazione di contenuti e la loro gestione attraverso una collezione di strumenti che concentrano la loro forza sulla semplicità di utilizzo.
Spazio e gestione dei blocchi
Una delle prime cose che si possono notare è lo spazio che si dispone con Gutenberg specialmente sugli schermi più piccoli. È basato sul concetto di “scrittura prima di tutto” offrendo un ambiente con meno distrazioni.
È anche possibile, dalle impostazioni del post, rimuovere la barra laterale di destra per avere una modalità di scrittura simile a quella senza distrazioni da sempre disponibile.
Quando viene evidenziato un blocco, può essere spostato facilmente verso l’alto o verso il basso con le frecce, eliminarlo o accedere alle impostazioni del blocco (per gestire ad esempio la centratura o lo stile).
Ottima anche la gestione da dispostivi mobile che migliora e facilita il controllo e l’aggiornamento dei contenuti.
Struttura dei contenuti
Caratteristica molto utile è il riepilogo del documento che riporta un conteggio delle parole o dei titoli utilizzati e la struttura gerarchica: le singole voci sono cliccabili e permettono di passare facilmente ad una sezione della pagina.
In caso di problemi, come ad esempio un heading non corretto, l’errore viene segnalato.
Blocchi riutilizzabili
Dato che probabilmente nella gestione quotidiana di un sito molti elementi saranno ricorrenti, è stata introdotta la funzionalità “Blocchi riutilizzabili” per cercare di accelerare la procedura di inserimento.
È infatti possibile salvare dei preset che conserveranno tutte le caratteristiche e gli stili in modo da poter essere aggiunti rapidamente nelle pagine.
Anteprima in tempo reale
Gutenberg consente di inserire codice HTML personalizzato e vedere l’anteprima direttamente all’interno del blocco: questo velocizza molto l’integrazione o la modifica delle pagine evitando di passare più volte dall’editor visuale all’editor di testo.
Immagini drag and drop
Proprio come si è abituati a fare con la libreria Media, è possibile caricare le immagini direttamente in un blocco nel post o nella pagina.
Una volta aggiunta una risorsa si possono modificare con estrema facilità posizionamento, allineamento, grandezza e molte altre caratteristiche direttamente dall’editor visuale.
Tabelle e colonne di testo
Le tabelle sono molto più facili da inserire e gestire dato che è possibile aggiungerle come blocchi all’interno dell’editor.
Per impostazione predefinita, vengono create tabelle di 2 colonne e 2 righe ma è possibile aggiungere un numero superiore di celle. Inoltre, se si vogliono apportare modifiche alla formattazione della tabella è possibile inserire codice HTML personalizzato.
È stata inoltre resa disponibile la possibilità di inserire colonne di testo scegliendo tra un layout a 2 o più colonne.
Pulsanti e bottoni
Finalmente un sistema integrato per aggiungere semplici pulsanti: può sembrare una novità poco degna di nota ma molto spesso si ricorre a plugin o librerie CSS per riuscire a costruire un bottone senza avere una conoscenza adeguata di HTML o CSS.
Widgets
Questi blocchi consentono di aggiungere un archivio, uno shortcode, i post più recenti o gli ultimi commenti in qualsiasi punto della pagina.
È anche possibile, a seconda di quello utilizzato, regolare alcune impostazioni per avere una maggiore personalizzazione come ad esempio la selezione di una particolare categoria o l’ordinamento.
Questa funzionalità è molto interessante perché molte volte è presente solo in temi professionali o plugin dedicati che vengono impiegati per ottenere lo stesso risultato (appesantendo però il sito).
Opzioni di inclusione (embed)
Gutenberg rende l’integrazione di contenuti multimediali immediata, che si tratti di YouTube, Flickr, Imgur, Facebook, Vimeo, Twitter, Slideshare, Dailymotion, Reddit e molti altri.
Tutto quello serve è incollare l’URL nello spazio vuoto e la risorsa multimediale o il post (nel caso di un Social Network) saranno visibili.
Completamento automatico
Una caratteristica interessante (disponibile dalla versione 1.1.0) è la possibilità di utilizzare il completamento automatico: è stata introdotta per ridurre i click ed avere un accesso ancora più rapido all’inserimento di blocchi.
Per chi usa Slack questo è un modo familiare per formattare rapidamente i contenuti nel modo desiderato. Avere la possibilità di ridurre al minimo i click e utilizzare più la tastiera è sempre un’alternativa valida.
Premendo semplicemente / (tasto slash) sulla tastiera, si accede all’elenco dei blocchi disponibili ed è possibile selezionare quello desiderato.
Vantaggi e svantaggi
Nel complesso, Gutenberg sembra un ottimo “nuovo inizio” che porta con sé tante piccole innovazioni rispetto al metodo ormai troppo vecchio di WordPress e in generale un approccio più moderno alla creazione di contenuti.
È in ogni caso bene considerare che ci sono alcuni limiti e degli aspetti che vanno presi in considerazione, sopratutto per chi già ha un sito WordPress.
Pro di Gutenberg
- l’idea dei blocchi è semplice ma vincente dato che consentono di creare in modo intuitivo pagine complesse
- non è richiesta una competenza tecnica particolare per creare un template personalizzato, quindi per la maggior parte degli utenti rappresenta un modo molto più semplice di costruire le pagine
- consente di ottenere un design avanzato e coerente con molta facilità
- l’editor funziona molto bene anche su dispositivi mobile e consente di effettuare modifiche con maggiore efficienza
- gli sviluppatori di temi o plugin possono creare nuovi blocchi personalizzati
- utilizza un markup HTML5 moderno sfruttando tag come
sectionefigure
Contro di Gutenberg
- le opzioni e le possibilità di personalizzazione grafiche sono ancora limitate
- non supporta le colonne responsive ed è quindi indispensabile sviluppare codice personalizzato per abilitare questo comportamento
- ad oggi manca il supporto per il linguaggio Markdown
- la compatibilità con versioni precedenti di WordPress è potenzialmente molto bassa, sopratutto se si utilizza un tema personalizzato o particolari plugin per la gestione dei contenuti
- Gutenberg è un’opzione? No. Quando viene installata una versione recente di WordPress non è possibile disattivarlo dato che è l’editor ufficiale; esiste tuttavia un plugin gratuito, Classic Editor che consente di ripristinare il vecchio editor e una soluzione ancora più leggera per disattivarlo attraverso il file functions.php
La demo di Gutenberg
Per provare Gutenberg è possibile utilizzare Frontenberg, una demo che consente di utilizzarlo senza avere una propria installazione.
Announcing Frontenberg! A frontend, logged out #Gutenberg playground that lets you test out the new #WordPress editor instantly https://t.co/0jj7xYm3Ds pic.twitter.com/KCJLP0nate
— Tom J Nowell (@Tarendai) 20 dicembre 2017
Il progetto Frontenberg è stato ideato da Tom J Nowell per consentire a chiunque di utilizzare il nuovo editor con un semplice accesso al sito.
Novità e risorse
Attorno al progetto sono nati alcuni siti di informazione e che raccolgono interessanti risorse e tutorial:
- Gutenberg News, una collezione di risorse e tutorial
- Go Gutenberg, guide dettagliate sull’editor
- Gutenberg Hub, tutorials, plugins, add-ons e risorse
- Gutenberg Times, news e aggiornamenti
WOW !
Che post … ottimo lavoro! Mi permetto di diffonderla in giro nei canali ‘meetup’ WordPress cui partecipo. È un ottimo punto di partenza per studiare le nuove feature che sono ormai in imminente arrivo nei nostri siti,
Grazie Nicola. Avevo e ho tante aspettative da Gutenberg, per questo ho cercato di capire il più possibile nelle mie prove. È sicuramente un passo avanti necessario ma temo che sia ancora acerbo per una diffusione su larga scala… ma d’altronde, è solo l’inizio 🙂
Ciao Nicholas,
grazie per l’articolo perché l’avvento di Gutemberg mi spavetava un po’!
Una domanda. Ritieni sia meglio usare Gutenberg o un plugin nativo del tema come ad esempio Fusion builder per avada?
Grazie
Fusion Builder e Gutenberg hanno delle caratteristiche in comune ma non è possibile a mio avviso fare una comparazione equa.
Gutenberg, molto più giovane e quindi più povero di elementi nativi, è parte integrante di WordPress e verrà arricchito nel tempo. Fusion Builder essendo un plugin è “slegato” dalla struttura nativa del CMS ma offre un set di strumenti molto più ricco.
A meno che tu abbiamo elevate capacità di programmazione e design ti consiglio di utilizzare un page builder che ti faciliti il lavoro, Gutenberg allo stato attuale è più valido per blog o siti estremamente semplici.