Alla Scoperta di Gutenberg, il Nuovo Editor di WordPress (Pro e Contro)

L’attuale editor visuale di WordPress non ha subito molti cambiamenti nel corso degli anni e, per gran parte, è rimasto più o meno lo stesso. Anche se questa non è una brutta cosa, molti pensano che sia tempo di cambiare. Altre piattaforme, come Medium o Ghost, offrono un’esperienza davvero unica e coinvolgente per chi scrive, quindi perché non può farlo anche WordPress? Bene, sono molti i contributor e volontari che hanno lavorato dietro le quinte per più di sei mesi a Gutenberg, il nuovo editor di WordPress. Il loro obiettivo? Rendere l’aggiunta di contenuti multimediali a WordPress semplice e divertente. Oggi analizzeremo in profondità il nuovo editor e scopriremo insieme a voi i pro e i contro.

• Cos’è Gutenberg?
• Come Installare Gutenberg
• Esplorando Gutenberg
• Vantaggi dell’Editor WordPress Gutenberg
• Svantaggi dell’Editor WordPress Gutenberg
• Proviamo la Demo di Gutenberg

Cos’è Gutenberg?

Gutenberg è un nuovo editor per WordPress. Prende il nome da Johannes Gutenberg, che inventò una macchina per la stampa a caratteri mobili più di 500 anni fa. L’attuale editor visuale richiede a molti di noi di utilizzare shortcode e codice HTML. L’obiettivo è rendere la creazione dei contenuti più semplice, specialmente a vantaggio di chi si avvicina a WordPress per la prima volta. Si sta adottando il sistema dei “piccoli blocchi” e si spera di aggiungere opzioni di layout più avanzate. Potete dare un’occhiata all’esempio ufficiale.

Per essere corretti nei confronti degli sviluppatori e del team che lavora al progetto, è importante far notare che Gutenberg è attualmente nella sua fase beta e di testing, non è ancora pronto per essere eseguito in siti di produzione. Ma volevamo approfondirne la conoscenza e vedere di persona di cosa si tratta. Aggiorneremo questo post non appena saranno rilasciati miglioramenti e modifiche. Ma già prima che l’editor sarà ufficialmente integrato nel core di WordPress, sembra che Matt Mullenweg (il fondatore) speri di raggiungere le 100.000 installazioni attive. Il che è assolutamente normale, poiché questo permetterà di individuare molti bug e anomalie e permetterà al team di elaborare nuove idee e richieste di nuove funzionalità.

“I think we can do 4.9 before we merge #Gutenberg — ideally over 100,000 active installs first.” @photomatt #WCEU

— Bridget Willard (@YouTooCanBeGuru) June 17, 2017

Dato che Gutenberg è ancora in fase di test, il team che sta lavorando al progetto invita tutti a provarlo e a lasciare commenti e feedback nel forum di supporto di WordPress o a segnalare un problema su GitHub. Chi lo desidera può partecipare alle discussioni che si tengono in #core-editor sul canale core WordPress Slack. Gutenberg arriverà con WordPress 5.0.

Come Installare Gutenberg

Mentre scriviamo, il plugin Gutenberg conta poco più di 20.000 installazioni attive, con oltre 290.000 download totali e 2,5 stelle su 5 di valutazione. Richiede la versione 4.8 di WordPress.

Il plugin di WordPress Gutenberg

Potete scaricare l’ultima versione di Gutenberg dalla repository di WordPress o cercarlo nella dashboard dla vostra installazione alla voce “Aggiungi nuovo” plugin. Ancora una volta, consigliamo di installarlo su un sito di prova o di utilizzare l’ambiente di staging del vostro host.

Installazione del plugin di WordPress Gutenberg

Esplorando Gutenberg

Dopo aver installato Gutenberg, vedrete dei nuovi link sotto i titoli dei post che vi permetteranno di aprire l’editor di Gutenberg. Questi non sostituiscono l’editor predefinito di WordPress, il che è una buona cosa a nostro avviso, poiché durante la fase di test consente di passare da un editor all’altro. A partire dalla versione più recente presente nella repository, l’editor supporta anche pagine e custom post type.

Link a Gutenberg nei post

Importante: una volta che sarà rilasciato WordPress 5.0, Gutenberg sarà l’editor predefinito (#41316), ma potrete comunque installare l’editor classico se doveste riscontrare problemi di compatibilità (come mostrato nel nuovo call-out mostrato di seguito).

Call-out di Gutenberg per WordPress 5.0

Gutenberg aggiunge un nuovo menu nella dashboard di WordPress contenente una demo (come mostrato sotto) e la possibilità di creare un nuovo post. Ancora una volta, questo menu probabilmente ha solo scopo di test. Come potete vedere, l’editor visuale sembra molto diverso da quello a cui siete abituati. Ha un aspetto molto simile a Medium, che dal nostro punto di vista è ottimo.

Demo dell’editor Gutenberg

Se mettete a confronto l’editor Gutenberg e l’attuale editor visuale (cliccate sull’immagine per ingrandire), potrete vedere di quanto spazio di scrittura in più dispone Gutenberg, specialmente sugli schermi più piccoli. Per chi scrive su laptop, Gutenberg permetterà un bel cambio di passo! È davvero incentrato sulla “scrittura prima di tutto” e costituisce una prova per un ambiente con meno distrazioni.

Confronto tra Gutenberg e l’editor corrente

Nell’editor di WordPress Gutenberg, potete dar clic sulle impostazioni del post per rimuovere la barra laterale di destra. E anche se questo vi dà accesso ad una quantità maggiore di schermo, è più o meno a metà strada rispetto alla modalità di scrittura senza distrazioni attualmente disponibile. Abbiamo provato a utilizzare Maiusc+Alt+W per avviare questa modalità nell’editor Gutenberg, ma non sembra essere ancora disponibile. Può darsi che non sia stato ancora aggiunto. Ma siamo abbastanza certi che lo sarà in futuro, dato che probabilmente sono in molti ad utilizzarlo.

Nascondere le impostazioni del post (a metà strada rispetto all modalità di scrittura senza distrazioni)

Per passare dalla modalità dell’editor visuale all’editor di testo (codice), ora c’è un menu a tendina in alto a sinistra. Noterete che ora ci sono commenti HTML all’inizio e alla fine di ogni blocco. Ad esempio, il codice che segue vi consentirebbe di creare un blocco di testo.

<!-- wp:core/text --> <!-- /wp:core/text -->

Questo codice consente di creare i blocchi direttamente dall’editor di testo. Tuttavia, complica un bel po’ le cose se lavorate in questa modalità.

Editor testuale di Gutenberg

Quando evidenziate un blocco, avete delle opzioni per spostarlo facilmente verso l’alto o verso il basso con le frecce, per eliminarlo o per accedere alle impostazioni del blocco. È molto simile ai controlli disponibili su Medium.

Lavorare con i blocchi di Gutenberg

Siamo anche rimasti sorpresi dal modo in cui ha funzionato sui dispositivi mobili. Se avete bisogno di inserire rapidamente un’immagine o aggiungere un paragrafo prima di pubblicare un post in movimento, sembra che Gutenberg renderà tutto molto semplice.

Editor mobile Gutenberg

Una delle prime cose che noterete sarà probabilmente che la barra degli strumenti di TinyMCE che abbiamo visto per anni non è più disponibile. Ora viene sostituita da un menu a discesa che appare quando si fa clic sul pulsante “Inserisci”. Beh, è ​​perché sembra che Gutenberg stia cercando di sbarazzarsi della sua dipendenza dall’integrazione con TinyMCE. O lo è ancora?

TinyMCE non c’è più

Ecco cosa ha detto Matt Mullenweg al riguardo.

“Quello che stiamo cercando di fare è spostarlo in modo che voi dobbiate imparare a usare i blocchi solo una volta e, una volta che sapete come funziona il blocco immagine, potrete usarlo in un post, in una sidebar, in una pagina, in un custom post type, e questo funzionerà sempre esattamente allo stesso modo. Con qualunque cosa venga integrato, supponiamo un plugin che include Google Foto o Dropbox, funzionerà sempre.” – Matt Mullenweg (src: WP Tavern)

Tuttavia, Andrew Roberts, il capo progetto del team di TinyMCE, ci ha contattati e ci ha chiarito alcune cose riguardo a TinyMCE e Gutenberg.

Sono stato nel team di Gutenberg sin dall’inizio. È stato uno sforzo comune. Probabilmente vale la pena notare che il motore di editing di base di TinyMCE è il motore del componente “modificabile” che a sua volta genera la maggior parte dei blocchi. Il blocco Tabella, ad esempio. È probabile che continui ad essere così nel prossimo futuro.

Inoltre, il blocco di testo classico è essenzialmente l’editor di TinyMCE. Quanta importanza assumerà probabilmente dipenderà dal feedback della comunità. Esiste in realtà una Pull Request (#1394) su cui si sta lavorando che in sostanza rende Gutenberg un contenitore per il ‘vecchio’ editor, in modo tale che i plugin e i pulsanti di TinyMCE esistenti continuino a funzionare. Resta da vedere se sarà incluso.

Indipendentemente da ciò, è probabile che i team dei Core di WP e TinyMCE lavoreranno insieme per garantire che in WordPress si abbia un’esperienza più vicina all’elaborazione testi. Anche se TinyMCE dovesse diventare un plugin.

D’altro canto, una delle ragioni per cui abbiamo lavorato al progetto Gutenberg con il suo eccellente team di sviluppo è stata quella di portare questi concetti alla più ampia comunità di TinyMCE nei prossimi 12 mesi. Ciò vi consentirà di portare i concetti di editing basato sui blocchi nelle vostre applicazioni personali. – Andrew Roberts

Di seguito sono riportati alcuni blocchi aggiunti recentemente crediamo siano abbastanza interessanti.

Blocco Tabella e Blocco Colonna di Testo

Le semplici tabelle ora sono molto più facili da gestire, dato che potete inserirle come blocchi all’interno dell’editor. In precedenza dovevate utilizzare un plugin di terze parti o del codice HTML. Al momento, potete aggiungere una tabella 2×2 con l’opzione di inserimento e non potete modificarla senza passare in modalità testuale. Sebbene, alla fine, supponiamo che sarete in grado di fare tutte queste cose dall’editor visuale.

Tabelle in Gutenberg

È stata anche aggiunta la possibilità di inserire blocchi reattivi di colonne di testo, che è una cosa eccezionale! Attualmente, potete scegliere tra un layout a 2, 3 e 4 colonne. Le colonne reattive in WordPress in passato sono sempre state un problema e in genere richiedevano un plugin di terze parti per funzionare a dovere.

Colonne in Gutenberg

Blocco HTML Live

È stato anche aggiunto quello che chiamiamo blocco HTML live. Potete inserire il vostro codice e quindi vedere un’anteprima direttamente all’interno del blocco. Questa è in realtà una bella idea e potrebbe davvero evitare ad alcuni di noi di andare avanti e indietro dall’editor visuale all’editor di testo.

Blocco HTML nell’editor Gutenberg

Immagini Drag and Drop

A partire da Gutenberg 0.5.0, è possibile trascinare e rilasciare le immagini direttamente in un blocco immagine, proprio come si è abituati a fare con l’editor visuale. Tuttavia c’è un effetto di dissolvenza piuttosto strano quando si effettua questa operazione. Potremmo facilmente supporre che sia un’anomalia.

Immagini drag and drop

Adesso potete anche aggiungere altre classi CSS a determinati blocchi.

Aggiungere una classe CSS

Blocchi Recenti

Con tutti i blocchi costruiti nell’editor di Gutenberg, e probabilmente in molti altri ancora in arrivo, è stata aggiunta la funzionalità “Blocchi recenti” per cercare di accelerare la procedura di inserimento.

Blocchi recenti

Opzioni Per Adattare il Testo

A partire da As of Gutenberg 0.9.0, sono anche stati introdotti alcuni nuovi stili visivi e opzioni per adattare il testo. È possibile modificare facilmente le dimensioni del carattere, trasformarlo in un capolettera e cambiare il colore con il nuovo componente della tavolozza colori personalizzata.

Adattare il testo in Gutenberg

Completamento Automatico con Slash

Una funzionalità interessante aggiunta in Gutenberg 1.1.0 è la possibilità di utilizzare il completamento automatico per inserire blocchi. Per quelli di noi che usano Slack tutti i giorni, si tratta di un modo molto familiare per formattare rapidamente i contenuti nel modo desiderato. Avere la possibilità di ridurre al minimo i clic e utilizzare di più la tastiera sono sempre cose utili!

Completamento automatico in Gutenberg (Img src: WordPress.org)

Struttura del Documento e Supporto Ancore

È stata anche aggiunta la struttura del documento nella barra laterale. Le voci sono link cliccabili che permettono di passare facilmente ad una sezione del vostro articolo. Questo può tornare utile quando si scrive un contenuto molto lungo.

Struttura del documento in Gutenberg

Un’altra funzionalità ora disponibile sui blocchi è quella delle ancore. In effetti è una funzionalità molto utile, che ci si aspettava nel core da lungo tempo. L’aggiunta delle ancore permette di collegarsi direttamente a una determinata sezione o intestazione nell’articolo. Ottimo per la condivisione, oltre che per la creazione di un salto ai menu nelle SERP.

Supporto ancore in Gutenberg

Conteggio Parole e Blocchi

Molti di noi sono abituati a vedere il numero totale di parole nella parte inferiore dell’editor WYSIWYG. Bene, in Gutenberg 1.2.1 è stato aggiunta questa informazione all’interno di un piccolo popup informativo che potete visualizzare rapidamente. Si può conoscere il numero totale di parole, il numero di blocchi e il numero di titoli.

Contatori parole e blocchi in Gutenberg

Blocchi di Citazioni e Nuove Opzioni di Allineamento

Oltre ad avere solo il blockquote standard che utilizziamo da anni, è ora disponibile una nuova citazione in evidenza. E sì, le citazioni in evidenza sono diverse. È anche bello vedere alcune varianti nel posizionamento dei blocchi. Per anni, l’editor visuale standard vi ha dato la possibilità di allineare a sinistra, al centro, a destra o non assegnare nessun allineamento. Con l’editor Gutenberg di WordPress, potete anche allineare in ampiezza (come mostrato sotto) e allineare a larghezza completa.

Citazioni con allineamento esteso in Gutenberg

Pulsante

C’è anche un sistema integrato per aggiungere un semplice pulsante. Anche se per questo non ci sono ancora molte opzioni disponibili, è bello vedere l’aggiunta di questa funzionalità, in quanto molti blogger ed editor hanno bisogno di sistemi più semplici per aggiungere delle “call to action” ai loro post. In questo momento dovete usare codice HTML o fare affidamento su un plugin di pulsante/shortcode di terze parti.

Pulsante Gutenberg

Opzioni di Incorporamento

Se voleste opzioni di incorporamento più accessibili, beh, avete sicuramente realizzato i vostri desideri! Gutenberg rende assolutamente semplice l’integrazione dei contenuti multimediali, di qualunque cosa si tratti: YouTube, SoundCloud, Hulu, Flickr, Imgur, Twitter, Slideshare, Reddit e molti altri. Anche se potevate incorporare tutti questi elementi anche in precedenza, molti non se ne rendevano conto perché non ce ne era alcuna menzione nell’editor visivo. In combinazione con la nuova esperienza centrata sui blocchi e le opzioni di allineamento, non siamo sicuri se qualcosa poteva essere fatto meglio. Anche se potrebbe essere necessario riorganizzare le cose più avanti, in quanto tutto questo potrebbe facilmente creare disordine.

Opzioni incorporamento in Gutenberg

Vantaggi dell’Editor WordPress Gutenberg

Ecco alcuni vantaggi che vediamo nell’attuale Editor Gutenberg.

• Abbandonare *un po’* di dipendenza da TinyMCE è una cosa positiva secondo noi. Ci piacerebbe vedere un’integrazione più stretta tra core, temi, plugin ed editor.

'Right now WordPress makes you learn a lot of concepts… [Gutenberg lets you] learn it once and use it everywhere.' @photomatt #WCEU

— Alex Denning (@AlexDenning) June 17, 2017

• Gli editori che preferiscono la nuova esperienza di editing in stile Medium, molto probabilmente adoreranno l’editor Gutenberg di WordPress.
• Gutenberg offre un’esperienza con meno distrazioni con più spazio sullo schermo.
• I blocchi sono piacevoli da usare e le nuove opzioni di allineamento sono un passo in avanti per schermi a risoluzione maggiore e siti reattivi e con template a pagina intera.
• Funziona già alla grande sui dispositivi mobili, e andando avanti vedremo un numero sempre maggiore di persone utilizzarlo molto di più. Dovete eseguire una modifica rapida dal telefono mentre siete in viaggio? Nessun problema.
• La possibilità per gli sviluppatori di temi e plugin di creare i propri blocchi personalizzati.
• Più facile da usare per i principianti.

Un’altra cosa che ha attirato la nostra attenzione è stata l’affermazione, nei log di sviluppo di Gutenberg 0.4.0, dell’aggiunta di un’API per la gestione dei contenuti incollati (lo scopo è convertire Word, Markdown, Google Docs in blocchi nativi di WordPress). Sarebbe fantastico. In questo momento la copia da Google Docs a WordPress è completamente sballata.

Svantaggi dell’Editor WordPress Gutenberg

E qui ci sono alcuni aspetti negativi che ci sembra di vedere nell’attuale editor Gutenberg. Ricordate, però, che è ancora in fase di test, quindi molte di queste cose saranno probabilmente risolte o aggiunte.

• Al momento manca il supporto Markdown.
• Anche se abbiamo detto che è più facile da usare per i principianti, possiamo anche dire che sarà più difficile da imparare per alcuni.
• A partire da ottobre 2017, Gutenberg supporta i meta-box. Tuttavia, questo è solo un supporto iniziale e sarà necessario che salgano a bordo anche gli sviluppatori. Tuttavia, è un passo nella giusta direzione. Almeno ora potete modificare le impostazioni di Yoast SEO.
  

  Meta box in Gutenberg

• Con così tanti temi e plugin in circolazione, la retrocompatibilità costituirà un problema enorme. In effetti, ci saranno probabilmente migliaia di sviluppatori che avranno molto lavoro da fare, come quelli che hanno creato integrazioni con TinyMCE. Tra tutti gli aggiornamenti di WordPress, questo sarà probabilmente quello che richiederà il maggior lavoro da parte degli sviluppatori. Sebbene potrebbe esserci un wrapper in arrivo che abiliterebbe la retrocompatibilità con TinyMCE. Si veda la pull request #1394.
• Alcuni sono preoccupati per l’accessibilità di Gutenberg. Joost de Valk, lo sviluppatore di Yoast SEO ha sollevato questa preoccupazione. Assicuratevi di dare un’occhiata a questo post sull’uso di Gutenberg con uno screen reader.

Gli sviluppatori hanno iniziato a esprimere le loro preoccupazioni su Gutenberg. Ahmad Awais ha anche pubblicato un Gutenberg boilerplate per aiutare gli sviluppatori di temi e plugin di WordPress ad avviare l’attività di sviluppo con Gutenberg. Vale la pena darci un’occhiata.

E molti di voi probabilmente si staranno chiedendo, Gutenberg sarà opzionale o no? La risposta è no. Quando Gutenberg sarà ufficialmente nel core di WordPress, non sarà possibile disattivarlo. Poiché questo diventerà l’editor ufficiale di WordPress. Esiste, tuttavia, un plugin gratuito chiamato Classic Editor che sarà possibile utilizzare per ripristinare il vecchio editor dei post. Ma utilizzato per fini specifici.

Consigliamo inoltre di dare un’occhiata a questo ottimo post sul mito di Gutenberg che potrebbe fornire risposte a tutte le altre domande che potrebbero venirvi in mente.

La Demo di Gutenberg

Volete provare Gutenberg senza installarlo? Andate su Frontenberg, una demo limitata al front-end dell’editor di WordPress Gutenberg.

Riepilogo

Nel complesso siamo rimasti molto colpiti dal nuovo editor di WordPress Gutenberg. Ci ha lasciato entusiasti per il futuro. Invitiamo tutti a scaricarne una copia dalla repository di WordPress e installarla su un sito di sviluppo o in staging. Questa, ragazzi, è la nostra possibilità di aiutare a costruire l’editor che tutti abbiamo sempre desiderato. Possiamo avere la stessa esperienza degli utenti di Medium, ma nel nostro CMS preferito! Il team di Kinsta dedicherà sicuramente del tempo per contribuire con il suo feedback.

Avete già provato Gutenberg? Se è così, ci piacerebbe sapere cosa ne pensate, nel bene e nel male.