WordPress Gutenberg il nuovo editor

wordpress gutenberg blocco

Aggiornato il 9 Agosto 2018

Dopo l’aggiornamento di wordpress alla release 4.9.8 sulla Bacheca di WordPress appare questo messaggio.

Una nuova e moderna esperienza di pubblicazione è in arrivo. Porta le tue parole, i tuoi contenuti multimediali, e le tue impaginazioni verso nuove direzioni con Gutenberg, il nuovo editor di WordPress che stiamo realizzando adesso.

Il nuovo editor di WordPress chiamato Gutenberg è ormai una realtà e il 2018 è l’anno in cui la community di wordpress potrà iniziare ad utilizzarlo. Con La versione 5.0 di wordPress Gutenberg editor sarà inserito di default.

Cos’ è Gutenberg

Il nuovo editor Gutenberg sostituirà l’Editor Classico TinyMCE. Gutenberg è un plug in di wordpress che permette di creare contenuti utilizzando i “blocchi”. L’utilizzo di Gutenberg permette di creare layout di pagine e post in modo facile  come se utilizzassimo un page builder la differenza è che questo editor è nativo di wordpress e diventerà l’editor ufficiale.

PRIMA TinyMCE Editor (Editor Classico)

prima di gutenberg editor

DOPO Gutenberg Editor

wordpress gutenberg editor nuova pagina

Cosa sono i “bloccchi”

I Blocchi sono le componenti fondamentali dell’editor Gutenberg.  I blocchi sono elementi pre impostati utilizzati per inserire all’interno di post e pagine immagini, testo, incorporare video e facebook post in modo facile.

blocchi wordpress gutenberg

Il concetto del blocco è simile al concetto di elemento o modulo usato dai numerosi page builder. Nella cover image del post ho inserito un’animazione di un inserimento di un blocco cover image.

Ma cosa succederà ai page builder con l’arrivo di Gutenberg ?

E’ del tutto normale chiedersi cosa succederà ai page builder con l’arrivo del nuovo editor di gutenberg.

Come prima cosa c’è da dire che wordpress ha creato un plug in che si chiama Classic Editor per utilizzare ancora l’editor classico. In questo modo per i siti che attualmente utilizzano page builder differenti da Gutenberg non ci saranno problemi di incompatibilità in quanto si impedisce di usare il nuovo Editor.

pugin classic editor - Wordpress Gutenberg il nuovo editor

By default it will hide all traces of the new Gutenberg editor including the Dashboard widget asking the users to try it.

Per quanto riguarda il futuro dei page builder sono andato a vedere alcuni post sui rispettivi siti ufficiali dei tre Page builder più importanti.

Horizontal Light - Wordpress Gutenberg il nuovo editor

Beaver builder

(dal post How Beaver Builder works with Gutenberg ultimo aggiornamento 25 aprile 2018) Quando si vuole creare una pagina Bever builder da la possibilità di decidere quale editor utilizzare

beaver gutenberg

divi logo 300x198 - Wordpress Gutenberg il nuovo editor

Divi

(dal post Divi Feature Update! Introducing Initial Gutenberg Support ultimo aggiornamento 31 luglio 2018) Divi con all’attivo più di 500 000 clienti ha inserito la possibilità nel momento in cui si crea una pagina o un post di scegliere quale editor utilizzare attraverso una comoda drop down list.

divi gutenberg

elementor logo - Wordpress Gutenberg il nuovo editor

Elementor

(Dal post Create a new page ultimo aggiornamento agosto 1 2018) anche in questo caso abbiamo la possibilità di cambiare Editor utilizzando il bottone Edit with Elementor

elementor gutenberg

visual composer logo - Wordpress Gutenberg il nuovo editor

Viusal Composer

(dal post Gutenberg Element ultimo aggiornamento 25 luglio 2018) Visual Composer un altro Top Player in ambito Page builder permette di utilizzare l’editor di Gutenberg all’interno dell’editor di visual composer. Per fare questa operazioni è necessario avere Gutenberg plugin installato su wordpress successivamente scaricare dal visual composer Hub l’elemento Gutenberg e utilizzarlo all’interno del visualcomposer.

gutenberg visual composer

Da questi post emerge che Beaver Builder Divi e Elementor hanno scelto per il momento di separare l’editor Gutenberg dai loro Page Builder Editor. Invece Visualbuilder ha fatto la scelta di integrare gli elementi di Gutenberg all’interno dell’attuale page builder.

Nel prossimo ed ultimo paragrafo iniziamo a vedere più da vicino e concretamente l’editor di Gutenberg installandolo ed esplorando alcune funzionalità. Ti ricordo che la versione ufficiale la 5.0 non è ancora uscita quindi si consiglia di utilizzare un ambiente di test.

Non vuoi installare il plug in ma vuoi provare una Demo di Gutenberg on line?

Qua trovi una demo dell editor Gutenberg con funzionalità limitate da provare.

Come Installare gutenberg, il nuovo editor in azione

In questo tutorial vediamo come installare l’editor Gutenberg e esploreremo l’utilizzo di alcuni blocchi creando una pagina di test. In particolare il blocco immagine, blocco testo, blocco galleria e blocco youtube.

STEP 1 Installazione del plug in Gutenberg

gutemberg wordpress installazione plugin

Selezionando la voce Bacheca troviamo 2 possibili scelte.

  • Installare il plug in Gutenberg (installa il plug in Gutenberg) la nostra scelta per questo tutorial
  • Installare l’editor Classico (installa il plug in Classic Editor)

Se si hanno dubbi sulla compatibilità con altri plug in specialmente con i page builder è il caso di usare il Classic Editor per poi passare al nuovo editor quando siamo sicuri che le compatibilità siano sistemate.

Dopo aver installato il plug si Attiva e questa è la schermata che apparirà.

gutenberg editor installazione

STEP 2  Creazione di una nuova Pagina

Creare una nuova pagina con l’editor di Gutenberg e come crearla con l’editor Classico dal menu Pagina selezionare Aggiungi nuova.

wordpress gutenberg blocco aggiungi nuova pagina

Apparirà la nuova pagina con il layout del nuovo Editor come potete vedere i cambiamenti sono parecchi dalla figura possiamo vedere principalmente 3 aree.

  1. Tool bar dove selezionare il blocco da inserire.
  2. Area utilizzata per inserire il titolo della pagina.
  3. la colonna destra ha 2 ta, Documento con le informazioni classiche come stato di visibilità e attributo della pagina e un tab Blocco con le proprietà del blocco e la possibilità di aggiungere una classe css.

wordpress gutenberg editor 1 - Wordpress Gutenberg il nuovo editor

Adesso inserisco il titolo della pagina e compare subito il link della pagina sopra il titolo con la funzionalità di modifica.

wordpress gutenberg-blocco-creazione titolo nuova pagina

STEP 3  Utilizzo del blocco Immagine

Dopo aver inserito il titolo in questo step utilizzo il blocco immagine.

wordpress gutenberg blocco immagine

Questo è l’anteprima dopo l’inserimento dell’immagine. L’anteprima live è molto utile in quanto abbiamo subito un’idea di come verrà visualizzata l’immagine sul browser.

wordpress gutenberg blocco immagine anteprima

STEP 4  Utilizzo del blocco Testo

Esempio di inserimento di un blocco testo stessa procedura icona + e aggiunta del blocco.

wordpress gutenberg blocco testo

Anteprima del blocco testo inserito con la possibilità di cambiare live  le sue proprietà come ad esempio la dimensione del font.

wordpress gutenberg blocco testo anteprima

STEP 5  Utilizzo del blocco Galleria immagine

Questo blocco è utile per creare una galleria di immagini.

wordpress gutenberg blocco galleria

In questo esempio l’attributo colonna è uguale a 3 significa che inserendo 4 immagini automaticamente vengono inserite 3 immagini nella prima riga e nella seconda un’immagine singola. Variando questo valore si varia dinamicamente la disposizione delle immagini.

wordpress gutenberg blocco galleria anteprima

STEP 6  Utilizzo del blocco youtube

Incorporare elementi dai vari social è velocissimo con l’uso dei blocchi incorporamenti. In questo esempio ho incorporato un link di youtube utilizzando il blocco yotube ma è possibile utilizzare blocchi per Facebook, Twitter, instagram e tanti altri social o applicazioni.

wordpress gutenberg blocco youtube

Questo è il risultato dopo l’incorporamento del link.

wordpress gutenberg blocco youtube anteprima

Questa la schermata dell’anteprima della pagina

wordpress gutenberg blocco pagina anteprima

Conclusioni

Gutenberg soddisfa tutte le premesse per diventare il nuovo page builder nativo di wordpress per permettere a tutti di creare facilmente layout di post e pagine.

Vedremo i prossimi sviluppi e come si integrerà con i centinaia di page builder ad oggi presenti sul mercato.

Se avete domande potete lasciare un commento o contattarmi utilizzando la pagina contatti