{"id":79161,"date":"2024-09-30T15:28:38","date_gmt":"2024-09-30T14:28:38","guid":{"rendered":"https:\/\/kinsta.com\/it\/?p=79161&#038;preview=true&#038;preview_id=79161"},"modified":"2024-10-02T10:58:44","modified_gmt":"2024-10-02T09:58:44","slug":"blocks-theme-json","status":"publish","type":"post","link":"https:\/\/kinsta.com\/it\/blog\/blocks-theme-json\/","title":{"rendered":"Quello che gli sviluppatori di WordPress devono sapere sulla propriet\u00e0 blocks in theme.json"},"content":{"rendered":"<p>L&#8217;introduzione del <a href=\"https:\/\/kinsta.com\/it\/blog\/full-site-editing-wordpress\/\">Full Site Editing (FSE)<\/a> in WordPress evidenzia la crescente importanza del file <code>theme.json<\/code>. Ora ci sono una gerarchia e una struttura completamente nuove da comprendere, insieme alle varie propriet\u00e0 che aiutano a creare i vostri progetti. In particolare, la propriet\u00e0 <code>blocks<\/code> in <code>theme.json<\/code> \u00e8 essenziale se volete creare temi WordPress moderni e flessibili con blocchi unici. In questa guida esploreremo i dettagli della propriet\u00e0 <code>blocks<\/code> di <code>theme.json<\/code> in modo che possiate lavorare con i blocchi, progettarli e personalizzarli per creare esperienze WordPress pi\u00f9 dinamiche e personalizzabili. <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>La propriet\u00e0 blocks nel file theme.json<\/h2>\n<p>Prima di addentrarci nella complessit\u00e0 della propriet\u00e0 <code>blocks<\/code>, cerchiamo di capire il suo ruolo all&#8217;interno di <code>theme.json<\/code> e nello sviluppo di temi WordPress.<\/p>\n<figure id=\"attachment_184921\" aria-describedby=\"caption-attachment-184921\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-184921\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/theme-json-file.png\" alt=\"Una finestra dell'editor di codice che mostra una parte del file theme.json di un tema WordPress. La struttura JSON definisce modelli personalizzati per le pagine \"blank,\" \"blog-alternative,\" e \"404\". L'editor ha un tema scuro con evidenziazione della sintassi e lo sfondo mostra un paesaggio forestale nebbioso.\" width=\"1200\" height=\"970\"><figcaption id=\"caption-attachment-184921\" class=\"wp-caption-text\">Il file <strong>theme.json<\/strong> di Twenty Twenty-Three.<\/figcaption><\/figure>\n<p>Innanzitutto, <code>theme.json<\/code> \u00e8 il <a href=\"https:\/\/kinsta.com\/it\/blog\/theme-json\/\">file di configurazione<\/a> che permette di definire stili e impostazioni globali per i vostri temi. Questo &#8220;hub centrale&#8221; permette di controllare vari elementi dell&#8217;aspetto e del comportamento del vostro tema, tra cui la tipografia, i colori e le opzioni di layout. Tuttavia, pu\u00f2 fare molto di pi\u00f9 che darvi modifiche estetiche programmatiche. La propriet\u00e0 <code>blocks<\/code> permette di applicare un controllo granulare sui singoli tipi di blocco piuttosto che sul sito nel suo complesso. Potete definire stili, impostazioni e comportamenti predefiniti per blocchi specifici, in modo da garantire coerenza all&#8217;interno del tema e flessibilit\u00e0 ai proprietari del sito.<\/p>\n<h3>La relazione tra la propriet\u00e0 blocks e il Full Site Editing<\/h3>\n<p>FSE \u00e8 un approccio pi\u00f9 visivo alla costruzione del sito con Blocks al centro. Sul front-end, avete a disposizione la maggior parte delle opzioni di stile e di personalizzazione del vostro sito in generale:<\/p>\n<figure id=\"attachment_184916\" aria-describedby=\"caption-attachment-184916\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-184916\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/full-site-editor.png\" alt=\"La schermata principale dell'editor del sito WordPress mostra una home page blu con il titolo: \" A commitment to innovation and sustainability.\" La pagina presenta un'immagine architettonica moderna e opzioni di personalizzazione in una barra laterale nera a sinistra.\" width=\"1200\" height=\"750\"><figcaption id=\"caption-attachment-184916\" class=\"wp-caption-text\">L&#8217;interfaccia di modifica completa del sito all&#8217;interno di WordPress.<\/figcaption><\/figure>\n<p>La propriet\u00e0 <code>blocks<\/code> \u00e8 una parte fondamentale del file <code>theme.json<\/code> per alcuni motivi:<\/p>\n<ul>\n<li>Fornisce un modo standardizzato per definire gli stili e le impostazioni dei blocchi.<\/li>\n<li>Potete creare sistemi di design coesi partendo da una base programmatica.<\/li>\n<li>Potete offrire un maggiore controllo sull&#8217;aspetto dei blocchi senza dover ricorrere a <a href=\"https:\/\/kinsta.com\/it\/blog\/wordpress-css\/\">CSS<\/a> personalizzati.<\/li>\n<li>La propriet\u00e0 aiuta a creare pattern e template dei blocchi.<\/li>\n<\/ul>\n<p>Gli sviluppatori possono utilizzare la propriet\u00e0 <code>blocks<\/code> per creare temi che sfruttano al massimo il Full Site Editing.<\/p>\n<h2>Come strutturare la propriet\u00e0 blocks (e la sua sintassi)<\/h2>\n<p>La standardizzazione che la propriet\u00e0 <code>blocks<\/code> fornisce \u00e8 utile per quanto riguarda la struttura e la sintassi. La troverete sempre annidata all&#8217;interno dell&#8217;oggetto <code>settings<\/code>:<\/p>\n<pre><code class=\"language-json\">{\n\"version\": 3,\n  \"settings\": {\n    \"blocks\": {\n      \"core\/paragraph\": {\n        \"typography\": {\n          \"fontSizes\": [\n            {\n              \"name\": \"Small\",\n              \"slug\": \"small\",\n              \"size\": \"13px\"\n            },\n            {\n              \"name\": \"Medium\",\n              \"slug\": \"medium\",\n              \"size\": \"20px\"\n             }\n           ]\n\u2026<\/code><\/pre>\n<p>L&#8217;esempio precedente definisce le dimensioni personalizzate dei caratteri per un blocco Paragrafo. La suddivisione dei componenti chiave \u00e8 semplice:<\/p>\n<ul>\n<li>La propriet\u00e0 <code>blocks<\/code> \u00e8 annidata sotto l&#8217;oggetto <code>settings<\/code>.<\/li>\n<li>Ogni tipo di blocco ha un namespace e un nome (qui <code>core\/paragraph<\/code>).<\/li>\n<li>Poi si specificano le impostazioni del blocco all&#8217;interno dell&#8217;oggetto.<\/li>\n<\/ul>\n<p>Le impostazioni includono la maggior parte di quelle disponibili per gli stili globali. Ad esempio, possono includere la tipografia, il colore, la spaziatura e molte altre cose.<\/p>\n<h3>Configurare le impostazioni globali del blocco<\/h3>\n<p>Vediamo come definire le impostazioni globali e poi vediamo come questo influisce sulla propriet\u00e0 <code>blocks<\/code>. In questo modo potrete creare una base di design coerente in tutto il vostro tema.<\/p>\n<pre><code class=\"language-json\">{\n\"version\": 3,\n  \"settings\": {\n    \"typography\": {\n      \"fontSizes\": [\n        {\n          \"name\": \"Small\",\n          \"slug\": \"small\",\n          \"size\": \"13px\"\n        },\n        {\n          \"name\": \"Medium\",\n          \"slug\": \"medium\",\n          \"size\": \"20px\"\n        }\n\u2026<\/code><\/pre>\n<p>In questo esempio, definiamo le dimensioni globali dei caratteri disponibili per tutti i blocchi. Nell&#8217;Editor del sito WordPress, potete trovare queste opzioni nella schermata <strong>Tipografia <\/strong>&gt;<strong> Elementi <\/strong>&gt;<strong> Testo<\/strong>:<\/p>\n<figure id=\"attachment_184915\" aria-describedby=\"caption-attachment-184915\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img decoding=\"async\" class=\"size-full wp-image-184915\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/elements-text.png\"><figcaption id=\"caption-attachment-184915\" class=\"wp-caption-text\">La maggior parte delle impostazioni tipografiche del <strong>file theme.json<\/strong> sono accessibili anche nell&#8217;Editor del sito.<\/figcaption><\/figure>\n<p>Ogni dimensione di carattere definite all&#8217;interno di <code>theme.json<\/code> \u00e8 correlata a una delle opzioni di dimensionamento qui presenti:<\/p>\n<figure id=\"attachment_184922\" aria-describedby=\"caption-attachment-184922\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-184922\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/theme-json-font-size.png\" alt=\"Una vista ravvicinata di un editor di codice che mostra parte di un file theme.json di WordPress. Il codice visibile definisce le dimensioni dei caratteri, tra cui Small, Medium e Large con le rispettive dimensioni in unit\u00e0 rem. La dimensione Large include un'impostazione di tipografia fluida. L'editor utilizza un tema scuro con evidenziazione della sintassi su uno sfondo di foresta sfocato.\" width=\"1200\" height=\"729\"><figcaption id=\"caption-attachment-184922\" class=\"wp-caption-text\">Le impostazioni predefinite delle dimensioni dei caratteri si trovano nel file <strong>theme.json<\/strong>.<\/figcaption><\/figure>\n<p>Naturalmente, ci sono molti altri modi per personalizzare il tema da qui. L&#8217;idea \u00e8 quella di creare un design globale che funzioni nell&#8217;80% dei casi d&#8217;uso. Utilizzando la propriet\u00e0 <code>blocks<\/code>, potete sovrascrivere gli stili del blocco principale per coprire l&#8217;ultimo 20%. La schermata <strong>Stili<\/strong> dell&#8217;Editor del sito permette anche di personalizzare le impostazioni del design di ogni blocco:<\/p>\n<figure id=\"attachment_184908\" aria-describedby=\"caption-attachment-184908\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-184908\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/block-styles-editor.png\" alt=\"Un primo piano dell'interfaccia dell'editor del sito WordPress, che mostra le opzioni di blocchi di contenuto come Paragrafo, Immagine, Header e Galleria. L'area del contenuto principale mostra la pagina iniziale del sito.\" width=\"1200\" height=\"838\"><figcaption id=\"caption-attachment-184908\" class=\"wp-caption-text\">L&#8217;Editor del sito permette di modificare le impostazioni di tutti i blocchi principali di WordPress.<\/figcaption><\/figure>\n<p>Questo \u00e8 ottimo per gli utenti finali ma meno utile per gli sviluppatori. Ci concentriamo sull&#8217;utilizzo di <code>theme.json<\/code> per lavorare con la propriet\u00e0 <code>blocks<\/code>.<\/p>\n<h2>Come personalizzare i singoli tipi di blocco<\/h2>\n<p>Sebbene le impostazioni globali siano importanti per mantenere la coerenza, il vero potere risiede nell&#8217;ambito della propriet\u00e0 <code>blocks<\/code> per la personalizzazione. Questa impostazione a livello granulare permette di personalizzare l&#8217;aspetto e il comportamento di blocchi specifici per adattarli al design del vostro tema, proprio come l&#8217;Editor del sito Vediamo un esempio di personalizzazione del blocco Header per il vostro tema:<\/p>\n<pre><code class=\"language-json\">{\n\"version\": 3,\n  \"settings\": {\n    \"blocks\": {\n      \"core\/heading\": {\n        \"typography\": {\n          \"fontSizes\": [\n            {\n              \"name\": \"Small\",\n              \"slug\": \"small\",\n              \"size\": \"20px\"\n            },\n            {\n              \"name\": \"Medium\",\n              \"slug\": \"medium\",\n              \"size\": \"30px\"\n            },\n            {\n              \"name\": \"Large\",\n              \"slug\": \"large\",\n              \"size\": \"40px\"\n            }\n            ],\n            \"fontWeight\": \"bold\"\n            },\n            \"color\": {\n              \"palette\": [\n                {\n                  \"name\": \"Heading Primary\",\n                  \"slug\": \"heading-primary\",\n                  \"color\": \"#333333\"\n                },\n                {\n                  \"name\": \"Heading Secondary\",\n                  \"slug\": \"heading-secondary\",\n                  \"color\": \"#666666\"\n                }\n              ]\n\u2026<\/code><\/pre>\n<p>Potete vedere che gli attributi riflettono il modo in cui apportereste le modifiche globali. Riassumiamo quello che stiamo facendo:<\/p>\n<ul>\n<li>Definiamo le dimensioni specifiche dei caratteri per gli header e le assegniamo alle etichette delle dimensioni.<\/li>\n<li>Il peso del carattere per tutte gli header sar\u00e0 semplicemente grassetto.<\/li>\n<li>Gli header avranno anche una palette di colori personalizzata.<\/li>\n<\/ul>\n<p>In questo modo gli header avranno un aspetto coerente in tutto il progetto. Inoltre, possiamo controllare questi elementi quando non sappiamo come li utilizzer\u00e0 l&#8217;utente finale, a tutto vantaggio di un design coerente.<\/p>\n<h3>Utilizzare la giusta combinazione di namespace e slug<\/h3>\n<p>Quando si richiamano i tipi di blocco, \u00e8 fondamentale utilizzare la corretta combinazione di namespace e slug. Senza di essa, le modifiche non saranno applicate ai blocchi che desiderate. Ogni blocco ha un namespace e uno slug. I blocchi del nucleo di WordPress avranno in genere lo spazio dei nomi <code>core<\/code>. Lo slug sar\u00e0 il nome del blocco:<\/p>\n<pre><code class=\"language-json\">\u2026\n\"blocks\": {\n  \"core\/image\": {\n\u2026<\/code><\/pre>\n<p>Se avete bisogno di conoscere lo slug di un blocco, potete consultare il suo file <code>block.json<\/code> specifico. Potete trovarlo all&#8217;interno della cartella <code>wp-includes\/blocks<\/code>. Qui troverete diverse cartelle, ognuna delle quali contiene un file <code>block.json<\/code>. All&#8217;interno di ognuna di esse, il namespace e lo slug del blocco dovrebbero trovarsi all&#8217;inizio del file:<\/p>\n<figure id=\"attachment_184910\" aria-describedby=\"caption-attachment-184910\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-184910\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/code-directory.png\" alt=\"Una parte della finestra del Finder di macOS che mostra il contenuto della cartella del codice. \u00c8 presente anche una porzione di editor di codice con un file block.json aperto. Il codice visibile definisce le propriet\u00e0 di un blocco di WordPress chiamato \"core\/code\" con un titolo \"Code\" e una descrizione sulla visualizzazione di frammenti di codice.\" width=\"1200\" height=\"518\"><figcaption id=\"caption-attachment-184910\" class=\"wp-caption-text\">Il file <strong>block.json<\/strong> conterr\u00e0 i metadati chiave di ogni singolo blocco.<\/figcaption><\/figure>\n<p>Se sfogliate queste directory, noterete che la directory <code>wp-includes<\/code> ha un file <code>theme.json<\/code> a s\u00e9 stante. Sebbene ci\u00f2 possa sembrare complicato, \u00e8 semplice da spiegare.<\/p>\n<h2>Perch\u00e9 theme.json include le impostazioni personalizzate dei blocchi per impostazione predefinita<\/h2>\n<p>Il file <code>theme.json<\/code> di WordPress pu\u00f2 sembrare poco chiaro all&#8217;inizio, soprattutto perch\u00e9 non \u00e8 un tema. Tuttavia, non \u00e8 un caso. Il motivo principale \u00e8 la retrocompatibilit\u00e0 con le vecchie versioni di WordPress. Ad esempio, il blocco Pulsante imposta il raggio del bordo:<\/p>\n<pre><code class=\"language-json\">\u2026\n\"blocks\": {\n  \"core\/button\": {\n    \"border\": {\n      \"radius\": true\n     }\n  },\n\u2026<\/code><\/pre>\n<p>Altri blocchi avranno impostazioni simili per favorire la coerenza tra le diverse versioni di WordPress. Tuttavia, questo pu\u00f2 causare dei problemi se non ne siete a conoscenza. Se cercate di definire delle impostazioni globali e vi chiedete perch\u00e9 le modifiche non si applicano a blocchi specifici, la retrocompatibilit\u00e0 potrebbe essere la risposta. Naturalmente, potete sovrascrivere queste impostazioni nel vostro file <code>theme.json<\/code> senza problemi.<\/p>\n<h2>Sviluppare blocchi personalizzati con theme.json<\/h2>\n<p>Il file <code>theme.json<\/code> \u00e8 ideale per personalizzare i blocchi esistenti, ma le sue capacit\u00e0 si estendono anche allo sviluppo di blocchi personalizzati. Potete sfruttare <code>theme.json<\/code> per definire gli stili e le impostazioni predefinite per tutti i vostri blocchi personalizzati. Questo vi aiuta a garantire un&#8217;integrazione perfetta con il design del vostro tema. Prima, per\u00f2, dovete <a href=\"https:\/\/kinsta.com\/it\/blog\/blocchi-gutenberg\/\">creare il blocco<\/a> stesso. Questo aspetto va oltre lo scopo di questo articolo, ma in sintesi ecco alcune sfaccettature:<\/p>\n<ul>\n<li><strong>Scaffolding del blocco.<\/strong> Questo comporta la creazione di un ambiente di sviluppo locale e la creazione della struttura dei file per l&#8217;intero Blocco.<\/li>\n<li><strong>Aggiornamento del file <code>block.json<\/code>.<\/strong> In questo caso, dovrete modificare l&#8217;identit\u00e0 del Blocco e aggiungere i <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/block-api\/block-supports\/\" target=\"_blank\" rel=\"noopener noreferrer\">supporti<\/a>. Questi ultimi sono dei modi per dichiarare il supporto a specifiche funzionalit\u00e0 di WordPress. Ad esempio, Potete gestire l&#8217;allineamento, implementare i campi di ancoraggio, lavorare con varie impostazioni tipografiche e altro ancora.<\/li>\n<li><strong>Modifica dei file JavaScript del blocco.<\/strong> Sia <code>index.js<\/code> che <code>edit.js<\/code> hanno bisogno di codice per dire a WordPress come funziona il blocco e per farlo apparire nell&#8217;Editor del sito.<\/li>\n<\/ul>\n<p>Potreste anche dover modificare <code>render.php<\/code>, aggiungere un rendering statico e molte altre operazioni. A questo punto, potete applicare qualsiasi modifica stilistica a <code>theme.json<\/code> come a qualsiasi altro blocco. Per ora, diamo un&#8217;occhiata pi\u00f9 da vicino a <code>block.json<\/code>.<\/p>\n<h3>Il file block.json<\/h3>\n<p>Questo file \u00e8 ci\u00f2 che il team di sviluppo di WordPress definisce come il modo &#8220;canonico&#8221; di registrare i blocchi sia per il lato server che per il lato client. I metadati che inserite in questo file indicano a WordPress il tipo di blocco e i relativi file di supporto:<\/p>\n<pre><code class=\"language-json\">{\n  \"$schema\": \"https:\/\/schemas.wp.org\/trunk\/block.json\",\n  \"apiVersion\": 3,\n  \"name\": \"my-plugin\/notice\",\n  \"title\": \"Notice\",\n  \"category\": \"text\",\n  \"parent\": [ \"core\/group\" ],\n  \"icon\": \"star\",\n  \"description\": \"Shows warning, error or success notices...\",\n  \"keywords\": [ \"alert\", \"message\" ],\n  \"version\": \"1.0.3\",\n  \"textdomain\": \"my-plugin\",\n  \"attributes\": {\n    \"message\": {\n      \"type\": \"string\",\n      \"source\": \"html\",\n      \"selector\": \".message\"\n    }\n  },\n\u2026<\/code><\/pre>\n<p>\u00c8 simile ai metadati che si trovano all&#8217;inizio di un file <a href=\"https:\/\/kinsta.com\/php\/\">PHP<\/a> per temi e plugin. Sebbene il file utilizzi esclusivamente dati JSON, potete comunque condividere il codice attraverso PHP, <a href=\"https:\/\/kinsta.com\/javascript\/\">JavaScript<\/a> e CSS:<\/p>\n<pre><code class=\"language-json\">\u2026\n\"editorScript\": \"file:.\/index.js\",\n\"script\": \"file:.\/script.js\",\n\"viewScript\": [ \"file:.\/view.js\", \"example-shared-view-script\" ],\n\"editorStyle\": \"file:.\/index.css\",\n\"style\": [ \"file:.\/style.css\", \"example-shared-style\" ],\n\"viewStyle\": [ \"file:.\/view.css\", \"example-view-style\" ],\n\"render\": \"file:.\/render.php\"\n\u2026<\/code><\/pre>\n<p>Torneremo su questo punto pi\u00f9 avanti, nella sezione dedicata alle variazioni. Per concludere questa sezione, dovete sapere come impostare il vostro blocco personalizzato come predefinito in WordPress. Ci sono diversi modi per raggiungere questo obiettivo. Il modo pi\u00f9 classico \u00e8 quello di <a href=\"https:\/\/kinsta.com\/it\/blog\/custom-post-type-wordpress\/\">registrare un tipo di post personalizzato<\/a> e di includervi i blocchi. Tuttavia, esistono un paio di altri metodi. Ad esempio, potete aggiornare un tipo di post esistente per <a href=\"https:\/\/kinsta.com\/it\/blog\/template-post-wordpress\/#how-to-create-a-custom-wordpress-post-template\">aggiungere un modello di blocco<\/a>. Ecco un semplice esempio:<\/p>\n<pre><code class=\"language-php\">\u2026\nfunction load_post_type_patterns() {\n    \/\/ Define an initial pattern for the 'HypnoToad' post type\n    $post_type_object = get_post_type_object( 'hypnoToad' );\n    $post_type_object-&gt;template = array(\n    array(\n        'core\/block',\n\u2026<\/code><\/pre>\n<p>Un altro modo \u00e8 quello di chiamare l&#8217;hook <code>default_content<\/code> e definire il blocco utilizzando il markup:<\/p>\n<pre><code class=\"language-php\">function toad_content( $content, $post ) {\n    if ( $post-&gt;post_type === 'hypnoToad' ) {\n        $content ='\n        &lt;div class=\"wp-block-columns\"&gt;&lt;!-- wp:column \u2192\n        &lt;div class=\"wp-block-column\"&gt;\n        &lt;p&gt;&lt;\/p&gt;\n        &lt;\/div&gt;\n        \n\n\n        &lt;div class=\"wp-block-column\"&gt;\n        &lt;p&gt;&lt;\/p&gt;\n        &lt;\/div&gt;\n        &lt;\/div&gt;\n        <!-- \/wp:columns -->';\n    }\n    return $content;\n}\nadd_filter( 'default_content', 'toad_content', 10, 2 );<\/code><\/pre>\n<p>Ovviamente non userete solo JSON, <a href=\"https:\/\/kinsta.com\/it\/blog\/html\/\">HTML<\/a> e PHP. Utilizzerete anche altri linguaggi per aiutare il design e l&#8217;interattivit\u00e0. La buona notizia \u00e8 che WordPress offre un modo semplice per farlo.<\/p>\n<h2>Usare le propriet\u00e0 CSS personalizzate per i blocchi<\/h2>\n<p>Potete ottenere molti risultati utilizzando le propriet\u00e0, gli attributi e gli oggetti esistenti di <code>theme.json<\/code>, ma ci\u00f2 non coprir\u00e0 tutti i casi di utilizzo. Il file offre la propriet\u00e0 <code>custom<\/code> che vi aiuter\u00e0 a creare propriet\u00e0 CSS pertinenti:<\/p>\n<pre><code class=\"language-json\">{\n\"version\": 3,\n  \"settings\": {\n    \"custom\": {\n      \"toad\": \"hypno\"\n    }\n  }\n}<\/code><\/pre>\n<p>Qui fornite una coppia chiave-valore che si trasforma in una variabile CSS sul front-end:<\/p>\n<pre><code class=\"language-json\">body {\n    --wp--custom--toad: hypno;\n}<\/code><\/pre>\n<p>Notate che la variabile utilizzer\u00e0 doppi trattini per separare i suoi elementi. In generale, vedrete sempre <code>--wp--custom--<\/code>, che poi metter\u00e0 il tag della chiave alla fine. A volte si definiscono variabili e propriet\u00e0 con le maiuscole:<\/p>\n<pre><code class=\"language-json\">{\n\"version\": 3,\n  \"settings\": {\n    \"custom\": {\n      \"hypnoToad\": \"active\"\n    }\n  }\n}<\/code><\/pre>\n<p>In questo caso, WordPress utilizzer\u00e0 i trattini per separare le parole:<\/p>\n<pre><code class=\"language-json\">body {\n    --wp--custom--hypno-toad: active;\n}<\/code><\/pre>\n<p>Tra la propriet\u00e0 <code>custom<\/code> e <code>block.json<\/code>, avete la possibilit\u00e0 di costruire i vostri Blocchi come meglio credete, comprese le variazioni che volete includere.<\/p>\n<h2>Una rapida occhiata a Blocco, stile e variazioni di stile del Blocco<\/h2>\n<p>Prima di passare allo stile utilizzando la propriet\u00e0 <code>blocks<\/code>, diamo un&#8217;occhiata alle variazioni. Avete a disposizione diversi tipi di variazioni per i vostri progetti e le convenzioni di denominazione potrebbero farvi usare il tipo sbagliato per le vostre esigenze. Ecco una panoramica delle differenze:<\/p>\n<ul>\n<li><strong>Block variations.<\/strong> Se il vostro blocco ha delle versioni alternative (pensate a un blocco che mostra molti link personalizzati impostati dall&#8217;utente), si tratta di una block variations, o variazione di blocco. Il blocco Social Media ne \u00e8 un buon esempio.<\/li>\n<li><strong>Style variations.<\/strong> Si tratta di versioni alternative (appunto, variazioni di stile) di <code>theme.json<\/code> che funzionano sul vostro sito globale. Non ce ne occupiamo in questa sede, ma la maggior parte dei temi a blocchi li offre per diverse palette di colori e impostazioni tipografiche.<\/li>\n<li><strong>Block style variations.<\/strong> Questa funzione, chiamata variazioni di stile di blocco, riprende la funzionalit\u00e0 principale delle variazioni di stile e permette di creare design alternativi per un blocco.<\/li>\n<\/ul>\n<p>Potreste chiedervi se utilizzare una variazione di blocco o una variazione di stile di blocco; la risposta \u00e8 semplice. Se le modifiche che volete apportare possono avvenire all&#8217;interno di <code>theme.json<\/code> o utilizzando i CSS, create una variazione di stile di blocco. Qualsiasi altra cosa richiede una variazione di blocco.<\/p>\n<h3>Variazioni di blocco<\/h3>\n<p>Le <a href=\"https:\/\/developer.wordpress.org\/themes\/features\/block-variations\/\" target=\"_blank\" rel=\"noopener noreferrer\">variazioni di blocco<\/a> vengono registrate utilizzando JavaScript. Creare un file all&#8217;interno della directory del tema \u00e8 una buona idea. \u00c8 sufficiente una riga per registrare una variazione all&#8217;interno del vostro file JavaScript:<\/p>\n<pre><code class=\"language-js\">const registerBlockVariation = ( blockName, variation )<\/code><\/pre>\n<p>Per l&#8217;oggetto <code>blockName<\/code>, dovrete specificare il namespace anche qui, come per la propriet\u00e0 <code>blocks<\/code>. All&#8217;interno dell&#8217;oggetto <code>variation<\/code>, aggiungerete il nome, il titolo, la descrizione, se la variazione \u00e8 attiva per impostazione predefinita e altro ancora. Per caricare il file nell&#8217;Editor del sito, chiamate semplicemente l&#8217;hook <code>enqueue_block_editor_assets<\/code> e <a href=\"https:\/\/kinsta.com\/it\/blog\/wp-enqueue-scripts\/\">inserite il vostro script<\/a> al suo interno.<\/p>\n<h3>Variazioni di stile di blocco<\/h3>\n<p>Per quanto riguarda le variazioni di stile di blocco, avete <a href=\"https:\/\/developer.wordpress.org\/themes\/features\/block-style-variations\" target=\"_blank\" rel=\"noopener noreferrer\">due opzioni<\/a>:<\/p>\n<ul>\n<li>Utilizzare la funzione <code>register_block_style()<\/code> con PHP.<\/li>\n<li>Creare un file JavaScript <code>block-editor.js<\/code>, utilizzare la funzione <code>registerBlockStyle()<\/code> in modo simile alle variazioni di blocco e inviare lo script.<\/li>\n<\/ul>\n<p>Una volta registrata una variazione di stile del blocco, potete puntare al blocco utilizzando la propriet\u00e0 <code>variations<\/code>:<\/p>\n<pre><code class=\"language-json\">\u2026\n\"styles\": {\n  \"blocks\": {\n    \"core\/button\": {\n      \"variations\": {\n        \"outline\": {\n          \"border\": {\n            \"color\": \"var:preset|color|black\",\n            \"radius\": \"0\",\n            \"style\": \"solid\",\n            \"width\": \"3px\"\n          },\n\u2026<\/code><\/pre>\n<p>Ci\u00f2 significa che potreste non aver bisogno di alcun CSS personalizzato: quasi tutti gli aspetti del design di un blocco sono possibili attraverso la propriet\u00e0 <code>blocks<\/code>.<\/p>\n<h2>Stilizzare un blocco predefinito usando la propriet\u00e0 blocks dall&#8217;inizio alla fine<\/h2>\n<p>Per dimostrare come funziona la propriet\u00e0 <code>blocks<\/code>, vediamo un esempio reale. Il nostro sito utilizza il tema Twenty Twenty-Four e utilizza la variazione di stile predefinita:<\/p>\n<figure id=\"attachment_184912\" aria-describedby=\"caption-attachment-184912\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-184912\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/default-style-variation.png\" alt=\"L'editor del sito WordPress mostra la pagina iniziale del sito sul lato destro, con il menu Stili a sinistra. Ci sono diverse opzioni per scegliere uno schema di colori alternativo, oltre alle opzioni di personalizzazione della palette.\" width=\"1200\" height=\"750\"><figcaption id=\"caption-attachment-184912\" class=\"wp-caption-text\">Ogni tema viene spesso fornito con diverse variazioni di stile che consentono di ottenere un aspetto diverso.<\/figcaption><\/figure>\n<p>Finora ci sembra ideale, anche se gli header e il testo del corpo sembrano troppo simili nel colore. Vogliamo cambiare uno o entrambi i colori per differenziarli. Come utente finale o proprietario del sito, possiamo risolvere questo problema nella barra laterale Stili dell&#8217;Editor del sito. Se andiamo su <strong>Blocchi<\/strong> &gt; <strong>Titoli<\/strong>, potete cliccare sull&#8217;elemento Testo e cambiare il colore in qualcosa di pi\u00f9 adatto:<\/p>\n<figure id=\"attachment_184920\" aria-describedby=\"caption-attachment-184920\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-184920\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/styles-heading-editor.png\" alt=\"L'interfaccia dell'editor del sito WordPress mostra la pagina iniziale di un sito web. L'area del contenuto principale mostra un titolo, una breve descrizione e un pulsante \u201cChi siamo\u201d, tutti in nero. In basso, un'immagine architettonica di un edificio moderno con doghe di legno inclinate. La barra laterale di destra mostra le opzioni degli stili, con un pannello a comparsa per selezionare il colore del testo.\" width=\"1200\" height=\"750\"><figcaption id=\"caption-attachment-184920\" class=\"wp-caption-text\">\u00c8 possibile modificare le impostazioni dei singoli blocchi con facilit\u00e0 dall&#8217;Editor del sito.<\/figcaption><\/figure>\n<p>Tuttavia, come sviluppatori, potete farlo all&#8217;interno di <code>theme.json<\/code>. <span style=\"margin: 0px;padding: 0px\">Come per qualsiasi altro tema, l&#8217;approccio migliore \u00e8 quello di <a href=\"https:\/\/kinsta.com\/it\/blog\/child-theme-wordpress\/\" target=\"_blank\" rel=\"noopener noreferrer\">creare un tema child<\/a> per<\/span> conservare le modifiche apportate. Un secondo vantaggio \u00e8 che il vostro file <code>theme.json<\/code> avr\u00e0 un aspetto pi\u00f9 pulito. Creeremo una cartella all&#8217;interno di <code>wp-content\/themes\/<\/code> e la chiameremo <code>twentytwentyfour-child<\/code>. Qui, aggiungi un file <code>style.css<\/code> valido e un file <code>theme.json<\/code> vuoto.<\/p>\n<figure id=\"attachment_184909\" aria-describedby=\"caption-attachment-184909\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-184909\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/child-theme-directory.png\" alt=\"Una finestra del file explorer di macOS per il tema twentytwentyfour-child mostra due file: style.css e theme.json, che indicano la configurazione di un tema figlio per lo sviluppo di WordPress.\" width=\"1200\" height=\"614\"><figcaption id=\"caption-attachment-184909\" class=\"wp-caption-text\">Ogni cartella del tema child ha bisogno di un file <strong>style.css<\/strong> e di un file <strong>theme.json<\/strong>.<\/figcaption><\/figure>\n<p>Da qui potete aprire il file JSON e mettervi al lavoro.<\/p>\n<h3>Creare e riempire un file theme.json per il tema child<\/h3>\n<p>La differenza principale tra la creazione di un tema genitore e di un tema child per quanto riguarda <code>theme.json<\/code> \u00e8 la struttura del file. Non dovrete dichiarare lo schema o inserire necessariamente tutto all&#8217;interno dell&#8217;oggetto <code>settings<\/code>. Nel nostro caso, dobbiamo utilizzare la propriet\u00e0 <code>styles<\/code>:<\/p>\n<pre><code class=\"language-json\">{\n\"version\": 3,\n  \"styles\": {\n    \"blocks\": {}\n  }\n}<\/code><\/pre>\n<p>Successivamente, dobbiamo trovare il namespace e lo slug per il blocco header. La <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/core-blocks\/\" target=\"_blank\" rel=\"noopener noreferrer\">Guida di riferimento dei blocchi Core<\/a> ufficiale elenca tutti questi elementi e ci dice anche quali attributi e propriet\u00e0 supporta il blocco. La guida ci dice che possiamo modificare i valori <code>background<\/code>, <code>gradient<\/code>, <code>link<\/code> e <code>text<\/code> per la propriet\u00e0 <code>color<\/code>.<\/p>\n<pre><code class=\"language-json\">\"blocks\": {\n  \"core\/heading\": {\n    \"color\": {}\n  }\n}<\/code><\/pre>\n<p>Una volta completata la struttura, possiamo iniziare a pensare al restyling del testo.<\/p>\n<h3>Trovare uno schema di colori e applicare le modifiche<\/h3>\n<p>Ora abbiamo bisogno di un colore adatto alle nostre esigenze. La variazione predefinita di Twenty Twenty-Four ha un&#8217;ottima palette e il controllo del contrasto ci d\u00e0 qualche idea:<\/p>\n<figure id=\"attachment_184918\" aria-describedby=\"caption-attachment-184918\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-184918\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/palette-contrast.png\" alt=\"Lo strumento di controllo del contrasto della tavolozza dei colori Coolors mostra varie combinazioni di colori con esempi di testo per valutare l'accessibilit\u00e0 e la leggibilit\u00e0. Un quadrato con una casella evidenziata in rosso mostra due codici esadecimali di colori contrastanti compatibili.\" width=\"1200\" height=\"820\"><figcaption id=\"caption-attachment-184918\" class=\"wp-caption-text\">Verificare che gli schemi di colore abbiano il giusto contrasto accessibile \u00e8 un passo fondamentale nella progettazione di un tema.<\/figcaption><\/figure>\n<p>Successivamente, possiamo aggiungere la scelta del colore per il nostro blocco a <code>theme.json<\/code>. Poich\u00e9 il tema principale Twenty Twenty-Four utilizza propriet\u00e0 CSS personalizzate per definire gli stili della palette, possiamo richiamare anche questo:<\/p>\n<pre><code class=\"language-json\">\u2026\n\"core\/paragraph\": {\n    \"color\": { \"text\": \"var(--wp--preset--color--contrast)\" },\n\u2026<\/code><\/pre>\n<p>Se avete bisogno di conoscere il nome di un colore della palette, potete trovarlo nell&#8217;Editor del sito dal selezionatore di colori:<\/p>\n<figure id=\"attachment_184919\" aria-describedby=\"caption-attachment-184919\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-184919\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/palette-editor-color.png\" alt=\"Un primo piano dell'interfaccia del selezionatore di colori di Text Elements. Mostra una selezione di campioni di colore con codici esadecimali, con il colore Contrasto impostato come opzione principale.\" width=\"1200\" height=\"492\"><figcaption id=\"caption-attachment-184919\" class=\"wp-caption-text\">Potete trovare il nome di un colore guardandolo all&#8217;interno di una palette di colori dell&#8217;Editor del sito.<\/figcaption><\/figure>\n<p>Una volta salvate le modifiche, aggiornate il sito e dovresti vedere la nuova combinazione di colori. Se cos\u00ec non fosse, verifica che la propriet\u00e0 <code>blocks<\/code> sia annidata nell&#8217;oggetto giusto, perch\u00e9 questo \u00e8 un problema comune. Guardando il sito, il testo \u00e8 meno a contrasto e pi\u00f9 facile da leggere. Tuttavia, vogliamo ancora vedere una certa definizione tra il blocco di paragrafi e gli header circostanti. La palette predefinita del tema prevede altri colori pi\u00f9 decisi. Proveremo il colore Accent \/ 3 per il blocco Header:<\/p>\n<pre><code class=\"language-json\">\"blocks\": {\n  \"core\/heading\": {\n    \"color\": { \"text\": \"var(--wp--preset--color--accent-3)\" }\n  },\n  \"core\/paragraph\": {\n    \"color\": { \"text\": \"var(--wp--preset--color--contrast)\" }\n  }\n}<\/code><\/pre>\n<p>Dopo aver salvato le modifiche e aggiornato il front-end, vedrete che il blocco titoli ha una maggiore definizione:<\/p>\n<figure id=\"attachment_184907\" aria-describedby=\"caption-attachment-184907\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-184907\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/accent-color-heading.png\" alt=\"L'editor del sito WordPress mostra la home page di un sito che include un'immagine di intestazione di una struttura architettonica moderna. Il contenuto principale mostra il testo \"Un impegno per l'innovazione e la sostenibilit\u00e0\" in un colore rosso-arancio.\" width=\"1200\" height=\"677\"><figcaption id=\"caption-attachment-184907\" class=\"wp-caption-text\">Il front-end modifica il blocco Header in base alle impostazioni del <strong>theme.json<\/strong>.<\/figcaption><\/figure>\n<p>Le modifiche non devono necessariamente finire qui. Potete anche personalizzare le opzioni dell&#8217;Editor del sito da <code>theme.json<\/code>.<\/p>\n<h3>Aggiungere le opzioni degli attributi ai blocchi<\/h3>\n<p>I supporti di ogni blocco determinano le sue opzioni all&#8217;interno dell&#8217;Editor del sito. Ad esempio, il blocco Paragrafo ha come impostazione predefinita la disattivazione della funzionalit\u00e0 drop cap.<\/p>\n<figure id=\"attachment_184917\" aria-describedby=\"caption-attachment-184917\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-184917\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/no-drop-caps-option.png\" alt=\"L'editor del sito WordPress mostra un primo piano della barra laterale delle opzioni a destra. Il pannello fluttuante per la personalizzazione della tipografia mostra le opzioni per il carattere, la dimensione, l'aspetto, l'altezza della linea, la spaziatura delle lettere, la decorazione, l'orientamento e le maiuscole, ma non il drop cap.\" width=\"1200\" height=\"633\"><figcaption id=\"caption-attachment-184917\" class=\"wp-caption-text\">L&#8217;Editor del sito non permette di scegliere di implementare il drop cap per impostazione predefinita.<\/figcaption><\/figure>\n<p>Possiamo riattivarlo nel file <code>theme.json<\/code> e nella propriet\u00e0 <code>blocks<\/code>. Guardando il materiale di riferimento, possiamo sfruttare la propriet\u00e0 typography per abilitare il drop cap:<\/p>\n<pre><code class=\"language-json\">\u2026\n\"core\/paragraph\": {\n  \"color\": { \"text\": \"var(--wp--preset--color--contrast)\" },\n  \"typography\": { \"dropCap\": true }\n\u2026<\/code><\/pre>\n<p>Una volta salvate le modifiche e aggiornato l&#8217;editor, sar\u00e0 disponibile l&#8217;opzione per attivare il drop cap:<\/p>\n<figure id=\"attachment_184914\" aria-describedby=\"caption-attachment-184914\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-184914\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/drop-cap.png\" alt=\"L'interfaccia dell'editor di blocchi di WordPress mostra un paragrafo di testo Lorem Ipsum con un grande tappo a goccia. Le opzioni di personalizzazione tipografica sono visibili nella barra laterale di destra e il menu aperto Altri elementi mostra l'opzione \u201c drop cap \u201d attivata.\" width=\"1200\" height=\"750\"><figcaption id=\"caption-attachment-184914\" class=\"wp-caption-text\">L&#8217;abilitazione della funzionalit\u00e0 Drop Cap nell&#8217;editor del sito WordPress richiede pochi secondi con il <strong>file theme.json<\/strong>.<\/figcaption><\/figure>\n<p>Il file <code>theme.json<\/code> non \u00e8 semplicemente una configurazione per il design. Pu\u00f2 anche aiutare ad aggiungere e rimuovere funzionalit\u00e0 dall&#8217;Editor del sito.<\/p>\n<h2>Come l&#8217;hosting gestito di Kinsta pu\u00f2 supportare lo sviluppo di un tema WordPress<\/h2>\n<p>Le complessit\u00e0 dello sviluppo di temi e <code>theme.json<\/code> richiedono soluzioni di qualit\u00e0 lungo tutta la catena di sviluppo per sfruttare il potenziale di miglioramento delle prestazioni. Un ambiente di sviluppo locale \u00e8 fondamentale, perch\u00e9 permette di creare, gestire e smanettare con i siti WordPress sul vostro computer locale. <a href=\"https:\/\/kinsta.com\/it\/devkinsta\/\">DevKinsta<\/a> pu\u00f2 aiutarvi in questo senso.<\/p>\n<figure id=\"attachment_184913\" aria-describedby=\"caption-attachment-184913\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-184913\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/devkinsta-interface.png\" alt=\"La dashboard Informazioni sul sito all'interno di DevKinsta. Mostra dettagli tecnici come la versione di WordPress, il server web e il tipo di database, oltre alle opzioni per gestire il sito.\" width=\"1200\" height=\"689\"><figcaption id=\"caption-attachment-184913\" class=\"wp-caption-text\">L&#8217;interfaccia di DevKinsta.<\/figcaption><\/figure>\n<p>DevKinsta offre molti vantaggi:<\/p>\n<ul>\n<li>Viene eseguito su container Docker, il che significa che l&#8217;installazione viene isolata dal resto della macchina. In questo modo Potete testare le configurazioni di <code>theme.json<\/code> e i blocchi personalizzati senza preoccupazioni.<\/li>\n<li>Potete apportare rapide iterazioni al vostro file <code>theme.json<\/code> e vedere immediatamente i risultati nel vostro ambiente locale.<\/li>\n<li>Creare pi\u00f9 siti locali per testare il vostro tema su diverse versioni e configurazioni di WordPress \u00e8 un gioco da ragazzi.<\/li>\n<\/ul>\n<p>Inoltre, non utilizzerete nessuna risorsa del vostro server finch\u00e9 non sarete soddisfatti e pronti. Gli <a href=\"https:\/\/kinsta.com\/it\/blog\/ambienti-di-staging-di-kinsta\/\">ambienti di staging<\/a> di Kinsta sono il passo successivo ideale. Potete creare rapidamente una copia del vostro sito di produzione e portarla nel vostro ambiente locale per continuare a lavorarci su. Questo \u00e8 un ottimo modo per effettuare test sulle prestazioni del tema, soprattutto se combinate lo staging con lo strumento di <a href=\"https:\/\/kinsta.com\/it\/docs\/hosting-wordpress\/wordpress-monitoraggio\/strumento-apm\/\">Application Performance Monitoring<\/a> (APM) di Kinsta. Potete anche sfruttare l&#8217;integrazione Git di Kinsta in tutti i vostri ambienti. In questo modo potete eseguire il push e il pull delle modifiche nei repository e distribuirle da l\u00ec.<\/p>\n<h2>Riepilogo<\/h2>\n<p>La comprensione della propriet\u00e0 <code>blocks<\/code> in <code>theme.json<\/code> \u00e8 un passo necessario per tutti gli sviluppatori di temi. Questo pu\u00f2 rendere un design globale pi\u00f9 unico, coeso e pertinente. Avere la possibilit\u00e0 di lavorare con le impostazioni dei singoli blocchi principali e personalizzati aiuta ogni utente a sfruttare le capacit\u00e0 di modifica del sito. Inoltre, avere queste opzioni disponibili nell&#8217;Editor del sito significa che gli utenti finali possono apportare le proprie modifiche senza codice mentre voi presentate delle opzioni predefinite stellari. Avete qualche domanda sull&#8217;utilizzo della propriet\u00e0 <code>blocks<\/code> con il file <code>theme.json<\/code>? Chiedete pure nella sezione commenti qui sotto!<\/p>","protected":false},"excerpt":{"rendered":"<p>L&#8217;introduzione del Full Site Editing (FSE) in WordPress evidenzia la crescente importanza del file theme.json. Ora ci sono una gerarchia e una struttura completamente nuove da &#8230;<\/p>\n","protected":false},"author":199,"featured_media":79162,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[25878,25873],"class_list":["post-79161","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-design-sito-wordpress","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>Informazioni chiave sulla propriet\u00e0 blocks di theme.json<\/title>\n<meta name=\"description\" content=\"Scopri come utilizzare la propriet\u00e0 blocks di theme.json per sfruttare un approccio semplificato allo sviluppo dei temi di WordPress.\" \/>\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\/blocks-theme-json\/\" \/>\n<meta property=\"og:locale\" content=\"it_IT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Quello che gli sviluppatori di WordPress devono sapere sulla propriet\u00e0 blocks in theme.json\" \/>\n<meta property=\"og:description\" content=\"Scopri come utilizzare la propriet\u00e0 blocks di theme.json per sfruttare un approccio semplificato allo sviluppo dei temi di WordPress.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/it\/blog\/blocks-theme-json\/\" \/>\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=\"2024-09-30T14:28:38+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-10-02T09:58:44+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/09\/blocks-property-in-theme-json.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Jeremy Holcombe\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Scopri come utilizzare la propriet\u00e0 blocks di theme.json per sfruttare un approccio semplificato allo sviluppo dei temi di WordPress.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/09\/blocks-property-in-theme-json-1024x512.png\" \/>\n<meta name=\"twitter:creator\" content=\"@Kinsta_IT\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_IT\" \/>\n<meta name=\"twitter:label1\" content=\"Scritto da\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jeremy Holcombe\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo di lettura stimato\" \/>\n\t<meta name=\"twitter:data2\" content=\"22 minuti\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/blocks-theme-json\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/blocks-theme-json\/\"},\"author\":{\"name\":\"Jeremy Holcombe\",\"@id\":\"https:\/\/kinsta.com\/it\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21\"},\"headline\":\"Quello che gli sviluppatori di WordPress devono sapere sulla propriet\u00e0 blocks in theme.json\",\"datePublished\":\"2024-09-30T14:28:38+00:00\",\"dateModified\":\"2024-10-02T09:58:44+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/blocks-theme-json\/\"},\"wordCount\":3207,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/it\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/blocks-theme-json\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/09\/blocks-property-in-theme-json.png\",\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/it\/blog\/blocks-theme-json\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/blocks-theme-json\/\",\"url\":\"https:\/\/kinsta.com\/it\/blog\/blocks-theme-json\/\",\"name\":\"Informazioni chiave sulla propriet\u00e0 blocks di theme.json\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/it\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/blocks-theme-json\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/blocks-theme-json\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/09\/blocks-property-in-theme-json.png\",\"datePublished\":\"2024-09-30T14:28:38+00:00\",\"dateModified\":\"2024-10-02T09:58:44+00:00\",\"description\":\"Scopri come utilizzare la propriet\u00e0 blocks di theme.json per sfruttare un approccio semplificato allo sviluppo dei temi di WordPress.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/blocks-theme-json\/#breadcrumb\"},\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/it\/blog\/blocks-theme-json\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/blocks-theme-json\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/09\/blocks-property-in-theme-json.png\",\"contentUrl\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/09\/blocks-property-in-theme-json.png\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/blocks-theme-json\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/it\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Design del Sito WordPress\",\"item\":\"https:\/\/kinsta.com\/it\/argomenti\/design-sito-wordpress\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Quello che gli sviluppatori di WordPress devono sapere sulla propriet\u00e0 blocks in theme.json\"}]},{\"@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\/4eee42881d7b5a73ebb4f58dd5223b21\",\"name\":\"Jeremy Holcombe\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/kinsta.com\/it\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/0e17001f3bb37dbbe54fceef9bb547fa?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/0e17001f3bb37dbbe54fceef9bb547fa?s=96&d=mm&r=g\",\"caption\":\"Jeremy Holcombe\"},\"description\":\"Senior Editor at Kinsta, WordPress Web Developer, and Content Writer. Outside of all things WordPress, I enjoy the beach, golf, and movies. I also have tall people problems.\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/jeremyholcombe\/\"],\"url\":\"https:\/\/kinsta.com\/it\/blog\/author\/jeremyholcombe\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Informazioni chiave sulla propriet\u00e0 blocks di theme.json","description":"Scopri come utilizzare la propriet\u00e0 blocks di theme.json per sfruttare un approccio semplificato allo sviluppo dei temi di WordPress.","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\/blocks-theme-json\/","og_locale":"it_IT","og_type":"article","og_title":"Quello che gli sviluppatori di WordPress devono sapere sulla propriet\u00e0 blocks in theme.json","og_description":"Scopri come utilizzare la propriet\u00e0 blocks di theme.json per sfruttare un approccio semplificato allo sviluppo dei temi di WordPress.","og_url":"https:\/\/kinsta.com\/it\/blog\/blocks-theme-json\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstaitalia\/","article_published_time":"2024-09-30T14:28:38+00:00","article_modified_time":"2024-10-02T09:58:44+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/09\/blocks-property-in-theme-json.png","type":"image\/png"}],"author":"Jeremy Holcombe","twitter_card":"summary_large_image","twitter_description":"Scopri come utilizzare la propriet\u00e0 blocks di theme.json per sfruttare un approccio semplificato allo sviluppo dei temi di WordPress.","twitter_image":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/09\/blocks-property-in-theme-json-1024x512.png","twitter_creator":"@Kinsta_IT","twitter_site":"@Kinsta_IT","twitter_misc":{"Scritto da":"Jeremy Holcombe","Tempo di lettura stimato":"22 minuti"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/it\/blog\/blocks-theme-json\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/it\/blog\/blocks-theme-json\/"},"author":{"name":"Jeremy Holcombe","@id":"https:\/\/kinsta.com\/it\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21"},"headline":"Quello che gli sviluppatori di WordPress devono sapere sulla propriet\u00e0 blocks in theme.json","datePublished":"2024-09-30T14:28:38+00:00","dateModified":"2024-10-02T09:58:44+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/it\/blog\/blocks-theme-json\/"},"wordCount":3207,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/it\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/it\/blog\/blocks-theme-json\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/09\/blocks-property-in-theme-json.png","inLanguage":"it-IT","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/it\/blog\/blocks-theme-json\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/it\/blog\/blocks-theme-json\/","url":"https:\/\/kinsta.com\/it\/blog\/blocks-theme-json\/","name":"Informazioni chiave sulla propriet\u00e0 blocks di theme.json","isPartOf":{"@id":"https:\/\/kinsta.com\/it\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/it\/blog\/blocks-theme-json\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/it\/blog\/blocks-theme-json\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/09\/blocks-property-in-theme-json.png","datePublished":"2024-09-30T14:28:38+00:00","dateModified":"2024-10-02T09:58:44+00:00","description":"Scopri come utilizzare la propriet\u00e0 blocks di theme.json per sfruttare un approccio semplificato allo sviluppo dei temi di WordPress.","breadcrumb":{"@id":"https:\/\/kinsta.com\/it\/blog\/blocks-theme-json\/#breadcrumb"},"inLanguage":"it-IT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/it\/blog\/blocks-theme-json\/"]}]},{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/kinsta.com\/it\/blog\/blocks-theme-json\/#primaryimage","url":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/09\/blocks-property-in-theme-json.png","contentUrl":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/09\/blocks-property-in-theme-json.png","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/it\/blog\/blocks-theme-json\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/it\/"},{"@type":"ListItem","position":2,"name":"Design del Sito WordPress","item":"https:\/\/kinsta.com\/it\/argomenti\/design-sito-wordpress\/"},{"@type":"ListItem","position":3,"name":"Quello che gli sviluppatori di WordPress devono sapere sulla propriet\u00e0 blocks in theme.json"}]},{"@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\/4eee42881d7b5a73ebb4f58dd5223b21","name":"Jeremy Holcombe","image":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/kinsta.com\/it\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/0e17001f3bb37dbbe54fceef9bb547fa?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/0e17001f3bb37dbbe54fceef9bb547fa?s=96&d=mm&r=g","caption":"Jeremy Holcombe"},"description":"Senior Editor at Kinsta, WordPress Web Developer, and Content Writer. Outside of all things WordPress, I enjoy the beach, golf, and movies. I also have tall people problems.","sameAs":["https:\/\/www.linkedin.com\/in\/jeremyholcombe\/"],"url":"https:\/\/kinsta.com\/it\/blog\/author\/jeremyholcombe\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/posts\/79161","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\/199"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/comments?post=79161"}],"version-history":[{"count":6,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/posts\/79161\/revisions"}],"predecessor-version":[{"id":79189,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/posts\/79161\/revisions\/79189"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/79161\/translations\/en"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/79161\/translations\/jp"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/79161\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/79161\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/79161\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/79161\/translations\/de"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/79161\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/79161\/translations\/es"},{"href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/79161\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/media\/79162"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/media?parent=79161"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/tags?post=79161"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/topic?post=79161"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}