{"id":81556,"date":"2025-08-07T09:09:13","date_gmt":"2025-08-07T08:09:13","guid":{"rendered":"https:\/\/kinqsta.com\/it\/?p=81556&#038;preview=true&#038;preview_id=81556"},"modified":"2025-11-14T09:50:35","modified_gmt":"2025-11-14T08:50:35","slug":"varianti-di-stile-e-di-blocco-gutenberg","status":"publish","type":"post","link":"https:\/\/kinqsta.com\/it\/blog\/varianti-di-stile-e-di-blocco-gutenberg\/","title":{"rendered":"Come hackerare i blocchi di Gutenberg con le varianti di stile e di blocco"},"content":{"rendered":"<p>Gutenberg si \u00e8 evoluto in un editor potente e altamente personalizzabile. Al di l\u00e0 delle sue solide <a href=\"https:\/\/kinqsta.com\/it\/blog\/gutenberg-editor-wordpress\/\">funzionalit\u00e0<\/a>, gli sviluppatori di WordPress ora possono sfruttare un ricco set di API per integrare facilmente funzionalit\u00e0 personalizzate nei loro siti web. Questa estensibilit\u00e0 porta con s\u00e9 notevoli possibilit\u00e0 di sviluppo su misura, permettendo di creare esperienze online altamente personalizzate e ricche di funzionalit\u00e0.<\/p>\n<p>Questo articolo esplora due funzionalit\u00e0 di WordPress meno note eppure potenti: <strong>Varianti di stile<\/strong> (note anche come stili di blocco) e <strong>Varianti di blocco<\/strong>.<\/p>\n<p>Una volta compreso il funzionamento, sar\u00e0 chiaro che la loro utilit\u00e0 \u00e8 sorprendente e un piccolo investimento di tempo permetter\u00e0 di integrarli nel workflow senza problemi.<\/p>\n<p>Vedremo da vicino cosa sono e come usarli attraverso un progetto reale. Potremo implementare questo progetto su un sito WordPress semplicemente copiando e incollando il codice di questo tutorial ed eventualmente aggiungendo delle personalizzazioni.<\/p>\n<p>Prima di immergerci nel progetto, esaminiamo rapidamente i prerequisiti:<\/p>\n<ul>\n<li><strong>Ambiente di sviluppo WordPress locale:<\/strong> anche se va bene qualsiasi ambiente, noi consigliamo vivamente <a href=\"https:\/\/kinqsta.com\/it\/devkinsta\/\">DevKinsta<\/a>, la suite di sviluppo locale di Kinsta. \u00c8 intuitiva e offre molte impostazioni e <a href=\"https:\/\/kinqsta.com\/it\/blog\/adminer\/\">strumenti<\/a> per lanciare rapidamente e gestire senza fatica un sito WordPress locale.<\/li>\n<li><strong>Node.js e npm:<\/strong> sono essenziali perch\u00e9 l&#8217;editor di blocchi \u00e8 costruito su React e richiede un processo di build.<\/li>\n<li><strong>Competenze di base nello sviluppo frontend:<\/strong> sar\u00e0 utile avere una conoscenza di base di Node.js, JavaScript (con React), PHP e CSS.<\/li>\n<\/ul>\n<p>Anche se questo progetto non \u00e8 eccessivamente complesso, bisogner\u00e0 scrivere un po&#8217; di codice. Il <a href=\"https:\/\/github.com\/carlodaniele\/image-hacker\" target=\"_blank\" rel=\"noopener noreferrer\">codice completo<\/a> \u00e8 disponibile anche su GitHub.<\/p>\n<p>Iniziamo!<br \/>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc><\/p>\n<h2>Stili di blocco e Varianti di blocco<\/h2>\n<p><strong>Gli stili di blocco<\/strong> e le <strong>varianti di blocco<\/strong> sono due potenti funzionalit\u00e0 di WordPress per gli sviluppatori. Sebbene i loro nomi suonino piuttosto simili, differiscono per scopo e utilizzo.<\/p>\n<p><strong>Gli stili di blocco<\/strong>, noti anche come varianti di stile, sono set predefiniti di stili CSS che permettono di cambiare l&#8217;aspetto di un blocco con un solo clic. Dopo aver registrato uno stile di blocco, nella barra laterale del blocco appare un pulsante che permette all&#8217;utente di assegnare un set predefinito di stili al blocco. \u00c8 possibile attivare e disattivare gli stili e visualizzare l&#8217;anteprima del blocco nell&#8217;editor in tempo reale.<\/p>\n<figure id=\"attachment_196255\" aria-describedby=\"caption-attachment-196255\" style=\"width: 1698px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-196255 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2025\/06\/image-block-default-style-variations.jpg\" alt=\"Il blocco core Immagine ha due varianti di stile predefinite.\" width=\"1698\" height=\"1092\"><figcaption id=\"caption-attachment-196255\" class=\"wp-caption-text\">Il blocco core Immagine ha due varianti di stile predefinite.<\/figcaption><\/figure>\n<p><strong>Le varianti di stile non alterano gli attributi del blocco. Modificano solo l&#8217;aspetto di un blocco assegnando una classe CSS all&#8217;elemento che lo contiene.<\/strong><\/p>\n<p>Le varianti di blocco sono uno strumento pi\u00f9 potente perch\u00e9 permettono di creare una versione preconfigurata di un blocco con attributi e blocchi interni. Inoltre, vengono visualizzate nel pannello di inserimento dei blocchi dell&#8217;editor. In sostanza, una variante di blocco appare all&#8217;utente come se fosse un blocco a s\u00e9 stante, completamente indipendente dal blocco su cui \u00e8 costruito.<\/p>\n<p><strong>Le varianti di blocco consentono di personalizzare l&#8217;aspetto, le impostazioni iniziali e la struttura di un blocco.<\/strong><\/p>\n<p>Tenendo presente tutto questo, utilizziamo questi strumenti per portare i blocchi di Gutenberg a un livello superiore!<\/p>\n<h2>Un effetto Polaroid animato su un blocco Immagine<\/h2>\n<p>Ora immergiamoci nel nostro progetto! Estenderemo il blocco core Immagine con un plugin Gutenberg per:<\/p>\n<ul>\n<li><strong>Implementare una variante di stile Polaroid:<\/strong> gli utenti potranno applicare un gradevole effetto Polaroid alle loro immagini con un solo clic dalla barra laterale delle impostazioni del blocco.<\/li>\n<li><strong>Aggiungere un&#8217;animazione hover:<\/strong> Miglioreremo le immagini in stile Polaroid con una leggera animazione hover.<\/li>\n<li><strong>Creare una variante del blocco &#8220;Animated Polaroid&#8221;:<\/strong> ci\u00f2 consentir\u00e0 agli utenti di inserire rapidamente immagini Polaroid preconfigurate con un effetto hover direttamente dal pannello di inserimento dei blocchi.<\/li>\n<\/ul>\n<p>Pronti? Configuriamo il nostro plugin!<\/p>\n<div><\/div><kinsta-auto-toc list-style=\"decimal\" selector=\"h3\" count-number=\"-1\" sub-toc=\"true\"><\/kinsta-auto-toc>\n<figure id=\"attachment_196838\" aria-describedby=\"caption-attachment-196838\" style=\"width: 1953px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-196838 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2025\/07\/front-end-animation.jpg\" alt=\"Un effetto di animazione su un blocco immagine\" width=\"1953\" height=\"1248\"><figcaption id=\"caption-attachment-196838\" class=\"wp-caption-text\">Un effetto di animazione su un blocco immagine<\/figcaption><\/figure>\n<h3>Configurazione dell&#8217;ambiente<\/h3>\n<p>Prima di iniziare, dobbiamo configurare un ambiente di sviluppo WordPress con Node.js. Partiamo dal presupposto di aver gi\u00e0 installato l&#8217;ambiente di sviluppo WordPress locale e le ultime versioni di <a href=\"https:\/\/kinqsta.com\/it\/blog\/come-installare-node-js\/\">Node.js<\/a> e <a href=\"https:\/\/kinqsta.com\/it\/blog\/cos-e-npm\/\">npm<\/a>. Se ci fosse bisogno di aiuto, c&#8217;\u00e8 sempre il nostro tutorial su <a href=\"https:\/\/kinqsta.com\/it\/blog\/plugin-gutenberg\/#how-to-create-a-block-editor-plugin-without-creating-a-custom-block\">come creare un plugin Gutenberg per aggiungere funzionalit\u00e0 all&#8217;editor a blocchi<\/a>.<\/p>\n<h4>Passo 1 &#8211; Creare la struttura di base del plugin<\/h4>\n<p>Per questo tutorial, chiameremo il nostro plugin <strong>Image Hacker<\/strong>.<\/p>\n<p>Spostiamoci nella tua cartella <code>plugins<\/code> e creiamo una nuova cartella <code>image-hacker<\/code>. All&#8217;interno di questa cartella, creiamo un nuovo file <code>image-hacker.php<\/code> (il file principale del plugin) e una sottocartella <code>src<\/code>, dove svilupperemo le funzionalit\u00e0 del plugin.<\/p>\n<p>Ecco la struttura di base del plugin:<\/p>\n<pre><code>\/wp-content\/plugins\/\n\u2514\u2500\u2500 \/image-hacker\/\n\t\u251c\u2500\u2500 image-hacker.php\n\t\u2514\u2500\u2500 \/src\/<\/code><\/pre>\n<h4>Passo 2 &#8211; Creare il codice PHP<\/h4>\n<p>Di seguito, dobbiamo assicurarci che WordPress riconosca il plugin. Per farlo, aggiungiamo il seguente codice a <code>image-hacker.php<\/code>:<\/p>\n<pre><code class=\"language-php\">&lt;?php\n\/**\n * Plugin Name: Image Hacker\n * Description: Adds new features to the core Image block\n * Version:     1.0.0\n * Author:      Your Name\n * License:     GPL-2.0-or-later\n * License URI: https:\/\/www.gnu.org\/licenses\/gpl-2.0.html\n * Text Domain: image-hacker\n *\/\n\nif ( ! defined( 'ABSPATH' ) ) {\n\texit; \/\/ Exit if accessed directly.\n}<\/code><\/pre>\n<h4>Passo 3 &#8211; Inizializzare npm e installare le dipendenze<\/h4>\n<p>Apriamo lo strumento a riga di comando preferito e spostiamoci nella directory del plugin. Una volta l\u00ec, eseguiamo il seguente comando:<\/p>\n<pre><code class=\"language-bash\">npm init -y<\/code><\/pre>\n<p>Questo comando inizializza un nuovo file <code>package.json<\/code>, che include le dipendenze e gli script del progetto.<\/p>\n<p>Quindi dovremo installare gli script di WordPress e gli strumenti di compilazione come webpack e Babel:<\/p>\n<pre><code class=\"language-bash\">npm install @wordpress\/plugins @wordpress\/scripts --save-dev<\/code><\/pre>\n<p>Questo comando crea una cartella <code>node_modules<\/code> con le dipendenze di Node e un file <code>package-lock.json<\/code>. L&#8217;immagine che segue mostra la struttura attuale del progetto in <a href=\"https:\/\/kinqsta.com\/it\/blog\/estensioni-vscode\/\">Visual Studio Code<\/a>:<\/p>\n<figure id=\"attachment_196256\" aria-describedby=\"caption-attachment-196256\" style=\"width: 1880px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-196256 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2025\/06\/gutenberg-plugin-basic-structure.jpg\" alt=\"Un plugin Gutenberg in Visual Studio Code\" width=\"1880\" height=\"759\"><figcaption id=\"caption-attachment-196256\" class=\"wp-caption-text\">Un plugin Gutenberg in Visual Studio Code<\/figcaption><\/figure>\n<p>Ora apriamo il <code>package.json<\/code> e aggiorniamo la propriet\u00e0 <code>scripts<\/code> come segue:<\/p>\n<pre><code class=\"language-json\">{\n\t\"name\": \"image-hacker\",\n\t\"version\": \"1.0.0\",\n\t\"main\": \"index.js\",\n\t\"scripts\": {\n\t\t\"build\": \"wp-scripts build\",\n\t\t\"start\": \"wp-scripts start\"\n\t},\n\t\"keywords\": [],\n\t\"author\": \"\",\n\t\"license\": \"ISC\",\n\t\"description\": \"\",\n\t\"devDependencies\": {\n\t\t\"@wordpress\/plugins\": \"^7.25.0\",\n\t\t\"@wordpress\/scripts\": \"^30.18.0\"\n\t}\n}<\/code><\/pre>\n<p>Si noti che le versioni di <code>devDependencies<\/code> possono differire da quelle indicate qui sopra e dipendono dalle versioni effettivamente installate nell&#8217;ambiente.<\/p>\n<h4>Passo 4 &#8211; Creare i file sorgente del plugin<\/h4>\n<p>Il passo successivo consiste nel creare i file sorgente del plugin. Andiamo nella cartella <code>src<\/code> e aggiungiamo i seguenti file:<\/p>\n<ul>\n<li><code>index.js<\/code><\/li>\n<li><code>style.scss<\/code><\/li>\n<li><code>editor.scss<\/code><\/li>\n<\/ul>\n<p>La struttura del plugin dovrebbe ora essere questa:<\/p>\n<pre><code>\/wp-content\/plugins\/\n\u2514\u2500\u2500 \/image-hacker\/\n\t\u251c\u2500\u2500 \/node-modules\/\n\t\u251c\u2500\u2500 image-hacker.php\n\t\u251c\u2500\u2500 package.json\n\t\u251c\u2500\u2500 package-lock.json\n\t\u2514\u2500\u2500 \/src\/\n\t\t\u251c\u2500\u2500 index.js\n\t\t\u251c\u2500\u2500 style.scss\n\t\t\u2514\u2500\u2500 editor.scss<\/code><\/pre>\n<p>Ora apriamo il pannello di amministrazione di WordPress e andiamo alla schermata dei <strong>plugin<\/strong>. Cerchiamo il plugin <strong>Image Hacker<\/strong> e attiviamolo.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Il file <code>editor.scss<\/code> \u00e8 il file in cui dichiarare gli stili di blocco solo per l&#8217;editor, mentre il file <code>style.scss<\/code> contiene gli stili di blocco sia per l&#8217;editor che per il frontend. In questo progetto non utilizzeremo il file <code>editor.scss<\/code>.<\/p>\n<\/aside>\n\n<h4>Passo 5 &#8211; Includere le risorse nel file del plugin<\/h4>\n<p>Ora dobbiamo includere le risorse necessarie nel file principale del plugin. Aggiungiamo quanto segue a <code>image-hacker.php<\/code>:<\/p>\n<pre><code class=\"language-php\">\/**\n * Enqueue block editor assets.\n *\/\nfunction image_hacker_enqueue_editor_assets() {\n\t$asset_file = include( plugin_dir_path( __FILE__ ) . 'build\/index.asset.php');\n\n\t\/\/ Enqueue the script with our modifications\n\twp_enqueue_script(\n\t\t'image-hacker-script',\n\t\tplugins_url( 'build\/index.js', __FILE__ ),\n\t\tarray( 'wp-plugins', 'wp-edit-post' ),\n\t\tfilemtime( plugin_dir_path( __FILE__ ) . 'build\/index.js' )\n\t);\n\n\t\/\/ Enqueue the editor-only styles\n\twp_enqueue_style(\n\t\t'image-hacker-editor-style',\n\t\tplugins_url( 'build\/editor.css', __FILE__ ),\n\t\t[],\n\t\tfilemtime( plugin_dir_path( __FILE__ ) . 'build\/editor.css' )\n\t);\n}\nadd_action( 'enqueue_block_editor_assets', 'image_hacker_enqueue_editor_assets' );\n\n\/**\n * Enqueue frontend and editor assets.\n *\/\nfunction image_hacker_enqueue_assets() {\n\t$asset_file = include( plugin_dir_path( __FILE__ ) . 'build\/index.asset.php');\n\n\t\/\/ Enqueue styles for both frontend and editor\n\twp_enqueue_style(\n\t\t'image-hacker-style',\n\t\tplugins_url( 'build\/style-index.css', __FILE__ ),\n\t\t[],\n\t\tfilemtime( plugin_dir_path( __FILE__ ) . 'build\/style-index.css' )\n\t);\n}\nadd_action( 'enqueue_block_assets', 'image_hacker_enqueue_assets' );<\/code><\/pre>\n<p>Ecco cosa fa questo codice:<\/p>\n<ul>\n<li>L&#8217;hook <code>enqueue_block_editor_assets<\/code> inserisce lo script <code>index.js<\/code> e il file <code>editor.css<\/code>.<\/li>\n<li>L&#8217;hook <code>enqueue_block_assets<\/code> richiede il file <code>style.css<\/code>.<\/li>\n<\/ul>\n<p>Si noti che questo codice include le risorse <code>.js<\/code> e <code>.css<\/code> che si trovano nella cartella <code>\/build\/<\/code> del plugin. Ci\u00f2 significa che, per farlo funzionare, \u00e8 necessario eseguire il comando build nello strumento a riga di comando:<\/p>\n<pre><code class=\"language-bash\">npm run build<\/code><\/pre>\n<p>Inoltre, quando si importa un file chiamato <code>style.scss<\/code> in <code>index.js<\/code>, il file CSS compilato non si chiamer\u00e0 <code>style.css<\/code> ma <code>style-index.css<\/code>.<\/p>\n<h3>Registrare lo stile del blocco<\/h3>\n<p>Abbiamo completato la configurazione dell&#8217;ambiente di sviluppo. Ora possiamo passare alla parte pi\u00f9 interessante del progetto e registrare una variante di stile del blocco.<\/p>\n<p>Esistono <a href=\"https:\/\/developer.wordpress.org\/themes\/features\/block-style-variations\/\" target=\"_blank\" rel=\"noopener noreferrer\">diversi modi per registrare gli stili del blocco<\/a> e quello che si sceglie dipende dagli obiettivi e dalle preferenze personali. Noi seguiremo l&#8217;approccio JS per costruire un plugin Gutenberg. Apriamo il file <code>\/src\/index.js<\/code> e incolliamo il seguente codice:<\/p>\n<pre><code class=\"language-javascript\">\/\/ Import the function to register block styles.\nimport { registerBlockStyle } from '@wordpress\/blocks';\n\n\/\/ Import the function to run code only when the DOM is ready.\nimport domReady from '@wordpress\/dom-ready';\n\n\/\/ This line tells the build process to include and compile our SCSS file.\nimport '.\/style.scss';\n\n\/**\n * Use domReady to run code only when the DOM is ready.\n *\/\ndomReady(() =&gt; {\n\t\/\/ Register our new style variation for the core image block.\n\tregisterBlockStyle('core\/image', {\n\t\tname: 'polaroid',\n\t\tlabel: 'Polaroid',\n\t});\n});<\/code><\/pre>\n<p><code>registerBlockStyle<\/code> con <code>domReady<\/code> assicura che la variante di stile venga registrata solo quando il DOM \u00e8 completamente caricato. Si legga anche la <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/block-api\/block-styles\/\" target=\"_blank\" rel=\"noopener noreferrer\">documentazione<\/a> <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-dom-ready\/\" target=\"_blank\" rel=\"noopener noreferrer\">ufficiale<\/a>.<\/p>\n<p>Quando viene selezionato lo stile <code>Polaroid<\/code>, WordPress aggiunge automaticamente la classe <code>.is-style-polaroid<\/code> al contenitore del blocco.<\/p>\n<p>Il passo successivo consiste nel fornire il codice CSS per la variante di stile. Apriamo il file <code>\/src\/style.scss<\/code> e aggiungiamo il seguente codice:<\/p>\n<pre><code class=\"language-css\">.wp-block-image.is-style-polaroid {\n\tpadding: 15px 15px 70px 15px;\n\tbackground-color: white;\n\tbox-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);\n\tmax-width: 360px;\n\ttransform: rotate(-3deg);\n\ttransition: transform 0.3s ease-in-out;\n\n\tfigure { \n\t\tmargin: 0 !important; \n\t}\n\t\n\timg { \n\t\tdisplay: block; \n\t\twidth: 100%; \n\t\theight: auto; \n\t}\n\t\n\tfigcaption {\n    \tposition: absolute; \n    \tbottom: 15px; \n    \tleft: 0; \n    \tright: 0;\n    \ttext-align: center; \n    \tfont-family: 'Permanent Marker', cursive;\n    \tcolor: #333; \n    \tfont-size: 18px;\n\t}\n}<\/code><\/pre>\n<p>Salviamo il codice, eseguiamo <code>npm run build<\/code> e accediamo alla dashboard di WordPress. Creiamo un nuovo post o una nuova pagina e aggiungiamo un&#8217;immagine. Con l&#8217;immagine selezionata, clicchiamo sull&#8217;etichetta <strong>Stili<\/strong> nella barra laterale del blocco e selezioniamo <strong>Polaroid<\/strong>.<\/p>\n<figure id=\"attachment_196692\" aria-describedby=\"caption-attachment-196692\" style=\"width: 1988px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-196692 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2025\/06\/style-variation.jpg\" alt=\"Una nuova variante di stile per il blocco Immagine\" width=\"1988\" height=\"1186\"><figcaption id=\"caption-attachment-196692\" class=\"wp-caption-text\">Una nuova variante di stile per il blocco Immagine<\/figcaption><\/figure>\n<p>Aggiungiamo una didascalia, salviamo il post e controlliamo il risultato nel frontend. Dovremmo vedere un&#8217;immagine in stile Polaroid con una bella didascalia in corsivo.<\/p>\n<figure id=\"attachment_196903\" aria-describedby=\"caption-attachment-196903\" style=\"width: 1952px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-196903 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2025\/07\/is-style-polaroid.jpg\" alt=\"L'elemento figure con la classe is_style_polaroid\" width=\"1952\" height=\"1296\"><figcaption id=\"caption-attachment-196903\" class=\"wp-caption-text\">L&#8217;elemento figure con la classe is_style_polaroid<\/figcaption><\/figure>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>A causa dell&#8217;elevata specificit\u00e0 dei selettori, alcune propriet\u00e0 (ad esempio <code>max-width<\/code>) potrebbero non essere applicate nell&#8217;editor. Se vogliamo che vengano applicate nell&#8217;editor, dovremo aggiungere gli stili appropriati nel file <code>editor.scss<\/code>.<\/p>\n<\/aside>\n\n<h3>Creare la logica<\/h3>\n<p>Il passo successivo consiste nel creare la logica per animare l&#8217;immagine. Creeremo una semplice animazione usando la propriet\u00e0 CSS <code>transform<\/code>. Per iniziare, aggiungiamo il seguente blocco al file <code>src\/style.scss<\/code>:<\/p>\n<pre><code class=\"language-css\">.wp-block-image.is-style-polaroid.has-image-animation:hover {\n\ttransform: rotate(0deg) scale(1.05);\n}<\/code><\/pre>\n<p>Questo codice assicura che l&#8217;effetto hover venga applicato solo se il blocco \u00e8 un&#8217;immagine Polaroid e ha una classe <code>has-image-animation<\/code>. Questa viene applicata dal toggle della barra degli strumenti.<\/p>\n<p>Ora serve la logica per aggiungere la classe CSS al contenitore dell&#8217;immagine, che \u00e8 un elemento <code>figure<\/code>. Per farlo, abbiamo bisogno di alcuni filtri e funzioni di callback.<\/p>\n<p>Per prima cosa, aggiungiamo la seguente riga al file <code>src\/index.js<\/code>:<\/p>\n<pre><code class=\"language-javascript\">import { addFilter } from '@wordpress\/hooks';<\/code><\/pre>\n<h4>Passo 1. Aggiungere un nuovo attributo al blocco Immagine<\/h4>\n<p>Utilizzeremo <code>addFilter<\/code> per manipolare il blocco Image. Aggiungiamo un nuovo attributo <code>imageAnimation<\/code> al blocco Immagine:<\/p>\n<pre><code class=\"language-javascript\">function addImageAnimationAttribute( settings, name ) {\n\tif ( name !== 'core\/image' ) {\n\t\treturn settings;\n\t}\n\tsettings.attributes = {\n\t\t...settings.attributes,\n\t\timageAnimation: {\n\t\t\ttype: 'boolean',\n\t\t\tdefault: false,\n\t\t},\n\t};\n\treturn settings;\n}\n\naddFilter(\n\t'blocks.registerBlockType',\n\t'image-hacker\/add-image-animation-attribute',\n\taddImageAnimationAttribute\n);<\/code><\/pre>\n<p>La funzione di callback <code>addImageAnimationAttribute<\/code> accetta due argomenti:<\/p>\n<ul>\n<li><code>settings<\/code>: un array di attributi del blocco corrente<\/li>\n<li><code>name<\/code>: il nome del blocco di cui vogliamo modificare gli attributi.<\/li>\n<\/ul>\n<p>La funzione restituisce l&#8217;array di attributi aggiornato.<\/p>\n<h4>Passo 2. Aggiungere un controllo al blocco Image<\/h4>\n<p>Ora dobbiamo aggiungere un controllo alla barra degli strumenti del blocco Immagine per attivare l&#8217;animazione.<\/p>\n<p>Per prima cosa, aggiungiamo i seguenti <code>import<\/code> al file <code>index.js<\/code>:<\/p>\n<pre><code class=\"language-javascript\">import { createHigherOrderComponent } from '@wordpress\/compose';\nimport { Fragment } from '@wordpress\/element';\nimport { BlockControls } from '@wordpress\/block-editor';\nimport { ToolbarGroup, ToolbarButton } from '@wordpress\/components';\nimport { __ } from '@wordpress\/i18n';<\/code><\/pre>\n<p>Quindi aggiungiamo il seguente codice alla fine del file:<\/p>\n<pre><code class=\"language-javascript\">const withPolaroidControls = createHigherOrderComponent((BlockEdit) =&gt; {\n\treturn (props) =&gt; {\n\t\tif (props.name !== 'core\/image') {\n\t\t\treturn &lt;BlockEdit {...props} \/&gt;;\n\t\t}\n\n\t\tconst { attributes, setAttributes, isSelected } = props;\n\t\tconst { imageAnimation, className, lightbox } = attributes;\n\n\t\treturn (\n\t\t\t&lt;Fragment&gt;\n\t\t\t\t&lt;BlockEdit {...props} \/&gt;\n\n\t\t\t\t&lt;BlockControls&gt;\n\t\t\t\t\t&lt;ToolbarGroup&gt;\n\t\t\t\t\t\t&lt;ToolbarButton\n\t\t\t\t\t\t\ticon=\"format-image\"\n\t\t\t\t\t\t\tlabel={__('Toggle Animation', 'image-hacker')}\n\t\t\t\t\t\t\tisActive={imageAnimation}\n\t\t\t\t\t\t\tonClick={() =&gt;\n\t\t\t\t\t\t\t\tsetAttributes({ imageAnimation: !imageAnimation })\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\/&gt;\n\t\t\t\t\t&lt;\/ToolbarGroup&gt;\n\t\t\t\t&lt;\/BlockControls&gt;\n\t\t\t&lt;\/Fragment&gt;\n\t\t);\n\t};\n}, 'withPolaroidControls');\n\naddFilter(\n\t'editor.BlockEdit',\n\t'image-hacker\/with-polaroid-controls',\n\twithPolaroidControls\n);<\/code><\/pre>\n<p>Ecco cosa fa questo codice:<\/p>\n<ul>\n<li>La funzione <code>createHigherOrderComponent<\/code> <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-compose\/#createhigherordercomponent\" target=\"_blank\" rel=\"noopener noreferrer\">crea un componente di ordine superiore<\/a> (HOC) che racchiude <code>BlockEdit<\/code>, che \u00e8 il componente principale responsabile della visualizzazione dei blocchi nell&#8217;editor.<\/li>\n<li>L&#8217;HOC intercetta il componente e verifica che si tratti di un blocco Immagine. Questo assicura che tutte le modifiche vengano applicate solo al blocco Immagine.<\/li>\n<li>L&#8217;assegnazione per destrutturazione estrae le propriet\u00e0 e gli attributi necessari dagli oggetti <code>props<\/code> e <code>attributes<\/code>.<\/li>\n<li><a href=\"https:\/\/developer.wordpress.org\/block-editor\/getting-started\/fundamentals\/block-in-the-editor\/\" target=\"_blank\" rel=\"noopener noreferrer\"><code>BlockControls<\/code><\/a>, <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/components\/toolbar-group\/\" target=\"_blank\" rel=\"noopener noreferrer\"><code>ToolbarGroup<\/code><\/a> e <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/components\/toolbar-button\/\" target=\"_blank\" rel=\"noopener noreferrer\"><code>ToolbarButton<\/code><\/a> aggiungono un pulsante di <strong>attivazione dell&#8217;animazione<\/strong> alla barra degli strumenti del blocco.<\/li>\n<li><code>isActive<\/code> imposta lo stato predefinito di <code>imageAnimation<\/code><\/li>\n<li><code>onClick<\/code> inverte il valore di <code>imageAnimation<\/code>.<\/li>\n<\/ul>\n<figure id=\"attachment_196750\" aria-describedby=\"caption-attachment-196750\" style=\"width: 1668px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-196750 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2025\/07\/custom-block-toolbar-button.jpg\" alt=\"\u00c8 stato aggiunto un pulsante personalizzato alla barra degli strumenti del blocco\" width=\"1668\" height=\"588\"><figcaption id=\"caption-attachment-196750\" class=\"wp-caption-text\">\u00c8 stato aggiunto un pulsante personalizzato alla barra degli strumenti del blocco<\/figcaption><\/figure>\n<p>Ora abbiamo un attributo e un pulsante. Tuttavia, se facciamo clic sul pulsante, non succede nulla.<\/p>\n<h4>Passo 3. Aggiungere la classe CSS all&#8217;elemento wrapper<\/h4>\n<p>Il passo successivo consiste nell&#8217;applicare la classe <code>has-image-animation<\/code> all&#8217;elemento <code>figure<\/code> che racchiude l&#8217;immagine. Per farlo, abbiamo bisogno di un filtro che permetta di assegnare la classe CSS all&#8217;immagine nel frontend.<\/p>\n<p>Aggiungiamo il seguente codice al file <code>index.js<\/code>:<\/p>\n<pre><code class=\"language-javascript\">function addAnimationFrontendClass(extraProps, blockType, attributes) {\n\tif (blockType.name === 'core\/image' && attributes.imageAnimation) {\n\t\textraProps.className = `${extraProps.className || ''} has-image-animation`;\n\t}\n\treturn extraProps;\n}\n\naddFilter(\n\t'blocks.getSaveContent.extraProps',\n\t'image-hacker\/add-animation-frontend-class',\n\taddAnimationFrontendClass\n);<\/code><\/pre>\n<p>Questo codice aggiunge dinamicamente la classe CSS <code>has-image-animation<\/code> all&#8217;elemento <code>figure<\/code> quando l&#8217;attributo <code>imageAnimation<\/code> \u00e8 impostato su <code>true<\/code>.<\/p>\n<p>Cerchiamo di capire cosa succede nel dettaglio.<\/p>\n<ul>\n<li><code>addFilter<\/code> si aggancia ai processi dell&#8217;editor per modificare dati o comportamenti.<\/li>\n<li><code>blocks.getSaveContent.extraProps<\/code> \u00e8 il gancio specifico a cui ci rivolgiamo. <code>extraProps<\/code> \u00e8 un hook speciale che permette di aggiungere attributi HTML extra all&#8217;elemento wrapper.<\/li>\n<li><code>image-hacker\/add-animation-class<\/code> \u00e8 il nome univoco del filtro.<\/li>\n<li><code>addAnimationFrontendClass<\/code> \u00e8 il nome della funzione di callback che viene eseguita ogni volta che viene eseguito l&#8217;hook <code>blocks.getSaveContent.extraProps<\/code>. Questa funzione accetta 3 argomenti:\n<ul>\n<li><code>extraProps<\/code>: un oggetto contenente le propriet\u00e0 dell&#8217;elemento wrapper del blocco, come ad esempio <code>className<\/code>.<\/li>\n<li><code>blockType<\/code>: un oggetto con i dati del blocco, come ad esempio <code>name<\/code> (<code>core\/image<\/code>).<\/li>\n<li><code>attributes<\/code>: un oggetto contenente gli attributi del blocco<\/li>\n<\/ul>\n<\/li>\n<li>La logica della funzione assicura che il codice venga eseguito solo quando <code>blockType.name === 'core\/image'<\/code> e <code>attributes.imageAnimation<\/code> sono <code>true<\/code>.<\/li>\n<li>Se entrambe le condizioni sono vere, la funzione restituisce un nuovo oggetto <code>props<\/code> con <code>has-image-animation<\/code> aggiunto alla classe dell&#8217;oggetto esistente.<\/li>\n<\/ul>\n<p>Ora facciamo una prova. Aggiungiamo un&#8217;immagine al contenuto, selezioniamo lo stile Polaroid dalla barra laterale dei blocchi e clicchiamo sul pulsante <strong>Toggle Animation<\/strong> nella barra degli strumenti del blocco. Salviamo il post e controlliamo il risultato nel frontend. Passando il mouse sopra, l&#8217;immagine dovrebbe ruotare.<\/p>\n<figure id=\"attachment_196905\" aria-describedby=\"caption-attachment-196905\" style=\"width: 1954px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-196905 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2025\/07\/is-style-polaroid-has-image-animation.jpg\" alt=\"is_style_polaroid e has_image_animation classi CSS aggiunte al blocco Immagine\" width=\"1954\" height=\"1184\"><figcaption id=\"caption-attachment-196905\" class=\"wp-caption-text\">is_style_polaroid e has_image_animation classi CSS aggiunte al blocco Immagine<\/figcaption><\/figure>\n<h3>Registrazione della variante del blocco<\/h3>\n<p>Le varianti di blocco sono versioni preconfigurate di un blocco, con una serie di attributi e blocchi annidati. WordPress tratta le varianti di blocco come blocchi indipendenti, rendendole disponibili nel pannello di inserimento dei blocchi e contrassegnandole con un&#8217;icona personalizzata.<\/p>\n<p>Ora utilizzeremo una variante di blocco per creare una nuova versione del blocco Immagine con lo stile Polaroid applicato di default.<\/p>\n<p>Il primo passo \u00e8 importare la funzione <code>registerBlockVariation<\/code> nel file <code>\/src\/index.js<\/code>:<\/p>\n<pre><code class=\"language-javascript\">import { registerBlockStyle, registerBlockVariation } from '@wordpress\/blocks';<\/code><\/pre>\n<p>Poi aggiungiamo una chiamata alla funzione <code>registerBlockVariation<\/code> all&#8217;interno di <code>domReady()<\/code>, proprio sotto <code>registerBlockStyle<\/code>:<\/p>\n<pre><code class=\"language-javascript\">domReady(() =&gt; {\n\t\/\/ Register a style variation for the image block.\n\tregisterBlockStyle('core\/image', {\n\t\tname: 'polaroid',\n\t\tlabel: 'Polaroid',\n\t});\n\n\t\/\/ Register a block variation of the image block\n\tregisterBlockVariation('core\/image', {\n\t\tname: 'animated-polaroid',\n\t\ttitle: 'Animated Polaroid',\n\t\ticon: 'image-filter',\n\t\tattributes: {\n\t\t\tclassName: 'is-style-polaroid',\n\t\t\timageAnimation: true,\n\t\t},\n\t\tscope: ['inserter'],\n\t});\n});<\/code><\/pre>\n<p>La funzione <code>registerBlockVariation<\/code> crea una variante per un blocco esistente. Accetta due argomenti: il nome del blocco e un oggetto che definisce la variante (si veda anche l&#8217;<a href=\"https:\/\/developer.wordpress.org\/news\/2023\/08\/an-introduction-to-block-variations\/\" target=\"_blank\" rel=\"noopener noreferrer\">introduzione alle varianti di blocco<\/a> e la <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/block-api\/block-variations\/\">documentazione della Block Variations API<\/a>).<\/p>\n<p>Salviamo il file, eseguiamo la build per applicare le modifiche e poi torniamo al pannello di amministrazione di WordPress. Creiamo un nuovo post e cerchiamo il blocco <strong>Animated Polaroid<\/strong> nel pannello di inserimento dei blocchi.<\/p>\n<figure id=\"attachment_196842\" aria-describedby=\"caption-attachment-196842\" style=\"width: 1362px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-196842 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2025\/07\/block-inserter.jpg\" alt=\"Una variante di blocco nel pannello di inserimento dei blocchi\" width=\"1362\" height=\"876\"><figcaption id=\"caption-attachment-196842\" class=\"wp-caption-text\">Una variante di blocco nel pannello di inserimento dei blocchi<\/figcaption><\/figure>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>A causa della complessit\u00e0 dell&#8217;ambiente e della specificit\u00e0 dei selettori, non aggiungeremo il codice che genera l&#8217;animazione nell&#8217;editor dei blocchi. Per questo motivo, l&#8217;animazione non funzioner\u00e0 nell&#8217;editor.<\/p>\n<\/aside>\n\n<h3>Test e debug<\/h3>\n<p>Facciamo qualche prova. Aggiungiamo una o pi\u00f9 immagini a un nuovo post. Selezioniamo lo stile Polaroid per ogni immagine, attiviamo l&#8217;animazione e aggiungiamo i link. Eseguiamo anche dei test con il blocco Galleria.<\/p>\n<p>Tutto sembra funzionare come previsto. Tuttavia, l&#8217;aggiunta di un link con effetto lightbox a un&#8217;immagine con lo stile Polaroid non produce un risultato gradevole.<\/p>\n<p>Questo strano comportamento sembra essere dovuto a un problema di compatibilit\u00e0 tra il lightbox di WordPress e le transizioni CSS.<\/p>\n<p>Per evitare un lungo e complesso processo di debug, potremmo disabilitare l&#8217;opzione <strong>Ingrandisci al clic<\/strong> e aggiungere un alert per avvisare gli utenti che il lightbox \u00e8 disabilitato.<\/p>\n<p>Per prima cosa, dobbiamo importare alcune risorse aggiuntive. Di seguito riportiamo l&#8217;elenco completo delle risorse importate dal file <code>\/src\/index.js<\/code>:<\/p>\n<pre><code class=\"language-javascript\">import { registerBlockStyle, registerBlockVariation } from '@wordpress\/blocks';\nimport domReady from '@wordpress\/dom-ready';\nimport { addFilter } from '@wordpress\/hooks';\nimport { createHigherOrderComponent } from '@wordpress\/compose';\nimport { Fragment, useEffect } from '@wordpress\/element';\nimport { InspectorControls, BlockControls } from '@wordpress\/block-editor';\nimport { PanelBody, Notice, ToolbarGroup, ToolbarButton } from '@wordpress\/components';\nimport { __ } from '@wordpress\/i18n';\nimport { useDispatch } from '@wordpress\/data';\nimport '.\/style.scss';<\/code><\/pre>\n<p>Abbiamo aggiunto le seguenti importazioni:<\/p>\n<ul>\n<li><code>useEffect<\/code> da <code>@wordpress\/element<\/code> (vedi <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-element\/#useeffect\" target=\"_blank\" rel=\"noopener noreferrer\">documentazione<\/a>).<\/li>\n<li><code>InspectorControls<\/code> da <code>@wordpress\/block-editor<\/code> (vedi <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/HEAD\/packages\/block-editor\/src\/components\/inspector-controls\/README.md\" target=\"_blank\" rel=\"noopener noreferrer\">documentazione<\/a>).<\/li>\n<li><code>PanelBody<\/code> e <code>Notice<\/code> da <code>@wordpress\/components<\/code> (vedi <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/components\/panel\/\" target=\"_blank\" rel=\"noopener noreferrer\">documentazione<\/a>).<\/li>\n<li><code>useDispatch<\/code> da <code>@wordpress\/data<\/code> vedi il <a href=\"https:\/\/developer.wordpress.org\/news\/2022\/12\/application-state-managed-withdispatch-withselect-and-compose-101\/\" target=\"_blank\" rel=\"noopener noreferrer\">WordPress developer blog<\/a>)<\/li>\n<\/ul>\n<p>Ora modifichiamo la funzione <code>withPolaroidControls<\/code> come segue:<\/p>\n<pre><code class=\"language-javascript\">const withPolaroidControls = createHigherOrderComponent((BlockEdit) =&gt; {\n\treturn (props) =&gt; {\n\t\tif (props.name !== 'core\/image') {\n\t\t\treturn &lt;BlockEdit {...props} \/&gt;;\n\t\t}\n\n\t\tconst { attributes, setAttributes, isSelected } = props;\n\t\tconst { imageAnimation, className, lightbox } = attributes;\n\n\t\tconst isPolaroid = className?.includes('is-style-polaroid');\n\n\t\tconst { createNotice } = useDispatch('core\/notices');\n\n\t\tuseEffect(() =&gt; {\n\t\t\tif (isPolaroid && lightbox?.enabled) {\n\t\t\t\t\/\/ Disable the lightbox to prevent the conflict.\n\t\t\t\tsetAttributes({ lightbox: { ...lightbox, enabled: false } });\n\n\t\t\t\t\/\/ Show the user a temporary 'snackbar' notice.\n\t\t\t\tcreateNotice(\n\t\t\t\t\t'warning', \/\/ The type of notice (info, success, warning, error)\n\t\t\t\t\t__('Lightbox disabled for Polaroid style.', 'image-hacker'),\n\t\t\t\t\t{\n\t\t\t\t\t\ttype: 'snackbar',\n\t\t\t\t\t\tisDismissible: true,\n\t\t\t\t\t}\n\t\t\t\t);\n\t\t\t}\n\t\t}, [isPolaroid, lightbox]);\n\n\t\treturn (\n\t\t\t&lt;Fragment&gt;\n\t\t\t\t&lt;BlockEdit {...props} \/&gt;\n\n\t\t\t\t&lt;BlockControls&gt;\n\t\t\t\t\t&lt;ToolbarGroup&gt;\n\t\t\t\t\t\t&lt;ToolbarButton\n\t\t\t\t\t\t\ticon=\"format-image\"\n\t\t\t\t\t\t\tlabel={__('Toggle Animation', 'image-hacker')}\n\t\t\t\t\t\t\tisActive={imageAnimation}\n\t\t\t\t\t\t\tonClick={() =&gt;\n\t\t\t\t\t\t\t\tsetAttributes({ imageAnimation: !imageAnimation })\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\/&gt;\n\t\t\t\t\t&lt;\/ToolbarGroup&gt;\n\t\t\t\t&lt;\/BlockControls&gt;\n\n\t\t\t\t{isSelected && isPolaroid && (\n\t\t\t\t\t&lt;InspectorControls&gt;\n\t\t\t\t\t\t&lt;PanelBody title={__('Polaroid Style', 'image-hacker')}&gt;\n\t\t\t\t\t\t\t&lt;Notice status=\"info\" isDismissible={false}&gt;\n\t\t\t\t\t\t\t\t{__(\n\t\t\t\t\t\t\t\t\t'The \"Expand on click\" (lightbox) feature is disabled for this style to prevent visual conflicts.',\n\t\t\t\t\t\t\t\t\t'image-hacker'\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t&lt;\/Notice&gt;\n\t\t\t\t\t\t&lt;\/PanelBody&gt;\n\t\t\t\t\t&lt;\/InspectorControls&gt;\n\t\t\t\t)}\n\t\t\t&lt;\/Fragment&gt;\n\t\t);\n\t};\n}, 'withPolaroidControls');<\/code><\/pre>\n<ul>\n<li><code>useEffect<\/code> \u00e8 un hook di React che &#8220;permette di sincronizzare un componente con un sistema esterno&#8221;. Il codice viene eseguito dopo il rendering del componente e ogni volta che un valore dell&#8217;array di dipendenze <code>[isPolaroid, lightbox]<\/code> cambia. Il controllo viene eseguito solo quando l&#8217;utente applica o rimuove lo stile Polaroid o attiva o disattiva la lightbox (vedi la <a href=\"https:\/\/react.dev\/reference\/react\/useEffect\" target=\"_blank\" rel=\"noopener noreferrer\">documentazione di React<\/a>).<\/li>\n<li>La condizione <code>if (isPolaroid() && lightbox.enabled)<\/code> assicura che il codice venga eseguito solo se l&#8217;immagine ha lo stile Polaroid e l&#8217;opzione lightbox \u00e8 attiva.<\/li>\n<li>Se la condizione \u00e8 <code>true<\/code>, il lightbox viene disattivato e viene visualizzato un avviso temporaneo vedi anche la <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/data\/data-core-notices\/\" target=\"_blank\" rel=\"noopener noreferrer\">documentazione degli avvisi<\/a>).<\/li>\n<li>La condizione <code>isSelected && isPolaroid<\/code> genera un nuovo pannello nella barra degli strumenti del blocco immagine per avvisare gli utenti che la lightbox \u00e8 disabilitata. A differenza della barra degli strumenti, questo pannello visualizza un avviso permanente.<\/li>\n<\/ul>\n<figure id=\"attachment_196858\" aria-describedby=\"caption-attachment-196858\" style=\"width: 2184px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-196858 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2025\/07\/enlarge-on-click-disabled.jpg\" alt=\"L'opzione Ingrandisci al clic \u00e8 disabilitata.\" width=\"2184\" height=\"1406\"><figcaption id=\"caption-attachment-196858\" class=\"wp-caption-text\">L&#8217;opzione Ingrandisci al clic \u00e8 disabilitata.<\/figcaption><\/figure>\n<h2>Riepilogo<\/h2>\n<p>In questo tutorial abbiamo analizzato alcune delle funzionalit\u00e0 pi\u00f9 interessanti e potenti per gli sviluppatori dell&#8217;editor di blocchi di WordPress dandoci come obiettivo la realizzazione di un progetto reale: abbiamo esteso il blocco Immagine predefinito con funzionalit\u00e0 non disponibili, con stili personalizzati ed effetti di animazione.<\/p>\n<p>Abbiamo seguito un approccio di miglioramento progressivo, creando una variante di stile per il blocco Immagine. In questo modo gli utenti possono dare alle loro immagini un aspetto classico da Polaroid in modo semplice.<\/p>\n<p>Abbiamo poi aggiunto un pulsante alla barra degli strumenti del blocco Immagine, consentendo agli utenti di creare un accattivante effetto di animazione al passaggio del mouse.<\/p>\n<p>Infine, abbiamo creato una variante del blocco preconfigurata con lo stile Polaroid e le impostazioni di animazione applicate di default.<\/p>\n<p>Ci auguriamo che le conoscenze e le tecniche acquisite in questo tutorial permettano di creare personalizzazioni davvero sorprendenti per i blocchi core di Gutenberg!<\/p>\n<p>Happy coding!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Gutenberg si \u00e8 evoluto in un editor potente e altamente personalizzabile. Al di l\u00e0 delle sue solide funzionalit\u00e0, gli sviluppatori di WordPress ora possono sfruttare un &#8230;<\/p>\n","protected":false},"author":36,"featured_media":81557,"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-81556","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>Scopri la potenza di varianti si stile e varianti di blocco di Gutenberg<\/title>\n<meta name=\"description\" content=\"Vuoi imparare ad hackerare Gutenberg aggiungendo funzionalit\u00e0 avanzate ai tuoi blocchi con varianti di stile e di blocco? Non perdere questo tutorial!\" \/>\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\/varianti-di-stile-e-di-blocco-gutenberg\/\" \/>\n<meta property=\"og:locale\" content=\"it_IT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Come hackerare i blocchi di Gutenberg con le varianti di stile e di blocco\" \/>\n<meta property=\"og:description\" content=\"Vuoi imparare ad hackerare Gutenberg aggiungendo funzionalit\u00e0 avanzate ai tuoi blocchi con varianti di stile e di blocco? Non perdere questo tutorial!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinqsta.com\/it\/blog\/varianti-di-stile-e-di-blocco-gutenberg\/\" \/>\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-08-07T08:09:13+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-11-14T08:50:35+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinqsta.com\/it\/wp-content\/uploads\/sites\/2\/2025\/08\/gutenberg-style-variations-and-block-variations.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=\"Vuoi imparare ad hackerare Gutenberg aggiungendo funzionalit\u00e0 avanzate ai tuoi blocchi con varianti di stile e di blocco? Non perdere questo tutorial!\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinqsta.com\/it\/wp-content\/uploads\/sites\/2\/2025\/08\/gutenberg-style-variations-and-block-variations-1024x512.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=\"16 minuti\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinqsta.com\/it\/blog\/varianti-di-stile-e-di-blocco-gutenberg\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinqsta.com\/it\/blog\/varianti-di-stile-e-di-blocco-gutenberg\/\"},\"author\":{\"name\":\"Carlo Daniele\",\"@id\":\"https:\/\/kinqsta.com\/it\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63\"},\"headline\":\"Come hackerare i blocchi di Gutenberg con le varianti di stile e di blocco\",\"datePublished\":\"2025-08-07T08:09:13+00:00\",\"dateModified\":\"2025-11-14T08:50:35+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinqsta.com\/it\/blog\/varianti-di-stile-e-di-blocco-gutenberg\/\"},\"wordCount\":2587,\"publisher\":{\"@id\":\"https:\/\/kinqsta.com\/it\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinqsta.com\/it\/blog\/varianti-di-stile-e-di-blocco-gutenberg\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinqsta.com\/it\/wp-content\/uploads\/sites\/2\/2025\/08\/gutenberg-style-variations-and-block-variations.png\",\"inLanguage\":\"it-IT\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinqsta.com\/it\/blog\/varianti-di-stile-e-di-blocco-gutenberg\/\",\"url\":\"https:\/\/kinqsta.com\/it\/blog\/varianti-di-stile-e-di-blocco-gutenberg\/\",\"name\":\"Scopri la potenza di varianti si stile e varianti di blocco di Gutenberg\",\"isPartOf\":{\"@id\":\"https:\/\/kinqsta.com\/it\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinqsta.com\/it\/blog\/varianti-di-stile-e-di-blocco-gutenberg\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinqsta.com\/it\/blog\/varianti-di-stile-e-di-blocco-gutenberg\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinqsta.com\/it\/wp-content\/uploads\/sites\/2\/2025\/08\/gutenberg-style-variations-and-block-variations.png\",\"datePublished\":\"2025-08-07T08:09:13+00:00\",\"dateModified\":\"2025-11-14T08:50:35+00:00\",\"description\":\"Vuoi imparare ad hackerare Gutenberg aggiungendo funzionalit\u00e0 avanzate ai tuoi blocchi con varianti di stile e di blocco? Non perdere questo tutorial!\",\"breadcrumb\":{\"@id\":\"https:\/\/kinqsta.com\/it\/blog\/varianti-di-stile-e-di-blocco-gutenberg\/#breadcrumb\"},\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinqsta.com\/it\/blog\/varianti-di-stile-e-di-blocco-gutenberg\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/kinqsta.com\/it\/blog\/varianti-di-stile-e-di-blocco-gutenberg\/#primaryimage\",\"url\":\"https:\/\/kinqsta.com\/it\/wp-content\/uploads\/sites\/2\/2025\/08\/gutenberg-style-variations-and-block-variations.png\",\"contentUrl\":\"https:\/\/kinqsta.com\/it\/wp-content\/uploads\/sites\/2\/2025\/08\/gutenberg-style-variations-and-block-variations.png\",\"width\":1470,\"height\":735},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinqsta.com\/it\/blog\/varianti-di-stile-e-di-blocco-gutenberg\/#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 hackerare i blocchi di Gutenberg con le varianti di stile e di blocco\"}]},{\"@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":"Scopri la potenza di varianti si stile e varianti di blocco di Gutenberg","description":"Vuoi imparare ad hackerare Gutenberg aggiungendo funzionalit\u00e0 avanzate ai tuoi blocchi con varianti di stile e di blocco? Non perdere questo tutorial!","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\/varianti-di-stile-e-di-blocco-gutenberg\/","og_locale":"it_IT","og_type":"article","og_title":"Come hackerare i blocchi di Gutenberg con le varianti di stile e di blocco","og_description":"Vuoi imparare ad hackerare Gutenberg aggiungendo funzionalit\u00e0 avanzate ai tuoi blocchi con varianti di stile e di blocco? Non perdere questo tutorial!","og_url":"https:\/\/kinqsta.com\/it\/blog\/varianti-di-stile-e-di-blocco-gutenberg\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstaitalia\/","article_published_time":"2025-08-07T08:09:13+00:00","article_modified_time":"2025-11-14T08:50:35+00:00","og_image":[{"width":1470,"height":735,"url":"https:\/\/kinqsta.com\/it\/wp-content\/uploads\/sites\/2\/2025\/08\/gutenberg-style-variations-and-block-variations.png","type":"image\/png"}],"author":"Carlo Daniele","twitter_card":"summary_large_image","twitter_description":"Vuoi imparare ad hackerare Gutenberg aggiungendo funzionalit\u00e0 avanzate ai tuoi blocchi con varianti di stile e di blocco? Non perdere questo tutorial!","twitter_image":"https:\/\/kinqsta.com\/it\/wp-content\/uploads\/sites\/2\/2025\/08\/gutenberg-style-variations-and-block-variations-1024x512.png","twitter_creator":"@carlodaniele","twitter_site":"@Kinsta_IT","twitter_misc":{"Scritto da":"Carlo Daniele","Tempo di lettura stimato":"16 minuti"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinqsta.com\/it\/blog\/varianti-di-stile-e-di-blocco-gutenberg\/#article","isPartOf":{"@id":"https:\/\/kinqsta.com\/it\/blog\/varianti-di-stile-e-di-blocco-gutenberg\/"},"author":{"name":"Carlo Daniele","@id":"https:\/\/kinqsta.com\/it\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63"},"headline":"Come hackerare i blocchi di Gutenberg con le varianti di stile e di blocco","datePublished":"2025-08-07T08:09:13+00:00","dateModified":"2025-11-14T08:50:35+00:00","mainEntityOfPage":{"@id":"https:\/\/kinqsta.com\/it\/blog\/varianti-di-stile-e-di-blocco-gutenberg\/"},"wordCount":2587,"publisher":{"@id":"https:\/\/kinqsta.com\/it\/#organization"},"image":{"@id":"https:\/\/kinqsta.com\/it\/blog\/varianti-di-stile-e-di-blocco-gutenberg\/#primaryimage"},"thumbnailUrl":"https:\/\/kinqsta.com\/it\/wp-content\/uploads\/sites\/2\/2025\/08\/gutenberg-style-variations-and-block-variations.png","inLanguage":"it-IT"},{"@type":"WebPage","@id":"https:\/\/kinqsta.com\/it\/blog\/varianti-di-stile-e-di-blocco-gutenberg\/","url":"https:\/\/kinqsta.com\/it\/blog\/varianti-di-stile-e-di-blocco-gutenberg\/","name":"Scopri la potenza di varianti si stile e varianti di blocco di Gutenberg","isPartOf":{"@id":"https:\/\/kinqsta.com\/it\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinqsta.com\/it\/blog\/varianti-di-stile-e-di-blocco-gutenberg\/#primaryimage"},"image":{"@id":"https:\/\/kinqsta.com\/it\/blog\/varianti-di-stile-e-di-blocco-gutenberg\/#primaryimage"},"thumbnailUrl":"https:\/\/kinqsta.com\/it\/wp-content\/uploads\/sites\/2\/2025\/08\/gutenberg-style-variations-and-block-variations.png","datePublished":"2025-08-07T08:09:13+00:00","dateModified":"2025-11-14T08:50:35+00:00","description":"Vuoi imparare ad hackerare Gutenberg aggiungendo funzionalit\u00e0 avanzate ai tuoi blocchi con varianti di stile e di blocco? Non perdere questo tutorial!","breadcrumb":{"@id":"https:\/\/kinqsta.com\/it\/blog\/varianti-di-stile-e-di-blocco-gutenberg\/#breadcrumb"},"inLanguage":"it-IT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinqsta.com\/it\/blog\/varianti-di-stile-e-di-blocco-gutenberg\/"]}]},{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/kinqsta.com\/it\/blog\/varianti-di-stile-e-di-blocco-gutenberg\/#primaryimage","url":"https:\/\/kinqsta.com\/it\/wp-content\/uploads\/sites\/2\/2025\/08\/gutenberg-style-variations-and-block-variations.png","contentUrl":"https:\/\/kinqsta.com\/it\/wp-content\/uploads\/sites\/2\/2025\/08\/gutenberg-style-variations-and-block-variations.png","width":1470,"height":735},{"@type":"BreadcrumbList","@id":"https:\/\/kinqsta.com\/it\/blog\/varianti-di-stile-e-di-blocco-gutenberg\/#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 hackerare i blocchi di Gutenberg con le varianti di stile e di blocco"}]},{"@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\/81556","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=81556"}],"version-history":[{"count":8,"href":"https:\/\/kinqsta.com\/it\/wp-json\/wp\/v2\/posts\/81556\/revisions"}],"predecessor-version":[{"id":82497,"href":"https:\/\/kinqsta.com\/it\/wp-json\/wp\/v2\/posts\/81556\/revisions\/82497"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinqsta.com\/it\/wp-json\/kinsta\/v1\/posts\/81556\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinqsta.com\/it\/wp-json\/kinsta\/v1\/posts\/81556\/translations\/it"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinqsta.com\/it\/wp-json\/kinsta\/v1\/posts\/81556\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinqsta.com\/it\/wp-json\/kinsta\/v1\/posts\/81556\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinqsta.com\/it\/wp-json\/kinsta\/v1\/posts\/81556\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinqsta.com\/it\/wp-json\/kinsta\/v1\/posts\/81556\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinqsta.com\/it\/wp-json\/kinsta\/v1\/posts\/81556\/translations\/es"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinqsta.com\/it\/wp-json\/kinsta\/v1\/posts\/81556\/translations\/pt"},{"href":"https:\/\/kinqsta.com\/it\/wp-json\/kinsta\/v1\/posts\/81556\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinqsta.com\/it\/wp-json\/wp\/v2\/media\/81557"}],"wp:attachment":[{"href":"https:\/\/kinqsta.com\/it\/wp-json\/wp\/v2\/media?parent=81556"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinqsta.com\/it\/wp-json\/wp\/v2\/tags?post=81556"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinqsta.com\/it\/wp-json\/wp\/v2\/topic?post=81556"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}