Crea blocchi personalizzati solo con PHP. Addio ai vecchi shortcode 🥳
Creare blocchi Gutenberg ha significato React, Node.js e una pipeline di compilazione da quando WordPress 5.0 ha introdotto l'editor a blocchi. Se le tue competenze sono in PHP — come le mie e quelle della maggior parte degli sviluppatori WordPress —, questa barriera ti ha tenuto in panchina per quasi un decennio. WordPress 7.0 cambia le cose. I blocchi solo-PHP ti permettono di registrare un blocco Gutenberg pienamente funzionante con un unico file PHP e il flag autoRegister.
Scrivi PHP. Ottieni un blocco. Nessun tooling. Nessuna compilazione. 🥳 In questo articolo vedrai come funzionano i blocchi solo-PHP e seguirai un esempio reale che sostituisce un classico shortcode con il suo equivalente a blocco.
Cosa sono i blocchi solo-PHP?
Finora, creare un blocco Gutenberg personalizzato significava impostare una toolchain JavaScript: npm install, un file block.json, un passaggio di compilazione con webpack.config.js o @wordpress/scripts, e un componente edit.js scritto in JSX. Ogni modifica richiedeva un passaggio di compilazione prima di poterla vedere nell'editor. Per uno sviluppatore PHP che vuole semplicemente registrare un semplice blocco di visualizzazione, questo sovraccarico è sempre sembrato sproporzionato rispetto al compito.
I blocchi solo-PHP eliminano tutto questo. Ora, in register_block_type() ti basta passare 'autoRegister' => true, e WordPress gestisce automaticamente tutto il lato JavaScript usando ServerSideRender. Il blocco compare nell'inseritore, mostra un'anteprima dal vivo sulla tela e genera i controlli dell'Ispettore nella barra laterale, il tutto senza una singola riga di JavaScript da parte tua.
I controlli vengono generati automaticamente in base al tipo di attributo:
| Tipo di attributo | Controllo dell'Ispettore generato |
|---|---|
string | Campo di testo |
integer / number | Campo numerico |
boolean | Interruttore |
string + enum | Menu a tendina |
I controlli generati automaticamente coprono per ora solo i quattro tipi sopra indicati. Qualsiasi cosa più complessa, come selettori di immagini, caricamenti multimediali o dati annidati, non è ancora supportata e richiederebbe un blocco registrato con JavaScript. Gli sviluppatori possono anche contrassegnare singoli attributi con un ruolo local per segnalarli come stato interno; WordPress li ignora durante la costruzione dei controlli della barra laterale.
I blocchi solo-PHP sono disponibili già oggi in WordPress 7.0 senza alcuna dipendenza aggiuntiva. Per saperne di più, leggi la nota ufficiale per sviluppatori su Make WordPress Core.
A chi è rivolto?
Le agenzie più piccole e i freelance senza una profonda competenza in JavaScript possono ora creare soluzioni per l'editor a blocchi che sfruttano appieno le funzionalità native di WordPress senza toccare una pipeline di compilazione. Se vuoi realizzare blocchi Gutenberg personalizzati specifici per un tema — come riquadri dell'autore, citazioni in evidenza, testimonianze, banner CTA, avvisi ed elementi simili — invece di ripiegare sugli shortcode, i blocchi solo-PHP aiutano ad abbassare significativamente quella barriera.
Non sostituiscono i blocchi registrati con JavaScript quando hai bisogno di modifica del testo formattato in linea, un'interfaccia reattiva in tempo reale o l'annidamento di blocchi interni, ma per un'ampia categoria di blocchi di visualizzazione strutturati colgono nel segno.
Il vecchio metodo: gli shortcode
Prima dei blocchi solo-PHP, l'approccio pratico per uno sviluppatore PHP era uno shortcode. Ecco un semplice shortcode di testimonianza con tre attributi: il nome dell'autore, l'azienda, una valutazione a stelle, più il contenuto interno per il testo della recensione:
function testimonial_shortcode( $atts, $content = '' ) {
$atts = shortcode_atts( [
'name' => '',
'company' => '',
'stars' => 5,
], $atts );
$stars_count = max( 1, min( 5, intval( $atts['stars'] ) ) );
$stars_html = str_repeat( '★', $stars_count )
. str_repeat( '☆', 5 - $stars_count );
return sprintf(
'<blockquote class="testimonial">
<p class="testimonial__stars">%s</p>
<p class="testimonial__body">%s</p>
<footer class="testimonial__attribution">
<strong>%s</strong>%s
</footer>
</blockquote>',
esc_html( $stars_html ),
wp_kses_post( $content ),
esc_html( $atts['name'] ),
$atts['company'] ? ', ' . esc_html( $atts['company'] ) : ''
);
}
add_shortcode( 'testimonial', 'testimonial_shortcode' );Utilizzo:
[testimonial name="Sarah K." company="Acme Corp" stars="4"]
Saved us hours every week.
[/testimonial]
Funziona... ma è solo uno shortcode 🤷🏻♂️
Ecco solo alcuni dei problemi degli shortcode:
- Invisibili nell'editor. L'autore vede
[testimonial name="Sarah K." ...]nell'editor, non la scheda renderizzata. Non c'è anteprima. - Non individuabili. Devi sapere che lo shortcode esiste e ricordarne i nomi dei parametri. Nulla lo mette in evidenza nell'interfaccia.
- Nessun controllo di stile nativo. Regolare colore, spaziatura o tipografia richiede CSS personalizzato o attributi aggiuntivi collegati manualmente.
- Il contenuto interno non è testo formattato. Il corpo della recensione viene passato come semplice stringa in
$content, non come un'area di testo formattato modificabile.
Gli shortcode erano lo strumento giusto per la loro epoca. L'editor a blocchi offre qualcosa di meglio, ma è stato difficile sfruttarlo. WordPress 7.0 offre una scorciatoia sotto forma di blocchi solo-PHP.
Per essere chiari: il modo corretto e moderno di creare un blocco Gutenberg resta un blocco registrato con JavaScript con un componente edit completo. I blocchi solo-PHP sono un percorso semplificato — deliberatamente limitato ai blocchi renderizzati lato server che non necessitano di modifica formattata sulla tela. Non sostituiscono i blocchi JavaScript, ma rappresentano una nuova opzione per i casi d'uso più semplici in cui il sovraccarico di una pipeline di compilazione e di componenti React non è giustificato.
Un'opzione più semplice: i blocchi solo-PHP
Costruiamo la stessa testimonianza come blocco personalizzato di WordPress solo con PHP. La ricetta: register_block_type() con 'autoRegister' => true in supports, più un render_callback.
Ecco il codice completo del blocco:
function my_plugin_register_testimonial_block() {
register_block_type(
'my-plugin/testimonial', // Block name: namespace/slug
array(
'title' => 'Testimonial', // Shown in the block inserter
'attributes' => array(
// string attributes generate a text input in the sidebar
'name' => array(
'type' => 'string',
'default' => '',
),
'company' => array(
'type' => 'string',
'default' => '',
),
// integer attributes generate a number input
'stars' => array(
'type' => 'integer',
'default' => 5,
),
'body' => array(
'type' => 'string',
'default' => '',
),
),
// render_callback is the PHP function that outputs the block's HTML
'render_callback' => function ( $attributes ) {
$stars_count = max( 1, min( 5, intval( $attributes['stars'] ) ) );
$stars_html = str_repeat( '★', $stars_count )
. str_repeat( '☆', 5 - $stars_count );
// Translatable string for screen readers — standard WordPress i18n, nothing extra needed
/* translators: %d: star rating out of 5 */
$stars_label = sprintf( __( '%d out of 5 stars', 'my-plugin' ), $stars_count );
return sprintf(
'<blockquote %s>
<p class="testimonial__stars" aria-label="%s">%s</p>
<p class="testimonial__body">%s</p>
<cite class="testimonial__attribution">
<strong>%s</strong>%s
</cite>
</blockquote>',
// Merges your class with editor-added colour, spacing, and typography styles
get_block_wrapper_attributes( array( 'class' => 'testimonial wp-block-quote' ) ),
esc_attr( $stars_label ),
esc_html( $stars_html ),
wp_kses_post( $attributes['body'] ),
esc_html( $attributes['name'] ),
$attributes['company'] ? ', ' . esc_html( $attributes['company'] ) : ''
);
},
'supports' => array(
// The key flag — tells WordPress to handle JS registration automatically
'autoRegister' => true,
// The rest unlock native colour, typography, and spacing panels in the sidebar
'color' => array(
'background' => true,
'text' => true,
),
'typography' => array(
'fontSize' => true,
),
'spacing' => array(
'padding' => true,
'margin' => true,
),
),
)
);
}
add_action( 'init', 'my_plugin_register_testimonial_block' );Il risultato:
Ci sono alcune cose da notare qui. Primo, il contenuto interno di uno shortcode non ha un equivalente diretto nei blocchi solo-PHP. Il corpo della recensione diventa un attributo string modificabile dai controlli dell'Ispettore nella barra laterale: un campo di testo a riga singola, non un'area di testo formattato sulla tela. Per una breve citazione di testimonianza va bene. Per testi più lunghi vorrai un blocco registrato con JavaScript con un componente RichText.
Secondo, get_block_wrapper_attributes() combina la tua classe con tutto ciò che l'editor aggiunge per colore, tipografia e spaziatura, così i pannelli di stile nativi funzionano senza alcun collegamento CSS aggiuntivo. Il render_callback riceve un array $attributes contenente solo i valori impostati dall'utente; nessun parametro $content, perché il contenuto interno non è supportato.
Cosa ottieni rispetto alla versione shortcode:
- Anteprima dal vivo nella tela dell'editor. Niente più sintassi grezza di shortcode: l'autore vede la scheda di testimonianza renderizzata mentre modifica.
- Controlli generati automaticamente. Nome, azienda, corpo (campi di testo) e stelle (campo numerico) compaiono automaticamente nei controlli dell'Ispettore nella barra laterale.
- Pannelli nativi di colore, font e spaziatura. Derivano da
supports, senza bisogno di CSS personalizzato. - Individuabile. Il blocco compare nell'inseritore sotto il suo nome, con un'icona.
Pronto per la traduzione fin da subito
Ci sono due distinte questioni di traduzione quando si lavora con i blocchi solo-PHP, ed è utile chiarire quale sia quale.
La prima riguarda le stringhe statiche incorporate nel tuo template PHP: etichette, testi dei pulsanti, testi dell'interfaccia. Queste sono gestite da __() e _e(), proprio come in qualsiasi file PHP di WordPress. Nel blocco qui sopra, l'etichetta delle stelle ne è un esempio:
/* translators: %d: star rating out of 5 */
$stars_label = sprintf( __( '%d out of 5 stars', 'my-plugin' ), $stars_count );Gli strumenti standard di WordPress le rilevano automaticamente. Non serve nient'altro.
La seconda questione riguarda il contenuto inserito dall'utente e memorizzato come attributi del blocco: il corpo della testimonianza, il nome del recensore, l'azienda. Questo è il contenuto che i tuoi redattori digitano effettivamente nel blocco, e __() non lo tocca. Su un sito multilingue, questi valori di attributo devono essere tradotti separatamente in ogni lingua, e non è qualcosa che WordPress gestisce da solo.
Gato AI Translations for Polylang supporta i blocchi solo-PHP fin da subito, allo stesso modo in cui supporta Gutenberg, Bricks, Elementor e altri page builder. Non è richiesta alcuna configurazione aggiuntiva.
Tutti gli attributi di tipo string vengono registrati automaticamente per la traduzione. Se un campo specifico non deve essere tradotto — un riferimento interno, un URL, un codice numerico memorizzato come stringa —, puoi escluderlo con un filtro.
Per il blocco di testimonianza di questo articolo, il nome del recensore, l'azienda e il testo del corpo vengono tradotti tutti automaticamente, senza alcuna configurazione oltre all'installazione del plugin.
Cosa (ancora) non possono fare i blocchi solo-PHP
Le attuali limitazioni dei blocchi solo-PHP:
- Nessun blocco interno né annidamento. Non puoi inserire altri blocchi all'interno di un blocco solo-PHP.
- Nessuna modifica del testo formattato sulla tela. Il componente
RichTextrichiede JavaScript. I controlli di testo si visualizzano solo come campo di testo nella barra laterale. - I campi stringa della barra laterale sono a riga singola. Un attributo
stringdiventa unTextControl, non unTextareaControl, il che non è ideale per testi più lunghi. - Nessun attributo di selezione di immagini o media. Il supporto per il caricamento di immagini/file è previsto per una versione futura tramite la Block Fields API.
- L'anteprima dell'editor ha un ritardo di andata e ritorno. Le modifiche agli attributi attivano una richiesta alla REST API per il nuovo rendering sul server, quindi l'anteprima non si aggiorna istantaneamente.
Per i blocchi strutturati semplici — testimonianze, CTA, avvisi, biografie dell'autore, schede aziendali —, i blocchi solo-PHP colgono nel segno. Per qualsiasi cosa che richieda la modifica formattata sulla tela, la registrazione con JavaScript resta lo strumento giusto.
Cosa viene dopo
I blocchi solo-PHP di WordPress 7.0 mettono lo sviluppo di blocchi alla portata di qualsiasi sviluppatore PHP. Un file PHP, una chiamata a register_block_type(), e hai un blocco Gutenberg pienamente funzionante con controlli nella barra laterale, un'anteprima dal vivo sulla tela e il supporto agli stili nativi. Scrivi PHP. Ottieni un blocco. Nessun tooling. Nessuna compilazione. Nessun JavaScript.
Se stai creando siti multilingue, Gato AI Translations funziona perfettamente con i blocchi solo-PHP: il tuo contenuto è traducibile fin dal primo giorno.
Pronto ad andare oltre?
- Developing WordPress blocks without JSX or a build process — per gli sviluppatori che vogliono aggiungere un minimo di JavaScript senza una pipeline di compilazione completa
- Beginner WordPress Developer course — una base completa per lo sviluppo di blocchi
