UX & Coding

Gutenberg editor: alla scoperta della rivoluzione di WordPress

"Si basa su blocchi dinamici e cambia l'approccio alla creazione dei contenuti e alla gestione delle pagine rendendo tutto più User-friendly"

Nei prossimi mesi con Gutenberg, WordPress sarà dotato di una nuova esperienza editoriale che rivoluzionerà la gestione dei contenuti e che andrà a sostituire con i prossimi rilasci TinyMCE editor:.

Gutenberg introduce un nuovo modo di gestire le pagine con un metodo più più simile ad un Visual Composer ed è progettato per integrarsi con il core di WordPress.

Gutenberg sarà rilasciato in modo nativo con WordPress 5.0, ad oggi è disponibile 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.

ElementiFormattazioneLayoutWidget
ParagraphPull QuoteSeparatorLatest Posts
ImageTableMoreCategories
GalleryPreformattedButtonShortcode
HeadingCodeText Columns
QuoteCustom HTML
ListCustom Test
Cover ImageVerse
Video
Audio

Aggiunge inoltre un supporto all’integrazione di risorse esterne per facilitare la loro integrazione senza l’ausilio di Plugin aggiuntivi.

TwitterAnimotoMeetup.comSmugMug
YouTubeCloudupMixcloudSpeaker
FacebookCollegeHumorPhotobucketTED
InstagramDailymotionPolldaddy Tumblr
WordPressFunny or DieReddit VideoPress
SoundCloudHuluReverbNation Vine
SpotifyImgur 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).

Gutenberg blocchi testo

Ottima anche la gestione da dispostivi mobile che migliora e facilita il controllo e l’aggiornamento dei contenuti.

Gutenberg blocchi mobile
Si adatta bene ad ogni risoluzione con una buona gestione degli spazi

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.

Gutenberg struttura contenuto

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.

Gutenberg blocchi riutilizzabili

È 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.

Gutenberg HTML Live
La live preview è attivabile anche per un singolo blocco alla volta

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.

Gutenberg immagini

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.

Gutenberg tabelle

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.

Gutenberg colonne
Senza Gutenberg utilizzare le colonne di testo in una pagina può essere macchinoso

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.

Gutenberg pulsanti

Widgets

Questi blocchi consentono di aggiungere un archivio, uno shortcode, i post più recenti o gli ultimi commenti in qualsiasi punto della pagina.

Gutenberg widgets
Con i widget di Gutenberg è possibile estendere le funzionalità di una 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.

Gutenberg embed

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.

Gutenberg autocomplete
Con la funzione di auto completamento la gestione dei blocchi è ancora più immediata

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 section e figure

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 verrà rilasciato ufficialmente non sarà possibile disattivarlo dato che diventerà l’editor ufficiale per WordPress; esiste tuttavia un plugin gratuito, Classic Editor che consente di ripristinare il vecchio editor

La demo di Gutenberg

Per provare Gutenberg è possibile utilizzare Frontenberg, una demo che consente di utilizzarlo senza avere una propria installazione.

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:

Aggiungi un commento

UX & Coding

Articoli recenti

Newsletter

Inserisci la tua email per restare aggiornato sulle ultime novità.