Tutorial di Gutenberg: come utilizzare il nuovo editor di blocchi di WordPress

Prende il nome dall'inventore della macchina da stampa, Johannes Gutenberg, il nuovo editor di blocchi Gutenberg di WordPress ha debuttato nella versione 5.0 di WordPress come editor predefinito per WordPress.

La missione è semplice, creare una nuova esperienza di scrittura e modifica con WordPress.

Dotato di blocchi, l'editor Gutenberg offre un'esperienza unica nella creazione di contenuti multimediali con WordPress.

Offre molte funzionalità nativamente all'editor che con l'editor classico sarebbero necessari plug-in per svolgere attività.

Tra un momento ti illustrerò come utilizzare l'editor di blocchi di Gutenberg.

Lavorando con molti clienti che utilizzano WordPress, non molti sono rimasti entusiasti del duro passaggio nella loro esperienza di editing.

Questo probabilmente spiega perché milioni di utenti di WordPress hanno installato l'editor classico una volta che la scelta è stata loro tolta con il rilascio di Gutenberg.

Una giustificazione in parte potrebbe essere la compatibilità con i temi precedenti, un'altra parte solo l'indignazione dell'utente o la mancanza di conoscenza di come utilizzare l'editor di blocchi di Gutenberg.

Spero che dopo aver esaminato questo articolo, per dopo, ti sentirai a tuo agio con l'editor di blocchi.

Passo dopo passo: come utilizzare l'editor di blocchi Gutenberg?

Inizia con la creazione di una pagina o di un post. Qualcosa che già conosci.

Quando aggiungi una nuova pagina o un post, la prima cosa che dovresti notare è questa barra degli strumenti.

Sulla sinistra, abbiamo la barra degli strumenti + Aggiungi blocchi. Questo è uno dei posti in cui puoi aggiungere blocchi ai tuoi contenuti.

Puoi anche aggiungere un blocco facendo clic sotto l'ultimo blocco, quindi fai clic sull'icona + che appare.

In alternativa, passa il mouse tra i blocchi, viene visualizzata l'icona Aggiungi blocchi, fai clic su di essa per aggiungere il blocco.

Successivamente, ci sono i pulsanti Annulla e Ripristina.

L'icona successiva nella barra degli strumenti in alto mostra la struttura dei tuoi contenuti.

Il prossimo è il blocco di navigazione

Se e quando i tuoi contenuti crescono con molti blocchi, puoi navigare ai blocchi da qui. Fantastico non è vero.

Sulla destra,

Questi sono piuttosto semplici, Salva bozza, Visualizza in anteprima il tuo post (lo apre in una nuova scheda) e Pubblica.

L'icona successiva alterna la visualizzazione delle impostazioni. Visualizza o nasconde i riquadri di destra.

Se le impostazioni sono visibili, fai clic per nasconderle per un editor più ampio e privo di distrazioni. Fare clic di nuovo per visualizzare le impostazioni.

Alla fine della barra degli strumenti ci sono tre punti verticali. Ciò ti consente di nascondere o visualizzare più strumenti e opzioni.

Quindi cosa puoi fare esattamente con più strumenti e opzioni?

• Hai la barra degli strumenti: accedi a tutti gli strumenti di blocco e documento in un unico posto.
• Modalità Spotlight. Ti consente di concentrarti su un blocco alla volta
• Modalità schermo intero. Fai esplodere il tuo editor per un'esperienza di editing totale senza distrazioni.
• Alterna tra l'editor visivo, quello che vedi ora, e l'editor di codice, se hai bisogno di scrivere codice che i blocchi codice e HTML non possono gestire.
• Gestisci i blocchi riutilizzabili
• Scorciatoie da tastiera e
• Copia tutto il contenuto nell'editor.

I blocchi di Gutenberg

Finora hai continuato a vedere i blocchi, ma cosa sono?

Faremo il lungo percorso per vedere come funzionano e, si spera, avrà senso e potrai dargli una definizione basata sulla tua comprensione di esso.

Ci sono sei categorie di blocchi in Gutenberg ciascuna, inclusi i più usati, i blocchi comuni, la formattazione, gli elementi di layout, i widget e gli incorporamenti.

Durante la creazione dei contenuti, con l'editor classico, non devi far altro che inserire i contenuti nelle aree di testo.

Con il nuovo editor utilizzerai i blocchi, che sono stati organizzati in base al tipo di contenuto. Per aggiungere contenuto di testo, è necessario il blocco testo/paragrafo, blocco Immagini – Immagini, Html, blocco HTML.

Questo è qualcosa di diverso dal classico editor in cui hai inserito tutti i tuoi contenuti in un unico posto.

Utilizzo degli strumenti di blocco

Ogni blocco ha i suoi strumenti che puoi utilizzare durante la creazione e la modifica del contenuto.

A differenza del classico editor che aveva tutti gli strumenti visibili.

Per accedere a questi strumenti, fai clic sul contenuto nel blocco. Useremo il paragrafo/contenuto poiché questo è quello che utilizzerai spesso.

Quando fai clic sul testo o sul contenuto in un blocco, sopra il contenuto si apre una casella degli strumenti.

Gli strumenti che vedrai sono esclusivi del blocco che stai utilizzando, quindi non aspettarti di vedere gli stessi strumenti quando fai clic su un blocco multimediale.

Il blocco paragrafo, ad esempio, dispone di strumenti di formattazione del testo allineamento a sinistra, allineamento al centro, allineamento a destra, grassetto, corsivo, inserimento di un collegamento ipertestuale e barrato del testo.

Inoltre, altri strumenti di formattazione aggiunti da altri plug-in installati per estendere la funzionalità dei blocchi predefiniti.

Le due funzioni del kit di strumenti del blocco che tagliano i blocchi sono " Trasforma blocco " all'inizio, quindi alla fine dovresti vedere l'icona " Altre opzioni" - tre punti verticali - che contiene più impostazioni per il blocco con cui stai lavorando.

Trasforma un blocco Gutenberg

Per trasformare un blocco, fai clic sul blocco come hai visto nel blocco di paragrafo sopra.

Supponendo di voler trasformare il nostro primo paragrafo in una citazione, fai clic su di esso, quindi fai clic su Trasforma in icona e quindi scegli il nuovo blocco in cui vuoi trasformarlo.

La trasformazione del blocco di paragrafo in virgolette ora si presenta così.

Il pulsante Altre opzioni

L'altro pulsante del kit di strumenti di blocco è l'icona " Altre opzioni ": i tre punti verticali. Fare clic su qualsiasi blocco per vederlo.

Con Altre opzioni, puoi fare di più con il tuo blocco come; Nascondi le impostazioni del blocco, duplica il blocco, inserisci il blocco prima o dopo i blocchi precedenti e successivi, modifica il blocco come HTML, aggiungi il blocco ai blocchi riutilizzabili e, infine, rimuovi o elimina il blocco.

Modifica del permalink di un post o di una pagina con l'editor di blocchi di Gutenberg

Fare clic sul titolo del post o della pagina. Sopra di esso, verrà visualizzato il collegamento.

Fare clic sul pulsante Modifica, quindi modificare il collegamento e quindi fare clic su Salva

Impostazioni di documenti e blocchi nell'editor blocchi di Gutenberg

A destra di ogni post o pagina di Gutenberg c'è un riquadro con due schede.

Il riquadro del documento contiene le impostazioni a livello di documento per la pagina o il post, inclusi lo stato e la visibilità, gli autori dei post, i tag, l'immagine in primo piano, le discussioni, per consentire i commenti, le categorie e le impostazioni relative ai plug-in per i post e/o le pagine.

Il riquadro dei blocchi contiene un'impostazione specifica del blocco.

Fare clic sul blocco nell'area del contenuto, quindi nel riquadro di destra fare clic sul riquadro Blocco.

Conclusione

Abbiamo coperto una manciata di informazioni sull'editor di Gutenberg Blocks.

Spero che con questa conoscenza dovrebbe essere meno intimidatorio usarlo per la creazione e la pubblicazione di contenuti.

Stai usando il nuovo editor di blocchi? Qual è la tua esperienza con esso?

Potresti anche voler convertire i post WordPress esistenti in blocchi Gutenberg?