Gutenberg blocks personalizzati: creare blocchi custom senza React

Gutenberg è il futuro di WordPress. I blocchi custom sono il tuo vantaggio.

L'editor a blocchi (Gutenberg) è il sistema di editing nativo di WordPress dal 2018. Ogni contenuto è composto da blocchi: paragrafo, heading, immagine, colonne, tabella. WordPress include 90+ blocchi standard. Ma il valore reale per uno sviluppatore è creare blocchi custom: un blocco "Testimonial" con foto, nome, azienda, e citazione. Un blocco "Pricing Table" con piani e feature. Un blocco "Team Member" con bio e social. Blocchi che il cliente può usare nell'editor senza toccare codice — drag and drop, compila i campi, pubblica. Il problema: i blocchi Gutenberg nativi si creano con React e JavaScript, tecnologie che molti sviluppatori WordPress (abituati a PHP) non conoscono.

3 approcci per blocchi custom senza React

1. ACF Blocks (il più popolare)

Advanced Custom Fields (ACF) Pro permette di creare blocchi Gutenberg usando solo PHP. Definisci i campi (testo, immagine, select, relazione) nell'interfaccia ACF, e il rendering avviene con un template PHP. Stesso linguaggio che già conosci per i temi WordPress. Vantaggi: zero JavaScript, integrazione con l'ecosistema ACF, campi ripetibili e flessibili. Svantaggi: ACF Pro è a pagamento (49$/anno), e l'anteprima nell'editor usa un iframe (meno fluida dei blocchi nativi React).

2. Carbon Fields (gratuito e open source)

Alternativa gratuita ad ACF: Carbon Fields permette di creare blocchi con PHP puro. La definizione dei campi avviene in codice PHP (non in interfaccia grafica) e il rendering è un template PHP. Vantaggi: completamente gratuito, nessuna dipendenza dal database per la definizione dei campi (tutto nel codice = portabile). Svantaggi: curva di apprendimento leggermente più alta di ACF, meno documentazione.

3. LANGA Tools Block Builder

Il modulo Block Builder di LANGA Tools crea blocchi Gutenberg con interfaccia visuale: definisci il nome del blocco, i campi (testo, textarea, immagine, select, toggle, color picker, link), e il template di rendering (HTML + placeholder dei campi). Il toolkit genera il codice PHP completo e registra il blocco automaticamente. Non serve conoscere né React né la API dei blocchi WordPress. Il blocco appare nell'inserter di Gutenberg, con anteprima live, e il cliente lo usa come qualsiasi altro blocco. Per sviluppatori che vogliono il codice: è esportabile come plugin standalone.

Quando creare un blocco custom vs usare un pattern

Blocco custom: quando servono campi strutturati

Se il contenuto ha una struttura fissa con campi specifici (testimonial: foto + nome + ruolo + citazione), un blocco custom è la scelta giusta. Il cliente compila i campi senza preoccuparsi del layout. Il blocco garantisce coerenza: ogni testimonial ha lo stesso formato, lo stesso design, gli stessi campi.

Block pattern: quando serve un layout predefinito

Se il contenuto è un layout di blocchi standard già esistenti (colonne + heading + paragrafo + immagine), un pattern è più semplice: combina blocchi nativi in un template riusabile. Il cliente inserisce il pattern e modifica i contenuti. Non serve codice: i pattern si creano dall'editor Gutenberg stesso (seleziona i blocchi → Crea pattern). Per layout semplici, i pattern sono sufficienti e più veloci da creare.

SEO e blocchi custom

I blocchi custom generano HTML che Google legge normalmente. Non c'è differenza SEO tra contenuto in un blocco nativo e contenuto in un blocco custom — purché l'HTML generato sia semantico (usa H2/H3, paragrafi, liste, non div anonimi). LANGA Tools Block Builder genera HTML semantico per default. Per schema markup: i blocchi "Testimonial" possono includere automaticamente schema Review, i blocchi "FAQ" schema FAQPage, i blocchi "Team" schema Person. Il toolkit aggiunge lo schema JSON-LD nel head basandosi sui blocchi presenti nella pagina.

Domande frequenti

I blocchi custom funzionano con tutti i temi?

Sì. I blocchi Gutenberg sono indipendenti dal tema. Il rendering è nel plugin/toolkit, non nel tema. Lo stile può adattarsi al tema usando le CSS variables di WordPress (--wp--preset--color--primary, etc.) o CSS custom nel blocco. LANGA Tools Block Builder applica automaticamente le variabili CSS del tema attivo.

Devo abbandonare ACF per LANGA Tools?

No. LANGA Tools Block Builder è complementare ad ACF, non sostitutivo. Se già usi ACF per campi personalizzati e meta box, continua. Se vuoi creare blocchi Gutenberg senza ACF Pro (49$/anno), il Block Builder è l'alternativa gratuita inclusa nel toolkit. I blocchi creati con entrambi gli approcci coesistono senza conflitti.

Per continuare a leggere,
accedi al tuo account.

Il tuo account LANGA ti connette a tutta la Galaxy.