Come utilizzare il nuovo editor di blocchi di WordPress (tutorial di Gutenberg)

In WordPress 5.0, il classico editor di contenuti è stato sostituito con un nuovissimo editor di blocchi, noto come Gutenberg. Da allora, molti dei nostri lettori ci hanno chiesto di creare un tutorial completo su come utilizzare l’editor di blocchi Gutenberg in WordPress.


L’editor di blocchi di WordPress è un modo completamente nuovo e diverso di creare contenuti in WordPress. In questo tutorial, ti mostreremo come utilizzare il nuovo editor di blocchi di WordPress e padroneggiarlo per creare post e pagine di blog visivamente sbalorditivi.

Utilizzando il nuovo editor di blocchi di WordPress aka Gutenberg

Qual è la differenza tra Block Editor (Gutenberg) e Classic Editor?

Prima di immergerci nel nuovo editor, confrontiamo e comprendiamo le differenze tra Gutenberg Block Editor e l’Editor classico.

Ecco come appariva l’editor classico in WordPress:

Vecchio editor di WordPress

Se esegui l’aggiornamento a WordPress 5.0, ecco come appare il nuovo editor di blocchi:

Nuovo editor di blocchi di WordPress noto anche come Gutenberg

Come puoi vedere, sono due editor completamente diversi per la creazione di contenuti in WordPress.

Il vecchio editor classico era un editor di testo con pulsanti di formattazione molto simili a Microsoft Word.

Il nuovo editor utilizza un approccio totalmente diverso, chiamato “Blocks” (da cui il nome Block Editor).

I blocchi sono elementi di contenuto che si aggiungono alla schermata di modifica per creare layout di contenuto. Ogni elemento che aggiungi al tuo post o pagina è un blocco.

Puoi aggiungere blocchi per ogni paragrafo, immagini, video, gallerie, audio, elenchi e altro. Esistono blocchi per tutti gli elementi di contenuto comuni e altri possono essere aggiunti dai plugin di WordPress.

In che modo il nuovo editor di blocchi di WordPress è migliore dell’editor classico?

Il nuovo editor di blocchi di WordPress offre un modo semplice per aggiungere diversi tipi di contenuto a post e pagine.

Ad esempio, in precedenza se si desidera aggiungere una tabella al contenuto, è necessario un plug-in di tabella separato.

Con il nuovo editor, puoi semplicemente aggiungere un blocco tabella, selezionare le colonne e le righe e iniziare ad aggiungere contenuto.

Blocco tavolo

Puoi spostare gli elementi di contenuto su e giù, modificarli come singoli blocchi e creare facilmente contenuti ricchi di contenuti multimediali.

Ancora più importante, il nuovo editor di blocchi di WordPress è facile da usare e da imparare.

Questo offre un immenso vantaggio a tutti i principianti di WordPress che stanno appena iniziando il loro primo blog o stanno costruendo un sito Web aziendale fai-da-te.

Detto questo, diamo un’occhiata a come utilizzare il nuovo editor di blocchi di WordPress come un professionista per creare grandi contenuti.

Ecco cosa tratteremo in questo tutorial di Gutenberg:

  1. Utilizzo di Gutenberg – Il nuovo editor di blocchi di WordPress
  2. Creazione di un nuovo post o pagina di blog
  3. Come aggiungere un blocco in Gutenberg
  4. Lavorare con i blocchi nel nuovo editor
  5. Salvataggio e riutilizzo dei blocchi in Gutenberg
  6. Impostazioni di pubblicazione e post in Gutenberg
  7. Impostazioni del plugin nel nuovo editor
  8. Aggiunta di alcuni blocchi comuni in Gutenberg
  9. Esplorando alcuni nuovi blocchi di contenuti in Gutenberg
  10. Suggerimenti bonus sull’uso di Gutenberg come un professionista
  11. Aggiunta di più blocchi all’editor blocchi di Gutenberg
  12. Domande frequenti su Gutenberg

Pronto? Immergiamoci.

Utilizzo di Gutenberg – Il nuovo editor di blocchi di WordPress

L’editor dei blocchi è progettato per essere intuitivo e flessibile. Anche se sembra diverso dal vecchio editor di WordPress, fa ancora tutte le cose che sei riuscito a fare nell’editor classico.

Cominciamo con la copertura delle cose di base che hai fatto nell’editor classico e come sono fatte nell’editor a blocchi.

Creazione di un nuovo post o pagina di blog utilizzando l’editor blocchi

Inizierai a creare un nuovo post o pagina di blog come faresti normalmente. Basta fare clic su Messaggi »Aggiungi nuovo menu nel tuo amministratore di WordPress. Se stai creando una pagina, vai a Pagine »Aggiungi nuovo menù.

Aggiungere un nuovo post

Questo avvierà il nuovo editor dei blocchi.

Come aggiungere un blocco a Gutenberg

Il primo blocco di ogni post o pagina è il titolo.

Successivamente, è possibile utilizzare il mouse per spostarsi sotto il titolo o premere il tasto Tab sulla tastiera per spostarsi verso il basso e iniziare a scrivere.

Aggiunta di un titolo post in Gutenberg

Per impostazione predefinita, il blocco successivo è un blocco di paragrafo. Ciò consente agli utenti di iniziare subito a scrivere.

Tuttavia, se vuoi aggiungere qualcosa di diverso, puoi fare clic sul pulsante Aggiungi nuovo blocco nell’angolo in alto a sinistra dell’editor, sotto un blocco esistente o sul lato sinistro di un blocco.

Aggiungi nuovo pulsante di blocco

Facendo clic sul pulsante verrà visualizzato il menu Aggiungi blocco con una barra di ricerca in alto e blocchi comunemente usati in basso.

È possibile fare clic sulle schede per sfogliare le categorie di blocchi o digitare la parola chiave per cercare rapidamente un blocco.

Trovare e aggiungere blocchi in Gutenberg

Se non si desidera utilizzare un mouse per fare clic sul pulsante, è possibile utilizzare una scorciatoia da tastiera digitando / per cercare e aggiungere un blocco.

Lavorare con i blocchi nel nuovo editor

Ogni blocco ha una sua barra degli strumenti che appare in cima al blocco. I pulsanti nella barra degli strumenti cambieranno a seconda del blocco che si sta modificando.

Ad esempio, in questa schermata, stiamo lavorando in un blocco di paragrafo che mostra i pulsanti di formattazione di base come: allineamento del testo, grassetto, corsivo, link di inserimento e barrato.

Ogni blocco ha una sua barra degli strumenti

Oltre alla barra degli strumenti, ogni blocco può anche avere le proprie impostazioni di blocco che apparirebbero nella colonna di destra della schermata di modifica.

Impostazioni di blocco

Puoi spostare i blocchi su e giù semplicemente trascinandoli o facendo clic sui pulsanti su e giù accanto a ciascun blocco.

Muovendo un blocco su e giù

Salvataggio e riutilizzo dei blocchi in Gutenberg

Una delle cose migliori dei blocchi è che possono essere salvati e riutilizzati singolarmente. Ciò è particolarmente utile per i blogger che hanno spesso bisogno di aggiungere frammenti di contenuto specifici ai loro articoli.

Fai semplicemente clic sul pulsante del menu situato nell’angolo destro della barra degli strumenti di ciascun blocco. Dal menu, seleziona l’opzione “Aggiungi a blocchi riutilizzabili”.

Salvataggio di un blocco per riutilizzarlo in seguito

Ti verrà chiesto di fornire un nome per questo blocco riutilizzabile. Immettere un nome per il blocco e quindi fare clic sul pulsante Salva.

Dare un nome al blocco riutilizzabile

L’editor di blocchi ora salverà il blocco come blocco riutilizzabile.

Ora che hai salvato un blocco, vediamo come aggiungere il blocco riutilizzabile in altri post e pagine di WordPress sul tuo sito.

Modifica semplicemente il post o la pagina in cui desideri aggiungere il blocco riutilizzabile. Dalla schermata di modifica post, fai clic sul pulsante Aggiungi blocco.

Troverai il blocco salvato nella scheda “Riutilizzabile”. Puoi trovarlo anche digitandone il nome nella barra di ricerca.

Inserisci un blocco riutilizzabile

Puoi passarci sopra con il mouse per vedere una rapida anteprima del blocco. Basta fare clic sul blocco per inserirlo nel tuo post o pagina.

Tutti i blocchi riutilizzabili sono memorizzati nel database di WordPress e puoi gestirli facendo clic sul link “gestisci tutti i blocchi riutilizzabili”.

Gestisci i tuoi blocchi riutilizzabili

Questo ti porterà alla pagina del gestore blocchi. Da qui, puoi modificare o eliminare qualsiasi blocco riutilizzabile. Puoi anche esportare blocchi riutilizzabili e usarli su qualsiasi altro sito Web WordPress.

Importa blocchi riutilizzabili in WordPress

Opzioni di pubblicazione e gestione nell’editor blocchi di Gutenberg

Ogni post di WordPress contiene molti metadati. Ciò include informazioni come data di pubblicazione, categorie e tag, immagini in primo piano e altro.

Tutte queste opzioni sono ordinatamente posizionate nella colonna di destra nella schermata dell’editor.

Impostazioni documento in Gutenberg il nuovo editor WordPress

Opzioni plugin in Gutenberg

I plugin di WordPress sono in grado di sfruttare l’API dell’editor dei blocchi per integrare le proprie impostazioni nella schermata di modifica.

Alcuni plugin popolari sono già disponibili come blocchi. Ad esempio, WPForms, il miglior plug-in per la creazione di moduli di WordPress ti consente di aggiungere moduli al tuo contenuto usando un blocco widget.

WPForms si blocca nel nuovo editor Gutenberg

Ecco come Yoast SEO ti consente di modificare le tue impostazioni SEO nel nuovo editor:

Goditi le impostazioni SEO nel nuovo editor Gutenberg

WooCommerce include anche blocchi di widget che puoi facilmente aggiungere a qualsiasi post e pagina di WordPress.

Blocco dei prodotti WooCommerce

Aggiunta di alcuni blocchi comuni nel nuovo editor

Fondamentalmente, il nuovo editor può fare tutto ciò che ha fatto l’editor classico. Tuttavia, farai le cose in modo più veloce ed elegante di prima.

1. Aggiunta di un’immagine nel nuovo editor di WordPress

C’è un blocco di immagini pronto per l’uso nel nuovo editor di WordPress. Basta aggiungere il blocco e quindi caricare un file di immagine o selezionare dalla libreria multimediale.

Blocco immagine nel nuovo editor di WordPress

Puoi anche trascinare e rilasciare le immagini dal tuo computer e l’editor creerà automaticamente un blocco immagine per esso.

Dopo aver aggiunto un’immagine, sarai in grado di vedere le impostazioni del blocco in cui puoi aggiungere metadati per l’immagine come testo alternativo, dimensioni e aggiungere un collegamento all’immagine.

Impostazioni del blocco di immagini

2. Aggiunta di un collegamento nel nuovo editor di blocchi

L’editor dei blocchi viene fornito con diversi blocchi in cui è possibile aggiungere testo. Il più comunemente usato è il blocco di paragrafo che viene fornito con un pulsante Inserisci link nella barra degli strumenti.

Tutti gli altri blocchi di testo comunemente usati includono anche un pulsante di collegamento nella barra degli strumenti.

Pulsante di collegamento nel blocco elenco

Puoi anche inserire un collegamento usando la scorciatoia da tastiera, ovvero Command + K per Mac e CTRL + K su computer Windows.

3. Aggiunta di una galleria di immagini in Gutenberg

Il blocco galleria funziona come il blocco immagine. Lo aggiungi e poi carichi o selezioni i file di immagine.

Aggiunta di una galleria di immagini nel nuovo editor di WordPress

4. Aggiunta di codici brevi nei post di WordPress usando Gutenberg

Tutti i tuoi codici brevi funzioneranno proprio come hanno fatto nell’editor classico. Puoi semplicemente aggiungerli a un blocco di paragrafo oppure puoi utilizzare il blocco di shortcode.

Aggiunta di un blocco shortcode

Esplorazione di alcuni nuovi blocchi di contenuti in Gutenberg

L’editor di Gutenberg promette di risolvere alcuni problemi di usabilità di vecchia data in WordPress introducendo alcuni nuovi blocchi.

Di seguito sono riportati alcuni dei preferiti che riteniamo possano essere estremamente utili per gli utenti.

1. Aggiunta di un’immagine accanto a del testo in WordPress

Utilizzando il vecchio editor, molti dei nostri utenti non sono stati in grado di posizionare un’immagine accanto al testo. Puoi farlo ora con il Media & Testo bloccare.

Media e blocco di testo

Questo semplice blocco viene fornito con due blocchi affiancati che consentono di aggiungere facilmente un’immagine e aggiungere del testo accanto ad essa.

2. Aggiunta di un pulsante nei post e nelle pagine di WordPress

L’aggiunta di un pulsante ai post o alle pagine del tuo blog è stata un’altra seccatura nell’editor classico. O dovevi usare un plugin che creava un shortcode per il pulsante, oppure dovevi passare alla modalità HTML e scrivere il codice.

Gutenberg viene fornito con un blocco pulsanti che consente di aggiungere rapidamente un pulsante a qualsiasi post o pagina.

Aggiunta di un blocco pulsanti in Gutenberg

Puoi aggiungere un link per il tuo pulsante, cambiare i colori e scegliere tra tre stili di pulsante.

3. Aggiunta di bellissime immagini di copertina nei post del blog e nelle pagine di destinazione

Un’altra caratteristica interessante che potresti provare è il blocco “Copertina”, che ti consente di aggiungere immagini di copertina ai tuoi post e alle tue pagine.

Un’immagine di copertina è un’immagine più ampia spesso usata come copertina per una nuova sezione di una pagina o l’inizio di una storia. Sono belli e ti consentono di creare layout di contenuti accattivanti.

Basta aggiungere un blocco di copertina e quindi caricare l’immagine che si desidera utilizzare. Puoi scegliere un colore di sovrapposizione per la copertina o renderlo un’immagine di sfondo fissa per creare un effetto di parallasse quando gli utenti scorrono verso il basso la pagina.

Il blocco di immagini di copertina nell'editor di Gutenberg

4. Creazione di tabelle all’interno di articoli

L’editor classico non aveva un pulsante per aggiungere tabelle ai tuoi post di WordPress. Dovevi usare un plugin o creare una tabella che scrivesse CSS e HTML personalizzati.

Il nuovo editor Gutenberg viene fornito con un blocco Tabella predefinito, che semplifica l’aggiunta di tabelle nei post e nelle pagine. Basta aggiungere il blocco e quindi selezionare il numero di colonne e righe che si desidera inserire.

Blocco tavolo

Ora puoi andare avanti e iniziare ad aggiungere dati alle righe della tabella. Puoi sempre aggiungere più righe e colonne se necessario. Sono disponibili anche due opzioni di stile di base.

5. Creazione di contenuto multi-colonna

La creazione di contenuti a più colonne era un altro problema che l’editor classico non gestiva affatto. L’editor blocchi consente di aggiungere il blocco Colonne, che in sostanza aggiunge due colonne di blocchi di paragrafo.

Contenuto multi-colonna

Questo blocco di colonne è abbastanza flessibile. Puoi aggiungere fino a 6 colonne di fila e persino usare altri blocchi all’interno di ogni colonna.

Suggerimenti bonus per usare Gutenberg come un professionista

Guardando il nuovo editor dei blocchi, ti starai chiedendo se passerai più tempo ad aggiungere e adattare i blocchi che a creare contenuti reali?

Bene, il nuovo editor è incredibilmente veloce e anche l’utilizzo molto semplice per pochi minuti ti permetterà di aggiungere istantaneamente blocchi senza nemmeno pensare.

Molto presto ti renderai conto di quanto più veloce sarà il tuo flusso di lavoro con questo nuovo approccio.

Per gli utenti esperti, ecco alcuni suggerimenti bonus per aiutarti a lavorare ancora più velocemente con il nuovo editor di WordPress.

1. Spostare la barra degli strumenti dei blocchi in alto.

Come avrai notato negli screenshot c’è una barra degli strumenti che appare sopra ogni blocco. Puoi spostare questa barra degli strumenti nella parte superiore dell’editor.

Basta fare clic sul pulsante a tre punti nell’angolo in alto a destra dello schermo e quindi selezionare l’opzione Barra degli strumenti in alto.

Sposta la barra degli strumenti dei blocchi nella parte superiore dell'editor

2. Utilizzare le scorciatoie da tastiera

Gutenberg viene fornito con diverse scorciatoie utili che renderanno il tuo flusso di lavoro ancora migliore. Il primo che dovresti iniziare a usare subito è il /.

Basta inserire / e quindi iniziare a digitare, e ti mostrerà i blocchi corrispondenti che puoi aggiungere istantaneamente.

Per ulteriori scorciatoie, fai clic sul menu a tre punti nell’angolo in alto a destra dello schermo e seleziona “Scorciatoie da tastiera”.

Avvia le scorciatoie da tastiera

Verrà visualizzato un popup con l’elenco di tutte le scorciatoie da tastiera che è possibile utilizzare. L’elenco avrà scorciatoie diverse per utenti Windows e Mac.

3. Trascinare e rilasciare i media per creare automaticamente i blocchi multimediali

Gutenberg ti permette di trascinare e rilasciare i file ovunque sullo schermo e creerà automaticamente un blocco per te.

Puoi rilasciare una singola immagine o file video e questo creerà il blocco per te. È inoltre possibile eliminare più file di immagine per creare un blocco galleria.

Trascina e rilascia il blocco galleria nel nuovo editor di WordPress

4. Aggiunta di YouTube, Twitter, Facebook, Vimeo e altri incorporamenti

Gutenberg introduce nuovi blocchi di incorporamento nell’editor dei blocchi. Esiste un blocco per tutti i tipi di incorporamento supportati, inclusi YouTube, Twitter, Facebook e altri.

Incorpora blocchi

Tuttavia, puoi semplicemente copiare e incollare l’URL di incorporamento in qualsiasi momento e creerà automaticamente un blocco per te.

Ad esempio, se hai aggiunto un URL di video di YouTube, verrà automaticamente creato un blocco di incorporamento di YouTube e verrà visualizzato il video.

Incorporamento di YouTube

Aggiunta di più blocchi all’editor blocchi di Gutenberg in WordPress

Il nuovo editor di blocchi in WordPress consente agli sviluppatori di creare i propri blocchi. Ci sono alcuni fantastici plugin di WordPress che offrono pacchetti di blocchi per il nuovo editor.

Eccone alcuni:

1. Gutenberg avanzato

Gutenberg avanzato

Advanced Gutenberg viene fornito con diversi blocchi per elementi di contenuto popolari come il dispositivo di scorrimento dei prodotti WooCommerce, testimonianze, mappe, contatore, schede, fisarmoniche e altro.

Ti dà anche il controllo avanzato su quali utenti possono accedere ai blocchi in base ai loro ruoli utente. È possibile creare profili utente e selezionare quali blocchi possono aggiungere.

2. Impilabile: blocchi di Gutenberg

Impilabile: blocchi di Gutenberg

Impilabile – Gutenberg Blocks è una collezione di blocchi Gutenberg dal design accattivante che puoi utilizzare sul tuo sito web. Include blocchi per container, post, griglia di funzioni, fisarmonica, riquadro di immagini, elenco di icone, call to action e altro.

3. Blocchi editor

Blocchi editor per Gutenberg

Editor Blocks è un’altra raccolta ordinata di blocchi Gutenberg che puoi usare. Viene fornito con blocchi utili come il profilo dell’autore, l’immagine dell’eroe, la tabella dei prezzi, i marchi, le caratteristiche e altro ancora.

Domande frequenti su Gutenberg – Il nuovo editor di blocchi in WordPress

Da quando Gutenberg è diventato il nuovo editor di WordPress, abbiamo ricevuto molte domande. Ecco le risposte ad alcune delle domande più frequenti su Gutenberg.

1. Cosa succede ai miei post e alle mie pagine precedenti? Posso ancora modificarli?

I tuoi vecchi post e pagine sono completamente sicuri e non influenzati dal Gutenberg. Puoi ancora modificarli e Gutenberg li aprirà automaticamente in un blocco contenente l’editor classico.

Modifica articoli meno recenti nel nuovo editor di WordPress

Puoi modificarli all’interno del vecchio editor, oppure puoi convertire gli articoli più vecchi in blocchi e utilizzare il nuovo editor di blocchi.

2. Posso continuare a utilizzare il vecchio editor?

Sì, puoi ancora continuare a utilizzare il vecchio editor. Basta installare e attivare il plug-in Editor classico.

All’attivazione, disabiliterà l’editor dei blocchi e sarai in grado di continuare a utilizzare l’editor classico.

Si noti che l’Editor classico sarà supportato fino al 2022.

3. Cosa fare se il nuovo editor non funziona con un plug-in o un tema che sto utilizzando?

Il progetto Gutenberg era in fase di sviluppo da molto tempo. Ciò ha dato molto tempo agli autori di plugin e temi per testare la compatibilità del loro codice.

Tuttavia, c’è ancora la possibilità che alcuni plugin e temi potrebbero non funzionare bene con il nuovo editor. In tal caso, puoi installare il classico plug-in dell’editor, richiedere allo sviluppatore di aggiungere il supporto Gutenberg o semplicemente trovare un plug-in o un tema alternativo.

4. Come saperne di più suggerimenti e trucchi per Gutenberg?

WPBeginner è il posto migliore per conoscere il nuovo editor di blocchi in WordPress. Siamo il più grande sito di risorse WordPress su Internet.

Pubblicheremo nuovi articoli e aggiorneremo le nostre vecchie risorse per aiutarti a padroneggiare il nuovo editor di blocchi.

Nel frattempo, se avete domande, non esitate a contattarci lasciando un commento o utilizzando il modulo di contatto sul nostro sito Web.

Speriamo che questo tutorial di Gutenberg ti abbia aiutato a imparare come usare il nuovo editor di blocchi di WordPress. Potresti anche consultare la nostra guida completa alle prestazioni di WordPress per migliorare la velocità del tuo sito web.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map