Hai passato 20 minuti su un blocco call-to-action curato nel design. Hai rifinito colori, margini e testi. Una settimana dopo ti ritrovi a costruire lo stesso blocco da zero su un altro sito. Ti suona familiare?

Copiare manualmente blocchi tra siti WordPress consuma ore che non hai. Ma Gutenberg ha risolto questo problema molto tempo fa: i blocchi riutilizzabili insieme all'esportazione JSON ti permettono di spostare qualsiasi blocco su un altro sito in meno di un minuto. Nessun plugin, nessuna esportazione completa del database, nessuna complicazione con importazioni XML.

Questa guida ti accompagna passo dopo passo, dalla creazione di un blocco riutilizzabile all'importazione su un sito separato. Più un plugin alternativo che rende il processo ancora più semplice.

💡 Panoramica rapida:

• Crea un blocco nell'editor Gutenberg e convertilo in riutilizzabile
• Esportalo come file JSON tramite l'interfaccia di gestione blocchi
• Importa il JSON sul sito WordPress di destinazione e il blocco è pronto all'uso
• In alternativa, il plugin Blocks Export Import ti consente di esportare qualsiasi blocco, non solo quelli riutilizzabili

Cosa sono i blocchi riutilizzabili e perché ti servono

Un blocco riutilizzabile in Gutenberg è un modello di contenuto salvato che crei una volta e poi inserisci in qualsiasi articolo o pagina. Modifica il blocco originale e le modifiche si propagano ovunque sia utilizzato.

Casi d'uso tipici:

• Una nota di ringraziamento o una firma alla fine di ogni articolo
• Un banner con una promozione o un modulo di iscrizione
• Un blocco con recapiti, informazioni legali o copyright
• Uno slider di immagini o una galleria riutilizzati su più pagine

Prima di Gutenberg avresti conservato questi frammenti in un file di testo sul desktop e li avresti incollati dagli appunti. Ora questo funziona a livello nativo di WordPress e si trasferisce tra siti.

Nota importante: se un blocco dipende da un plugin di terze parti (ad esempio, blocchi di Getwid o Stackable), lo stesso plugin deve essere installato sul sito di destinazione. Altrimenti il blocco si aprirà con un errore o perderà parte dei suoi stili.

1. Creare un blocco riutilizzabile

Apri l'editor Gutenberg tramite Articoli → Aggiungi nuovo. Clicca l'icona Aggiungi blocco (+) nella barra degli strumenti in alto e scegli il tipo di blocco che ti serve. Nell'esempio qui sotto è un semplice blocco paragrafo:

Configura il blocco: aggiungi testo, link, colore di sfondo, spaziatura interna, tutto ciò che ti serve per l'aspetto finale. Nel nostro esempio il risultato è un blocco di ringraziamento con link social e uno sfondo colorato:

Ecco l'aspetto del blocco finito dopo le modifiche di stile e testo:

Finora questo è un blocco normale. Per renderlo riutilizzabile, clicca l'icona Altre opzioni (tre puntini) sulla barra degli strumenti del blocco e seleziona Aggiungi ai blocchi riutilizzabili:

Assegna un nome al blocco e clicca Salva. Fatto: il blocco ora compare nella libreria dei blocchi riutilizzabili del tuo sito.

2. Usare un blocco riutilizzabile nei post

Aggiungere un blocco salvato a qualsiasi post o pagina richiede solo un paio di clic. Nell'editor Gutenberg clicca su Aggiungi blocco (+), passa alla scheda Blocchi riutilizzabili e scegli quello che ti serve:

Dopo aver inserito il blocco, clicca su Anteprima o Pubblica e verifica il risultato nel front end:

Il blocco funziona in ogni tipo di post che supporta l'editor Gutenberg: post, pagine, custom post type. Crealo una volta, usalo ovunque.

3. Esportare il blocco in JSON

Una volta che il blocco è pronto e testato, puoi esportarlo per trasferirlo su un altro sito. Nell'editor Gutenberg clicca sull'icona Altri strumenti e opzioni (i tre puntini nell'angolo in alto a destra) e seleziona Gestisci tutti i blocchi riutilizzabili:

Si aprirà una schermata con l'elenco di tutti i blocchi riutilizzabili del sito. Per ora ce n'è solo uno, il messaggio di ringraziamento. Man mano che crei altri blocchi l'elenco crescerà:

Passa il mouse sul nome del blocco e vedrai un link Esporta come JSON. Cliccalo:

Il browser scaricherà un file con estensione .json. Salvalo in una cartella comoda sul tuo computer:

All'interno del JSON c'è la struttura completa del blocco: markup HTML, stili, attributi, blocchi annidati. È un file autonomo pronto per essere importato su qualsiasi sito WordPress con Gutenberg attivo.

4. Importare il blocco su un altro sito

Sul sito WordPress di destinazione, apri l'editor Gutenberg (Post → Aggiungi nuovo). Clicca di nuovo su Altri strumenti e opzioni e seleziona Gestisci tutti i blocchi riutilizzabili:

Nella schermata dei blocchi, clicca il pulsante Importa da JSON, scegli il file che hai scaricato prima e clicca Importa:

Fatto. Il blocco importato compare nell'elenco ed è subito disponibile per l'inserimento nei post:

Da questo momento in poi puoi usare il blocco sul secondo sito esattamente come faresti sul primo. Ripeti la procedura per tutti i blocchi che vuoi; non ci sono restrizioni.

Metodo alternativo: il plugin Blocks Export Import

Il metodo manuale che prevede la conversione in blocco riutilizzabile funziona nella maggior parte degli scenari, ma ha una limitazione: puoi esportare solo blocchi riutilizzabili. Un blocco normale che hai appena finito di progettare deve prima essere convertito e solo dopo esportato.

Il plugin Blocks Export Import di ThemeIsle rimuove questa limitazione. Aggiunge un pulsante di esportazione direttamente nel menu di qualsiasi blocco, senza passaggi di conversione intermedi.

Installa e attiva il plugin, poi apri l’editor Gutenberg e crea un blocco. Nel menu Altre opzioni compare la nuova voce Esporta JSON:

Un file JSON con la struttura completa del blocco viene scaricato sul tuo computer. Per importarlo su un altro sito, clicca su Aggiungi blocco (+), vai alla scheda Widget e seleziona Importa blocchi da JSON:

Poi clicca su Scegli file, seleziona il JSON sul tuo computer e clicca su Carica:

Il metodo con plugin ha un limite: i blocchi importati in questo modo non vengono salvati nella libreria dei blocchi riutilizzabili del sito. Esistono solo come file JSON sul tuo computer. Il metodo manuale (sezioni 1-4), al contrario, archivia il blocco nel database di WordPress, quindi resta accessibile tramite l’interfaccia standard di gestione dei blocchi.

Quale metodo scegliere dipende dal tuo scenario: per un trasferimento una tantum tra i tuoi siti, usa il plugin (è più veloce); per un lavoro continuativo con una libreria di blocchi su più siti, impara l’esportazione nativa dei riutilizzabili.

Video: esportare e importare blocchi Gutenberg nella pratica

Guarda un breve video tutorial che mostra il ciclo completo, dalla creazione di un blocco riutilizzabile all’importazione su un altro sito WordPress:

⁉️🤔 Domande frequenti

Posso esportare più blocchi in un unico file?

Sì. Seleziona diversi blocchi nell'editor (tieni premuto Shift e clicca su ciascuno), raggruppali tramite Aggiungi ai blocchi riutilizzabili ed esporta il gruppo risultante come singolo JSON. Anche il plugin Blocks Export Import supporta esportazioni multiple: seleziona i blocchi e scegli Esporta JSON, e tutti i blocchi selezionati finiranno in un unico file.

Cosa devo fare se un blocco importato viene visualizzato in modo errato?

Tre cause probabili. Prima: il plugin da cui dipendono i blocchi del contenuto importato (Getwid, Stackable, Kadence Blocks o simili) non è installato sul sito di destinazione. Installa il plugin e reimporta. Seconda: i temi dei due siti differiscono significativamente nel CSS, perciò il blocco potrebbe ereditare font o spaziature sbagliati. Correggi dalle impostazioni del blocco o aggiungi CSS personalizzato. Terza: il file JSON si è corrotto durante il trasferimento; scaricalo e importalo di nuovo.

Come distinguo un blocco normale da uno riutilizzabile nell'editor?

Un blocco riutilizzabile nell'editor Gutenberg è evidenziato con un bordo viola e ha un'icona di riutilizzo (due frecce ad anello) sulla barra degli strumenti. Un blocco normale ha un bordo blu senza icone particolari. Passando il mouse su un blocco riutilizzabile viene mostrato il suo nome.

Gli stili del tema vengono conservati quando un blocco viene esportato?

Parzialmente. Il JSON include il markup inline e gli attributi del blocco (colore di sfondo, dimensione del testo, gradienti, tutto ciò che viene impostato tramite le impostazioni di Gutenberg). Gli stili definiti nel style.css del tema attivo non sono inclusi nel JSON: appartengono al tema, non al blocco. Perciò su un altro sito con un tema diverso il blocco potrebbe apparire differente. Per i blocchi in cui il design è critico, imposta gli stili principali attraverso le impostazioni proprie del blocco anziché tramite il CSS del tema.

C'è un limite di dimensione per il JSON esportato?

Tecnicamente no, ma blocchi molto grandi con decine di elementi annidati possono produrre un file JSON di diversi megabyte. Quando importi un file del genere entra in gioco la direttiva upload_max_filesize nella configurazione PHP del server (il valore predefinito è 2 MB). Se il JSON supera il limite, aumenta la direttiva nel php.ini oppure dividi il blocco in pezzi più piccoli.

Quando l'esportazione manuale è preferibile a un plugin

Il metodo manuale tramite blocchi riutilizzabili è integrato nel core di WordPress. Non dipende da aggiornamenti di terze parti, non aggiunge codice extra al tuo sito e salva i blocchi nel database, così puoi vederli nell'interfaccia di gestione standard.

Il plugin Blocks Export Import vince in velocità quando devi solo prelevare un blocco e trasferirlo subito senza salvarlo nella libreria. Ma se lavori sistematicamente con un insieme di blocchi standard su più siti, impara l'esportazione nativa con i riutilizzabili. Una libreria di blocchi accessibile da qualsiasi articolo alla fine ripaga quel clic di conversione in più.

Prova entrambi i metodi su una coppia di siti di test e scegli quello che si adatta meglio al tuo flusso di lavoro. Dieci minuti di configurazione oggi fanno risparmiare decine di ore in un anno.