{"id":83621,"date":"2026-03-27T11:29:56","date_gmt":"2026-03-27T10:29:56","guid":{"rendered":"https:\/\/kinqsta.com\/it\/?p=83621&#038;preview=true&#038;preview_id=83621"},"modified":"2026-03-30T11:44:33","modified_gmt":"2026-03-30T10:44:33","slug":"blocchi-gutenberg-in-php","status":"publish","type":"post","link":"https:\/\/kinqsta.com\/it\/blog\/blocchi-gutenberg-in-php\/","title":{"rendered":"Come creare blocchi Gutenberg solo in PHP"},"content":{"rendered":"<p>Per anni, imparare a sviluppare blocchi Gutenberg ha richiesto una conoscenza approfondita di tecnologie come React e Node.js, oltre a complesse procedure di compilazione e strumenti JavaScript.<\/p>\n<p>Tuttavia, lo sviluppo di WordPress si sta evolvendo ed \u00e8 ora possibile creare e gestire blocchi Gutenberg interamente in PHP.<\/p>\n<p>Ci\u00f2 \u00e8 particolarmente vantaggioso per chi preferisce evitare lo sviluppo con React e il JavaScript lato server (JS). Riduce la curva di apprendimento, semplifica l&#8217;esperienza di sviluppatori e sviluppatrici e consente prestazioni pi\u00f9 elevate eliminando il sovraccarico di script front-end non necessari.<\/p>\n<p>Nelle sezioni seguenti vedremo come sfruttare queste nuove funzionalit\u00e0 per creare blocchi Gutenberg esclusivamente in PHP. Nel corso del tutorial impareremo a creare siti web WordPress pi\u00f9 snelli, veloci e facili da mantenere.<\/p>\n<p>Molto interessante, vero? Cominciamo.<\/p>\n<p><aside role=\"note\" class=\"wp-block-kinsta-notice is-style-important\">\n            <h3>Important<\/h3>\n        <p>I blocchi solo PHP descritti in questo articolo sono attualmente in fase sperimentale e potrebbero subire modifiche. <strong>Non utilizzare questa funzionalit\u00e0 in ambiente di produzione!<\/strong><\/p>\n<\/aside>\n<br \/>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc><\/p>\n<h2>Cosa sono i blocchi solo PHP e perch\u00e9 sono importanti?<\/h2>\n<p>In passato, la creazione di un blocco Gutenberg richiedeva competenze avanzate di programmazione in JavaScript lato server e React. Ci\u00f2 ha rappresentato un ostacolo all&#8217;adozione dell&#8217;editor a blocchi da parte degli sviluppatori WordPress di lunga data che forse non possedevano le competenze necessarie in <a href=\"https:\/\/kinqsta.com\/it\/blog\/react-js\/\">React<\/a> e <a href=\"https:\/\/kinqsta.com\/it\/blog\/node-js\/\">Node.js<\/a> knowledge.<\/p>\n<p>Le cose per\u00f2 stanno cambiando. A partire da <a href=\"https:\/\/make.wordpress.org\/core\/2025\/10\/08\/whats-new-in-gutenberg-21-8-08-october\/\" target=\"_blank\" rel=\"noopener noreferrer\">Gutenberg 21.8<\/a>, si possono registrare i blocchi Gutenberg utilizzando nient&#8217;altro che <a href=\"https:\/\/kinqsta.com\/it\/blog\/benchmark-php\/\">PHP<\/a>. In questo modo si evitano le complessit\u00e0 legate alla configurazione di un ambiente Node.js per chi non lavora con JavaScript lato server.<\/p>\n<p>Con la registrazione dei blocchi esclusivamente in PHP, \u00e8 possibile registrare e visualizzare i blocchi sia nell&#8217;editor che nell&#8217;interfaccia pubblica utilizzando lo stesso codice PHP. Ci\u00f2 incoraggia i siti che utilizzano temi ibridi o le tradizionali funzioni PHP e <a href=\"https:\/\/kinqsta.com\/it\/blog\/shortcode-wordpress\/\">shortcode<\/a> ad adottare e sviluppare contenuti nell&#8217;editor di blocchi.<\/p>\n<p>Per chi volesse saperne di pi\u00f9, ecco le principali richieste di pull su GitHub dedicate ai blocchi esclusivamente in PHP.<\/p>\n<ul>\n<li><a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/71794\" target=\"_blank\" rel=\"noopener noreferrer\">Consentire la registrazione di blocchi solo PHP<\/a>: questa PR implementa la registrazione automatica dei blocchi lato server e rinomina il supporto <code>auto_ssr<\/code> in<code>auto_register<\/code>.<\/li>\n<li><a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/73556\" target=\"_blank\" rel=\"noopener noreferrer\">Blocchi solo PHP: trasmettere tutti i metadati dalla registrazione PHP al client<\/a>: i blocchi solo PHP con supporto <code>auto_register<\/code> ora trasmettono tutti i metadati al client dalla registrazione PHP.<\/li>\n<li><a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/74102\">Blocchi solo PHP: generare controlli dell&#8217;inspector dagli attributi<\/a>: questa PR introduce la generazione automatica dell&#8217;interfaccia utente (controlli dell&#8217;Inspector) in base agli attributi dichiarati sul server.<\/li>\n<\/ul>\n<h2>Come creare il primo blocco Gutenberg solo in PHP<\/h2>\n<p>Quando un blocco \u00e8 registrato solo sul lato server \u2014 senza file JS \u2014 e il nuovo flag di supporto <code>auto_register<\/code> \u00e8 impostato su <code>true<\/code>, l&#8217;editor utilizza automaticamente il componente <code>ServerSideRender<\/code> per registrare il blocco sul lato client e visualizzarne l&#8217;anteprima. In sostanza, il contenuto del blocco viene ora generato direttamente dal codice PHP sia nell&#8217;editor che nel frontend.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-important\">\n            <h3>Important<\/h3>\n        <p>Gli esempi riportati in questo articolo funzioneranno solo se sul tuo sito web di sviluppo \u00e8 installata la versione <a href=\"https:\/\/make.wordpress.org\/core\/2025\/12\/17\/gutenberg-22-3-december-17\/\" target=\"_blank\" rel=\"noopener noreferrer\">Gutenberg 22.3<\/a> o una superiore.<\/p>\n<\/aside>\n\n<p>Per chiarire, ecco un semplice esempio in PHP che registra un blocco utilizzando il metodo in solo PHP.<\/p>\n<pre><code class=\"language-php\">\/**\n * Render callback (frontend and editor)\n *\/\nfunction my_php_only_block_render( $attributes ) {\n\treturn '&lt;div&gt;\n\t\t&lt;h3&gt;\ud83d\ude80 PHP-only Block&lt;\/h3&gt;\n\t\t&lt;p&gt;This block was created with only PHP!&lt;\/p&gt;\n\t&lt;\/div&gt;';\n}\n\n\/**\n * Register the block on the 'init' hook.\n *\/\nadd_action( 'init', function() {\n\tregister_block_type( 'my-plugin\/php-only-test-block', array(\n\t\t'title'           =&gt; 'My PHP-only Block',\n\t\t'icon'            =&gt; 'welcome-learn-more',\n\t\t'category'        =&gt; 'text',\n\t\t'render_callback' =&gt; 'my_php_only_block_render',\n\t\t'supports'        =&gt; array(\n\t\t\t\/\/ Automatically registers the block in the Editor JS (previously auto_ssr)\n\t\t\t'auto_register' =&gt; true, \n\t\t),\n\t) );\n});<\/code><\/pre>\n<p>Puoi provare questo codice copiandolo e incollandolo nel file principale di un plugin personalizzato. Dopo aver attivato il plugin, dovresti vedere il blocco &#8220;My PHP-Only Block&#8221; nel Block Inserter.<\/p>\n<figure id=\"attachment_206054\" aria-describedby=\"caption-attachment-206054\" style=\"width: 1644px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-206054\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2026\/02\/basic-php-only-block.png\" alt=\"Un semplice blocco scritto solo in PHP nell'editor dei blocchi\" width=\"1644\" height=\"656\"><figcaption id=\"caption-attachment-206054\" class=\"wp-caption-text\">Un semplice blocco scritto solo in PHP<\/figcaption><\/figure>\n<p>La <a href=\"https:\/\/kinqsta.com\/it\/blog\/blocchi-dinamici\/#register-the-block-on-the-server\">funzione <code>register_block_type<\/code><\/a> registra un tipo di blocco sul server. Ora <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/73556\" target=\"_blank\" rel=\"noopener noreferrer\">include il nuovo <code>supporto per <\/code>auto_register<\/a>, indicando a Gutenberg di trasmettere i metadati dalla registrazione PHP.<\/p>\n<p>La funzione accetta due argomenti:<\/p>\n<ul>\n<li>Il nome del tipo di blocco, compreso lo spazio dei nomi. In questo esempio, il nome del blocco \u00e8 <code>my-plugin\/php-only-test-block<\/code>.<\/li>\n<li>Un array di argomenti per il tipo di blocco. Nel codice sopra riportato, abbiamo impostato <code>title<\/code>, <code>icon<\/code>, <code>category<\/code>, <code>render_callback<\/code> e <code>supports<\/code>. Anche in questo caso, per i tipi di blocco solo PHP, l&#8217;array <code>supports<\/code> deve includere <code>'auto_register' =&gt; true<\/code>.<\/li>\n<\/ul>\n<p>Oltre a semplificare la creazione di tipi di blocchi personalizzati e a facilitarne l&#8217;integrazione nei temi ibridi, i blocchi solo PHP possono essere utilizzati come contenitori per funzioni PHP legacy e shortcode. Inoltre, l&#8217;uso dei blocchi solo PHP apre la strada a nuove opportunit\u00e0 per integrazioni personalizzate e funzionalit\u00e0 lato server.<\/p>\n<p>Secondo <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/issues\/71792\">H\u00e9ctor Priethor<\/a>,<\/p>\n<blockquote><p>Un modello di registrazione interamente basato su PHP semplificherebbe i requisiti minimi per lo sviluppo di blocchi, rendendoli accessibili a un pubblico pi\u00f9 ampio di sviluppatori e contribuendo a far crescere l&#8217;ecosistema dei blocchi al di l\u00e0 dell&#8217;uso avanzato di JavaScript.<\/p><\/blockquote>\n<h2>Utilizzo degli attributi per creare l&#8217;interfaccia utente delle impostazioni del blocco<\/h2>\n<p>La <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/74102\" target=\"_blank\" rel=\"noopener noreferrer\">PR 74102<\/a> consente la generazione automatica di controlli di verifica a partire dalle definizioni degli attributi dei blocchi. Ci\u00f2 permette agli utenti di configurare l&#8217;aspetto e le funzionalit\u00e0 dei blocchi solo PHP come qualsiasi blocco Gutenberg registrato tramite JavaScript.<\/p>\n<p>In precedenza, in React era necessario creare manualmente un file <code>edit.js<\/code> e definire i vari controlli di impostazione utilizzando i componenti React.<\/p>\n<p>Ora, Gutenberg legge le definizioni degli attributi e genera automaticamente i campi di immissione corrispondenti nell&#8217;editor di WordPress.<\/p>\n<p>Il sistema mappa i tipi di dati definiti nell&#8217;array <code>attributes<\/code> alle definizioni dei campi <code>DataForm<\/code>.<\/p>\n<ul>\n<li><code>'type' =&gt; 'string'<\/code> crea un campo di testo.<\/li>\n<li><code>'type' =&gt; 'number'<\/code> crea un campo numerico.<\/li>\n<li><code>'type' =&gt; 'integer'<\/code> crea un campo intero.<\/li>\n<li><code>'type' =&gt; 'boolean'<\/code> crea una casella di selezione.<\/li>\n<li><code>'type' =&gt; 'string'<\/code> with <code>'enum' =&gt; array()<\/code> crea un campo di selezione.<\/li>\n<\/ul>\n<p>Ti accorgerai che puoi utilizzare solo alcuni controlli. Se hai bisogno di controlli specifici, come <code>RichText<\/code>, <code>RangeControl<\/code> o <code>ToggleControl<\/code>, dovrai comunque optare per l&#8217;approccio JS\/React.<\/p>\n<p>Tuttavia, questa novit\u00e0 offre notevoli vantaggi. Le barriere all&#8217;ingresso vengono ulteriormente ridotte e non sar\u00e0 necessario imparare React, Webpack o NPM per creare blocchi personalizzati con semplici opzioni modificabili.<\/p>\n<p>Nell&#8217;esempio seguente, estendiamo il blocco di esempio mostrato nella sezione precedente aggiungendo alcuni attributi.<\/p>\n<pre><code class=\"language-php\">\/**\n * 1. Define the block's HTML output.\n *\/\nfunction my_php_only_block_render( $attributes ) {\n\t\/\/ Extract attributes\n\t$title   = esc_html( $attributes['blockTitle'] );\n\t$count   = intval( $attributes['itemCount'] );\n\t$enabled = $attributes['isEnabled']; \/\/ Boolean from the ToggleControl\n\t$size    = esc_attr( $attributes['displaySize'] );\n\t\n\t\/\/ Start building the output\n\t$output = sprintf( '&lt;div class=\"my-php-block\" style=\"font-size: %s; border: 1px solid #ccc; padding: 15px;\"&gt;', \n\t\t$size === 'large' ? '20px' : ($size === 'small' ? '12px' : '16px') \n\t);\n\t\n\t$output .= sprintf( '&lt;h3&gt;\ud83d\ude80 %s&lt;\/h3&gt;', $title );\n\t\n\t\/\/ If the toggle is ON, show the list. If OFF, show a fallback message.\n\tif ( $enabled ) {\n\t\t$output .= '&lt;ul&gt;';\n\t\tfor ( $i = 1; $i &lt;= $count; $i++ ) {\n\t\t\t$output .= sprintf( '&lt;li&gt;Item %d&lt;\/li&gt;', $i );\n\t\t}\n\t\t$output .= '&lt;\/ul&gt;';\n\t} else {\n\t\t$output .= '&lt;p&gt;&lt;em&gt;The list is currently disabled.&lt;\/em&gt;&lt;\/p&gt;';\n\t}\n\t\n\t$output .= '&lt;\/div&gt;';\n\treturn $output;\n}\n\n\/**\n * 2. Register the block on 'init'.\n *\/\nadd_action( 'init', function() {\n\tregister_block_type( 'my-plugin\/php-only-test-block', array(\n\t\t'title'           =&gt; 'My PHP-only Block',\n\t\t'icon'            =&gt; 'welcome-learn-more',\n\t\t'category'        =&gt; 'text',\n\t\t'render_callback' =&gt; 'my_php_only_block_render',\n\n\t\t\/\/ Attributes used to generate the Inspector UI\n\t\t'attributes'      =&gt; array(\n\t\t\t'blockTitle'  =&gt; array(\n\t\t\t\t'type'    =&gt; 'string',\n\t\t\t\t'default' =&gt; 'PHP-only Block',\n\t\t\t),\n\t\t\t'itemCount'   =&gt; array(\n\t\t\t\t'type'    =&gt; 'integer',\n\t\t\t\t'default' =&gt; 3,\n\t\t\t),\n\t\t\t'isEnabled'   =&gt; array(\n\t\t\t\t'type'    =&gt; 'boolean',\n\t\t\t\t'default' =&gt; true,\n\t\t\t),\n\t\t\t'displaySize' =&gt; array(\n\t\t\t\t'type'    =&gt; 'string',\n\t\t\t\t'enum'    =&gt; array( 'small', 'medium', 'large' ),\n\t\t\t\t'default' =&gt; 'medium',\n\t\t\t),\n\t\t),\n\n\t\t'supports'        =&gt; array(\n\t\t\t'auto_register' =&gt; true, \n\t\t),\n\t) );\n});<\/code><\/pre>\n<p>Basta dare un&#8217;occhiata a questo codice per rendersi conto di quanto sia facile registrare un blocco personalizzato con tutte le sue impostazioni di configurazione utilizzando la nuova API. Gli attributi ora vengono utilizzati non solo per memorizzare i dati inseriti dall&#8217;utente, ma anche per definire lo schema dell&#8217;interfaccia utente. Il codice sopra riportato svolge le seguenti operazioni:<\/p>\n<ul>\n<li>La funzione <code>register_block_type<\/code> registra il tipo di blocco <code>my-plugin\/php-only-test-block<\/code>.<\/li>\n<li>Il secondo argomento passato alla funzione \u00e8 un array contenente i seguenti elementi: <code>title<\/code>, <code>icon<\/code>, <code>category<\/code>, <code>render_callback<\/code>, <code>attributes<\/code>, e <code>supports<\/code>.<\/li>\n<li>L&#8217;array <code>attributes<\/code> contiene gli attributi del blocco. Nell&#8217;esempio sopra riportato, l&#8217;array include gli elementi <code>blockTitle<\/code>, <code>itemCount<\/code>, <code>isEnabled<\/code> e <code>displaySize<\/code>.<\/li>\n<li><code>'auto_register' =&gt; true<\/code> abilita la registrazione automatica lato server.<\/li>\n<\/ul>\n<p>Ecco cosa fa la funzione di callback <code>my_php_only_block_render<\/code>:<\/p>\n<ul>\n<li>In primo luogo, la funzione estrae i valori degli attributi dall&#8217;array <code>$attributes<\/code> e li assegna alle variabili <code>$title<\/code>, <code>$count<\/code>, <code>$enabled<\/code> e <code>$size<\/code>.<\/li>\n<li>Quindi, genera il contenuto del blocco.<\/li>\n<\/ul>\n<p>Ecco il risultato sullo schermo:<\/p>\n<figure id=\"attachment_206110\" aria-describedby=\"caption-attachment-206110\" style=\"width: 2074px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-206110\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2026\/02\/php-only-block-settings.png\" alt=\"Un blocco solo PHP con impostazioni del blocco\" width=\"2074\" height=\"1102\"><figcaption id=\"caption-attachment-206110\" class=\"wp-caption-text\">Un blocco solo PHP con impostazioni del blocco<\/figcaption><\/figure>\n<h2>Un esempio concreto di blocchi solo PHP<\/h2>\n<p>Sebbene ci siano molti casi in cui JavaScript \u00e8 ancora necessario, \u00e8 gi\u00e0 possibile fare molto con i blocchi basati esclusivamente su PHP, specialmente se utilizzati insieme alle propriet\u00e0 dei blocchi.<\/p>\n<p>Nell&#8217;esempio seguente, utilizziamo la <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/get_block_wrapper_attributes\/\" target=\"_blank\" rel=\"noopener noreferrer\">funzione <code>get_block_wrapper_attributes()<\/code><\/a>, che genera una serie di attributi per il blocco corrente in fase di rendering. Il blocco ricever\u00e0 automaticamente i colori, i bordi e le ombre impostati dall&#8217;utente e applicher\u00e0 gli stili corrispondenti al contenitore principale. In questo modo, il blocco \u00e8 personalizzabile tramite gli strumenti nativi di Gutenberg, proprio come un blocco basato su React.<\/p>\n<p>Per vedere come funziona, crea una cartella <code>smart-pricing-widget<\/code> sul tuo computer. All&#8217;interno di questa cartella, crea un file <code>style.css<\/code> con il seguente codice CSS:<\/p>\n<pre><code class=\"language-css\">\/* style.css *\/\n.pricing-card {\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: center;\n\ttext-align: center;\n\tbox-sizing: border-box;\n}\n\n.pricing-card h3 {\n\tmargin: 0;\n\tfont-size: 1.5rem;\n}\n\n.pricing-card .price-value {\n\tfont-size: 3.5rem;\n\tfont-weight: 800;\n\tmargin: 15px 0;\n}\n\n.pricing-card ul {\n\tlist-style: none;\n\tpadding: 25px 0;\n\tmargin: 20px 0;\n\twidth: 100%;\n\tborder-top: 1px solid rgba(128,128,128,0.3);\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 12px;\n}\n\n.pricing-card li {\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tgap: 10px;\n}\n\n.pricing-card .cta-button {\n\tmargin-top: auto;\n\tpadding: 15px 25px;\n\tborder-radius: 8px;\n\ttext-decoration: none;\n\tfont-weight: bold;\n\ttransition: opacity 0.2s;\n}\n\n.pricing-card .cta-button:hover {\n\topacity: 0.8;\n}\n\n\/* Theme Variations *\/\n.pricing-card.theme-light { background-color: #ffffff; color: #000000; }\n.pricing-card.theme-light .cta-button { background-color: #21759b; color: #ffffff; }\n\n.pricing-card.theme-dark { background-color: #1a1a1a; color: #ffffff; }\n.pricing-card.theme-dark .cta-button { background-color: #ffffff; color: #1a1a1a; }\n\n.pricing-card.theme-blue { background-color: #21759b; color: #ffffff; }\n.pricing-card.theme-blue .cta-button { background-color: #000000; color: #ffffff; }\n\n\/* Utility Classes *\/\n.pricing-card .is-full-width {\n\twidth: 100%;\n\tdisplay: block;\n\talign-self: stretch;\n}<\/code><\/pre>\n<p>Non commenteremo questo codice, poich\u00e9 si tratta di un semplice foglio di stile per il tuo blocco widget.<\/p>\n<p>Ora crea il file principale del tuo plugin, chiamalo <code>smart-pricing-widget.php<\/code> e incolla il seguente codice:<\/p>\n<pre><code class=\"language-php\">&lt;?php\n\/**\n * Plugin Name: Smart Pricing Widget\n * Plugin URI:  https:\/\/example.com\/\n * Description: PHP-only Pricing Table block\n * Version:     1.2.0\n * Author:      Your Name\n * Text Domain: smart-pricing-widget\n *\/\n\nif ( ! defined( 'ABSPATH' ) ) exit;\n\n\/**\n * Render callback\n *\/\nfunction render_smart_pricing_block( $attributes ) {\n\t$plan_name = esc_html( $attributes['planName'] );\n\t$price     = intval( $attributes['price'] );\n\t$theme     = $attributes['blockTheme'];\n\t$btn_text  = esc_html( $attributes['buttonText'] );\n\t$btn_size  = $attributes['buttonSize'];\n\n\t$features_raw = $attributes['featuresList'];\n\t$features_array = array_filter( array_map( 'trim', explode( ',', $features_raw ) ) );\n\n\t$wrapper_attributes = wp_kses_data( get_block_wrapper_attributes( array(\n\t\t'class' =&gt; \"pricing-card theme-{$theme}\",\n\t) ) );\n\n\t$output = sprintf( '&lt;div %s&gt;', $wrapper_attributes );\n\t$output .= sprintf( '&lt;h3&gt;%s&lt;\/h3&gt;', $plan_name );\n\t$output .= sprintf( '&lt;div class=\"price-value\"&gt;\u20ac%d&lt;\/div&gt;', $price );\n\n\tif ( ! empty( $features_array ) ) {\n\t\t$output .= '&lt;ul&gt;';\n\t\tforeach ( $features_array as $feature ) {\n\t\t\t$is_checked = strpos( $feature, '+' ) === 0;\n\t\t\t$clean_text = esc_html( ltrim( $feature, '+- ' ) );\n\t\t\t$icon       = $is_checked ? '\u2705' : '\u274c';\n\t\t\t$style      = $is_checked ? '' : 'style=\"opacity: 0.6;\"';\n\t\t\t\n\t\t\t$output .= sprintf( '&lt;li %s&gt;&lt;span&gt;%s&lt;\/span&gt; %s&lt;\/li&gt;', $style, $icon, $clean_text );\n\t\t}\n\t\t$output .= '&lt;\/ul&gt;';\n\t}\n\n\t$btn_class = 'cta-button' . ( $btn_size === 'full' ? ' is-full-width' : '' );\n\t$output .= sprintf( '&lt;a href=\"#\" class=\"%s\"&gt;%s&lt;\/a&gt;', esc_attr( $btn_class ), $btn_text );\n\t$output .= '&lt;\/div&gt;';\n\n\treturn $output;\n}\n\n\/**\n * Register Assets and Block\n *\/\nadd_action( 'init', function() {\n\t\/\/ 1. Register the CSS file\n\twp_register_style(\n\t\t'smart-pricing-style',\n\t\tplugins_url( 'style.css', __FILE__ ),\n\t\tarray(),\n\t\t'1.2.0'\n\t);\n\n\t\/\/ 2. Register the Block\n\tregister_block_type( 'tutorial\/smart-pricing', array(\n\t\t'api_version'     =&gt; 3,\n\t\t'title'           =&gt; 'Pricing Card',\n\t\t'icon'            =&gt; 'cart',\n\t\t'category'        =&gt; 'widgets',\n\t\t'render_callback' =&gt; 'render_smart_pricing_block',\n\t\t\/\/ Link the registered style handle here\n\t\t'style'           =&gt; 'smart-pricing-style',\n\t\t'attributes'      =&gt; array(\n\t\t\t'planName'     =&gt; array( 'type' =&gt; 'string', 'default' =&gt; 'Professional' ),\n\t\t\t'price'        =&gt; array( 'type' =&gt; 'integer', 'default' =&gt; 49 ),\n\t\t\t'buttonText'   =&gt; array( 'type' =&gt; 'string', 'default' =&gt; 'Choose Plan' ),\n\t\t\t'buttonSize'   =&gt; array( 'type' =&gt; 'string', 'enum' =&gt; array( 'auto', 'full' ), 'default' =&gt; 'auto' ),\n\t\t\t'blockTheme'   =&gt; array( 'type' =&gt; 'string', 'enum' =&gt; array( 'light', 'dark', 'blue' ), 'default' =&gt; 'light' ),\n\t\t\t'featuresList' =&gt; array( 'type' =&gt; 'string', 'default' =&gt; \"+ Support, + Updates, - Domain\" ),\n\t\t),\n\t\t'supports'        =&gt; array(\n\t\t\t'auto_register' =&gt; true,\n\t\t\t'color'         =&gt; array( 'background' =&gt; true, 'text' =&gt; true ),\n\t\t\t'spacing'       =&gt; array( 'margin' =&gt; true, 'padding' =&gt; true ),\n\t\t\t'typography'    =&gt; array( 'fontSize' =&gt; true ),\n\t\t\t'shadow'        =&gt; true,\n\t\t\t'__experimentalBorder' =&gt; array( 'color' =&gt; true, 'radius' =&gt; true, 'style' =&gt; true, 'width' =&gt; true ),\n\t\t\t'border'        =&gt; array( 'color' =&gt; true, 'radius' =&gt; true, 'style' =&gt; true, 'width' =&gt; true ),\n\t\t),\n\t) );\n});<\/code><\/pre>\n<p>Questo script include due funzioni. La funzione <code>register_block_type()<\/code> costituisce il cuore del tuo plugin. Ecco i suoi elementi principali:<\/p>\n<ul>\n<li>Il primo argomento \u00e8 l&#8217;identificatore del blocco, compreso lo spazio dei nomi (<code>tutorial\/smart-pricing<\/code>).<\/li>\n<li>Il secondo argomento \u00e8 un array di argomenti. Nel codice sopra riportato, abbiamo impostato la versione dell&#8217;API, il titolo, l&#8217;icona, la categoria, la funzione di callback di rendering, lo stile, gli attributi e i <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/block-api\/block-supports\/\" target=\"_blank\" rel=\"noopener noreferrer\">supporti<\/a>.<\/li>\n<li>Gli attributi presenti nell&#8217;array generano i controlli che gli utenti utilizzeranno per aggiungere contenuti e configurare il blocco. L&#8217;elemento <code>type<\/code> specifica il tipo di controllo da aggiungere all&#8217;inspector del blocco. In questo esempio, si tratta di campi di testo (<code>'type\u2019 =&gt; 'string\u2019<\/code>), un numero intero (<code>'type\u2019 =&gt; 'integer\u2019<\/code>) e un paio di menu a tendina (<code>'type\u2019 =&gt; 'string\u2019, 'enum\u2019 =&gt; array()<\/code>).<\/li>\n<li>Gli elementi dell&#8217;array <code>supports<\/code> aggiungono funzionalit\u00e0 che rendono personalizzabile lo stile del blocco. Come accennato in precedenza, l&#8217;unico supporto richiesto in un blocco basato esclusivamente su PHP \u00e8 <code>auto_register<\/code>, che consente la generazione automatica dell&#8217;interfaccia utente per gli attributi personalizzati. Gli altri supporti dichiarati sopra includono colore, spaziatura, tipografia, ombra e bordo.<\/li>\n<\/ul>\n<p>La funzione di callback <code>render_smart_pricing_block()<\/code> genera il codice HTML del blocco. Di seguito \u00e8 riportata una descrizione dettagliata del funzionamento di questa funzione:<\/p>\n<ul>\n<li>Estrae e pulisce gli attributi del blocco, quindi aggiunge il codice CSS che determina l&#8217;aspetto del blocco nell&#8217;interfaccia utente e nell&#8217;editor.<\/li>\n<li>Le caratteristiche da visualizzare nel blocco (<code>$attributes['featuresList'];<\/code>) vengono gestite separatamente. Al momento non \u00e8 possibile aggiungere controlli avanzati alla barra laterale delle impostazioni del blocco. Per creare un elenco, come ad esempio un elenco di caratteristiche, \u00e8 possibile utilizzare solo un semplice campo di testo. In questo esempio, \u00e8 necessario inserire manualmente le caratteristiche del prodotto, separate da virgole.<\/li>\n<li>La variabile <code>$wrapper_attributes<\/code> \u00e8 un contenitore per gli attributi del wrapper forniti dalla funzione <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/get_block_wrapper_attributes\/\"><code>get_block_wrapper_attributes<\/code><\/a>. Questa funzione non si limita ad aggiungere le classi specificate nel codice (<code>pricing-card theme-{$theme}<\/code>), ma recupera automaticamente tutte le personalizzazioni di stile che l&#8217;utente imposta nell&#8217;ispettore dei blocchi, inclusi colori, bordi, riempimento, margini, ombreggiatura, tipografia e le classi standard dei blocchi (<code>wp-block-tutorial-smart-pricing<\/code>).<\/li>\n<li><a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/wp_kses_data\/\"><code>wp_kses_data<\/code><\/a> verifica che nella stringa non siano presenti tag o script dannosi (XSS).<\/li>\n<li>Il resto del codice genera il contenuto del blocco.<\/li>\n<\/ul>\n<p>Attiva il plugin e crea un nuovo articolo o una nuova pagina. Apri l&#8217;inseritore di blocchi e scorri verso il basso fino alla sezione Widget. Qui dovresti vedere il blocco &#8220;Pricing Card&#8221;, riconoscibile dall&#8217;icona del carrello.<\/p>\n<figure id=\"attachment_206128\" aria-describedby=\"caption-attachment-206128\" style=\"width: 2034px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-206128\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2026\/02\/php-only-block-example.png\" alt=\"Un blocco personalizzato solo PHP nell'editor di blocchi\" width=\"2034\" height=\"1322\"><figcaption id=\"caption-attachment-206128\" class=\"wp-caption-text\">Un blocco personalizzato solo PHP nell&#8217;editor di blocchi<\/figcaption><\/figure>\n<p>L&#8217;immagine qui sopra mostra il blocco con il tema chiaro predefinito.<\/p>\n<p>Nell&#8217;immagine qui sotto puoi vedere la versione scura del blocco e le impostazioni che abbiamo configurato nel plugin.<\/p>\n<figure id=\"attachment_206129\" aria-describedby=\"caption-attachment-206129\" style=\"width: 2188px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-206129\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2026\/02\/php-only-dark-theme-block-settings.png\" alt=\"Il blocco solo PHP con le impostazioni del blocco\" width=\"2188\" height=\"1652\"><figcaption id=\"caption-attachment-206129\" class=\"wp-caption-text\">Il blocco in solo PHP con le impostazioni del blocco<\/figcaption><\/figure>\n<p>L&#8217;immagine seguente mostra i controlli di stile che abbiamo aggiunto con i supporti del blocco.<\/p>\n<figure id=\"attachment_206130\" aria-describedby=\"caption-attachment-206130\" style=\"width: 2104px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-206130\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2026\/02\/php-only-customized-dark-theme.png\" alt=\"Il tema scuro del blocco in solo PHP con colori personalizzati\" width=\"2104\" height=\"1310\"><figcaption id=\"caption-attachment-206130\" class=\"wp-caption-text\">Il tema scuro del blocco in solo PHP con colori personalizzati<\/figcaption><\/figure>\n<p>Vale inoltre la pena notare che gli stili aggiunti dai supporti hanno la precedenza sugli stili del tema del blocco. Ci\u00f2 consente una maggiore personalizzazione dell&#8217;aspetto del blocco, come mostrato nell&#8217;immagine seguente:<\/p>\n<figure id=\"attachment_206131\" aria-describedby=\"caption-attachment-206131\" style=\"width: 2406px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-206131\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2026\/02\/customized-php-only-blocks.png\" alt=\"Una tabella dei prezzi per 3 livelli di servizio con tre istanze del blocco in solo PHP\" width=\"2406\" height=\"1362\"><figcaption id=\"caption-attachment-206131\" class=\"wp-caption-text\">Una tabella dei prezzi per 3 livelli di servizio con tre istanze del blocco in solo PHP<\/figcaption><\/figure>\n<h2>Convertire gli shortcode tradizionali in blocchi Gutenberg utilizzando solo PHP<\/h2>\n<p>Uno degli usi pi\u00f9 immediati dei blocchi PHP \u00e8 quello di contenitori per gli shortcode. Con Gutenberg \u00e8 ancora possibile utilizzare gli shortcode nei propri contenuti, ma \u00e8 necessario inserirli manualmente in un blocco Shortcode, il che non \u00e8 proprio il massimo della comodit\u00e0.<\/p>\n<p>Supponiamo che tu abbia il seguente shortcode:<\/p>\n<pre><code class=\"language-php\">function my_custom_alert_shortcode( $atts ) {\n\t$options = shortcode_atts( array(\n\t\t'type'    =&gt; 'info',\n\t\t'message' =&gt; 'Default alert message',\n\t), $atts );\n\n\t$styles = array(\n\t\t'info'    =&gt; 'background: #d1ecf1; color: #0c5460; border-color: #bee5eb;',\n\t\t'warning' =&gt; 'background: #fff3cd; color: #856404; border-color: #ffeeba;',\n\t\t'error'   =&gt; 'background: #f8d7da; color: #721c24; border-color: #f5c6cb;'\n\t);\n\n\t$style = $styles[ $options['type'] ] ?? $styles['info'];\n\n\treturn sprintf(\n\t\t'&lt;div class=\"sc-alert-box\" style=\"%s padding: 20px; border: 1px solid; border-radius: 6px; margin: 10px 0;\"&gt;\n\t\t\t&lt;strong style=\"text-transform: uppercase;\"&gt;%s:&lt;\/strong&gt; %s\n\t\t&lt;\/div&gt;',\n\t\tesc_attr( $style ),\n\t\tesc_html( $options['type'] ),\n\t\tesc_html( $options['message'] )\n\t);\n}\nadd_shortcode( 'sc_alert', 'my_custom_alert_shortcode' );<\/code><\/pre>\n<p>Questo codice genera un semplice riquadro che puoi inserire nei contenuti utilizzando il seguente shortcode:<\/p>\n<pre><code class=\"language-text\">[sc_alert type=\"alert\" message=\"Hello\"]<\/code><\/pre>\n<p>In Gutenberg, dovrai utilizzare un blocco &#8220;Shortcode&#8221; per inserire il riquadro nel tuo contenuto, come mostrato nell&#8217;immagine seguente:<\/p>\n<figure id=\"attachment_206137\" aria-describedby=\"caption-attachment-206137\" style=\"width: 1304px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-206137\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2026\/02\/shortcode-block.png\" alt=\"Un blocco Shortcode\" width=\"1304\" height=\"272\"><figcaption id=\"caption-attachment-206137\" class=\"wp-caption-text\">Un blocco Shortcode<\/figcaption><\/figure>\n<p>La situazione cambia completamente con i blocchi solo PHP. Ora \u00e8 possibile inserire lo shortcode in un blocco Gutenberg solo PHP e configurarlo tramite i controlli dell&#8217;interfaccia utente. Ecco il codice da aggiungere al plugin:<\/p>\n<pre><code class=\"language-php\">\/**\n * Rendering callback\n *\/\nfunction render_shortcode_alert_wrapper_block( $attributes ) {\n\n\t$type    = esc_attr( $attributes['alertType'] );\n\t$message = esc_attr( $attributes['alertMessage'] );\n\n\t$shortcode_string = sprintf( '[sc_alert type=\"%s\" message=\"%s\"]', $type, $message );\n\n\t$wrapper_attributes = wp_kses_data( get_block_wrapper_attributes( array(\n\t\t'class' =&gt; 'wp-block-shortcode-alert-wrapper',\n\t) ) );\n\n\treturn sprintf(\n\t\t'&lt;div %s&gt;%s&lt;\/div&gt;',\n\t\t$wrapper_attributes,\n\t\tdo_shortcode( $shortcode_string )\n\t);\n}\n\n\/**\n * Register the block type on the server\n *\/\nadd_action( 'init', function() {\n\tregister_block_type( 'tutorial\/alert-wrapper', array(\n\t\t'api_version'     =&gt; 3,\n\t\t'title'           =&gt; 'Alert (Shortcode wrapper)',\n\t\t'icon'            =&gt; 'feedback',\n\t\t'category'        =&gt; 'widgets',\n\t\t'render_callback' =&gt; 'render_shortcode_alert_wrapper_block',\n\t\t\n\t\t'attributes'      =&gt; array(\n\t\t\t'alertType' =&gt; array(\n\t\t\t\t'type'    =&gt; 'string',\n\t\t\t\t'enum'    =&gt; array( 'info', 'warning', 'error' ),\n\t\t\t\t'default' =&gt; 'info',\n\t\t\t),\n\t\t\t'alertMessage' =&gt; array(\n\t\t\t\t'type'    =&gt; 'string',\n\t\t\t\t'default' =&gt; 'Type your alert message here...',\n\t\t\t),\n\t\t),\n\n\t\t'supports'        =&gt; array(\n\t\t\t'auto_register' =&gt; true,\n\t\t\t'spacing'       =&gt; array( 'margin' =&gt; true, 'padding' =&gt; true ),\n\t\t\t'typography'    =&gt; array( 'fontSize' =&gt; true ),\n\t\t),\n\t) );\n});<\/code><\/pre>\n<p>Il codice sopra riportato \u00e8 simile a quello della sezione precedente. Ci\u00f2 che cambia in questo caso \u00e8 la funzione di callback per il rendering.<\/p>\n<ul>\n<li><code>$shortcode_string<\/code> memorizza la stringa dello shortcode (<code>[sc_alert type=\"%s\" message=\"%s\"]<\/code>).<\/li>\n<li>La funzione restituisce il codice HTML del contenitore del blocco e dello shortcode incluso (<code class=\"language-php\">do_shortcode( $shortcode_string )<\/code>).<\/li>\n<\/ul>\n<p>Ora apri il Block Inserter e cerca il blocco &#8220;Shortcode wrapper&#8221; tra i widget. Inseriscilo nel tuo contenuto e configuralo dalla barra delle impostazioni del blocco. Il blocco apparir\u00e0 identico sia nell&#8217;editor che nell&#8217;interfaccia pubblica.<\/p>\n<figure id=\"attachment_206135\" aria-describedby=\"caption-attachment-206135\" style=\"width: 2298px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-206135\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2026\/02\/php-only-shortcode-example.png\" alt=\"Un esempio di shortcode racchiuso in un blocco solo PHP\" width=\"2298\" height=\"912\"><figcaption id=\"caption-attachment-206135\" class=\"wp-caption-text\">Un esempio di shortcode racchiuso in un blocco solo PHP<\/figcaption><\/figure>\n<h2>Come cambia lo sviluppo di WordPress con i blocchi basati esclusivamente su PHP?<\/h2>\n<p>Allo stato attuale, i blocchi PHP puri sono in fase sperimentale e presentano ancora funzionalit\u00e0 limitate. Gutenberg offre funzionalit\u00e0 pi\u00f9 potenti, come i <a href=\"https:\/\/kinqsta.com\/it\/blog\/block-pattern-wordpress\/\">block pattern<\/a> e le <a href=\"https:\/\/kinqsta.com\/it\/blog\/varianti-di-stile-e-di-blocco-gutenberg\/\">variazioni di blocchi<\/a>, che forniscono tutte le funzionalit\u00e0 di modifica dei blocchi nativi di Gutenberg e dei blocchi personalizzati realizzati in JavaScript. Tuttavia, esistono scenari in cui i blocchi PHP offrono opportunit\u00e0 significative.<\/p>\n<p>In primo luogo, i blocchi in solo PHP dovrebbero favorire una pi\u00f9 ampia diffusione dell\u2019editor a blocchi, soprattutto tra gli sviluppatori WordPress meno orientati allo sviluppo di JavaScript lato server.<\/p>\n<p>Inoltre, rappresentano contenitori ideali per funzioni personalizzate e shortcode, come illustrato nell\u2019esempio riportato in questo articolo. Consentono inoltre una facile integrazione con servizi esterni.<\/p>\n<p>\u00c8 inoltre lecito aspettarsi futuri miglioramenti e l\u2019aggiunta di nuove funzionalit\u00e0, maggiori opzioni di configurazione e integrazioni con gli strumenti Gutenberg esistenti.<\/p>\n<p>Una cosa \u00e8 certa: grazie ai blocchi basati esclusivamente su PHP, creare blocchi Gutenberg \u00e8 diventato molto pi\u00f9 semplice.<\/p>\n<p>Se ti occupi di sviluppo WordPress, Kinsta ti offre gli <a href=\"https:\/\/kinqsta.com\/it\/blog\/stack-tecnologico-agenzia-wordpress\/\">strumenti per developer di cui hai bisogno<\/a>, permettendoti di concentrarti sullo sviluppo di WordPress, eliminando la necessit\u00e0 di configurazioni complesse e di noiose attivit\u00e0 di manutenzione: <a href=\"https:\/\/kinqsta.com\/it\/blog\/sviluppo-remoto-wordpress-kinsta-ssh\/\">SSH<\/a>, <a href=\"https:\/\/kinqsta.com\/it\/blog\/funzioni-sftp-ssh\/\">SFTP<\/a>, <a href=\"https:\/\/kinqsta.com\/it\/blog\/come-creare-una-pipeline-ci-cd\/\">integrazione Git<\/a>, <a href=\"https:\/\/kinqsta.com\/it\/blog\/aggiornamenti-automatici-di-kinsta\/\">aggiornamenti automatici<\/a>, <a href=\"https:\/\/kinqsta.com\/it\/hosting-wordpress\/staging\/\">staging a un solo clic<\/a>, uno <a href=\"https:\/\/kinqsta.com\/it\/devkinsta\/caratteristiche\/\">strumento di sviluppo locale<\/a> integrato, e molto altro. Provalo subito con <a href=\"https:\/\/kinqsta.com\/it\/primo-mese-gratis\/\">il primo mese gratis<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Per anni, imparare a sviluppare blocchi Gutenberg ha richiesto una conoscenza approfondita di tecnologie come React e Node.js, oltre a complesse procedure di compilazione e strumenti &#8230;<\/p>\n","protected":false},"author":36,"featured_media":83622,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[26187,25873],"class_list":["post-83621","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-funzione-php","topic-sviluppo-wordpress"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Come creare blocchi Gutenberg solo in PHP<\/title>\n<meta name=\"description\" content=\"Dimentica JavaScript, React e altre procedure di build. Gestendo i blocchi di Gutenberg con il solo PHP pubblicherai blocchi personalizzati su WP in pochi minuti.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinqsta.com\/it\/blog\/blocchi-gutenberg-in-php\/\" \/>\n<meta property=\"og:locale\" content=\"it_IT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Come creare blocchi Gutenberg solo in PHP\" \/>\n<meta property=\"og:description\" content=\"Dimentica JavaScript, React e altre procedure di build. Gestendo i blocchi di Gutenberg con il solo PHP pubblicherai blocchi personalizzati su WP in pochi minuti.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinqsta.com\/it\/blog\/blocchi-gutenberg-in-php\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinstaitalia\/\" \/>\n<meta property=\"article:published_time\" content=\"2026-03-27T10:29:56+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-03-30T10:44:33+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinqsta.com\/it\/wp-content\/uploads\/sites\/2\/2026\/03\/how-to-build-php-only-gutenberg-blocks.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1470\" \/>\n\t<meta property=\"og:image:height\" content=\"735\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Carlo Daniele\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Dimentica JavaScript, React e altre procedure di build. Gestendo i blocchi di Gutenberg con il solo PHP pubblicherai blocchi personalizzati su WP in pochi minuti.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinqsta.com\/it\/wp-content\/uploads\/sites\/2\/2026\/03\/how-to-build-php-only-gutenberg-blocks.png\" \/>\n<meta name=\"twitter:creator\" content=\"@carlodaniele\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_IT\" \/>\n<meta name=\"twitter:label1\" content=\"Scritto da\" \/>\n\t<meta name=\"twitter:data1\" content=\"Carlo Daniele\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo di lettura stimato\" \/>\n\t<meta name=\"twitter:data2\" content=\"14 minuti\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinqsta.com\/it\/blog\/blocchi-gutenberg-in-php\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinqsta.com\/it\/blog\/blocchi-gutenberg-in-php\/\"},\"author\":{\"name\":\"Carlo Daniele\",\"@id\":\"https:\/\/kinqsta.com\/it\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63\"},\"headline\":\"Come creare blocchi Gutenberg solo in PHP\",\"datePublished\":\"2026-03-27T10:29:56+00:00\",\"dateModified\":\"2026-03-30T10:44:33+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinqsta.com\/it\/blog\/blocchi-gutenberg-in-php\/\"},\"wordCount\":2249,\"publisher\":{\"@id\":\"https:\/\/kinqsta.com\/it\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinqsta.com\/it\/blog\/blocchi-gutenberg-in-php\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinqsta.com\/it\/wp-content\/uploads\/sites\/2\/2026\/03\/how-to-build-php-only-gutenberg-blocks.png\",\"inLanguage\":\"it-IT\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinqsta.com\/it\/blog\/blocchi-gutenberg-in-php\/\",\"url\":\"https:\/\/kinqsta.com\/it\/blog\/blocchi-gutenberg-in-php\/\",\"name\":\"Come creare blocchi Gutenberg solo in PHP\",\"isPartOf\":{\"@id\":\"https:\/\/kinqsta.com\/it\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinqsta.com\/it\/blog\/blocchi-gutenberg-in-php\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinqsta.com\/it\/blog\/blocchi-gutenberg-in-php\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinqsta.com\/it\/wp-content\/uploads\/sites\/2\/2026\/03\/how-to-build-php-only-gutenberg-blocks.png\",\"datePublished\":\"2026-03-27T10:29:56+00:00\",\"dateModified\":\"2026-03-30T10:44:33+00:00\",\"description\":\"Dimentica JavaScript, React e altre procedure di build. Gestendo i blocchi di Gutenberg con il solo PHP pubblicherai blocchi personalizzati su WP in pochi minuti.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinqsta.com\/it\/blog\/blocchi-gutenberg-in-php\/#breadcrumb\"},\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinqsta.com\/it\/blog\/blocchi-gutenberg-in-php\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/kinqsta.com\/it\/blog\/blocchi-gutenberg-in-php\/#primaryimage\",\"url\":\"https:\/\/kinqsta.com\/it\/wp-content\/uploads\/sites\/2\/2026\/03\/how-to-build-php-only-gutenberg-blocks.png\",\"contentUrl\":\"https:\/\/kinqsta.com\/it\/wp-content\/uploads\/sites\/2\/2026\/03\/how-to-build-php-only-gutenberg-blocks.png\",\"width\":1470,\"height\":735},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinqsta.com\/it\/blog\/blocchi-gutenberg-in-php\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinqsta.com\/it\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Sviluppo di WordPress\",\"item\":\"https:\/\/kinqsta.com\/it\/argomenti\/sviluppo-wordpress\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Come creare blocchi Gutenberg solo in PHP\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinqsta.com\/it\/#website\",\"url\":\"https:\/\/kinqsta.com\/it\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Soluzioni di hosting premium, veloci e sicure\",\"publisher\":{\"@id\":\"https:\/\/kinqsta.com\/it\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinqsta.com\/it\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"it-IT\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinqsta.com\/it\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinqsta.com\/it\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/kinqsta.com\/it\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinqsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinqsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinqsta.com\/it\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinstaitalia\/\",\"https:\/\/x.com\/Kinsta_IT\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinqsta.com\/it\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63\",\"name\":\"Carlo Daniele\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/kinqsta.com\/it\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/429e5568f88110fd9a409b84cb22197e?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/429e5568f88110fd9a409b84cb22197e?s=96&d=mm&r=g\",\"caption\":\"Carlo Daniele\"},\"description\":\"Carlo is a passionate lover of webdesign and front-end development. He has been playing with WordPress for more than 20 years, also in collaboration with Italian and European universities and educational institutions. He has written hundreds of articles and guides about WordPress, published both on Italian and international websites, as well as on printed magazines. You can find him on LinkedIn.\",\"sameAs\":[\"https:\/\/frammentidicodice.com\/\",\"https:\/\/x.com\/carlodaniele\"],\"url\":\"https:\/\/kinqsta.com\/it\/blog\/author\/carlodaniele\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Come creare blocchi Gutenberg solo in PHP","description":"Dimentica JavaScript, React e altre procedure di build. Gestendo i blocchi di Gutenberg con il solo PHP pubblicherai blocchi personalizzati su WP in pochi minuti.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinqsta.com\/it\/blog\/blocchi-gutenberg-in-php\/","og_locale":"it_IT","og_type":"article","og_title":"Come creare blocchi Gutenberg solo in PHP","og_description":"Dimentica JavaScript, React e altre procedure di build. Gestendo i blocchi di Gutenberg con il solo PHP pubblicherai blocchi personalizzati su WP in pochi minuti.","og_url":"https:\/\/kinqsta.com\/it\/blog\/blocchi-gutenberg-in-php\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstaitalia\/","article_published_time":"2026-03-27T10:29:56+00:00","article_modified_time":"2026-03-30T10:44:33+00:00","og_image":[{"width":1470,"height":735,"url":"https:\/\/kinqsta.com\/it\/wp-content\/uploads\/sites\/2\/2026\/03\/how-to-build-php-only-gutenberg-blocks.png","type":"image\/png"}],"author":"Carlo Daniele","twitter_card":"summary_large_image","twitter_description":"Dimentica JavaScript, React e altre procedure di build. Gestendo i blocchi di Gutenberg con il solo PHP pubblicherai blocchi personalizzati su WP in pochi minuti.","twitter_image":"https:\/\/kinqsta.com\/it\/wp-content\/uploads\/sites\/2\/2026\/03\/how-to-build-php-only-gutenberg-blocks.png","twitter_creator":"@carlodaniele","twitter_site":"@Kinsta_IT","twitter_misc":{"Scritto da":"Carlo Daniele","Tempo di lettura stimato":"14 minuti"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinqsta.com\/it\/blog\/blocchi-gutenberg-in-php\/#article","isPartOf":{"@id":"https:\/\/kinqsta.com\/it\/blog\/blocchi-gutenberg-in-php\/"},"author":{"name":"Carlo Daniele","@id":"https:\/\/kinqsta.com\/it\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63"},"headline":"Come creare blocchi Gutenberg solo in PHP","datePublished":"2026-03-27T10:29:56+00:00","dateModified":"2026-03-30T10:44:33+00:00","mainEntityOfPage":{"@id":"https:\/\/kinqsta.com\/it\/blog\/blocchi-gutenberg-in-php\/"},"wordCount":2249,"publisher":{"@id":"https:\/\/kinqsta.com\/it\/#organization"},"image":{"@id":"https:\/\/kinqsta.com\/it\/blog\/blocchi-gutenberg-in-php\/#primaryimage"},"thumbnailUrl":"https:\/\/kinqsta.com\/it\/wp-content\/uploads\/sites\/2\/2026\/03\/how-to-build-php-only-gutenberg-blocks.png","inLanguage":"it-IT"},{"@type":"WebPage","@id":"https:\/\/kinqsta.com\/it\/blog\/blocchi-gutenberg-in-php\/","url":"https:\/\/kinqsta.com\/it\/blog\/blocchi-gutenberg-in-php\/","name":"Come creare blocchi Gutenberg solo in PHP","isPartOf":{"@id":"https:\/\/kinqsta.com\/it\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinqsta.com\/it\/blog\/blocchi-gutenberg-in-php\/#primaryimage"},"image":{"@id":"https:\/\/kinqsta.com\/it\/blog\/blocchi-gutenberg-in-php\/#primaryimage"},"thumbnailUrl":"https:\/\/kinqsta.com\/it\/wp-content\/uploads\/sites\/2\/2026\/03\/how-to-build-php-only-gutenberg-blocks.png","datePublished":"2026-03-27T10:29:56+00:00","dateModified":"2026-03-30T10:44:33+00:00","description":"Dimentica JavaScript, React e altre procedure di build. Gestendo i blocchi di Gutenberg con il solo PHP pubblicherai blocchi personalizzati su WP in pochi minuti.","breadcrumb":{"@id":"https:\/\/kinqsta.com\/it\/blog\/blocchi-gutenberg-in-php\/#breadcrumb"},"inLanguage":"it-IT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinqsta.com\/it\/blog\/blocchi-gutenberg-in-php\/"]}]},{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/kinqsta.com\/it\/blog\/blocchi-gutenberg-in-php\/#primaryimage","url":"https:\/\/kinqsta.com\/it\/wp-content\/uploads\/sites\/2\/2026\/03\/how-to-build-php-only-gutenberg-blocks.png","contentUrl":"https:\/\/kinqsta.com\/it\/wp-content\/uploads\/sites\/2\/2026\/03\/how-to-build-php-only-gutenberg-blocks.png","width":1470,"height":735},{"@type":"BreadcrumbList","@id":"https:\/\/kinqsta.com\/it\/blog\/blocchi-gutenberg-in-php\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinqsta.com\/it\/"},{"@type":"ListItem","position":2,"name":"Sviluppo di WordPress","item":"https:\/\/kinqsta.com\/it\/argomenti\/sviluppo-wordpress\/"},{"@type":"ListItem","position":3,"name":"Come creare blocchi Gutenberg solo in PHP"}]},{"@type":"WebSite","@id":"https:\/\/kinqsta.com\/it\/#website","url":"https:\/\/kinqsta.com\/it\/","name":"Kinsta\u00ae","description":"Soluzioni di hosting premium, veloci e sicure","publisher":{"@id":"https:\/\/kinqsta.com\/it\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinqsta.com\/it\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"it-IT"},{"@type":"Organization","@id":"https:\/\/kinqsta.com\/it\/#organization","name":"Kinsta","url":"https:\/\/kinqsta.com\/it\/","logo":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/kinqsta.com\/it\/#\/schema\/logo\/image\/","url":"https:\/\/kinqsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinqsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinqsta.com\/it\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinstaitalia\/","https:\/\/x.com\/Kinsta_IT","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinqsta.com\/it\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63","name":"Carlo Daniele","image":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/kinqsta.com\/it\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/429e5568f88110fd9a409b84cb22197e?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/429e5568f88110fd9a409b84cb22197e?s=96&d=mm&r=g","caption":"Carlo Daniele"},"description":"Carlo is a passionate lover of webdesign and front-end development. He has been playing with WordPress for more than 20 years, also in collaboration with Italian and European universities and educational institutions. He has written hundreds of articles and guides about WordPress, published both on Italian and international websites, as well as on printed magazines. You can find him on LinkedIn.","sameAs":["https:\/\/frammentidicodice.com\/","https:\/\/x.com\/carlodaniele"],"url":"https:\/\/kinqsta.com\/it\/blog\/author\/carlodaniele\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinqsta.com\/it\/wp-json\/wp\/v2\/posts\/83621","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinqsta.com\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinqsta.com\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinqsta.com\/it\/wp-json\/wp\/v2\/users\/36"}],"replies":[{"embeddable":true,"href":"https:\/\/kinqsta.com\/it\/wp-json\/wp\/v2\/comments?post=83621"}],"version-history":[{"count":4,"href":"https:\/\/kinqsta.com\/it\/wp-json\/wp\/v2\/posts\/83621\/revisions"}],"predecessor-version":[{"id":83644,"href":"https:\/\/kinqsta.com\/it\/wp-json\/wp\/v2\/posts\/83621\/revisions\/83644"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinqsta.com\/it\/wp-json\/kinsta\/v1\/posts\/83621\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinqsta.com\/it\/wp-json\/kinsta\/v1\/posts\/83621\/translations\/it"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinqsta.com\/it\/wp-json\/kinsta\/v1\/posts\/83621\/translations\/jp"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinqsta.com\/it\/wp-json\/kinsta\/v1\/posts\/83621\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinqsta.com\/it\/wp-json\/kinsta\/v1\/posts\/83621\/translations\/de"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinqsta.com\/it\/wp-json\/kinsta\/v1\/posts\/83621\/translations\/es"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinqsta.com\/it\/wp-json\/kinsta\/v1\/posts\/83621\/translations\/nl"},{"href":"https:\/\/kinqsta.com\/it\/wp-json\/kinsta\/v1\/posts\/83621\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinqsta.com\/it\/wp-json\/wp\/v2\/media\/83622"}],"wp:attachment":[{"href":"https:\/\/kinqsta.com\/it\/wp-json\/wp\/v2\/media?parent=83621"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinqsta.com\/it\/wp-json\/wp\/v2\/tags?post=83621"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinqsta.com\/it\/wp-json\/wp\/v2\/topic?post=83621"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}