Gutenberg per WordPress: Cos’è e come funziona il nuovo Editor

Gutenberg per Wordpress

Gutenberg per WordPress è il nuovo editor di testo che sostituisce l’editor classico dopo l’aggiornamento 5.0 arrivato il 6 Dicembre. Cosa cambia e cosa porta di nuovo all’interno del nostro CMS? Scopriamolo insieme!

Cos’è Gutenberg per WordPress

Gutenberg è un nuovo editor di testo di WP arrivato per garantirci una nuova e migliore esperienza nelle creazioni delle pagine e degli articoli per il nostro blog.

Gutenberg è realizzato con un’interfaccia a blocchi, semplice ed intuitiva, che permette non solo di realizzare articoli, ma anche di creare pagine del nostro sito senza usare plugin esterni di Page o Site Builder, come per esempio Visual Composer. In pratica è un sistema molto più simile a quello che possiamo già vedere con aziende come Wix, che offrono una personalizzazione più ampia tramite un editor visuale, o come Linkedin e Medium.

Scopriamo l’interfaccia di Gutenberg

Quando inizieremo a creare un nuovo articolo ci troveremo dinanzi al nuovo editor di testo. Come potrete notare tutta l’interfaccia è stata completamente rivoluzionata.

interfaccia di gutenberg

A prima vista avremo una pagina vuota, pronta a contenere parole, immagini, video e molto alto. Addio alla barra per l’inserimento del titolo, si inizia a modificare direttamente la nostra “tela” e tutto ciò che faremo all’interno di Gutenberg sarà riportato con estrema fedeltà in front end (in base anche alle esigenze del tema scelto).

Sulla destra troviamo il menu delle impostazioni del blocco che stiamo utilizzando, con la possibilità di modificare le impostazioni sulla grandezza del testo, sul colore di sfondo e colore del testo. Scegliendo un altro “blocco” si entrerà automaticamente all’interno delle impostazioni del blocco appena selezionato.

impostazioni del blocco in gutenberg

Al fianco dell’opzione “blocco”, potremo scegliere se visualizzare le impostazioni del documento, che corrispondono a tutte le opzioni che avevamo all’interno dell’editor classico, come lo stato e la visibilità dell’articolo, i tag, le categorie, il permalink e le opzioni relativi a plugin di terze parti come Yoast SEO

Impostazioni del documento in WordPress 5.0 Gutenberg

Nel menu in alto avremo la possibilità di compiere in modo rapido alcune operazioni, da sinistra verso destra abbiamo la possibilità di: tornare alla pagina con tutti gli articoli, inserire rapidamente un blocco, muoversi tra le ultime azioni compiute, avere informazioni sul contenuto della pagina (numero di parole, di blocchi creati e la struttura del documento), navigare tra i blocchi (un pò come i livelli di Photoshop), cambiare velocemente un blocco con uno simile (per esempio switchare da paragrafo a titolo), allineare il nostro contenuto, o inserire link, bold e tutti i tipi base di formattazione.

Menu Rapido in Gutenberg per WordPress

Come funziona il nuovo Editor

Ma come funziona esattamente il nuovo Gutenberg per WordPress? Con la tela bianca, la prima cosa da fare è l’inserimento del titolo della nostra pagina. Una volta conclusa questa procedura, basterà premere invio e si potrà inserire un nuovo paragrafo, un’immagine o tutte le altre possibilità date dal nuovo editor. Per creare qualcosa di nuovo basterà cliccare sull’icona del + al fianco della riga che stiamo occupando. Comparirà un piccolo menu con tutti i blocchi che potremmo inserire, scegliamone uno e diamo inizio alla magia.

Creare un nuovo blocco in Gutenberg per WordPress
Come inserire un nuovo blocco

L’icona dell’aggiunta di un blocco apparirà anche nel caso si voglia aggiungere un blocco tra una riga ed un’altra, per permetterci di aggiungere elementi anche all’interno di paragrafi già scritti

Con Gutenberg avremo la possibilità di utilizzare tantissimi blocchi per personalizzare al meglio il nostro sito, per esempio abbiamo l’opportunità di creare un embed ed incorporare una canzone da Spotify, oppure un video da Youtube, e tantissime altre possibilità che prima erano concesse solamente tramite plugin e shortcode di terze parti.

Gutenberg offre tantissime possibilità che prima erano concesse solamente tramite l’uso di plugin e shortcode di terze parti

E se non ci dovesse piacere la disposizione di un contenuto all’interno del nostro testo? Molto semplice, basterà selezionare il blocco e cliccare sulla freccia per spostarlo tra i vari elementi.

Come spostare un blocco in Gutenberg

Abbiamo la necessità di cancellare un blocco creato per errore? Semplice. Basterà selezione il blocco e eliminarlo utilizzando il tasto cancella/back space della nostra tastiera.

Vuoi provare il nuovo editor di WP senza dover utilizzare il tuo sito? Non c’è problema, provalo ora su Testing Gutenberg

Tutti i blocchi di Gutenberg

Gutenberg mette a nostra disposizione un’infinità di blocchi che coprono la maggior parte delle necessità di un sito web non troppo complesso, tra i tanti strumenti abbiamo la possibilità di creare layout con colonne, inserire i widget e molto altro.

Blocchi “Comuni”

All’interno della lista dei blocchi comuni appaiono quelli che molto probabilmente useremo nella maggior parte dei casi. Possiamo trovare:

  • Paragrafo
  • Immagini
  • Cover
  • Elenchi Puntati
  • Citazioni
  • Galleria
  • File
  • Audio
  • Titolo

Blocchi di Formattazione

Blocchi che consentono di formattare in maniera diversa il nostro contenuto, all’interno di questa sezione troviamo elementi come:

  • Codice
  • Codice HTML
  • Testo preformattato
  • Tabella

Utile per chi non ha ancora preso dimestichezza con Gutenberg la possibilità di usare all’interno di questo menu, l’editor classico presente nelle vecchie versioni di WP

Elementi di Layout

Gli elementi di layout sono tutti i blocchi che ci consentono di dare una visione diversa della nostra pagina, tra cui:

  • Spazio Vuoto
  • Pulsante
  • Colonne
  • Immagine e testo
  • Leggi tutto
  • Separatore

Widget

Tutti i blocchi che ci permettono di inserire dei widget all’interno della nostra pagina, qui sono contenuti i widget che troviamo nell’apposita sezione di WordPress, i classici sono:

  • Articoli Recenti
  • Shortcode
  • Archivi
  • Categorie
  • Ultimi commenti

Incorporamenti

Presenti tutti i blocchi di Gutenberg che permettono di incorporare un elemento da altri siti, come gli emebed relativi a Vimeo, Spotify, Youtube, Facebook, Twitter e tantissimi altri.

Vuoi vedere come funzionano e come personalizzare tutti gli elementi di Gutenberg WordPress? Visita Go Gutenberg e scopri tutto sui blocchi del nuovo editor!

Tutorial Gutenberg: tutto quello che devi sapere

Ecco un video esplicativo sulle potenzialità del nuovo editor di testo di WordPress, a cosa può esservi utile e come impostare e modificare i vari blocchi presenti all’interno di Gutenberg.
P.s. Il video è in inglese ma la comprensione è piuttosto semplice.

https://www.youtube.com/watch?v=P8eIe_Pjjp0
Tutorial Gutenberg: Inizia col piede giusto

Il futuro di Gutenberg

Cosa ci prospetta il futuro di Gutenberg? In molti non hanno apprezzato il cambiamento dell’editor di WordPress, e lo hanno manifestato nelle recensioni del plugin, alcuni, dopo aver effettuato l’aggiornamento, stanno cercando di disabilitare Gutenberg da WordPress. 

Tu invece cosa ne pensi?

Personalizzazioni di Gutenberg

Alcuni sviluppatori hanno iniziato già a creare degli Add on per il nuovo editor che integrano funzionalità non ancora presenti nella versione nativa di Gutenberg.

Atomic Block

Al momento sto provando il nuovo Atomic Block, sembra essere molto valido, e fornire numerose alternative di personalizzazione all’utente.

Tra le varie possibilità possiamo trovare quelle di:

  • Call to Action
  • Bottoni
  • Accordion
  • Post del Blog a griglia
  • Testimonial
  • Profili Autori
  • Avviso di Notizia/Alert
  • e tanto altro

Puoi dare un’occhiata al plugin sul sito dello sviluppatore o tramite il plugin sul sito di WordPress.

https://it.wordpress.org/plugins/atomic-blocks/
Atomic Blocks: espandi gli orizzonti di Gutenberg

N.B. Sto provando anche il loro tema gratuito per Gutenberg, il massimo potenziale del nuovo editor lo si ha sopratutto utilizzato con un tema sviluppato esclusivamente con il nuovo editor.

Coblocks

Coblock è un altro plugin molto utile che consente di migliorare e aggiungere altre funzionalità a Gutenberg per WordPress. Molto interessante è la possibilità di inserire colonne con diversa grandezza e impostazioni Responsive sicuramente molto gradite nell’ambito del design e della creazione di pagine per il sito internet.

Prova il plugin e le sue funzionalità tramite il link qui sotto! Fammi sapere cosa ne pensi! Per maggiori informazioni visita il sito di CoBlocks

https://wordpress.org/plugins/coblocks/

Voi come pensate possa cambiare l’editor di WordPress, può portare a qualcosa di nuovo e migliorare l’esperienza utente?

,

2 risposte

  1. I’m new to blogspot and I’m having a difficult time. How can I change the background to a picture I want?.

    1. Hi Josiah,
      If i understand well,is impossible to change the background to an image, you can add a background-color to a column block and then add the padding to its.

Rispondi a MauroAnnulla risposta