In WordPress 5.0, il classico e famoso editor dei contenuti è stato sostituito con una nuova versione che utilizza i blocchi e si chiama Gutenberg.
L’editor a blocchi di WordPress è uno strumento completamente diverso dal precedente, rappresenta un nuovo modo di creare contenuti, articoli o pagine all’interno del nostro CMS preferito.
In questa guida / tutorial cercheremo di mostrare qualche piccolo suggerimento per usare al meglio questo nuovo strumento e speriamo che, dopo la lettura, possiate imparare ed abbiate voglia di usarlo per creare articoli e pagine del vostro blog senza troppe difficoltà.
Cosa distingue i due editor e quali sono in dettaglio le differenze tra Gutenberg e il Classic Editor?
Cerchiamo di vedere alcune differenze sostanziali tra questi due utili e fondamentali strumenti.
Qui di seguito potete vedere una semplice schermata del Classic Editor.
Se si passa a WordPress 5.0, troveremo tutt’altro aspetto grazie al nuovo editor a blocchi Gutenberg:
Possiamo affermare che, per molti, il Classic editor ormai rappresenti il passato, mentre Gutenberg sia il presente e futuro di molti amanti di WordPress.
Il vecchio Classic Editor era un editor di testo con pulsanti di formattazione molto simile a Microsoft Word.
Invece il nuovo editor ha una modalità del tutto differente, chiamata “Blocchi” (da cui il nome Block Editor).
I blocchi sono elementi che si aggiungono e sono necessari alla creazione di layout di contenuto. Ogni elemento che si andrà ad inserire all’articolo o alla pagina è un blocco.
È possibile inserire ed aggiungere questi blocchi per ogni contenuto che si vorrà gestire (testi, immagini, video, gallerie, audio, liste, tabelle e tanto altro).
Ci sono blocchi per tutti gli elementi di contenuto e altri possono essere aggiunti dai plugin di WordPress.
Vediamo il perché questo nuovo editor a blocchi di WordPress è migliore del classico editor.
Il nuovo editor Gutenberg di WordPress offre un nuovo e semplice modo di gestire le differenti tipologie di contenuti che vorrete inserire nei vostri articoli e nelle vostre pagine.
Ad esempio, col vecchio Classic editor, se volevate inserire una tabella nel vostro testo, dovevate installare e usare un plugin dedicato alla gestione delle tabelle.
Con il nuovo Gutenberg, invece, aggiungere e gestire un blocco tabella diventa molto facile, potendo così creare e modificare le vostre colonne e righe e iniziando ad inserire contenuti molto più in fretta.
Ora è possibile spostare gli elementi di blocco tramite le frecce a sinistra, potendoli muovere su e giù, creando così in maniera semplice pagine e articoli ricchi di contenuti multimediali.
L’aspetto più importante da tenere a mente è che il nuovo editor di WordPress Gutenberg è facile da usare e in poco tempo imparerete ad usarlo al meglio.
Servirà giusto un po’ di pazienza all’inizio, essendo così diverso dal Classic editor. Ma… abbiate fiducia, superato il primo momento troverete in questo nuovo editor una risorsa infinita per svolgere molto più velocemente tutte le operazioni che facevate con il precedente editor.
Questo faciliterà il lavoro dei principianti di WordPress che hanno appena iniziato il loro primo blog o stanno costruendo un sito web aziendale in autonomia.
Fatte queste premesse, cominciamo a vedere nel dettaglio come poter usare il nuovo editor a blocchi di WordPress, cercando di utilizzarlo come un vero professionista del settore per creare contenuti di qualità.
Conoscere e utilizzare Gutenberg – Il nuovo editor a blocchi di WordPress
L’editor a blocchi è stato progettato per essere facile da utilizzare e capire e, allo stesso tempo, è anche molto flessibile nel suo utilizzo. Anche se appare diverso dal vecchio e classico editor di WordPress, in ogni caso fa tutto ciò che si poteva fare nell’editor classico aggiungendo un sacco di nuove funzionalità che scopriremo nel resto della guida.
Possiamo cominciare analizzando le funzionalità di base che potevate fare nell’editor classico e come invece possono essere fatte in questo nuovo editor a blocchi.
Creazione di un nuovo articolo o pagina del blog
Potrete iniziare a creare nuovi articoli o nuove pagine del blog nello stesso modo di sempre. Basterà cliccare nel menù Articoli e poi su Aggiungi articolo nel vostro pannello di controllo di WordPress. Se state creando una pagina, andate su Pagine e successivamente su Aggiungi pagina.
Questo vi permetterà di aprire il nuovo editor a blocchi Gutenberg.
Come aggiungere un blocco in Gutenberg
Il primo blocco di ogni articolo o pagina è il titolo. Dopo aver inserito il titolo, si può utilizzare il mouse per spostarsi appena sotto o semplicemente premere tab sulla tastiera per muoversi verso il basso, avendo così possibilità di scrivere i primi contenuti.
Come impostazione predefinita, il primo blocco dopo il titolo è un blocco Paragrafo. Questo dona agli utenti la possibilità di iniziare subito a scrivere.
In ogni caso, se vogliamo aggiungere e inserire qualcosa di diverso, allora possiamo semplicemente cliccare sul pulsante Aggiungi blocco (col segno +) nell’angolo in alto a sinistra dell’editor oppure sotto un blocco esistente (in questo caso avremo due possibilità, nel lato sinistro di un blocco e al centro).
Cliccando sul pulsante verrà visualizzato il menu Aggiungi blocco con una barra di ricerca in alto e i blocchi comunemente usati appena sotto.
È possibile fare clic sulle schede per sfogliare le categorie di blocchi o digitare la parola chiave per cercare rapidamente un blocco.
Se non volete utilizzare il mouse per cliccare sul pulsante, potete usare una scorciatoia da tastiera digitando / per cercare e aggiungere un blocco (quindi scrivendo il carattere / e poi il nome del blocco che vorrete aggiungere nell’articolo o nella pagina).
Lavorare con i blocchi nel nuovo editor
Ogni blocco è dotato di una propria barra degli strumenti che viene mostrata nella parte superiore del blocco. I pulsanti della barra degli strumenti cambiano a seconda del blocco che si sta utilizzando e che si vuole eventualmente modificare.
Facciamo un esempio: in questa schermata, stiamo utilizzando un blocco Paragrafo che mostra i classici pulsanti di formattazione di base: “Cambia l’allineamento del testo”, “Grassetto”, “Corsivo”, “Aggiungi link” e “Barrato”.
Oltre alla barra degli strumenti nella parte superiore, ogni blocco può anche avere le proprie impostazioni di blocco che saranno mostrate nella colonna di destra della vostra schermata.
È possibile spostare i blocchi su e giù con un semplice drag and drop o facendo clic sui pulsanti su e giù accanto ad ogni blocco.
Salvataggio e riutilizzo dei blocchi in Gutenberg
Una delle cose migliori dei blocchi è che possono essere salvati in una libreria personale e riutilizzati individualmente, a seconda dell’esigenza del caso (secondo noi è una delle novità più interessanti). Questo è particolarmente utile per i blogger che spesso hanno bisogno di aggiungere specifici frammenti di contenuto ai loro articoli, magari ripetendo determinate formattazioni precedentemente salvate.
Per farlo è sufficiente cliccare sul pulsante del menù “Altre opzioni” situato nell’angolo destro della barra degli strumenti di ogni blocco (quello coi tre puntini in verticale). Aperto quel menù, basterà scegliere l’opzione “Aggiungi ai blocchi riutilizzabili”.
Si dovrà scegliere un nome per il blocco riutilizzabile che si vuole salvare. Inserite il nome per il vostro blocco e poi cliccate sul pulsante Salva.
L’editor a blocchi Gutenberg salverà così il vostro blocco come blocco riutilizzabile (potrete quindi richiamarlo ed usarlo in qualsiasi altro articolo o pagina).
Ora che avete salvato il blocco appena creato e modificato a piacimento, vediamo come potere aggiungere il blocco riutilizzabile in altri articoli o pagine di WordPress nel vostro sito, potendo in questo modo utilizzare facilmente la stessa struttura o formattazione già utilizzata in altri contenuti, risparmiando così parecchio tempo.
Sarà sufficiente modificare l’articolo o la pagina in cui si desidera aggiungere il blocco riutilizzabile. Dalla schermata di modifica dell’articolo o della pagina, cliccate sul pulsante “Aggiungi blocco”.
Potrete trovare il blocco salvato sotto la scheda ‘Riutilizzabile’. Potete anche trovarlo digitando il suo nome nella barra di ricerca.
Basterà posizionare il mouse su di esso per visualizzare una rapida anteprima del blocco. Un semplice click sul blocco e verrà inserito nel tuo articolo o nella tua pagina.
Tutti i blocchi riutilizzabili sono memorizzati all’interno della vostra installazione di WordPress, e potete gestirli e richiamarli semplicemente cliccando sul link “Gestisci tutti i blocchi riutilizzabili”..
Una volta cliccato nel link “Gestisci tutti i blocchi riutilizzabili” arriverete nella sezione che vi permettà di gestire i vari blocchi riutilizzabili salvati in precedenza. Da qui è possibile modificare o cancellare i blocchi riutilizzabili. Potete anche esportare i blocchi riutilizzabili e utilizzarli su qualsiasi altro sito WordPress.
Pubblicazione e gestione delle opzioni del nuovo editor a blocchi Gutenberg
Ogni articolo di WordPress contiene molti metadati. Tra i quali possiamo trovare la data di pubblicazione, le categorie e i tag, l’immagine in evidenza e tanto altro ancora che scopriremo nelle righe successive.
Tutte queste opzioni le potrete trovare nella colonna di destra della schermata dell’editor.
Opzioni plug-in in Gutenberg
I plugin di WordPress sono in grado di sfruttare le API dell’editor a blocchi per integrare le proprie impostazioni all’interno della schermata di modifica (potendo così facilmente essere inseriti dentro i nostri blocchi di Gutenberg).
Alcuni plugin popolari sono già disponibili come blocchi. Per esempio, WPForms (plugin per creare moduli di contatto in WordPress) permette di aggiungere in poco tempo moduli di contatto nei contenuti utilizzando un blocco Widget (ovviamente il modulo di contatto dovrà essere creato in precedenza dentro WPForms).
Tramite Gutenberg è anche possibile accedere alle impostazioni di Rank Math, plugin SEO (cliccando in alto a destra sui tre pallini e selezionando Plugin/Rank Math):
Una volta cliccato su Rank Math, si apriranno le relative impostazioni nella barra degli strumenti sulla destra.
Anche WooCommerce è dotato anche di blocchi widget che potrai facilmente aggiungere a qualsiasi articolo e pagina di WordPress (potendo così facilmente inserire diversi riferimenti ai tuoi prodotti.
Selezionando per esempio Prodotti Scelti, comparirà questa schermata (avendo così possibilità di scegliere alcuni prodotti ed impostarne anche il layout):
Inserimento di alcuni blocchi classici nel nuovo editor
In sostanza, il nuovo editor a blocchi può fare tutto quello che si poteva fare con il Classic Editor. Tuttavia, vi permetterà di far le cose molto più velocemente e con maggiore eleganza rispetto a prima.
Alcune di queste sono:
Inserimento di un’immagine nel nuovo editor a blocchi di WordPress
Nel nuovo editor di WordPress è presente un blocco Immagine pronto all’uso. È sufficiente aggiungere il blocco Immagine e poi caricare un file immagine o selezionare dalla libreria multimediale.
È anche possibile selezionare, trascinare e rilasciare le immagini dal proprio computer e l’editor creerà automaticamente un blocco Immagine contenente l’immagine appena inserita.
Una volta aggiunta l’immagine scelta, si potranno vedere le impostazioni del blocco in cui è possibile aggiungere anche i metadati per l’immagine, come l’Alt Text (Testo alternativo), dimensioni e aggiungere un link all’immagine.
Inserimento di un link nel nuovo editor a blocchi
L’editor a blocchi ha diversi blocchi dove è possibile aggiungere e modificare del testo. Il blocco maggiormente utilizzato è il blocco Paragrafo che viene fornito con un pulsante di collegamento per l’inserimento di un link nella barra degli strumenti.
Il pulsante per inserire i link nel testo è presente anche negli altri blocchi di testo maggiormente utilizzati, sempre nella barra degli strumenti.
È anche possibile inserire un link utilizzando la scorciatoia da tastiera, che è Command + K per Mac e CTRL + K sui computer Windows.
Aggiungere una galleria di immagini a Gutenberg
Il blocco Galleria funziona come il blocco Immagine. Lo si aggiunge e poi si caricano o si selezionano le immagini che vorremo mostrare nella nostra galleria.
Aggiunta di shortcode negli articoli o nella pagine di WordPress con Gutenberg
Tutti i vostri shortcode creati e utilizzati in precedenza funzioneranno proprio come nell’editor classico. Potete semplicemente inserirli in un blocco Paragrafo oppure potete usare il blocco Shortcode.
Scopriamo alcuni dei nuovi blocchi di contenuti che troverai in Gutenberg
Il nuovo editor a blocchi Gutenberg sembra possa finalmente risolvere alcuni problemi di usabilità in WordPress ormai conosciuti da tempo, introducendo alcuni nuovi blocchi.
Qui di seguito riportiamo alcuni di questi nuovi blocchi che, secondo noi, faciliteranno non poco la composizione dei nostri / vostri contenuti. Siamo convinti che per molti di voi saranno molto validi e, presto, inizieranno ad usarli nella loro quotidianità.
Inserimento di un’immagine a lato di un testo in WordPress
Utilizzando il vecchio Classic editor, molti di noi avevano difficoltà nel posizionare un testo con un’immagine al fianco. Ora, invece, è possibile farlo facilmente con il blocco Media e testo.
Questo blocco di base viene fornito con due blocchi uno di fianco all’altro che danno la possibilità in pochi click di inserire del testo e al suo fianco un’immagine.
Inserimento di un pulsante negli articoli e nelle pagine di WordPress
L’inserimento di un pulsante negli articoli o nelle pagine del blog era un altro problema del Classic editor. Per poterlo inserire si doveva ricorrere all’uso di un plugin (e agli shortcode che esso creava), oppure si doveva scegliere la modalità HTML e scrivere il codice relativo alla creazione del pulsante in questione.
Gutenberg invece è dotato di un blocco Pulsante che consente di aggiungere facilmente un pulsante a qualsiasi articolo o pagina che sia.
Si può inserire un link per il pulsante, cambiare i colori (di sfondo e testo), scegliere tra differenti stili di pulsanti e settare eventualmente i bordi (aumentando il raggio del bordo, il pulsante avrà una forma meno squadrata).
Inserimento di immagini di copertina ad effetto negli articoli del blog o eventualmente anche nelle landing page
Consigliamo di provare il blocco Copertina, che permette di inserire immagini di copertina ai vostri articoli e alle vostre pagine.
Un’immagine di copertina è un’immagine più larga di quelle comunemente usate negli articoli o pagine. Spesso si utilizza come intestazione di una sezione o quando si sta cominciando un articolo. È uno strumento davvero utile, da utilizzare nei nostri contenuti per creare layout che catturino più facilmente l’attenzione degli utenti.
Basta aggiungere un blocco Copertina e poi inserire l’immagine che si desidera utilizzare. È possibile scegliere un colore di sovrapposizione per la copertina (questo per facilitare la lettura di eventuali testi che usino l’immagine di copertina come sfondo).
È anche possibile creare un’immagine di sfondo fissa per utilizzare l’effetto parallasse (Parallax, in inglese) quando gli utenti scrollano la pagina.
Creazione di tabelle all’interno degli articoli
L’editor classico non aveva un pulsante per inserire tabelle nei vostri contenuti in WordPress. Dovevi usare un plugin o creare una tabella tramite scrittura di CSS e HTML personalizzati.
Ora, il nuovo editor a blocchi Gutenberg è dotato del blocco Tabella, che rende finalmente molto facile inserire e modificare tabelle nei tuoi articoli o nelle tue pagine. Basta aggiungere il blocco Tabella, scegliere il numero di righe e colonne desiderate, cliccare su Crea tabella e… in pochi istanti avremo la nostra tabella inserita nei nostri contenuti.
Adesso si può iniziare ad aggiungere dati alle righe della tabella. Se avremo bisogno di più righe o colonne, sarà facile compiere tali modifiche utilizzando la terza icona (a partire da sinistra) nella barra degli strumenti del blocco Tabella. Si possono anche scegliere due Stili differenti (o eventualmente cambiare alcune impostazioni di colore).
Creazione di contenuti a più colonne
La creazione di contenuti a più colonne era un’altra modalità che l’editor classico non dava possibilità di gestire. L’editor a blocchi Gutenberg, invece, permette di aggiungere il blocco Colonne, che in pratica aggiunge con semplicità colonne di blocchi di paragrafi (è possibile inserire più colonne semplicemente aumentando il numero nelle opzioni a destra) o altri blocchi desiderati.
Questo blocco di colonne è abbastanza flessibile e facile da utilizzare. Infatti è possibile gestire fino a 6 colonne in una riga e persino inserire altri blocchi all’interno di ogni colonna (potendo così aumentare le colonne utilizzate).
Alcune idee utili per usare Gutenberg come un professionista
Adesso che abbiamo scoperto diverse delle nuove funzionalità di Gutenberg, vi state ponendo il dubbio se vi distrarrete di più con i nuovi blocchi piuttosto che nella creazioni di nuovi testi o contenuti da inserire nel vostro blog o sito?
Scoprirete presto che il nuovo editor a blocchi è davvero molto veloce e dopo pochi minuti che lo utilizzerete avrete già dimenticato i dubbi o le perplessità iniziali.
Facilmente vi accorgerete che in questo modo il vostro metodo di lavoro diverrà molto più snello e per compiere le stesse operazioni ci mettere molto meno tempo (rispetto all’utilizzo del Classic Editor).
Per gli utenti più esperti, ecco alcuni suggerimenti per aiutarvi a lavorare ancora più velocemente con il nuovo editor Gutenberg.
Spostare la barra degli strumenti dei blocchi in alto.
Come avrete notato quando entrate in modifica di un contenuto, c’è una barra degli strumenti che appare in cima ad ogni blocco. Si può posizionare la barra degli strumenti nella parte superiore dell’editor.
Basta cliccare sul pulsante con i tre puntini nell’angolo in alto a destra dello schermo e poi selezionare l’opzione Barra degli strumenti in alto.
Utilizzare le scorciatoie da tastiera
Gutenberg utilizza anche diverse scorciatoie da tastiera, molto utili. Esse vi permetteranno di velocizzare notevolmente il vostro flusso di lavoro. Quella che probabilmente inizierete ad usare per prima è questa: /.
Sarà sufficiente scrivere il carattere / e poi scrivere le iniziali del blocco che vorrete utilizzare e Gutenberg visualizzerà i blocchi corrispondenti e sarà molto semplice aggiungerli ai vostri contenuti.
Ci sono molte altre scorciatoie e sono raggiungibili ciccando nell’angolo in alto a destra sui tre puntini e poi selezionando “Scorciatoie da tastiera”.
Cliccata quella voce, si aprirà un popup con l’elenco di tutte le scorciatoie da tastiera che potremo scegliere e utilizzare nel nostro normale flusso di lavoro. L’elenco avrà diverse scorciatoie per gli utenti Windows e Mac. Utilizzando queste scorciatoie potrete risparmiare parecchio tempo nello sviluppo dei vostri contenuti.
Trascinare e rilasciare i media per creare automaticamente i blocchi di media
Gutenberg consente di trascinare i file in qualsiasi punto dello schermata e crea automaticamente un blocco per voi, inserendoli nei vostri contenuti.
Sarà possibile trascinare un singolo file immagine o video, e questo creerà il blocco relativo in automatico. Si possono anche trascinare e rilasciare più file per creare, ad esempio, un blocco Galleria.
Inserimento di YouTube, Twitter, Facebook, Vimeo, Vimeo e altri blocchi Incorporamenti
Gutenberg ha introdotto e inserito nuovi blocchi Incorporamenti. C’è un blocco per tutti i tipi di incorporamenti supportati, tra cui YouTube, Twitter, Facebook, Instagram e altri.
Allo stesso tempo si può semplicemente copiare il link del video e incollarlo all’interno di Gutenberg e, in automatico, verrà creato un blocco apposito.
Ad esempio, se avete inserito un URL di un video YouTube, l’editor a blocchi Gutenberg creerà automaticamente un blocco Incorporamento di YouTube e visualizzerà il video.
FAQ su Gutenberg – Il nuovo editor a blocchi di WordPress
Alcune domande che potrebbero sorgere nell’utilizzo del nuovo editor a blocchi Gutenberg.
I miei articoli o pagine creati con il Classic editor, che fine faranno? Riuscirò ancora a modificarli?
I tuoi vecchi contenuti (articoli o pagine che siano) sono al sicuro. Quando aprirai un vecchio contenuto, Gutenberg semplicemente lo mostrerà all’interno di un blocco contenente il vecchio Classic editor.
Potrai anche modificarli e convertire i tuoi vecchi contenuti in blocchi, così da poterli gesetire al meglio sfruttando le molteplici novità offerte da Gutenberg.
È possibile utilizzare ancora il vecchio e classico editor?
Certo, potrai continuare ad usare il Classic editor. Sarà sufficiente installare e attivare il plugin Classic editor. Una volta attivato, di default verrà disattivato l’editor a blocchi e il Classic editor tornerà ad essere l’editor predefinito della tua installazione di WordPress (potendo però scegliere quale dei due editor utilizzare all’interno di ogni singolo contenuto).
Si tenga a mente, però, che il vecchio Classic editor sarà supportato soltanto fino al 2022.
Come comportarsi se il nuovo editor Gutenberg non funziona con un plugin o un tema che sto utilizzando nel mio sito?
Il progetto Gutenberg è stato sviluppato per diverso tempo, dando così possibilità agli autori di verificarne la compatibilità.
Potrà comunque esserci qualche caso ancora in cui il nuovo editor non funzioni correttamente con la nostra installazione di WordPress.
Se dovesse capitare, possiamo risolvere utilizzando il vecchio Classic editor o contattare l’autore del tema o plugin che stiamo utilizzando e suggerirgli di supportare il nuovo editor. Altra soluzione sarà quella di scegliere plugin o tema alternativi.
Tratto da: https://www.wpbeginner.com/beginners-guide/how-to-use-the-new-wordpress-block-editor/
