Temi a blocchi per WordPress: quello che devi sapere

Dovendo creare un nuovo sito WordPress, è possibile che tu abbia valutato l’impiego di un tema a blocchi. L’idea di utilizzare una soluzione nativa che sfrutta tutte le caratteristiche dell’editor a blocchi, del Site Editor, degli stili globali e dei pattern può avere un certo appeal.

Nonostante i temi a blocchi siano disponibili dal 2022, essendo stati introdotti con l’arrivo del Site Editor nella versione 5.9 di WordPress, non sono ancora una soluzione particolarmente diffusa. Molti utenti continuano a preferire i temi classici oppure l’utilizzo di page builder.

In questa guida esploreremo le caratteristiche dei temi a blocchi, le differenze rispetto ai temi classici, e come creare e personalizzare un tema a blocchi. L’obiettivo è fornirti una panoramica completa per aiutarti a scegliere se un tema a blocchi è la soluzione giusta per te o se è meglio utilizzare temi come GeneratePress o builder visuali come Elementor o Bricks Builder.

Come identificare un tema a blocchi

Su un sito WordPress appena installato, il tema predefinito è generalmente l’ultimo rilasciato (come Twenty Twenty-Five), che è un tema a blocchi. Anche altri temi recenti come Twenty Twenty-Four e Twenty Twenty-Three sono temi a blocchi.

Un tema a blocchi si distingue principalmente per:

1. La Presenza del Site Editor: All’interno della sezione “Aspetto” nell’interfaccia di amministrazione, è presente la voce “Editor”. Cliccando su questa voce si accede al Site Editor, che permette di gestire elementi come la navigazione, gli stili, le pagine, i template e i pattern.
2. Assenza di Alcune Voci Classiche: Nei temi a blocchi solitamente non sono presenti le voci “Personalizza”, “Widget” e “Menu” all’interno della sezione ”Aspetto” nell’interfaccia di amministrazione di WordPress, come invece troviamo nei temi classici.

Nota importante: Se non ti è chiara la differenza tra un tema per WordPress e un template per WordPress, è fondamentale comprenderla prima di proseguire.

Differenze tra temi a blocchi e temi classici

Interfaccia di Amministrazione

In un tema a blocchi, la maggior parte delle modifiche viene effettuata utilizzando il Site Editor. Ad esempio, per modificare l’header del sito (che include il menu), è necessario entrare nel Site Editor, selezionare “Pattern”, poi “Header” e modificare il template.

Nei temi classici invece, hai sezioni separate per la gestione di menu, widget e personalizzazioni attraverso il Customizer.

Struttura dei File

Esaminando la struttura dei file, un tema a blocchi presenta:

• Un file theme.json: Il principale file di configurazione del tema, assente nei temi classici
• Template in HTML: I template sono principalmente file HTML, mentre nei temi classici sono file PHP

Un errore comune da evitare

È importante non confondere i temi che permettono l’utilizzo dell’editor a blocchi per costruire sezioni del sito (come GeneratePress con GenerateBlocks, Astra con Spectra, o Kadence con Kadence Blocks) con i veri temi a blocchi. Questi temi classici utilizzano plugin proprietari che sfruttano l’interfaccia dell’editor a blocchi, ma non sono temi a blocchi nativi e non utilizzano il Site Editor.

Come creare un tema a blocchi da zero

Un modo eccellente per comprendere meglio i temi a blocchi è creare un tema da zero. Possiamo utilizzare il plugin “Create Block Theme” fornito da WordPress:

1. Installa e attiva il plugin “Create Block Theme”
2. Vai in “Aspetto” > “Crea tema basato sui blocchi”
3. Seleziona “Crea nuovo tema vuoto”
4. Assegna un nome al tema (es. “Tema a Blocchi Test”)
5. Clicca su “Crea e attiva”

Per creare un tema a blocchi puoi anche partire da un altro tema a blocchi esistente, clonandolo così da poterlo modificare successivamente. Inoltre, è anche possibile creare un tema child basato su un tema a blocchi, così come era possibile fare con i temi classici.

Struttura base del tema a blocchi creato

Il nuovo tema a blocchi creato grazione al plugin ”Create Block Theme” conterrà:

• Il file theme.json: Contiene le configurazioni principali del tema
• Un file style.css: Nei temi a blocchi ha funzione principalmente informativa
• Cartelle per i template e le parti di template

Personalizzazione di un tema a blocchi

Modifiche al file theme.json

Il file theme.json è in formato JSON e contiene le configurazioni del tema. È possibile modificarlo per personalizzare vari aspetti del tema:

{
	"version": 3,
	"$schema": "https://schemas.wp.org/wp/6.8/theme.json",
	"settings": {
		"appearanceTools": true,
		"color": {
			"custom": false,
			"customGradient": false,
			"defaultDuotone": false,
			"defaultGradients": false,
…

Ad esempio, impostando "custom": false nella sezione “color”, si disabilita la possibilità per l’utente di scegliere colori personalizzati, limitandolo alla tavolozza definita. I temi a blocchi offrono infatti numerose possibilità per personalizzare l’esperienza di creazione e modifica di contenuti sul sito, permettendo di limitare molto quello che gli autori possono o non possono fare.

Personalizzazione degli Stili Globali

Utilizzando il Site Editor, è possibile definire stili globali che si applicano all’intero tema:

1. Vai in “Aspetto” > “Editor” > “Stili”
2. Qui è possibile personalizzare la tipografia, i colori, il layout e altri aspetti globali
3. Puoi anche aggiungere font da Google e impostare stili predefiniti per blocchi specifici

Salvataggio delle modifiche: nei file del tema o nel database?

È importante capire che le modifiche effettuate nel Site Editor vengono salvate nel database, non nei file del tema. Ci si può quindi trovare nella situazione in cui alcune impostazioni sono definite dai file presenti nella cartella del tema, mentre altre risiedono nel database del sito. È però possibile riportare le modifiche effettuate all’interno del site editor all’interno dei file del tema:

1. Usa il plugin “Create Block Theme”
2. Clicca su “Salva le modifiche al tema”
3. Conferma il salvataggio

Questo processo “scarica” le modifiche dal database e le inserisce nei file del tema, in particolare nel file theme.json.

Limiti e sfide dei temi a blocchi

I temi a blocchi non sono page builder

Un errore comune è considerare il Site Editor come un alternativa ai page builder. In realtà, ci sono molte personalizzazioni che richiedono interventi a livello di codice, sia sul file theme.json sia per creare pattern o stili di sezione.

Chi si aspetta di trovare nell’editor a blocchi, e di conseguenza anche nel site editor, tutti i tipi di controlli per le varie proprietà CSS che normalmente si trovano in altri builder visuali come Elementor, Bricks Builder… resterà probabilmente molto deluso.

I temi a blocchi, per come sono attualmente, possono essere utili per costruire siti con una struttura e un layout piuttosto semplice. Altrimenti, per situazioni più complesse è richiesta una notevole quantità di lavoro per poter implementare le funzionalità e i layout grafici desiderati.

Esempio: personalizzazione dei pulsanti al passaggio del mouse

Un esempio che dimostra una delle possibili complessità nella personalizzazione di un tema a blocchi rispetto ai temi classici o ai page builder è la modifica del colore dei pulsanti al mouseover.

Nei temi a blocchi, questa modifica richiede un intervento nel file theme.json, aggiungendo regole specifiche per il comportamento hover:

"elements": {
  "button": {
    ":hover": {
      "border": {
        "color": "transparent"
      },
      "color": {
         "background": "var:preset|color|primary-alt-accent",
	"text": "var:preset|color|primary-alt"
     }
    }
  }
}

Nei page builder o in plugin come GenerateBlocks, queste modifiche possono essere effettuate facilmente tramite l’interfaccia visuale.

Attenzione alla formattazione

Quando si modifica il file theme.json, e in generale anche tutti gli altri file .json, è fondamentale prestare attenzione alla formattazione. Anche un piccolo errore, come una virgola mancante o in eccesso, può compromettere il funzionamento dell’intero tema.

Sincronizzazione frontend e backend

Un grande vantaggio dei temi a blocchi è la perfetta sincronizzazione tra ciò che si vede nell’editor e ciò che appare nel frontend. Le modifiche apportate ai file JSON vengono automaticamente convertite in regole CSS che si applicano sia nell’editor che sul frontend del sito.

Limitazioni responsive

Una delle limitazioni più frustranti dei temi a blocchi è la mancanza di controlli responsive dettagliati. Non è possibile, ad esempio, impostare comportamenti diversi per lo stesso elemento su dispositivi differenti (come allineamento centrato su desktop e a sinistra su mobile).

Plugin come “Twentig” possono aggiungere alcuni controlli di visibilità sui vari dispositivi, ma chi desidera un controllo preciso sul comportamento responsive potrebbe trovare l’esperienza con i temi a blocchi limitante.

Conclusioni

I temi a blocchi offrono un approccio moderno e nativo a WordPress, con vantaggi come la sincronizzazione perfetta tra editor e frontend, un sistema coerente di stili globali e un’esperienza editoriale più integrata.

Però, presentano anche sfide significative, soprattutto per chi cerca personalizzazioni avanzate senza dover intervenire sul codice o desidera un controllo dettagliato sul comportamento responsive.