Guida a Gutenberg

Introduzione

In questo post riportiamo una breve Guida a Gutenberg con l’obiettivo di mostrarti come creare un articolo o una pagina partendo da zero. Buona Lettura!

Cos’è Gutenberg?

La nuova modalità di editing dei post di wordpress si chiama Gutenberg. È stata completamente ricostruita per far fronte alla necessità di pubblicare pagine o articoli ricchi di contenuti grafici (immagini, video, widget).

Per ricostruire gli esempi mostrati in questa Guida a Gutenberg è necessario dotarsi di una versione di WordPress maggiore o uguale alla 5.0. Da questo rilascio infatti il nuovo editor è integrato nativamente (almeno nelle istallazioni più recenti). Se usi una versione di WordPress più datata, è comunque possibile installare Gutenberg tramite l’apposito plugin che trovate a questo link.

I Blocchi di Gutenberg

La schermata principale di Gutenberg non si differenzia molto dal vecchio editor classico:

schermata di esempio dell'editor gutenberg

A parte la forma più esterna, che rimane sostanzialmente identica, ci sono invece grossi cambiamenti sulla gestione della costruzione grafica della pagina, ma non vi preoccupate, in questa Guida a Gutenberg parleremo di tutti gli aspetti più importanti per la creazione di una bellissima pagina di successo.

La principale innovazione portata consiste nei “blocchi”. Con i blocchi è possibile inserire, modificare e gestire lo stie di contenuti multimediali anche senza competenze tecniche specifiche. La gif seguente è solo un assaggio delle potenzialità del nuovo editor:

animazione per mostrare come inserire un contenuto multimediale in gutenberg

Vediamo ora più nel dettaglio come costruire una pagina in Gutenberg.

Guida all’interfaccia grafica di Gutenberg

Facciamo l’ipotesi di disporre già di WordPress 5.0 e del nuovo editor. Per cominciare, cerchiamo di capire il significato dei vari pulsanti disponibili nell’interfaccia:

interfaccia di gutenberg
  • (A) – aggiunta blocchi.
  • (B) – pulsanti per undo/redo
  • (C) – accesso al controllo del documento. Questa sezione consente di assegnare meta dati come categorie, tag, immagini rappresentative (“feature images”) etc. Tutti questi controlli sono opzionali, ma un articolo con una buona SEO richiederebbe la massima cura di tutti questi aspetti.
  • (D) – selezionando un blocco specifico, questo pulsante ti mostra le impostazione specifiche per quel blocco (ad esempio, posizione dell’immagine per un blocco immagine)
  • (E) – consente di accedere all’anteprima del tuo post o di pubblicarlo.
  • (F) – questa è zona dove lavorerai effettivamente con i blocchi (es. dove viene inserito il testo).

Proviamo quindi ad aggiungere un blocco. Nulla di più semplice, basta cliccare sul “+” e selezionare, un blocco di testo (paragrafo):

aggiunta di un blocco testuale in gutenberg

Nell’esempio abbiamo aggiunto solo un paragrafo, ma Gutenberg prevede decine di altri tipi di blocco, organizzati in sezioni:

cateogire di blocchi gutenberg
  • Elementi in linea – per creare testo e immagini allineate
  • Blocchi comuni – contiene i blocchi di base come immagini, pagrafi (chiamati anche “testo regolare”), titoli, citazioni etc. .
  • Formattazione– consente di aggiongere tabelle, codice HTML, oppure testo generato dall’editor classico di wordpress;
  • Elementi del layout– consente di suddividere il contenuto in due colonne, aggiungere pulsanti, separatori spazi etc;
  • Widgets – i widget possono essere puntatori agli ultimi articoli, archivi, moduli di contatto o shortcode (puntatori ad altri plugin installati nel sistema, come ad esempio il form di contatto);
  • Incorporamenti (embed) – questi blocchi ti aiutano ad aggiungere contenuti da altre sorgenti (es. facebook, twitter instagram youtube etc.).

Esempio di post con Gutenberg

Ora che siamo padroni dell’ambiente, proviamo a scrivere un primo post con Gutenberg. Partiamo da qualcosa di semplice. Ad esempio:

  • Testo regolare
  • Immagine
  • Citazione
  • Un video di YouTube

Innanzitutto aggiungiamo del testo. Possiamo scriverlo direttamente nell’ambiente o, se preferisci, digitarlo prima su Word o Google Docs e poi copiarlo in Gutenberg: il testo viene automaticamente convertito in blocchi, per cui non devi preoccuparti di suddividere il documento manualmente.

Per aggiungere un’immagine, posiziona il mouse sul blocco al di sopra del quale vuoi inserirla, e clicca “+”. Questa operazione crea un separatore. Clicca ancora su “+” per aggiungere il blocco specifico:

inserimento immagine in gutenberg

A questo punto seleziona un’immagine dalla libreria media o dal PC:

selezioanre immagine in gutenberg

Selezionata l’immagine, dovresti poterla vedere direttamente nel tuo layout:

immagine in linea per gutenberg

A questo punto inseriamo un citazione. Clicca sul “+” in corrispondenza del blocco sopra il quale vuoi aggiungere la citazione:

inserimento citazione gutenberg

Ora basta inserire il testo della citazione e il gioco è fatto:

scrittura citazione in gutenberg

Per aggiungere un video di YouTube, vai su “incorporamenti” (embed) e seleziona l’icona di YouTube:

inserimento video youtube in gutenberg

Una volta finito, puoi clicca il pulsante “Pubblica” o “Aggiorna” (se già pubblicato) per dare vita al tuo ultimo post. Fatto? Congratulazioni, hai creato la tua prima pagina con Gutenberg!

In Evidenza

Agenzia per Siti Web a Bologna

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.