{"id":80739,"date":"2025-04-02T10:14:54","date_gmt":"2025-04-02T09:14:54","guid":{"rendered":"https:\/\/kinsta.com\/it\/?p=80739&#038;preview=true&#038;preview_id=80739"},"modified":"2025-04-16T12:02:20","modified_gmt":"2025-04-16T11:02:20","slug":"estendere-blocchi-core-wp","status":"publish","type":"post","link":"https:\/\/kinsta.com\/it\/blog\/estendere-blocchi-core-wp\/","title":{"rendered":"Come estendere i blocchi core di WordPress con la Blocks API"},"content":{"rendered":"<p>Nel 2018, con la <a href=\"https:\/\/kinsta.com\/it\/blog\/wordpress-5-0\/\">versione 5.0<\/a>, WordPress ha lanciato l&#8217;<a href=\"https:\/\/kinsta.com\/it\/blog\/gutenberg-editor-wordpress\/\">editor Gutenberg<\/a>, introducendo un nuovo modo di creare pagine e post utilizzando i &#8220;blocchi&#8221;. All&#8217;inizio questi blocchi erano piuttosto semplici, ma nel corso degli anni si <a href=\"https:\/\/kinsta.com\/it\/blog\/wordpress-6-6\/#other-improvements-to-the-block-editor\">sono evoluti<\/a> e ora offrono maggiore flessibilit\u00e0 e una migliore esperienza di editing.<\/p>\n<p>Ma ci sono delle volte in cui un blocco non fa esattamente quello che serve. Potremmo voler rimuovere alcune funzioni, aggiungerne altre, applicare di default uno stile specifico o rendere pi\u00f9 facile l&#8217;accesso ad alcune impostazioni. In casi simili, <a href=\"https:\/\/kinsta.com\/it\/blog\/blocchi-gutenberg\/\">creare un blocco personalizzato<\/a> da zero potrebbe sembrare una soluzione, ma &#8211; siamo onesti &#8211; creare un blocco custom \u00e8 eccessivo per piccole modifiche. Non sarebbe pi\u00f9 semplice se potessimo modificare i blocchi gi\u00e0 esistenti?<\/p>\n<p>\u00c8 qui che entra in gioco la <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/block-api\/\" target=\"_blank\" rel=\"noopener noreferrer\">Block API<\/a>. Questo articolo spiega come estendere i blocchi core di WordPress utilizzando la Block API, con esempi pratici che possono essere utilizzati in progetti reali.<\/p>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc>\n<h2>La Block API di WordPress<\/h2>\n<p>La Block API di WordPress \u00e8 la base dell&#8217;editor di blocchi e consente agli <a href=\"https:\/\/kinsta.com\/it\/blog\/tipi-di-developer\/\">sviluppatori<\/a> di creare, modificare ed estendere i blocchi. L&#8217;API offre diversi modi per interagire con i blocchi. \u00c8 possibile:<\/p>\n<ul>\n<li><strong>Modificare le impostazioni dei blocchi<\/strong>: cambiare gli attributi, i valori predefiniti e i comportamenti.<\/li>\n<li><strong>Aggiungere o rimuovere i supporti dei blocchi<\/strong>: abilitare o disabilitare funzionalit\u00e0 come la tipografia, i colori e la spaziatura.<\/li>\n<li><strong>Iniettare controlli personalizzati<\/strong>: aggiungere nuove opzioni all&#8217;interno del pannello delle impostazioni dei blocchi.<\/li>\n<li><strong>Creare varianti di blocchi<\/strong>: creare versioni preconfigurate di blocchi esistenti per creare contenuti pi\u00f9 velocemente.<\/li>\n<\/ul>\n<p>Ogni blocco di WordPress, che si tratti di un <a href=\"https:\/\/wordpress.org\/documentation\/article\/Paragraph-block\/\" target=\"_blank\" rel=\"noopener noreferrer\">paragrafo<\/a>, di un&#8217;<a href=\"https:\/\/wordpress.org\/documentation\/article\/image-block\/\" target=\"_blank\" rel=\"noopener noreferrer\">immagine<\/a> o di un <a href=\"https:\/\/wordpress.org\/documentation\/article\/button-block\/\" target=\"_blank\" rel=\"noopener noreferrer\">pulsante<\/a>, \u00e8 definito da una serie di attributi e di impostazioni memorizzati in un file <code>block.json<\/code>. Questo file contiene <a href=\"https:\/\/kinsta.com\/it\/blog\/aggiungere-meta-box-ai-post-di-wordpress\/\">i metadati<\/a> relativi al blocco, come ad esempio il nome, la categoria, gli attributi predefiniti e le funzionalit\u00e0 supportate.<\/p>\n<p>WordPress permette di modificare questi valori utilizzando <a href=\"https:\/\/kinsta.com\/php\/\">PHP<\/a> o <a href=\"https:\/\/kinsta.com\/it\/blog\/cosa-e-javascript\/\">JavaScript<\/a>, ma in questo articolo spieghiamo come utilizzare i <a href=\"https:\/\/learn.wordpress.org\/lesson\/filter-hooks\/\" target=\"_blank\" rel=\"noopener noreferrer\">filter hook<\/a> nella Block API. In questo modo, le modifiche vengono registrate sul server senza dover <a href=\"https:\/\/kinsta.com\/it\/blog\/wp-enqueue-scripts\/\">aggiungere<\/a> altri file JavaScript.<\/p>\n<p>Ad esempio, se si vuole abilitare o disabilitare alcune funzioni di un blocco, il modo migliore per farlo \u00e8 utilizzare il <a href=\"https:\/\/kinsta.com\/it\/blog\/hook-wordpress\/#hooks-vs-actions-vs-filters\">filtro<\/a> <code>register_block_type_args<\/code> in PHP. Questo metodo permette di modificare le impostazioni del blocco in modo dinamico senza modificare direttamente il file <code>block.json<\/code>.<\/p>\n<h2>Modificare i supporti dei blocchi<\/h2>\n<p>I blocchi di WordPress sono dotati di supporti predefiniti che controllano le opzioni dell&#8217;editor. Alcuni blocchi, come il <a href=\"https:\/\/wordpress.org\/documentation\/article\/image-block\/\" target=\"_blank\" rel=\"noopener noreferrer\">blocco Immagine<\/a> (<code>core\/image<\/code>), hanno <a href=\"https:\/\/kinsta.com\/it\/blog\/wordpress-6-3\/#enhanced-duotone-filter\">filtri duotone<\/a> abilitati di default. Questi filtri consentono agli utenti di applicare sovrapposizioni di colori.<\/p>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2025\/02\/image-block-duotone.png\" alt=\"Blocco Immagine di WordPress con filtro Duotone.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Blocco Immagine di WordPress con filtro Duotone.<\/figcaption><\/figure>\n<p>Tuttavia, il <a href=\"https:\/\/wordpress.org\/documentation\/article\/media-text-block\/\" target=\"_blank\" rel=\"noopener noreferrer\">blocco Media &#038; Text<\/a> (<code>core\/media-text<\/code>) non supporta il filtro Duotone, anche se permette di inserire un&#8217;immagine. Ci\u00f2 significa che, anche se si pu\u00f2 applicare un filtro duotone a un blocco Immagine indipendente, non \u00e8 possibile fare la stessa cosa quando un&#8217;immagine \u00e8 inserita all&#8217;interno di un blocco Media &#038; Text.<\/p>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2025\/02\/media-text-block.png\" alt=\"Blocco Media e Testo senza supporto Duotone.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Blocco Media e Testo senza supporto Duotone.<\/figcaption><\/figure>\n<p>Dato che il blocco Media e Testo pu\u00f2 contenere un&#8217;immagine, pu\u00f2 essere utile abilitare i filtri duotone. Possiamo farlo modificando l&#8217;array <code>supports<\/code> e specificando il selettore CSS corretto in modo che il filtro venga applicato correttamente. Possiamo attivarlo utilizzando il filtro <code>register_block_type_args<\/code> in PHP.<\/p>\n<p>Aggiungiamo il seguente codice al file <code>functions.php<\/code> del tema:<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-important\">\n            <h3>Important<\/h3>\n        <p>Se si vuole aggiungere questo codice al file <code>functions.php<\/code> del tema, \u00e8 consigliabile farlo in un <strong>child theme<\/strong> per evitare di perdere le modifiche quando il tema viene aggiornato.<\/p>\n<p>In alternativa, per gli utenti di <strong>utente di Kinsta<\/strong>, consigliamo di testare il tutto in un <strong>ambiente di staging<\/strong> prima di applicarlo al sito live. In questo modo ci assicuriamo che tutto funzioni correttamente senza influire sulla produzione.<\/p>\n<\/aside>\n\n<pre><code class=\"language-php\">function enable_duotone_for_media_text_block($args, $block_type) {\n\t\n\t\/\/ Only modify the Media & Text block\n\tif ( 'core\/media-text' === $block_type ) {\n\t\t$args['supports'] ??= [];\n\t\t$args['supports']['filter'] ??= [];\n\t\t$args['supports']['filter']['duotone'] = true;\n\n\t\t$args['selectors'] ??= [];\n\t\t$args['selectors']['filter'] ??= [];\n\t\t$args['selectors']['filter']['duotone'] = '.wp-block-media-text .wp-block-media-text__media';\n\t}\n\n\treturn $args;\n}\nadd_filter('register_block_type_args', 'enable_duotone_for_media_text_block', 10, 2);<\/code><\/pre>\n<p>Il codice qui sopra abilita il filtro duotone all&#8217;interno dell&#8217;array <code>supports<\/code> e definisce il selettore CSS corretto per applicare l&#8217;effetto duotone alle immagini di un blocco Media &#038; Text. La funzione <code>add_filter()<\/code> ha priorit\u00e0 <code>10<\/code> (quando il filtro viene eseguito) e <code>2<\/code> per specificare il numero di argomenti passati (<code>$args<\/code>, <code>$block_type<\/code>).<\/p>\n<p>Salvando e ricaricando il file, si dovrebbero vedere i controlli <strong>Duotone<\/strong> nella sezione <strong>Filtri<\/strong>.<\/p>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2025\/02\/duotone-added-media-text.png\" alt=\"Filtro Duotone attivato.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Filtro Duotone attivato.<\/figcaption><\/figure>\n<p>Abilitare il duotone per il blocco Media &#038; Text utilizzando <code>register_block_type_args<\/code> permette di modificare dinamicamente il comportamento del blocco. Tuttavia, WordPress offre un altro metodo per modificare le impostazioni dei blocchi: <strong>sovrascrivere i metadati dei blocchi<\/strong> utilizzando <code>block_type_metadata<\/code>.<\/p>\n<p>Entrambi gli approcci permettono di personalizzare i blocchi, ma funzionano in fasi diverse del processo di registrazione dei blocchi.<\/p>\n<p>Ad esempio, supponiamo di voler modificare il <a href=\"https:\/\/wordpress.org\/documentation\/article\/Paragraph-block\/\" target=\"_blank\" rel=\"noopener noreferrer\">blocco Paragrafo<\/a> (<code>core\/paragraph<\/code>) in modo che supporti solo le regolazioni dei margini e disabiliti il padding. Un modo per farlo \u00e8 utilizzare <code>register_block_type_args<\/code>:<\/p>\n<pre><code class=\"language-php\">function modify_paragraph_spacing_args($args, $block_type) {\n    if ($block_type === 'core\/paragraph') {\n        $args['supports']['spacing'] = [\n            'margin' =&gt; true,\n            'padding' =&gt; false\n        ];\n    }\n    return $args;\n}\nadd_filter('register_block_type_args', 'modify_paragraph_spacing_args', 10, 2);<\/code><\/pre>\n<p>Questo metodo funziona bene nella maggior parte dei casi, ma poich\u00e9 modifica il blocco dopo che \u00e8 gi\u00e0 stato registrato, a volte pu\u00f2 essere sovrascritto da altri <a href=\"https:\/\/kinsta.com\/it\/blog\/plugin-wordpress\/\">plugin<\/a> o <a href=\"https:\/\/kinsta.com\/it\/blog\/come-funzionano-i-temi-di-wordpress\/\">temi<\/a> che modificano lo stesso blocco in un secondo momento.<\/p>\n<p>Un approccio pi\u00f9 strutturato potrebbe essere quello di sovrascrivere direttamente i metadati del blocco utilizzando <code>block_type_metadata<\/code>:<\/p>\n<pre><code class=\"language-php\">function mytheme_modify_paragraph_spacing($metadata) {\n    if ($metadata['name'] === 'core\/paragraph') {\n        $metadata['supports']['spacing'] = [\n            'margin' =&gt; true,\n            'padding' =&gt; false\n        ];\n    }\n    return $metadata;\n}\nadd_filter('block_type_metadata', 'mytheme_modify_paragraph_spacing');<\/code><\/pre>\n<p>Nessuno dei due approcci \u00e8 intrinsecamente migliore dell&#8217;altro: dipende solo da quando si vuole modificare il blocco e da quanto si vuole che la modifica sia persistente.<\/p>\n<h2>Registrare gli stili dei blocchi<\/h2>\n<p>Molti blocchi di WordPress sono dotati di stili predefiniti che gli utenti possono selezionare nell&#8217;editor. Un buon esempio \u00e8 il <a href=\"https:\/\/wordpress.org\/documentation\/article\/image-block\/\" target=\"_blank\" rel=\"noopener noreferrer\">blocco Immagine<\/a> (<code>core\/image<\/code>), che dispone di uno stile <strong>arrotondato<\/strong> predefinito. Tuttavia, gli angoli arrotondati predefiniti sono spesso troppo estremi e fanno sembrare l&#8217;immagine pi\u00f9 un ovale che un elemento dallo stile pulito.<\/p>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2025\/02\/image-block-rounded.png\" alt=\"Stile arrotondato predefinito.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Stile arrotondato predefinito.<\/figcaption><\/figure>\n<p>Invece di regolare manualmente il raggio del bordo per ogni immagine, una soluzione migliore \u00e8 quella di personalizzare lo stile arrotondato in modo da applicare un raggio d&#8217;angolo pi\u00f9 raffinato, magari aggiungendo un&#8217;<a href=\"https:\/\/kinsta.com\/it\/blog\/contorno-testo-css\/\">ombra<\/a> sottile per un look moderno. In questo modo, gli utenti possono semplicemente cliccare su un pulsante per applicare uno stile ben progettato senza dover modificare manualmente le impostazioni ogni volta.<\/p>\n<p>Prendiamo lo stile <strong>Arrotondato<\/strong> nel blocco Immagine e personalizziamolo in modo che gli angoli siano leggermente arrotondati invece che eccessivamente curvi e che venga aggiunta una sottile ombra per dare un aspetto pi\u00f9 curato.<\/p>\n<p>Dato che l&#8217;editor dei blocchi consente di registrare e deregistrare gli stili dei blocchi, possiamo rimuovere lo stile <strong>Arrotondato<\/strong> predefinito e sostituirlo con una versione personalizzata.<\/p>\n<p>Ecco come fare:<\/p>\n<pre><code class=\"language-php\">function modify_image_block_rounded_style() {\n    \/\/ Remove the default \"Rounded\" style\n    unregister_block_style( 'core\/image', 'rounded' );\n\n    \/\/ Register a new \"Rounded\" style with custom CSS\n    register_block_style(\n        'core\/image',\n        array(\n            'name'         =&gt; 'rounded',\n            'label'        =&gt; __( 'Rounded', 'your-text-domain' ),\n            'inline_style' =&gt; '\n                .wp-block-image.is-style-rounded img {\n                    border-radius: 20px; \/* Adjust this value *\/\n                    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); \/* Optional shadow *\/\n                }\n            ',\n        )\n    );\n}\nadd_action( 'init', 'modify_image_block_rounded_style' );<\/code><\/pre>\n<p>Questo codice sostituisce lo stile predefinito eccessivamente arrotondato con una versione raffinata che applica <code>border-radius: 20px;<\/code> per ottenere angoli pi\u00f9 morbidi e <code>box-shadow<\/code> per dare un leggero sollevamento.<\/p>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2025\/02\/adjust-rounded-img-block.png\" alt=\"Stile arrotondato raffinato.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Stile arrotondato raffinato.<\/figcaption><\/figure>\n<h3>Utilizzare un file CSS esterno invece degli stili in linea<\/h3>\n<p>Sebbene lo <a href=\"https:\/\/kinsta.com\/it\/blog\/best-practice-css\/#2-inline-css-vs-external-css-vs-internal-css\">stile in linea<\/a> vada bene per gli stili semplici, non \u00e8 l&#8217;ideale nel lungo termine. Un approccio migliore \u00e8 quello di definire gli stili in un file CSS esterno e di inserirlo nella lista.<\/p>\n<p>Per farlo, creiamo un nuovo file CSS, ad esempio <code>custom-block-styles.css<\/code> e aggiungiamoci questo:<\/p>\n<pre><code class=\"language-css\">\/* Custom Rounded Image Block Style *\/\n.wp-block-image.is-style-rounded img {\n    border-radius: 20px; \/* Adjusted rounded corners *\/\n    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); \/* Subtle shadow *\/\n}<\/code><\/pre>\n<p>Successivamente, inserisci il file CSS in <code>functions.php<\/code>:<\/p>\n<pre><code class=\"language-php\">function enqueue_custom_block_styles() {\n    wp_enqueue_style(\n        'custom-block-styles',\n        get_template_directory_uri() . '\/css\/custom-block-styles.css',\n        array(),\n        '1.0'\n    );\n}\nadd_action('wp_enqueue_scripts', 'enqueue_custom_block_styles');\nadd_action('enqueue_block_editor_assets', 'enqueue_custom_block_styles');<\/code><\/pre>\n<p>Ora, invece di usare lo stile inline, \u00e8 possibile registrare lo stile senza incorporare il <a href=\"https:\/\/kinsta.com\/it\/blog\/best-practice-css\/\">CSS<\/a> direttamente in PHP:<\/p>\n<pre><code class=\"language-php\">register_block_style(\n    'core\/image',\n    array(\n        'name'  =&gt; 'rounded',\n        'label' =&gt; __( 'Rounded', 'your-text-domain' ),\n        'style_handle' =&gt; 'custom-block-styles'\n    )\n);<\/code><\/pre>\n<p>In questo modo, possiamo modificare gli stili senza toccare il codice PHP.<\/p>\n<h2>Registrare varianti di blocco<\/h2>\n<p>Le <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/block-api\/block-variations\/\" target=\"_blank\" rel=\"noopener noreferrer\">varianti di blocco<\/a> permettono di creare versioni predefinite di un blocco con impostazioni personalizzate, permettendo agli utenti di applicare design coerenti con un solo clic. Una variante permette di inserire un blocco che ha gi\u00e0 gli attributi, gli stili o le configurazioni giuste, evitando di modificare manualmente le impostazioni di un blocco ogni volta.<\/p>\n<p>Alcuni blocchi core di WordPress funzionano proprio in questo modo. Il <a href=\"https:\/\/wordpress.org\/documentation\/article\/embed-block\/\" target=\"_blank\" rel=\"noopener noreferrer\">blocco Embed<\/a> non \u00e8 un blocco singolo, ma un insieme di varianti per diverse piattaforme come <a href=\"https:\/\/wordpress.org\/documentation\/article\/youtube-embed\/\" target=\"_blank\" rel=\"noopener noreferrer\">YouTube<\/a>, <a href=\"https:\/\/wordpress.org\/documentation\/article\/Twitter-embed\/\" target=\"_blank\" rel=\"noopener noreferrer\">Twitter<\/a> e <a href=\"https:\/\/wordpress.org\/documentation\/article\/Spotify-embed\/\" target=\"_blank\" rel=\"noopener noreferrer\">Spotify<\/a>. Anche il <a href=\"https:\/\/wordpress.org\/documentation\/article\/Row-block\/\" target=\"_blank\" rel=\"noopener noreferrer\">blocco Row<\/a> e il <a href=\"https:\/\/wordpress.org\/documentation\/article\/stack-block\/\" target=\"_blank\" rel=\"noopener noreferrer\">blocco Stack<\/a> non sono altro che varianti del <a href=\"https:\/\/wordpress.org\/documentation\/article\/group-block\/\" target=\"_blank\" rel=\"noopener noreferrer\">blocco Group<\/a>, ognuno con impostazioni di layout diverse.<\/p>\n<p>Questo approccio mantiene la modularit\u00e0, permettendo a WordPress di fornire esperienze personalizzate pur utilizzando una struttura di base condivisa.<\/p>\n<h3>Creare una variante Testimonial del blocco Quote<\/h3>\n<p>Sebbene WordPress non disponga di un blocco Testimonial dedicato, il <a href=\"https:\/\/wordpress.org\/documentation\/article\/quote-block\/\" target=\"_blank\" rel=\"noopener noreferrer\">blocco Quote<\/a> (<code>core\/quote<\/code>) pu\u00f2 essere adattato a questo scopo. Invece di costringere gli utenti ad aggiungere manualmente un&#8217;immagine, allineare il testo e formattare il tutto, possiamo definire una variante Testimonial del blocco Quote.<\/p>\n<p>Questa variante include automaticamente un blocco Immagine, un blocco Citazione e due blocchi Paragrafo per il nome della persona e dell&#8217;azienda. In questo modo, ogni testimonial segue lo stesso formato strutturato senza richiedere ulteriori modifiche.<\/p>\n<p>Per registrare una variante di blocco in WordPress, utilizziamo <code>registerBlockVariation()<\/code> in JavaScript. Dato che le varianti di blocco sono gestite lato client, dobbiamo inserire un file JavaScript che registri la nostra variante personalizzata di Testimonial.<\/p>\n<p>Per farlo, creiamo un file JavaScript (come <code>custom-block-variations.js<\/code>) che definisca la variante Testimonial del blocco Quote. Possiamo creare questo file nella cartella <code>assets\/js\/<\/code> del tema e aggiungere il seguente codice:<\/p>\n<pre><code class=\"language-js\">wp.domReady(() =&gt; {\n    wp.blocks.registerBlockVariation(\n        'core\/quote',\n        {\n            name: 'testimonial',\n            title: 'Testimonial',\n            description: 'A variation of the Quote block for testimonials.',\n            category: 'text',\n            attributes: {\n                className: 'is-style-testimonial',\n            },\n            innerBlocks: [\n                ['core\/image', { align: 'center', width: 100, height: 100 }],\n                ['core\/quote'],\n                ['core\/paragraph', { placeholder: 'Name', align: 'center', fontSize: 'medium', className: 'testimonial-name' }],\n                ['core\/paragraph', { placeholder: 'Company \/ Role', align: 'center', fontSize: 'small', className: 'testimonial-company' }]\n            ],\n            scope: ['inserter'],\n        }\n    );\n\n    \/\/ Inject inline styles for the editor preview\n    const style = document.createElement('style');\n    style.innerHTML = `\n        .wp-block-quote.is-style-testimonial {\n            background-color: #f9f9f9;\n            padding: 24px;\n            border: none !important;\n            border-radius: 8px;\n            text-align: center;\n            font-size: 1.2em;\n            font-style: normal;\n            color: #333;\n            box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n        }\n\n        .wp-block-quote.is-style-testimonial p {\n            margin-bottom: 12px;\n            font-size: 1.1em;\n        }\n\n        .wp-block-quote.is-style-testimonial cite {\n            font-weight: bold;\n            display: block;\n            margin-top: 10px;\n            color: #0073aa;\n        }\n\n        .wp-block-quote.is-style-testimonial .wp-block-image {\n            display: flex;\n            justify-content: center;\n            margin: 0 auto 12px;\n        }\n\n        .wp-block-quote.is-style-testimonial .wp-block-image img {\n            width: 100px;\n            height: 100px;\n            object-fit: cover;\n            border-radius: 12px;\n        }\n\n        .wp-block-quote.is-style-testimonial .testimonial-name {\n            font-weight: bold;\n            font-size: 1.2em;\n            margin-top: 12px;\n            color: #222;\n        }\n\n        .wp-block-quote.is-style-testimonial .testimonial-company {\n            font-size: 0.9em;\n            color: #555;\n        }\n    `;\n    document.head.appendChild(style);\n});<\/code><\/pre>\n<p>Nel codice qui sopra, <code>registerBlockVariation()<\/code> definisce la variante Testimonial del blocco Citazione, precaricando un blocco Immagine, un blocco Citazione e due blocchi Paragrafo per il nome della persona e dell&#8217;azienda. Il blocco Immagine \u00e8 centrato a 100&#215;100 pixel per uniformare le immagini del profilo, mentre il blocco Citazione rimane invariato come testo della testimonianza.<\/p>\n<p>Per lo stile viene applicata una classe personalizzata (<code>is-style-testimonial<\/code>) che conferisce al blocco uno sfondo chiaro, un&#8217;ombra sottile e un testo centrato. Il bordo sinistro predefinito viene rimosso e l&#8217;immagine mantiene il suo rapporto d&#8217;aspetto con angoli leggermente arrotondati per dare un look raffinato.<\/p>\n<p>Quindi, poich\u00e9 il file JavaScript deve essere caricato all&#8217;interno dell&#8217;editor di blocchi, dobbiamo inserirlo nel file <code>functions.php<\/code>.<\/p>\n<pre><code class=\"language-php\">function enqueue_custom_block_variations() {\n    wp_enqueue_script(\n        'custom-block-variations',\n        get_template_directory_uri() . '\/assets\/js\/custom-block-variations.js',\n        array( 'wp-blocks', 'wp-dom-ready', 'wp-edit-post' ),\n        filemtime( get_template_directory() . '\/assets\/js\/custom-block-variations.js' ),\n        true\n    );\n}\nadd_action( 'enqueue_block_editor_assets', 'enqueue_custom_block_variations' );<\/code><\/pre>\n<p>In questo modo, la variante del blocco Testimonial viene visualizzata nell&#8217;editor di blocchi.<\/p>\n<p>Mentre il codice JavaScript assicura che il blocco appaia correttamente nell&#8217;editor, dobbiamo anche applicare gli stili sul frontend in modo che le testimonianze vengano visualizzate correttamente quando vengono pubblicate. Aggiungiamo il seguente codice al file <code>functions.php<\/code>:<\/p>\n<pre><code class=\"language-php\">function register_testimonial_block_style() {\n    register_block_style(\n        'core\/quote',\n        array(\n            'name'  =&gt; 'testimonial',\n            'label' =&gt; __( 'Testimonial', 'your-text-domain' ),\n            'inline_style' =&gt; '\n                .wp-block-quote.is-style-testimonial {\n                    background-color: #f9f9f9;\n                    padding: 24px;\n                    border: none !important;\n                    border-radius: 8px;\n                    text-align: center;\n                    font-size: 1.2em;\n                    font-style: normal;\n                    color: #333;\n                    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);\n                    display: flex;\n                    flex-direction: column;\n                    align-items: center;\n                }\n\n                .wp-block-quote.is-style-testimonial .wp-block-image img {\n                    width: 100px;\n                    height: 100px;\n                    object-fit: cover;\n                    border-radius: 12px;\n                }\n\n                .wp-block-quote.is-style-testimonial .testimonial-name {\n                    font-weight: bold;\n                    font-size: 1.2em;\n                    margin-top: 12px;\n                    color: #222;\n                }\n\n                .wp-block-quote.is-style-testimonial .testimonial-company {\n                    font-size: 0.9em;\n                    color: #555;\n                }\n            ',\n        )\n    );\n}\nadd_action( 'init', 'register_testimonial_block_style' );<\/code><\/pre>\n<p>Ora, ogni volta che un utente inserisce un blocco Testimonial, questo include gi\u00e0 i campi <strong>immagine<\/strong>, <strong>citazione<\/strong>, <strong>nome<\/strong> e <strong>azienda<\/strong>, tutti preformattati e con uno stile corretto. Questo elimina la necessit\u00e0 di effettuare regolazioni manuali, assicurando che ogni testimonianza segua la stessa struttura pulita e professionale.<\/p>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2025\/02\/testimonial-block.png\" alt=\"Variante del blocco Testimonial.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Variante del blocco Testimonial.<\/figcaption><\/figure>\n<p>Invece di costringere gli utenti a creare le testimonianze da zero, questa variante del blocco offre un workflow semplificato che migliora la creazione dei contenuti mantenendo la coerenza del design del sito.<\/p>\n<h2>Un caso d&#8217;uso avanzato: Combiniamo le API Supports e Styles per creare pulsanti personalizzati<\/h2>\n<p>Ora che sappiamo cosa possono fare e come funzionano le singole API, perch\u00e9 non spingersi un po&#8217; oltre? Invece di usare le API Supports o Styles separatamente, possiamo usarle insieme per risolvere un unico problema: mantenere la coerenza del design e offrire agli utenti un modo strutturato per applicare gli stili giusti.<\/p>\n<p>Consideriamo uno scenario reale. Un&#8217;azienda vuole che tutti i pulsanti del suo sito seguano le linee guida del brand. Non vuole che gli utenti scelgano colori a caso, cambino il padding o applichino una tipografia stravagante. Tuttavia, vuole anche una certa flessibilit\u00e0: gli utenti devono poter scegliere tra due stili di pulsanti gi\u00e0 approvati:<\/p>\n<ol start=\"1\">\n<li><strong>Pulsante primario<\/strong>: il pulsante principale di chiamata all&#8217;azione, con uno sfondo solido e uno stile deciso.<\/li>\n<li><strong>Pulsante secondario<\/strong>: un pulsante pi\u00f9 sottile e delineato, solitamente utilizzato per azioni secondarie.<\/li>\n<\/ol>\n<p>Per ottenere questo risultato, dobbiamo:<\/p>\n<ul>\n<li>Utilizzare la Styles API per definire i due stili dei pulsanti.<\/li>\n<li>Utilizzare la Supports API per rimuovere le impostazioni non necessarie, assicurandoci che gli utenti non sovrascrivano manualmente il branding modificando i colori, la spaziatura o la tipografia.<\/li>\n<\/ul>\n<p>Combinando entrambe le API, permettiamo agli utenti di fare scelte strutturate e impediamo di rompere il sistema di design.<\/p>\n<h3>Passo 1: Definizione degli stili dei pulsanti personalizzati<\/h3>\n<p>Aggiungiamo il seguente codice al file <code>functions.php<\/code>:<\/p>\n<pre><code class=\"language-php\">function register_custom_button_styles() {\n    register_block_style(\n        'core\/button',\n        array(\n            'name'  =&gt; 'primary-button',\n            'label' =&gt; __( 'Primary Button', 'your-text-domain' ),\n            'inline_style' =&gt; '\n                .wp-block-button.is-style-primary-button .wp-block-button__link {\n                    background-color: #4D4D4D;\n                    color: #ffffff;\n                    padding: 12px 24px;\n                    border-radius: 4px;\n                    font-size: 1em;\n                    font-weight: 500;\n                    text-transform: none;\n                    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.1);\n                }\n            ',\n        )\n    );\n\n    register_block_style(\n        'core\/button',\n        array(\n            'name'  =&gt; 'secondary-button',\n            'label' =&gt; __( 'Secondary Button', 'your-text-domain' ),\n            'inline_style' =&gt; '\n                .wp-block-button.is-style-secondary-button .wp-block-button__link {\n                    background-color: transparent;\n                    color: #4D4D4D;\n                    padding: 12px 24px;\n                    border: 1px solid #4D4D4D;\n                    border-radius: 4px;\n                    font-size: 1em;\n                    font-weight: 500;\n                    text-transform: none;\n                    box-shadow: none;\n                }\n            ',\n        )\n    );\n}\nadd_action( 'init', 'register_custom_button_styles' );<\/code><\/pre>\n<p>Ora, quando gli utenti inseriscono un blocco Pulsante, vedranno <strong>Pulsante primario<\/strong> e <strong>Pulsante secondario<\/strong> come scelte di stile.<\/p>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2025\/02\/custom-button-styles.png\" alt=\"Stili di pulsanti personalizzati: Primario e secondario.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Stili di pulsanti personalizzati.<\/figcaption><\/figure>\n<p>Il pulsante primario ha uno sfondo grigio scuro pieno, mentre il pulsante secondario ha uno sfondo trasparente con un bordo. Entrambi i pulsanti hanno un padding, un raggio del bordo e uno stile del carattere coerenti, per garantire un aspetto professionale in tutto il sito.<\/p>\n<h3>Passo 2: Limiti alla personalizzazione dei pulsanti<\/h3>\n<p>Sebbene gli stili dei pulsanti siano ora predefiniti, gli utenti possono ancora modificarli manualmente utilizzando le impostazioni dell&#8217;editor di blocchi di WordPress. Se cambiano i colori, il padding o la <a href=\"https:\/\/kinsta.com\/it\/blog\/tipografia-wordpress-theme-json\/\">tipografia<\/a>, i pulsanti potrebbero non corrispondere pi\u00f9 alle linee guida del brand.<\/p>\n<p>Possiamo utilizzare la Supports API per disabilitare queste opzioni di personalizzazione, evitando che gli utenti apportino modifiche indesiderate. Aggiungiamo questo codice al file <code>functions.php<\/code>:<\/p>\n<pre><code class=\"language-php\">function restrict_button_customization($args, $block_type) {\n    if ($block_type === 'core\/button') {\n        \/\/ Disable specific color settings (text, background, link)\n        $args['supports']['color'] = [\n            'text'       =&gt; false, \n            'background' =&gt; false, \n            'link'       =&gt; false,  \n        ];\n\n        \/\/ Disable typography settings (font size, font weight, line height)\n        $args['supports']['typography'] = false;\n\n        \/\/ Disable spacing settings (padding, margin)\n        $args['supports']['spacing'] = false;\n\n    }\n    return $args;\n}\nadd_filter('register_block_type_args', 'restrict_button_customization', 10, 2);<\/code><\/pre>\n<p>Con questa soluzione:<\/p>\n<ul>\n<li>Gli utenti non possono cambiare i colori dei pulsanti, quindi tutti i pulsanti devono aderire allo schema di colori del brand.<\/li>\n<li>I controlli della tipografia vengono rimossi, in modo da mantenere la formattazione del testo coerente.<\/li>\n<li>Le regolazioni della spaziatura sono disabilitate per impedire agli utenti di modificare padding e margini.<\/li>\n<\/ul>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2025\/02\/new-primary-button.png\" alt=\"Pulsante primario stilizzato in WordPress.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Pulsante primario stilizzato.<\/figcaption><\/figure>\n<p>Ora, invece di lasciare che gli utenti creino un mix casuale di stili di pulsanti, potranno semplicemente scegliere tra lo stile primario e quello secondario, mantenendo il design professionale e strutturato.<\/p>\n<h2>Riepilogo<\/h2>\n<p>Abbiamo solo scalfito la superficie di ci\u00f2 che \u00e8 possibile fare con la personalizzazione dei blocchi di WordPress. WordPress offre una vasta collezione di API che permettono di estendere e personalizzare facilmente i blocchi, consentendo agli sviluppatori di personalizzare l&#8217;esperienza dell&#8217;editor mantenendo le cose strutturate e facili da usare.<\/p>\n<p>Se si vuole davvero padroneggiare il funzionamento dei blocchi, c&#8217;\u00e8 molto altro da analizzare. Consigliamo di dare un&#8217;occhiata alla <a href=\"https:\/\/developer.wordpress.org\/\" target=\"_blank\" rel=\"noopener noreferrer\">documentazione ufficiale di WordPress per gli sviluppatori<\/a>, partecipare ai <a href=\"https:\/\/kinsta.com\/it\/blog\/guida-wordcamp\/\">WordCamp e ai meetup<\/a> e continuare a imparare da ottime risorse come il <a href=\"https:\/\/kinsta.com\/it\/blog\/\">blog di Kinsta<\/a>, in cui vengono spiegati regolarmente i concetti avanzati di WordPress.<\/p>\n<p>Naturalmente, avere un solido provider di hosting rende facile sperimentare queste modifiche. Un hosting affidabile garantisce prestazioni fluide e una facile scalabilit\u00e0 per chi testa nuove modifiche ai blocchi o gestisce un sito ad alto traffico. Noi di Kinsta abbiamo progettato la nostra piattaforma per gestire esattamente questo aspetto. Infatti, di recente siamo stati collocati in cima alla <a href=\"https:\/\/www.g2.com\/products\/kinsta\/reviews\">classifica degli Hosting WordPress da G2<\/a>, grazie a <a href=\"https:\/\/www.g2.com\/products\/kinsta\/reviews\">oltre 930 recensioni di clienti<\/a>.<\/p>\n<p>Questo dice tutto: puoi <a href=\"https:\/\/kinsta.com\/it\/prezzi\/\">fidarti di noi per il tuo sito WordPress<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Nel 2018, con la versione 5.0, WordPress ha lanciato l&#8217;editor Gutenberg, introducendo un nuovo modo di creare pagine e post utilizzando i &#8220;blocchi&#8221;. All&#8217;inizio questi blocchi &#8230;<\/p>\n","protected":false},"author":287,"featured_media":80740,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[25873],"class_list":["post-80739","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","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 estendere i blocchi core di WordPress con la Blocks API<\/title>\n<meta name=\"description\" content=\"Scopri come estendere i blocchi core di WordPress utilizzando la Blocks API per personalizzare impostazioni, stili e funzionalit\u00e0.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/it\/blog\/estendere-blocchi-core-wp\/\" \/>\n<meta property=\"og:locale\" content=\"it_IT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Come estendere i blocchi core di WordPress con la Blocks API\" \/>\n<meta property=\"og:description\" content=\"Scopri come estendere i blocchi core di WordPress utilizzando la Blocks API per personalizzare impostazioni, stili e funzionalit\u00e0.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/it\/blog\/estendere-blocchi-core-wp\/\" \/>\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=\"2025-04-02T09:14:54+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-16T11:02:20+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2025\/03\/how-to-extend-core-wordpress-blocks-with-blocks-api.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=\"Joel Olawanle\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Scopri come estendere i blocchi core di WordPress utilizzando la Blocks API per personalizzare impostazioni, stili e funzionalit\u00e0.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2025\/03\/how-to-extend-core-wordpress-blocks-with-blocks-api.png\" \/>\n<meta name=\"twitter:creator\" content=\"@olawanle_joel\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_IT\" \/>\n<meta name=\"twitter:label1\" content=\"Scritto da\" \/>\n\t<meta name=\"twitter:data1\" content=\"Joel Olawanle\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo di lettura stimato\" \/>\n\t<meta name=\"twitter:data2\" content=\"15 minuti\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/estendere-blocchi-core-wp\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/estendere-blocchi-core-wp\/\"},\"author\":{\"name\":\"Joel Olawanle\",\"@id\":\"https:\/\/kinsta.com\/it\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\"},\"headline\":\"Come estendere i blocchi core di WordPress con la Blocks API\",\"datePublished\":\"2025-04-02T09:14:54+00:00\",\"dateModified\":\"2025-04-16T11:02:20+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/estendere-blocchi-core-wp\/\"},\"wordCount\":2380,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/it\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/estendere-blocchi-core-wp\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2025\/03\/how-to-extend-core-wordpress-blocks-with-blocks-api.png\",\"inLanguage\":\"it-IT\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/estendere-blocchi-core-wp\/\",\"url\":\"https:\/\/kinsta.com\/it\/blog\/estendere-blocchi-core-wp\/\",\"name\":\"Come estendere i blocchi core di WordPress con la Blocks API\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/it\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/estendere-blocchi-core-wp\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/estendere-blocchi-core-wp\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2025\/03\/how-to-extend-core-wordpress-blocks-with-blocks-api.png\",\"datePublished\":\"2025-04-02T09:14:54+00:00\",\"dateModified\":\"2025-04-16T11:02:20+00:00\",\"description\":\"Scopri come estendere i blocchi core di WordPress utilizzando la Blocks API per personalizzare impostazioni, stili e funzionalit\u00e0.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/estendere-blocchi-core-wp\/#breadcrumb\"},\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/it\/blog\/estendere-blocchi-core-wp\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/estendere-blocchi-core-wp\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2025\/03\/how-to-extend-core-wordpress-blocks-with-blocks-api.png\",\"contentUrl\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2025\/03\/how-to-extend-core-wordpress-blocks-with-blocks-api.png\",\"width\":1470,\"height\":735},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/estendere-blocchi-core-wp\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/it\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Sviluppo di WordPress\",\"item\":\"https:\/\/kinsta.com\/it\/argomenti\/sviluppo-wordpress\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Come estendere i blocchi core di WordPress con la Blocks API\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/it\/#website\",\"url\":\"https:\/\/kinsta.com\/it\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Soluzioni di hosting premium, veloci e sicure\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/it\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/it\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"it-IT\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/it\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/it\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/kinsta.com\/it\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.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:\/\/kinsta.com\/it\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\",\"name\":\"Joel Olawanle\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/kinsta.com\/it\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g\",\"caption\":\"Joel Olawanle\"},\"description\":\"Joel is a Frontend developer working at Kinsta as a Technical Editor. He is a passionate teacher with love for open source and has written over 300 technical articles majorly around JavaScript and it's frameworks.\",\"sameAs\":[\"https:\/\/joelolawanle.com\/\",\"https:\/\/www.linkedin.com\/in\/olawanlejoel\/\",\"https:\/\/x.com\/olawanle_joel\",\"https:\/\/www.youtube.com\/@joelolawanle\"],\"gender\":\"male\",\"knowsAbout\":[\"JavaScript\",\"React\",\"Next.js\"],\"knowsLanguage\":[\"English\"],\"jobTitle\":\"Technical Editor\",\"worksFor\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/it\/blog\/author\/joelolawanle\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Come estendere i blocchi core di WordPress con la Blocks API","description":"Scopri come estendere i blocchi core di WordPress utilizzando la Blocks API per personalizzare impostazioni, stili e funzionalit\u00e0.","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:\/\/kinsta.com\/it\/blog\/estendere-blocchi-core-wp\/","og_locale":"it_IT","og_type":"article","og_title":"Come estendere i blocchi core di WordPress con la Blocks API","og_description":"Scopri come estendere i blocchi core di WordPress utilizzando la Blocks API per personalizzare impostazioni, stili e funzionalit\u00e0.","og_url":"https:\/\/kinsta.com\/it\/blog\/estendere-blocchi-core-wp\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstaitalia\/","article_published_time":"2025-04-02T09:14:54+00:00","article_modified_time":"2025-04-16T11:02:20+00:00","og_image":[{"width":1470,"height":735,"url":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2025\/03\/how-to-extend-core-wordpress-blocks-with-blocks-api.png","type":"image\/png"}],"author":"Joel Olawanle","twitter_card":"summary_large_image","twitter_description":"Scopri come estendere i blocchi core di WordPress utilizzando la Blocks API per personalizzare impostazioni, stili e funzionalit\u00e0.","twitter_image":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2025\/03\/how-to-extend-core-wordpress-blocks-with-blocks-api.png","twitter_creator":"@olawanle_joel","twitter_site":"@Kinsta_IT","twitter_misc":{"Scritto da":"Joel Olawanle","Tempo di lettura stimato":"15 minuti"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/it\/blog\/estendere-blocchi-core-wp\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/it\/blog\/estendere-blocchi-core-wp\/"},"author":{"name":"Joel Olawanle","@id":"https:\/\/kinsta.com\/it\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07"},"headline":"Come estendere i blocchi core di WordPress con la Blocks API","datePublished":"2025-04-02T09:14:54+00:00","dateModified":"2025-04-16T11:02:20+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/it\/blog\/estendere-blocchi-core-wp\/"},"wordCount":2380,"publisher":{"@id":"https:\/\/kinsta.com\/it\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/it\/blog\/estendere-blocchi-core-wp\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2025\/03\/how-to-extend-core-wordpress-blocks-with-blocks-api.png","inLanguage":"it-IT"},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/it\/blog\/estendere-blocchi-core-wp\/","url":"https:\/\/kinsta.com\/it\/blog\/estendere-blocchi-core-wp\/","name":"Come estendere i blocchi core di WordPress con la Blocks API","isPartOf":{"@id":"https:\/\/kinsta.com\/it\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/it\/blog\/estendere-blocchi-core-wp\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/it\/blog\/estendere-blocchi-core-wp\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2025\/03\/how-to-extend-core-wordpress-blocks-with-blocks-api.png","datePublished":"2025-04-02T09:14:54+00:00","dateModified":"2025-04-16T11:02:20+00:00","description":"Scopri come estendere i blocchi core di WordPress utilizzando la Blocks API per personalizzare impostazioni, stili e funzionalit\u00e0.","breadcrumb":{"@id":"https:\/\/kinsta.com\/it\/blog\/estendere-blocchi-core-wp\/#breadcrumb"},"inLanguage":"it-IT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/it\/blog\/estendere-blocchi-core-wp\/"]}]},{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/kinsta.com\/it\/blog\/estendere-blocchi-core-wp\/#primaryimage","url":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2025\/03\/how-to-extend-core-wordpress-blocks-with-blocks-api.png","contentUrl":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2025\/03\/how-to-extend-core-wordpress-blocks-with-blocks-api.png","width":1470,"height":735},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/it\/blog\/estendere-blocchi-core-wp\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/it\/"},{"@type":"ListItem","position":2,"name":"Sviluppo di WordPress","item":"https:\/\/kinsta.com\/it\/argomenti\/sviluppo-wordpress\/"},{"@type":"ListItem","position":3,"name":"Come estendere i blocchi core di WordPress con la Blocks API"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/it\/#website","url":"https:\/\/kinsta.com\/it\/","name":"Kinsta\u00ae","description":"Soluzioni di hosting premium, veloci e sicure","publisher":{"@id":"https:\/\/kinsta.com\/it\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/it\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"it-IT"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/it\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/it\/","logo":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/kinsta.com\/it\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.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:\/\/kinsta.com\/it\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07","name":"Joel Olawanle","image":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/kinsta.com\/it\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g","caption":"Joel Olawanle"},"description":"Joel is a Frontend developer working at Kinsta as a Technical Editor. He is a passionate teacher with love for open source and has written over 300 technical articles majorly around JavaScript and it's frameworks.","sameAs":["https:\/\/joelolawanle.com\/","https:\/\/www.linkedin.com\/in\/olawanlejoel\/","https:\/\/x.com\/olawanle_joel","https:\/\/www.youtube.com\/@joelolawanle"],"gender":"male","knowsAbout":["JavaScript","React","Next.js"],"knowsLanguage":["English"],"jobTitle":"Technical Editor","worksFor":"Kinsta","url":"https:\/\/kinsta.com\/it\/blog\/author\/joelolawanle\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/posts\/80739","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/users\/287"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/comments?post=80739"}],"version-history":[{"count":8,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/posts\/80739\/revisions"}],"predecessor-version":[{"id":80768,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/posts\/80739\/revisions\/80768"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/80739\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/80739\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/80739\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/80739\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/80739\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/80739\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/80739\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/80739\/translations\/es"},{"href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/80739\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/media\/80740"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/media?parent=80739"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/tags?post=80739"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/topic?post=80739"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}