wordpress gutenberg: tutto quello che c’è da sapere sul nuovo editor di testo

Ormai ci siamo, WordPress 5.0 è in fase di rilascio e con esso ci sarà una vera e propria rivoluzione alla parte più importante e delicata del CMS ovvero l'editor di testo predefinto.

Si passerà dall'ormai famoso e collaudatissimo TinyMCE al nuovissimo e per molti versi rivoluzionario gutenberg.

Il tuo website è compatibile con gutenberg? Sei pronto per questa rivoluzione visuale?

Seguimi e cercheremo di capire insieme pregi e difetti ma soprattutto compatibilità e problematiche del nuovo editor di testo per wordpress.

Non farti cogliere impreparato

Dopo circa dieci anni cambierà l'editor di testo integrato di wordpress. Si, hai capito bene, con l'uscita di wordpress 5.0 non potrai più usare TinyMCE, l'editor di testo semplice e familiare che usi ogni giorno per scrivere i tuoi articoli, per creare le tue pagine ed inserire contenuti, testo, immagini, video e shortcode nei tuoi post.

Sei spaventato da gutenberg? Hai paura per il tuo business? 

Non voglio alimentare la paura, però se pensi che gutenberg non avrà impatti sul tuo blog e (probabilmente) sul tuo business allora ti sbagli. Parliamo dell'editor di testo predefinito e se utilizzi temi e plugin particolarmente invasivi allora il rischio di incompatibilità è molto alto.

Tuttavia come ogni cambiamento la cosa importante è affrontarlo nella giusta maniera, facendo diventare un potenziale rischio un'opportunità.

Come prima cosa inizia da subito a studiarlo, provarlo e verificarlo. Lo puoi fare in anteprima con il plugin gutenberg che puoi scaricare in automatico non appena avrai terminato l'upgrade a wordpress 4.9

Questa la schermata che troverai nella tua bacheca wordpress

Come provare wordpress gutenberg

Per provarlo in anteprima, quindi, devi aver aggiornato il tuo wordpress alla versione 4.9 e dovrai scaricare il nuovo editor gutenberg dal link che trovi sulla tua bacheca.

Ricorda: Dalla versione 5.0 di wordpress non sarà più un plugin ma sarà l'editor nativo del tuo blog anche se potrai scaricare il plugin classico e continuare a lavorare come fai ora.

Tuttavia quando si utilizza un CMS come wordpress è bene essere sempre allineati con le ultime versioni di rilascio per questo è fondamentale iniziare a testare e provare il nuovo editor gutenberg, familiarizzare con questo strumento e testarne la compatibilità con il tuo tema e con i tuoi plugin, nell'ottica di abbandonare il prima possibile il vecchio editor.

Devo farlo sulla versione live del mio blog?

Anche in questo caso il mio consiglio è di iniziare a familiarizzare con questo editor su un ambiente di staging, per cui su una versione non live del tuo blog o su un blog wordpress di prova.

Solo dopo aver familiarizzato con questo editor ed averne verificato la compatibilità con il tuo tema ed i tuoi plugin potrai iniziare ad usarlo sulla versione live del tuo blog.

Io lo sto provando sull'ambiente di staging di pensando.it (demo.pensando.it), copia speculare di questo blog, in questo modo sono certo di testare la compatibilità con i miei plugin e (soprattutto) con il tema attualmente installato.

Come si presenta una volta installato?

Una volta installato ti renderai subito conte che questo non è solo un “editor” diverso da quello classico ma è una vera e propria rivoluzione concettuale che consente al blogger di strutturare e disegnare la pagina con modalità e strumenti prima di oggi impossibili.

Questo il pensiero di Matt Mullenweg, ideatore di wordpress:

L’editor creerà una nuova esperienza di costruzione di pagine e articoli che agevolerà la scrittura di articoli complessi e con i “blocchi” renderà semplice quello che oggi è prodotto da shortcode, HTML personalizzato ed embed discovery di “provenienza incerta”. — Matt Mullenweg

Molto probabilmente se stai utilizzando un tema visuale o uno dei tanti plugin che ti consentono di disegnare e strutturare le tue pagine a blocchi (Page Builder, Visual Editor, …) allora ti troverai molto più a tuo agio con gutenberg.

Io lo trovo molto interessante proprio perché è un segnale forte che tende a limitare l'area di azione di molti temi/plugin di terze parti, spesso molto cari e pesanti, che snaturano e rendono più lento ed insicuro wordpress.

Con gutenberg tutti i blogger ma anche i webdesigner ed i programmatori avranno uno strumento nativo ed integrato, per cui per sua natura più sicuro e performante, con il quale disegnare e realizzare website più dinamici, sofisticati ed accattivanti.

Torniamo a gutenberg ed a come si presenta una volta installato, questa la prima preview una volta installato:

Mentre questa è la preview di un vecchio articolo già pubblicato

Questa invece la preview di un nuovo articolo:

A me ha ricordato molto l'editor di testo integrato in Linkedin per la pubblicazione di nuovi articoli.

I blocchi di wordpress gutenberg

Il nuovo editor per wordpress gutenberg utilizza il concetto di “blocco” per strutturare la meglio il tuo articolo o la tua pagina.

Un blocco può essere uno dei seguenti elementi: paragrafo, titolo (H1 .. H4), immagine, galleria, lista, citazione, immagine di copertina, galleria.

Interessante andare a vedere come i blocchi vengano “rappresentati” a livello di html nella pagina.

Per vedere la nuova sintassi non devi far altro che cliccare sui tre puntini in alto a destra e selezionare la voce: “Editor del Codice“, passerai alla visualizzazione html che ha questa struttura:

Viene utilizzata una nuova sintassi gutenberg:

<!-- wp:blocco {opzioni} -->

Un nuovo modo di intendere la struttura di una pagina / articolo, decisamente poco compliant con l'HTML e molto custom wordpress. Questo non mi piace molto, la generazione dell'HTML lato server è una cosa che a me non è mai piaciuta troppo, anche se il codice client generato sembra abbastanza pulito:

Le vecchie pagine, invece, per forza di cose non potranno essere strutturate con la sintassi gutenberg, per cui le troverai tutte inserite in un unico blocco di tipo “classico”

Questi blocchi hanno anche il classico editor di testo che ti permette di inserire, ad esempio, shortcode ed oggetti di plugin esterni:

Il blocco “classico” per i vecchi articoli è molto importante in quanto consente la retrocompatibilità del tuo blog con i vecchi articoli, per cui presta particolare attenzione a questo particolare blocco.

I tuoi vecchi articoli li vedrai così:

Questa la visualizzazione in HTML dei vecchi articoli

Come vedi la vecchia versione dell'edito non inseriva codice non W3WC compliant nella pagina, le uniche varianti erano rappresentate dagli shortcode wordpress, inseriti tra le parentesi quadre [].

Con gutenberg si è scelto di inserire ulteriore codice lato server per la generazione dell'html, usando la sintassi gutenberg:

<!-- wp:blocco {opzioni} -->

Vedremo quali saranno gli sviluppi futuri di questa nuiva sintassi.

Compatibilità con plugin e temi

Da quanto ho potuto verificare la compatibilità sembra essere buona, proprio grazie al blocco “classico” che consente di interpretare il vecchio codice HTML come fosse parte integrante di un unico grande blocco, la pagina appunto.

E' molto importante testarne le funzionalità sui vecchi articoli e soprattutto sui plugin che avevano un impatto nel vecchio editor, ovvero su quei plugin che aggiungevano funzionalità all'editor stesso (Es. bottoni, twitter).

Altra caratteristica da verificare assolutamente è legata alla compatibilità con temi visuali che utilizzano una loro sintassi particolare, di solito basata sugli shortcodes, per strutturare in modo visivo una pagina.

Ad esempio per questo blog utilizzo un tema che mi consente di disegnare  dinamicamente e visivamente il layout di una pagina (Es. la home page), utilizza gli shortcodes e la sua struttura, con il nuovo editor, è questa:

Ossia un insieme di shortcodes inseriti in un blocco unico di tipo “classico“.

wordpress gutenberg: il video tutorial

Vuoi vedere come creare un post con wordpress gutenberg? buona visione

Conclusioni

Il nuovo editor di testo per wordpress gutenberg è uno strumento molto utile ed interessante che consentirà a blogger, webdesigner e programmatori di disegnare website più dinamici ed accattivanti senza ricorrere ad un uso esagerato di plugin e temi di terze parti, spesso non manutenuti e che appesantiscono e rendono poco sicuro un blog.

Introduce una nuova sintassi lato server per la generazione dinamica dei blocchi e di conseguenza del codice HTML lato client. Seppur il codice generato sembra essere pulito e ben strutturato è una nuova implementazione che andrà seguita con interesse ed attenzione anche in ottica velocità di rendering, performance e retrocompatibilità.

La compatibilità con i vecchi articoli e con la sintassi standard è garantita dal blocco “classico” che permette di incorporare in un unico blocco tutti il codice generato, shortcodes compresi. Questo ne garantisce l'utilizzo anche su blog dalle grandi dimensioni e con molti articoli pubblicati.

E' da verificare come temi e plugin particolarmente invasivi dal punto di vista del design dinamico della pagina si integrino con questo nuovo editor e ne permettano la coabitazione. Per quanto ho potuto verificare sui vari website che ho realizzato in wordpress il blocco “classico” garantisce questa compatibilità.

hai già provato wordpress gutenberg? Che te ne pare? Dimmi tutto nei commenti!