Analisi Approfondita di Gutenberg, l’Editor di WordPress (2024)

Quando l’editor a blocchi di WordPress, Gutenberg, è stato lanciato nel dicembre del 2018, non sapevamo cosa aspettarci. Certo, avevamo avuto un sacco di tempo per giocare con la versione beta, ma non potevamo prevedere quali sarebbero stati gli effetti del lancio o quanto gli utenti e con quanto entusiasmo il nuovo editor sarebbe stato accolto da utenti e sviluppatori.

Abbiamo visto l’editor Gutenberg crescere moltissimo negli oltre due anni trascorsi dalla pubblicazione di questo post. È passato dal lancio di un prodotto minimo vitale (MVP) a un progetto più maturo che si avvicina sempre di più all’obiettivo di creare un’esperienza unificata di Full Site Editing per WordPress.

Per rendere conto di questi cambiamenti, abbiamo rivisitato l’editor Gutenberg per mostrarvi il suo nuovo volto e per cercare di capire in quale direzione si sta dirigendo.

Che Cosa È l’Editor di Blocchi Gutenberg?

Gutenberg, anche noto come “editor di blocchi di WordPress” o semplicemente “editor di WordPress”, è l’editor dei contenuti di WordPress introdotto con WordPress 5.0, rilasciato il 6 dicembre 2018.

Se non avete mai sentito questo termine, si tratta dell’editor predefinito utilizzato da tutti i siti WordPress a meno che non l’abbiate intenzionalmente disabilitato. Ha un aspetto simile a questo:

La grande differenza tra l’editor Gutenberg di WordPress e il precedente editor di WordPress (ora chiamato “editor classico” o “editor TinyMCE”) è nel nuovo approccio basato sui blocchi per creare contenuti.

Con Gutenberg, ogni elemento del vostro contenuto è un blocco che permette di manipolare facilmente il contenuto stesso. Ogni paragrafo è un blocco, ogni immagine è un blocco, ogni pulsante è un blocco – ecco, avete capito!

Inoltre, sviluppatori di terza parte possono creare blocchi personalizzati, il che aiuta a porre fine alla storia degli shortcodes di WordPress. Supponiamo che volete incorporare un modulo di contatto. Invece di aggiungere uno shortcode (ad esempio `[your-form-shortcode]`) come si faceva in passato, ora si può semplicemente inserire il blocco del plugin.

Oltre a questo, potete anche utilizzare i blocchi per creare layout più complessi, come impostare un design a più colonne o raggruppare i blocchi per creare una sezione coerente.

Man mano che ci addentreremo di più nell’editor di blocchi, avrete un’idea migliore di come utilizzare i blocchi per migliorare il modo in cui create contenuti.

Gutenberg Non È Solo un Editor di Contenuti

Il progetto Gutenberg mira a creare più di un semplice editor di contenuti.

Nel luglio del 2021, Gutenberg è ancora solo un editor di contenuti (per la maggior parte). Ma l’obiettivo a lungo termine è di farlo diventare qualcosa di diverso, chiamato Full Site Editing.

L’idea del Full Site Editing è che sarete in grado di progettare il 100% del vostro sito web utilizzando l’editor Gutenberg. Ad esempio, invece di essere limitato alle opzioni di intestazione offerte dal vostro tema WordPress, potrete utilizzare Gutenberg per progettare intestazioni personalizzate utilizzando l’editor di blocchi.

Questo tipo di funzionalità non è ancora disponibile, ma è sulla strada, e abbiamo alcune “prove di concetto” cui daremo un’occhiata verso la fine di questo articolo.

Vantaggi e Svantaggi di Gutenberg Rispetto alle Alternative Più Popolari

Utilizzando l’editor di blocchi di WordPress per oltre due anni, abbiamo avuto la possibilità di farci una buona idea dei pro e dei contro di Gutenberg rispetto ad altre soluzioni.

Ci sono due alternative principali per creare contenuti in WordPress:

• L’editor WordPress TinyMCE: è il classico editor utilizzato da WordPress prima di WordPress 5.0.
• Plugin page builder: si tratta di plugin di terze parti che aggiungono a WordPress un design visuale e drag-and-drop.

In generale, il classico editor TinyMCE offre un’esperienza più spoglia, simile a quella di un word processor, mentre i page builder forniscono un’esperienza visuale molto più flessibile, con design drag-and-drop.

Se volessimo ordinare tutti e tre gli editor in base alla rispettiva flessibilità di progettazione, scriveremmo qualcosa del genere:

Editor classico TinyMCE (meno flessibile) < Gutenberg < Page builder (più flessibile)

Vediamo ora alcuni dei pro e dei contro dell’editor di blocchi Gutenberg rispetto alle alternative.

Gutenberg vs Editor Classico: Pro e contro

Confrontiamo prima Gutenberg con il classico editor TinyMCE.

Pro:

• Gutenberg offre un background di progettazione più visuale
• Non c’è bisogno di usare gli shortcode per incorporare i contenuti – è un sistema a blocchi unificato

Contro:

• Alcuni utenti trovano che scrivere in Gutenberg sia un po’ scomodo perché ogni paragrafo è un blocco separato. Per i post lunghi, può essere difficile manipolare il testo. Potreste preferire scrivere in un altro editor e, quando avete finito, incollare il testo in Gutenberg.
• Anche se le prestazioni di Gutenberg sono migliorate in modo significativo, può ancora generare ritardi in post massicci, cosa che è meno probabile che accada con l’editor classico.

Se pensate che l’editor classico TinyMCE si adatti meglio alle vostre esigenze, potete disabilitare del tutto l’editor Gutenberg.

Gutenberg vs Page Builder: Pro e Contro

Vediamo ora come si colloca Gutenberg rispetto ai plugin page builder di terze parti.

Pro:

• Gutenberg è una funzionalità core, per cui non dovete preoccuparvi di eventuali problemi di compatibilità.
• Dato che è una funzionalità core, tutti gli sviluppatori possono aggiungere il di supporto Gutenberg nei loro plugin, migliorandone la compatibilità.
• Gutenberg produce un codice più pulito e leggero. A parità di condizioni, un design costruito con Gutenberg di solito si carica più velocemente dello stesso design realizzato con page builder.

Contro:

• Gutenberg non offre un vero e proprio editing visuale come un page builder. È più accessibile dell’editor classico, ma non è ancora un page builder al 100%.
• I page builder offrono ancora soluzioni di design e layout più flessibili.
• La maggior parte dei page builder offre uno spostamento drag-and-drop molto più fluido e flessibile.

Considerazioni sul Confronto

Per la maggior parte degli utenti, Gutenberg colpisce in termini di flessibilità.

La maggior parte degli utenti non ha bisogno della flessibilità di un costruttore di pagine per i propri contenuti, specialmente per gli articoli del blog. Ma, allo stesso tempo, è bello poter impostare rapidamente un design a più colonne o inserire un pulsante, cosa che l’editor classico non permette di fare facilmente.

Quindi, pensando a questo, andiamo a vedere come iniziare a usare Gutenberg.

Come Utilizzare l’Editor di Blocchi di WordPress Gutenberg

Ora che conosci meglio l’editor di blocchi Gutenberg, cerchiamo di capire come utilizzarlo per creare contenuti.

Inizieremo con uno sguardo introduttivo all’interfaccia e gradualmente descriveremo modi più avanzati per utilizzare l’editor e migliorare i vostri flussi di lavoro.

L’interfaccia dell’Editor di Blocchi Gutenberg

Quando si apre l’editor, questo nasconde la barra laterale della bacheca di WordPress offrendo un’esperienza a tutto schermo:

Ci sono tre parti principali nell’editor:

• Contenuto: Il contenuto occupa la maggior parte dello schermo. Vedrete un’anteprima visuale di come sarà sul front-end del vostro sito. Non è accurato al 100%, ma dovreste avere un’idea abbastanza precisa del design finale.
• Barra degli strumenti superiore: La barra degli strumenti in alto vi aiuta a inserire nuovi blocchi, annullare/ripristinare e accedere ad altre impostazioni essenziali.
• Barra laterale: La barra laterale contiene due schede. La scheda Post vi permette di configurare le impostazioni a livello di post come le categorie, i tag, l’immagine in primo piano, ecc. La scheda Block mostra le impostazioni del blocco che avete selezionato – ne parleremo più avanti.

Per creare un’esperienza di scrittura più coinvolgente, potete nascondere la barra laterale cliccando sull’icona “ingranaggio” nell’angolo in alto a destra. Per visualizzare nuovamente la barra laterale, tutto quello che dovete fare è cliccare nuovamente sull’icona “ingranaggio”:

Ad esempio, ecco come appare l’interfaccia dell’editor se utilizzate il nuovo tema predefinito Twenty Twenty-One.:

Aggiungere Blocchi

Per aggiungere un normale paragrafo di testo al vostro post, vi basta semplicemente cliccare e digitare. Ogni volta che premete invio, l’editor crea automaticamente un nuovo blocco paragrafo.

Per altri tipi di contenuto, dovrete inserire un nuovo blocco. Userete blocchi per le immagini, per i pulsanti, i video incorporati, ecc.

Per aggiungere un nuovo blocco, fate clic su una delle icone “più” presenti nell’interfaccia. È l’icona principale del pannello di inserimento dei blocchi nell’angolo in alto a sinistra, ma vedrete anche altre icone all’interno dell’interfaccia che aprono un pannello di inserimento blocchi più piccolo:

Per iniziare, posizionate il cursore del mouse dove volete inserire il nuovo blocco. Ad esempio, per aggiungere un nuovo blocco sotto il pulsante, basta cliccare sotto il pulsante e poi cliccare sull’icona +.

Dovreste vedere un pannello laterale che mostra tutti i blocchi disponibili, divisi in categorie. Potete cercare un blocco specifico o semplicemente scegliere un blocco dalla lista. Quando passate il mouse su un blocco, vedrete una descrizione di ciò che fa e un’anteprima.

Per inserire il blocco, dovete solo cliccarci sopra. Ad esempio, per inserire una normale immagine, basta cliccare sul blocco immagine:

Potete quindi seguire le istruzioni per caricare o scegliere un’immagine esistente dalla Libreria media.

Opzioni di Formattazione Essenziali

Per fare scelte di formattazione di base per i vostri blocchi, avrete una barra degli strumenti fluttuante che appare quando fate clic su qualsiasi blocco.

Ad esempio, se state formattando del testo regolare, è qui che potete farlo:

• Aggiungere il grassetto o il corsivo
• Inserire i link
• Cambiare gli allineamenti
• Aggiungere la formattazione, come codice inline, barrato e sottoscrizione

Ad esempio, diciamo che volete inserire un link nel vostro contenuto. Dovreste prima selezionare ile testo che volete linkare – nel nostro esempio, è “Per altri tipi di contenuto”. Poi, cliccate sull’icona del link sulla barra degli strumenti per aprire le opzioni di inserimento del link:

Configurare le Impostazioni Avanzate del Blocco

Tutti i blocchi che inserite hanno impostazioni aggiuntive nella barra laterale. Alcuni blocchi potrebbero avere poche impostazioni, altri hanno diverse opzioni per controllare il design, il layout, la funzionalità, ecc.

Per aprire le impostazioni di un blocco, selezionatelo facendo clic sul blocco nell’editor. Poi andate alla scheda Blocco nella barra laterale per vedere le sue impostazioni.

Qui sotto, potete vedere le impostazioni del blocco pulsante, che è uno dei blocchi più flessibili. Potete cambiare il colore, farlo più largo ecc.

Quando si apportano modifiche alle impostazioni di un blocco, le modifiche si vedranno immediatamente riflesse nell’editor.

Di nuovo, ogni blocco avrà delle impostazioni uniche per quel blocco. Ad esempio, se aprite le impostazioni per un normale paragrafo di testo, avrete solo alcune opzioni di base di tipografia e colore. Qui sotto è possibile vedere che abbiamo applicato uno sfondo colorato per evidenziare un testo:

Riordinare i Blocchi

Oltre a ricorrere semplicemente al copia e incolla (che si può fare per il testo proprio come in qualsiasi altro editor), Gutenberg vi offre due modi per riorganizzare i blocchi.

Per prima cosa, se volete spostare un blocco sopra o sotto di qualche posizione, potete utilizzare le frecce su o giù sulla barra degli strumenti fluttuante.

Per spostamenti maggiori, potete utilizzare il drag-and-drop. Per trascinare e rilasciare un blocco, dovete cliccare sull’icona dei “sei punti” a sinistra delle frecce.

Una volta che avete cliccato e tenuto il mouse su quell’icona, potete trascinare il blocco in qualsiasi punto della pagina:

Incorporare Contenuti da Altre Fonti

Gutenberg viene fornito con blocchi specifici per incorporare contenuti da fonti di terze parti come YouTube, Vimeo, Soundcloud, ecc. Tutti questi blocchi sono disponibili nella sezione Incorporamenti del pannello di inserimento dei blocchi.

Ad esempio, per incorporare un video di YouTube, tutto quello che dovete fare è:

1. Aggiungere il blocco YouTube dedicato.
2. Incollare l’URL diretto del video.
3. Fare clic su Incorpora.

Dovreste quindi vedere un’anteprima del video incorporato nell’editor.

Creare Layout a Più Colonne o Raggruppati

Come abbiamo detto in precedenza, uno dei vantaggi più significativi dell’editor di blocchi rispetto al vecchio editor TinyMCE è che si possono creare layout più complessi senza bisogno di fare affidamento su codice personalizzato o shortcode.

Per permettere agli utenti di creare layout, l’editor di blocchi viene fornito con due blocchi predefiniti:

• Colonne: Crea un layout a più colonne.
• Gruppi: Raggruppa più blocchi. Ad esempio, potreste utilizzarlo per impostare un colore di sfondo per un’intera sezione che viene visualizzata dietro numerosi blocchi.

Entrambi questi blocchi funzionano sul principio dei blocchi “annidati”, il che significa che avrete uno o più blocchi dentro un altro blocco.

Vi mostreremo un esempio utilizzando il blocco colonne, ma lo stesso principio di base si applica al blocco gruppo.

Supponiamo di voler creare un layout a due colonne in cui la colonna a sinistra ha un regolare paragrafo di testo, mentre la colonna a destra contiene un pulsante.

Per iniziare, dovreste utilizzare la scheda di inserimento dei blocchi per aggiungere il blocco colonne. Questo mostrerà un prompt dove potrete scegliere il vostro layout preferito:

Per questo esempio, sceglieremo un layout a due colonne 50/50. Vedrete due caselle di uguali dimensioni con le icone + all’interno. Per inserire il contenuto, fate clic sull’icona + per aprire la scheda di inserimento dei blocchi:

Una volta aggiunto il primo blocco ad una colonna, fate clic sull’icona + per inserire altri blocchi. Oppure, trascinate e rilasciate un blocco dall’esterno della struttura all’interno della colonna.

10 Suggerimenti Utili su Gutenberg per Lavorare in Modo Più Produttivo

Ora che avete una comprensione di base del funzionamento di Gutenberg, proseguiamo con alcuni preziosi suggerimenti e trucchi che vi aiuteranno a utilizzare l’editor di blocchi in modo più efficace.

1. Utilizzate la / (barra in avanti) Per Inserire Rapidamente i Blocchi

Se avete bisogno di inserire molti blocchi, aprire manualmente la scheda di inserimento dei blocchi può diventare un po’ noioso. Per fortuna, una volta che iniziate a ricordare i nomi dei blocchi di uso più comune, c’è un modo molto più veloce per inserire i blocchi utilizzando solo la tastiera – / (barra in avanti).

Se premete “Invio” per inserire un nuovo blocco paragrafo, potete inserire rapidamente un blocco digitando una barra in avanti seguita dal nome del blocco che volete inserire.

Quando iniziate a digitare, vedrete un elenco di tutti i blocchi che corrispondono alla vostra richiesta. Potete quindi utilizzare le frecce della tastiera per navigare tra i blocchi e premere “Invio” per selezionare il blocco che volete inserire.

Ecco un esempio di inserimento veloce per aggiungere un blocco immagine:

2. Inserire Immagini Trascinandole dal Desktop

Se state inserendo molte immagini, l’editor di blocchi vi offre un’altra funzione per risparmiare tempo che vi permette di evitare di aggiungere un blocco immagine prima di caricare un’immagine.

Invece, vi basta semplicemente trascinare il file immagine direttamente dal vostro desktop alla posizione in cui vuoi aggiungerla al vostro articolo. Quando trascinate il file immagine sul contenuto del vostro sito, vedrete una linea blu che segna il posto in cui appare l’immagine.

Uva volta rilasciato il file, WordPress lo caricherà automaticamente e inserirà un blocco immagine nella posizione corretta:

3. Utilizzare un Po’ di Formattazione di Markdown

Se siete fan della sintassi di Markdown nella creazione di contenuti, sarete contenti di sapere che l’editor di blocchi supporta limitatamente l’utilizzo del markdown, principalmente per quanto riguarda le intestazioni.

Ad esempio, se volete inserire un blocco intestazione con un tag H3, potete digitare tre hashtag (`####`) e poi premere la barra spaziatrice. L’editor lo convertirà automaticamente in un H3. Poi potrete continuare a digitare l’intestazione:

Supponiamo che vogliate un supporto più avanzato del Markdown. Potete installare un plugin gratuito come EditorsKit, che vi permette anche di utilizzare il Markdown per il grassetto, il corsivo e il barrato – parleremo più avanti in questo post dei plugin di Gutenberg.

4. Fissare la Barra degli Strumenti di Formattazione nella Parte Superiore dell’Editor

Se non vi piace come lo strumento di formattazione “fluttua” sopra un blocco, l’editor di blocchi vi permette di bloccarlo sotto la barra degli strumenti superiore:

5. Copiare un Blocco e Tutte le Sue Impostazioni

L’editor di blocchi vi permette di copiare e incollare il testo proprio come fareste in qualsiasi editor – “Ctrl + C” o cliccando con il tasto destro e scegliendo Copia.

Tuttavia, non è possibile utilizzare questo metodo per copiare e incollare un intero blocco conservando le sue impostazioni. Dovrete invece:

1. Selezionare il blocco.
2. Cliccare sull’icona dei tre punti sulla barra degli strumenti del blocco.
3. Selezionarere Copia.

Una volta che avete copiato il blocco in questo modo, potete incollarlo come fareste normalmente – cioè “Ctrl + V” o cliccando con il tasto tasto destro del mouse e scegliendo Incolla.

6. Selezione Rapida del Blocco Giusto Utilizzando la List View dei Blocchi

Per la maggior parte dei blocchi, basta semplicemente cliccare sull’editor per selezionare il blocco. Tuttavia, questo può diventare complicato se si inizia ad utilizzare blocchi “annidati”, come l’inserimento di blocchi all’interno di colonne o gruppi.

L’editor dispone della List View, che puoi aprire dalla barra degli strumenti in alto. La List View mostrerà ogni blocco, compresi i blocchi annidati.

Potete selezionare un blocco facendo clic sul blocco stesso nella lista. Inoltre, l’editor evidenzierà il blocco quando ci passate sopra nella lista.

Nell’esempio qui sotto, si può vedere:

• Il blocco colonne principale
• I blocchi annidati per ogni colonna
• Un blocco gruppo annidato dentro una colonna
• Un blocco intestazione annidato all’interno del blocco Gruppo

Per selezionare il blocco principale, basta semplicemente aprire la list view e selezionarlo dall’elenco:

7. Aprire l’Editor di Codice (per Blocchi Singoli o Post Completi)

Uno dei vantaggi dell’editor di blocchi Gutenberg è che permette di configurare molti stili e opzioni di layout senza ricorrere al codice. Tuttavia, potrebbero sempre verificarsi delle situazioni in cui si desidera accedere direttamente al codice per gli utenti più avanzati.

Per aiutarvi, l’editor Gutenberg offre diverse opzioni.

Per prima cosa, potete modificare il codice di un singolo blocco, utile per piccole modifiche come l’inserimento di una classe CSS. Aprite il menu a tendina dalla barra degli strumenti del blocco e selezionate Modifica come HTML:

Selezionando questa opzione, l’anteprima visuale si trasformerà in un editor di codice solo per quel blocco, senza influenzare le anteprime visuali degli altri blocchi:

In secondo luogo, l’editor dispone di un blocco HTML personalizzato che potete utilizzare per incorporare interi frammenti di HTML. Tutto quello che dovete fare è aggiungere il blocco e incollare il vostro codice.

Infine, potete anche aprire l’editor di codice completo per l’intero documento dal menu a tendina posto nell’angolo in alto a destra, o ricorrendo a una scorciatoia da tastiera: Ctrl + Maiusc + Alt + M.

Tenete in mente che, quando aprite l’editor di codice completo, vedrete anche il markup di formattazione dei blocchi di Gutenberg, quindi può essere un po’ difficile da navigare:

8. Le Scorciatoie da Tastiera

L’editor di blocchi dispone di molte scorciatoie da tastiera che permettono di eseguire azioni comuni. Vale la pena di dedicare un po’ tempo ad impararle perché vi renderanno più produttivi e vi risparmieranno un sacco di clic del mouse.

Ecco alcune delle scorciatoie più comuni – se siete su Mac, basterà sostituire “Ctrl” con “Command (⌘)”:

• Aprire la List View dei blocchi – Maiusc + Alt + O
• Salvare le modifiche – Ctrl + S
• Annullare l’ultima modifica – Ctrl + Z
• Ripristinare l’ultima operazione annullata – Ctrl + Maiusc + Z
• Duplicare il blocco o i blocchi selezionati – Ctrl + Shift + D
• Cancellare il blocco o i blocchi selezionati – Maiusc + Alt + Z
• Inserire un nuovo blocco prima del blocco o dei blocchi selezionati – Ctrl + Alt + T
• Inserire un nuovo blocco dopo il blocco o i blocchi selezionati – Ctrl + Alt + Y

Nell’editor potete anche aprire un cheat sheet completo di tutte le scorciatoie da tastiera. Per farlo, potete utilizzare una scorciatoia da tastiera – Maiusc + Alt + H – o cliccare sull’icona del menu dei “tre punti verticali” (⋮) nell’angolo in alto a destra dell’editor e scegliere Keyboard shortcuts dal menu a tendina.

9. Pulire l’Interfaccia Nascondendo i Blocchi

Di default, l’editor di blocchi aggiunge molti blocchi, ma probabilmente non li userete tutti. Per aiutarvi a pulire l’interfaccia, l’editor dispone di una funzione chiamata Block Manager che permette di disabilitare e nascondere i blocchi che non utilizzate:

10. Aggiungere Ancore per i Link Diretti

Infine, il nostro ultimo suggerimento riguarda i link di ancoraggio HTML dell’editor di blocchi, che permette di creare link diretti a sezioni specifiche del vostro contenuto (ad esempio per un indice).

Nell’editor classico, bisognava aggiungere manualmente le ancore HTML dal codice. Con Gutenberg basta semplicemente inserire il testo del link diretto nel campo di Ancora HTML nell’area Avanzate delle impostazioni di ogni blocco:

Concetti Più Avanzati dell’Editor di Blocchi

Abbiamo detto abbastanza del funzionamento dell’editor. Ora che avete una conoscenza di base dell’editor, andiamo avanti ed esaminiamo due funzionalità leggermente più avanzate:

• Block pattern
• Blocchi riutilizzabili

Block Pattern

Un block pattern è essenzialmente un template. È una collezione di blocchi disposti in un layout. Potrebbe essere qualcosa di piccolo, come una disposizione di pulsanti. Ma potrebbe anche essere il template di un’intera sezione, o addirittura di un’intera pagina.

WordPress viene distribuito con i propri block pattern nativi, ma gli sviluppatori di plugin di terze parti possono aggiungere di propri.

Potete inserire nuovi pattern dalla scheda Modelli del pannello di inserimento blocchi principale:

Una volta inserito il pattern, potete modificare completamente tutti i blocchi che lo compongono, proprio come se aveste aggiunto manualmente i blocchi.

Al momento, il core editor di Gutenberg non vi permette di creare i vostri block pattern (a meno che non sappiate crearli via codice). Ma è possibile risolvere con il plugin gratuito Block Pattern Builder di Justin Tadlock. Attivato il plugin, potete creare i vostri design con Gutenberg e poi salvare come pattern.

Per iniziare, andate su Block Patterns > Add New per creare un nuovo pattern dall’editor. Ricordatevi di pubblicarlo quando avete finito:

Una volta fatto, potrete inserire il vostro block pattern come qualsiasi altro, cercandolo nella sezione Senza categoria:

Il team del core di WordPress ha lanciato anche la libreria ufficiale di block pattern su WordPress.org. Potete inserirli nell’editor con un copia e incolla. Basta fare clic sul pulsante Copia nella pagina della libreria di pattern e incollarlo nell’editor.

Blocchi Riutilizzabili

I Blocchi riutilizzabili sono una collezione di uno o più blocchi che potete inserire come gruppo. Sono simili ai block pattern, ma con una differenza importante:

Mentre un block pattern è un template iniziale che modificherete in ogni istanza, un blocco riutilizzabile sarà lo stesso in ogni istanza in cui viene incluso.

Se si aggiorna il blocco riutilizzabile, le modifiche si applicano automaticamente a tutte le istanze esistenti.

Ad esempio, potreste utilizzare un blocco riutilizzabile per creare una call to action (CTA) che volete sia la stessa in tutti i vostri contenuti. Poi, se volete aggiornare la CTA, sarà sufficiente aggiornare il blocco riutilizzabile una volta sola per cambiarlo in tutto il sito.

Per creare un blocco riutilizzabile nell’editor Gutenberg di WordPress, basta far clic e trascinare per selezionare uno o più blocchi. Poi cliccare sull’opzione Aggiungi ai blocchi riutilizzabili (Il plugin che abbiamo citato in precedenza consente anche di creare un block pattern nello stesso modo).

I vostri blocchi saranno poi raggruppati – potete dare un nome al vostro blocco riutilizzabile nelle impostazioni del blocco riutilizzabile nella barra laterale.

Ora potrete inserire quel blocco riutilizzabile cercandolo per nome. Potete utilizzare `/` ver inserire rapidamente il blocco:

Se modificate il blocco riutilizzabile, avrete un’opzione per pubblicare quelle modifiche quando aggiornate il post. E, se decidete di pubblicare le modifiche al blocco riutilizzabile, queste modifiche si applicheranno automaticamente ad ogni istanza del blocco riutilizzabile:

Estendere l’Editor di Blocchi con i Plugin

Fino ad ora, ci siamo concentrati sulle funzionalità core dell’editor di blocchi, con alcune eccezioni.

Una delle grandi cose dell’editor di blocchi, però, è che potete utilizzare i plugin per estenderlo, proprio come fate con il resto del vostro sito WordPress.

I plugin possono essere utilizzati per diverse cose:

 

• Aggiungere nuovi blocchi di contenuto: I plugin possono aggiungere nuovi blocchi da usare nei vostri progetti. È il caso d’uso più comune al momento per i plugin di Gutenberg.
• Aggiungere nuovi template/block pattern: Alcuni plugin usano il sistema dei block pattern del core, mentre altri hanno creato i propri sistemi di template.

Cambiare l’interfaccia/funzionalità dell’editor: Puoi usare i plugin per modificare l’editor stesso. Ad esempio, potreste aggiungere un migliore supporto del Markdown.<de

Oltre ai plugin specificamente progettati per Gutenberg, altri plugin di WordPress possono utilizzare l’editor di blocchi.

Ad esempio, se utilizzate plugin per i moduli di contatto, il plugin potrebbe disporre di un blocco dedicato da utilizzare per incorporare i vostri moduli. Lo stesso vale per molti altri tipi di plugin.

Una volta che avete appreso le basi dell’editor, vale la pena esplorare questi plugin per vedere se ne trovate qualcuno che possa migliorare la vostra esperienza.

Ecco alcune delle soluzioni più popolari al momento della stesura questo post:

• Ultimate Addons for Gutenberg
• Kadence Blocks
• GenerateBlocks
• Stackable
• Getwid

Ne troverete altri nella sezione dei plugin di WordPress.org abilitati ai blocco.

L’Editor Gutenberg di WordPress e il Full Site Editing

Come abbiamo detto all’inizio di questo articolo, il progetto Gutenberg mira ad essere molto più di un semplice editor di contenuti.

Il programma a lungo termine è quello di far passare WordPress al Full Site Editing. Significa esattamente quello che dice – l’obiettivo è che alla fine sarete in grado di modificare tutte le parti del vostro sito utilizzando l’editor Gutenberg. E questo riguarda l’intestazione, il footer, le barre laterali del vostro sito, ecc.

A differenza dell’editor a blocchi lanciato con WordPrvss 5.0, il Full Site Editing ha un approccio iterativo. Ci sarà un’aggiunta graduale di funzionalità e ogni nuova versione sarà costruita sulla base di quelle precedenti.

Ad esempio, a partire da WordPress 5.8, potete utilizzare l’editor di blocchi per gestire i widget del sito. Avrete a disposizione anche alcuni nuovi blocchi focalizzati sui temi, come Logo del Sito, Navigazione, Query Loop (che consente di creare template per elenchi di post), ed altro ancora.

Ma, sebbene il Full Ste Editing ufficiale sia ancora in fase di sviluppo, alcuni intrepidi sviluppatori di temi hanno già iniziato a rilasciare temi a blocchi, che ci offrono dei buoni esempi di come funziona il Full Site Editing.

Inoltre, è possibile accedere ad alcune funzionalità sperimentali del Full Site Editing nel plugin Gutenberg.

Quindi, analizziamo due cose:

1. Le funzionalità di base esistenti del Full Site Editing che abbiamo ora con WordPress 5.8
2. Come potrebbe funzionare il Full Site Editing “completo” in base alle funzionalità sperimentali

Utilizzare i Blocchi al Posto dei Widget

A partire da WordPress 5.8, ora è possibile utilizzare i blocchi per controllare le barre laterali e i footer al posto dei widget (di default – potete disabilitare questa funzione se volete).

Andando in Aspetto > Widget, potrete gestire il contenuto di ogni area widget utilizzando l’editor di blocchi.

Ogni area widget ha un editor separato, che potete aprire cliccando sui pulsanti accordion. È anche possibile spostare i blocchi tra le diverse aree widget facendo clic sulle icone a forma di freccia uncinata vicino alla parte superiore:

Utilizzare i Nuovi Blocchi dei Temi

WordPress 5.8 aggiunge anche nuovi blocchi dedicati ai temi che vi permettono di inserire contenuti dinamici nel vostro sito. Questi blocchi saranno importantissimi quando in futuro progetterete i template per il vostro tema.

Ad esempio, diciamo che volete incorporare in una pagina un elenco dei vostri contenuti più recenti. Ora potete semplicemente aggiungere il blocco Query Loop per inserire dinamicamente il contenuto di un particolare tipo di post (ad esempio gli articoli del blog), filtrandoli per categoria, autore, parole chiave e altro:

All’interno del blocco Query Loop, potete annidare gli altri blocchi di temi controllando così il template del contenuto da visualizzare. Ad esempio, potete visualizzare la data di ogni articolo aggiungendo al vostro template il blocco Data Articolo.

Con il blocco Query Loop in WordPress 5.8, potete progettare la vostra pagina elenco personalizzata. Utilizzando correttamente il Full Site Editing, potete applicare il tutto al vostro intero tema – quindi guardiamoci con attenzione.

Progettazione di Template di Contenuto

La modalità di editing dei template è un’altra nuova funzionalità di WordPress 5.8. Consente di utilizzare Gutenberg per progettare i template per i vostri post e pagine utilizzando i blocchi.

Al momento, questa funzione è disponibile solo se lo sviluppatore del vostro tema l’ha specificatamente abilitata, quindi potreste non vederla se lo sviluppatore del tema non ha aggiunto il supporto.

Se state utilizzando un tema che supporta la modalità di editing dei template in WordPress 5.8, quando andate a modificare un post o una pagina, vedrete una nuova sezione Template nella scheda Articolo/Pagina della barra laterale. Potete creare un nuovo template o scegliere uno dei vostri template esistenti:

Se create un nuovo template, potrete dargli un nome per identificarlo, potete progettare il template utilizzando la modalità di editing dei template, utilizzando i nuovi blocchi dei temi di cui abbiamo parlato nella sezione precedente:

Esempio di Full Site Editing con Blockbase

Blockbase è un tema di Automattic che funziona come una sorta di “prova di concetto” e playground per il Full Site Editing. È ancora sperimentale, quindi potrebbe cambiare prima che le sue funzionalità entrino nel software core di WordPress. Ma offre una buona idea di Full Site Editing.

Con il tema e il plugin di Gutenberg installati, si ottiene una nuova area Site Editor che consente di “costruire” il tema utilizzando lo stesso editor che avete visto sopra.

La differenza fondamentale, però, è che non state solo costruendo un singolo articolo o pagina, ma state utilizzando l’editor di blocchi per creare i template che saranno utilizzati da tutti i contenuti del vostro sito – ad esempio, il template del vostro header.

Per questo, avrete una serie di nuovi blocchi di design, compresi alcuni dei blocchi dei temi visti sopra:

Per navigare tra i diversi template, basta cliccare sul logo di WordPress nell’angolo in alto a sinistra per modificare altri template e crearne di nuovi:

Di nuovo, l’idea è che alla fine potrete utilizzare l’editor Gutenberg per controllare tutti i template/layout del vostro tema. E quando questo sarà possibile, creare un sito WordPress sarà molto diverso da quello che consideriamo “normale” nel 2021.

Riepilogo

Dal 2018, l’editor di blocchi Gutenberg ha fatto molti progressi. Con l’imminente passaggio al Full Site Editing, l’editor a blocchi diventerà una parte ancora più significativa di WordPress.

In questo articolo abbiamo parlato di tutto, dalle basi dell’editor di blocchi alle funzionalità avanzate. Abbiamo anche visto come potrebbe essere il Full Site Editing in futuro.

Se non siete ancora pronti a provarlo, potete disabilitare permanentemente Gutenberg e utilizzare l’editor classico. Tuttavia, Gutenberg continuerà a crescere, quindi non potrete ignorarlo per sempre.

Avete domande o considerazioni sull’editor? Ci piacerebbe leggere nei commenti le vostre considerazioni, sia buone che cattive.