{"id":64170,"date":"2023-01-25T12:11:14","date_gmt":"2023-01-25T11:11:14","guid":{"rendered":"https:\/\/kinsta.com\/it\/?p=64170&#038;preview=true&#038;preview_id=64170"},"modified":"2023-03-07T11:35:32","modified_gmt":"2023-03-07T10:35:32","slug":"aggiungere-meta-box-ai-post-di-wordpress","status":"publish","type":"post","link":"https:\/\/kinsta.com\/it\/blog\/aggiungere-meta-box-ai-post-di-wordpress\/","title":{"rendered":"Come Aggiungere Meta Box e Custom Field ai Post in Gutenberg"},"content":{"rendered":"<p>I <a href=\"https:\/\/kinsta.com\/it\/blog\/advanced-custom-fields\/#what\">custom field<\/a> permettono di assegnare informazioni aggiuntive ai contenuti del sito. Queste informazioni sono di solito note come <a href=\"https:\/\/developer.wordpress.org\/plugins\/metadata\/\">metadati<\/a>.<\/p>\n<blockquote><p>I metadati sono informazioni sulle informazioni. Nel caso di WordPress, si tratta di informazioni associate a post, utenti, commenti e termini.<\/p>\n<p>Data la relazione molti-a-uno dei metadati in WordPress, le opzioni sono praticamente illimitate. Si possono quante opzioni di metadati si desiderano ed \u00e8 possibile memorizzarci qualsiasi cosa.<\/p>\n<p><em>&#8211;<a href=\"https:\/\/developer.wordpress.org\/plugins\/metadata\/\">Plugin Handbook<\/a><\/em><\/p><\/blockquote>\n<p>Ecco alcuni esempi di metadati che possono essere allegati ad un post usando i custom field:<\/p>\n<ul>\n<li>Le coordinate geografiche di un luogo o di una propriet\u00e0 immobiliare<\/li>\n<li>La data di un evento<\/li>\n<li>L&#8217;ISBN o l&#8217;autore di un libro<\/li>\n<li>L&#8217;umore di chi scrive l&#8217;articolo<\/li>\n<\/ul>\n<p>E ce ne sono molti altri.<\/p>\n<p>In WordPress non c&#8217;\u00e8 un modo semplice per aggiungere e gestire i campi personalizzati. Nell&#8217;editor classico, i custom field sono visualizzati in un riquadro posto in fondo alla pagina, sotto l&#8217;editor degli articoli.<\/p>\n<figure id=\"attachment_142717\" aria-describedby=\"caption-attachment-142717\" style=\"width: 2555px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-142717\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/custom-fields-classic-editor.jpg\" alt=\"Schermata dell\u2019editor classico di WordPress\" width=\"2555\" height=\"1832\"><figcaption id=\"caption-attachment-142717\" class=\"wp-caption-text\">Campi personalizzati nell&#8217;editor classico.<\/figcaption><\/figure>\n<p>In Gutenberg, di default i custom field sono disabilitati, ma possono essere visualizzati selezionando la voce corrispondente nelle impostazioni dell\u2019articolo.<\/p>\n<figure id=\"attachment_142718\" aria-describedby=\"caption-attachment-142718\" style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-142718\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/adding-custom-fields-to-the-block-editor.jpg\" alt=\"Schermata dei campi personalizzati nell\u2019editor a blocchi\" width=\"1500\" height=\"964\"><figcaption id=\"caption-attachment-142718\" class=\"wp-caption-text\">Aggiungere il pannello dei campi personalizzati all&#8217;editor dei blocchi.<\/figcaption><\/figure>\n<p>Purtroppo non esiste un modo per visualizzare i metadati nel frontend senza usare un plugin o sporcarsi le mani con il codice.<\/p>\n\n<p>Se siete utenti WordPress, troverete diversi <a href=\"https:\/\/wordpress.org\/plugins\/search\/custom+fields\/\">ottimi plugin<\/a> che fanno questo lavoro al posto vostro. Ma se lavorate come developer e volete ottenere di pi\u00f9 dai custom field di WordPress, integrarli perfettamente nell&#8217;editor di blocchi e visualizzarli sul frontend del vostro sito WordPress tramite un blocco Gutenberg personalizzato, allora siete nel posto giusto.<\/p>\n<p>Quindi, se vi state chiedendo quale sia il modo migliore per utilizzare i campi personalizzati di WordPress sia in <a href=\"https:\/\/kinsta.com\/it\/blog\/gutenberg-editor-wordpress\/\">Gutenberg<\/a> che nell&#8217;<a href=\"https:\/\/kinsta.com\/blog\/wordpress-tinymce-editor\/\">editor classico<\/a> per chi sviluppa con WordPress, la risposta \u00e8 &#8220;creare un plugin che funzioni sia per l&#8217;editor classico che per Gutenberg&#8221;.<\/p>\n<p>Ma non preoccupatevi. Se creare un plugin per gestire i campi personalizzati in entrambi gli editor potrebbe sembrare un po&#8217; complicato, cercheremo di rendere il processo il pi\u00f9 semplice possibile. Una volta compresi i concetti di cui parleremo in questo articolo, acquisirete le competenze necessarie per gestire i &#8220;meta field&#8221; personalizzati in Gutenberg e realizzare siti web di ogni tipo.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Questo articolo presuppone che familiarit\u00e0 con tecnologie come <a href=\"https:\/\/kinsta.com\/it\/blog\/node-js\/\">Node.js<\/a> e <a href=\"https:\/\/kinsta.com\/it\/blog\/cos-e-npm\/\">npm<\/a>, <a href=\"https:\/\/kinsta.com\/it\/blog\/react-js\/\">React<\/a> e <a href=\"https:\/\/kinsta.com\/it\/blog\/cosa-e-javascript\/\">JavaScript<\/a>. \u00c8 necessaria anche una conoscenza di base dello sviluppo di WordPress.<\/p>\n<p>Se siete agli inizi dello sviluppo di blocchi Gutenberg, date un&#8217;occhiata alle nostre guide precedenti prima di iniziare a leggere questo articolo:<\/p>\n<ul>\n<li><a href=\"https:\/\/kinsta.com\/it\/blog\/blocchi-gutenberg\/\">Creare Blocchi Gutenberg Personalizzati<br \/>\n<\/a><\/li>\n<li><a href=\"https:\/\/kinsta.com\/it\/blog\/blocchi-dinamici\/\">Come Creare Blocchi Dinamici per Gutenberg<br \/>\n<\/a><\/li>\n<\/ul>\n<p>Se preferite i contenuti video, date un&#8217;occhiata al nostro video-corso gratuito sullo <a href=\"https:\/\/kinsta.com\/courses\/course\/gutenberg-block-development\/\">sviluppo di blocchi Gutenberg personalizzati<\/a>.<\/p>\n<\/aside>\n\n<p><strong>Nota: prima di fare qualsiasi cosa, assicuratevi di avere una <a href=\"https:\/\/kinsta.com\/it\/blog\/come-installare-node-js\/\">versione aggiornata di Node.js<\/a> sul vostro computer<\/strong><\/p>\n<p>Detto questo, ecco di cosa ci occuperemo:<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>Creare un Plugin a Blocchi con lo Strumento Ufficiale create-block<\/h2>\n<p>Il primo passo consiste nel creare un nuovo plugin con tutti i file e le dipendenze necessarie per registrare un nuovo tipo di blocco. Il plugin di blocco vi permetter\u00e0 di creare facilmente un tipo di blocco personalizzato per la gestione e la visualizzazione di metadati personalizzati.<\/p>\n<p>Per creare un nuovo tipo di blocco, useremo lo strumento ufficiale <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-create-block\/\">create-block<\/a>. Per una panoramica dettagliata su come usare lo strumento create-block, leggete il nostro <a href=\"https:\/\/kinsta.com\/it\/blog\/blocchi-gutenberg\/#create-block\">precedente articolo<\/a> sullo sviluppo dei blocchi di Gutenberg.<\/p>\n<p>Aprite il vostro strumento per riga di comando, andate nella directory dei <strong>plugin<\/strong> del vostro <a href=\"https:\/\/kinsta.com\/it\/hosting-wordpress\/staging\/\">sito web di sviluppo di WordPress<\/a> ed eseguite il seguente comando:<\/p>\n<pre><code class=\"language-bash\">npx @wordpress\/create-block<\/code><\/pre>\n<p>Quando vi viene richiesto, aggiungete i seguenti dettagli:<\/p>\n<ul>\n<li><strong>La variante del template da usare per questo blocco:<\/strong> dynamic<\/li>\n<li><strong>Lo slug del blocco usato per l&#8217;identificazione (anche il nome della cartella di output):<\/strong> metadata-block<\/li>\n<li><strong>Il namespace interno per il nome del blocco (qualcosa di unico per i vostri prodotti):<\/strong> meta-fields<\/li>\n<li><strong>Il titolo del blocco:<\/strong> Meta Fields<\/li>\n<li><strong>La breve descrizione del blocco (facoltativa):<\/strong> Descrizione del blocco<\/li>\n<li><strong>La dashicon per facilitare l&#8217;identificazione del vostro blocco (opzionale):<\/strong> book<\/li>\n<li><strong>Il nome della categoria per aiutare gli utenti a sfogliare e scoprire il vostro blocco:<\/strong> widget<\/li>\n<li><strong>Volete personalizzare il plugin di WordPress?<\/strong> S\u00ec\/No<\/li>\n<\/ul>\n<p>Esaminiamo un attimo questi dettagli e cerchiamo di capire dove vengono utilizzati.<\/p>\n<ul>\n<li><strong>Lo slug del blocco utilizzato per l&#8217;identificazione<\/strong> definisce il <strong>nome della cartella<\/strong> e il <strong>dominio di testo<\/strong> del plugin.<\/li>\n<li><strong>Il namespace interno per il nome del blocco<\/strong> definisce il <strong>namespace<\/strong> del blocco e il <strong>prefisso delle funzioni<\/strong> utilizzato nel codice del plugin.<\/li>\n<li><strong>Il titolo del blocco<\/strong> definisce il <strong>nome del plugin<\/strong> e il <strong>nome del blocco<\/strong> utilizzato nell&#8217;interfaccia dell&#8217;editor.<\/li>\n<\/ul>\n<p>La configurazione pu\u00f2 richiedere un paio di minuti. Al termine del processo, otterrete un elenco dei comandi disponibili.<\/p>\n<figure id=\"attachment_142731\" aria-describedby=\"caption-attachment-142731\" style=\"width: 1136px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-142731\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/plugin-bootstrapped.jpg\" alt=\"Schermata della riga di comando che conferma che il plugin Block\u00e8 stato installato\" width=\"1136\" height=\"991\"><figcaption id=\"caption-attachment-142731\" class=\"wp-caption-text\">Il plugin Block \u00e8 stato installato correttamente.<\/figcaption><\/figure>\n<p>Prima di passare alla sezione successiva, nel vostro <a href=\"https:\/\/kinsta.com\/it\/blog\/comandi-linux\/\">strumento a riga di comando<\/a>, navigate nella cartella del plugin ed eseguite i seguenti comandi:<\/p>\n<pre><code class=\"language-bash\">cd metadata-block\nnpm start<\/code><\/pre>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-important\">\n            <h3>Important<\/h3>\n        <p>Eseguite il comando <code>npm start<\/code> ogni volta che avviate l&#8217;ambiente di sviluppo di Gutenberg.<\/p>\n<p>Quando eseguite <code>npm start<\/code>, un watcher verr\u00e0 eseguito nel terminale e ricostruir\u00e0 i file JS e CSS dopo ogni modifica (<a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/javascript\/js-build-setup\/#development-mode\">leggi di pi\u00f9<\/a>).<\/p>\n<\/aside>\n\n<p>Ora tutto \u00e8 pronto per costruire il codice. Il passo successivo consiste nel modificare il file PHP principale del plugin per creare un meta box per l&#8217;editor classico.<\/p>\n<p>Quindi, prima di passare alla prossima sezione, <strong>installate e attivate il plugin <a href=\"https:\/\/wordpress.org\/plugins\/classic-editor\/\">Classic Editor<\/a><\/strong>.<\/p>\n<p>Poi aprite la schermata dei plugin e attivate il nuovo plugin <strong>Meta Fields<\/strong>.<\/p>\n<figure id=\"attachment_143199\" aria-describedby=\"caption-attachment-143199\" style=\"width: 1726px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-143199\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/activate-plugins.jpg\" alt=\"Schermata dei Plugins di WordPress con Classic Editor e Meta Fields attivati\" width=\"1726\" height=\"878\"><figcaption id=\"caption-attachment-143199\" class=\"wp-caption-text\">Attivate i plugin.<\/figcaption><\/figure>\n<h2>Aggiungere un Meta Box all\u2019Editor Classico<\/h2>\n<p>Nel contesto dell\u2019<a href=\"https:\/\/kinsta.com\/it\/blog\/disabilitare-editor-wordpress-gutenberg\/\">editor classico<\/a>, un meta box \u00e8 un contenitore che contiene elementi del modulo per digitare informazioni specifiche, come l&#8217;autore del post, i tag, le categorie, ecc.<\/p>\n<p>Oltre alle meta box integrate, chi sviluppa plugin pu\u00f2 aggiungere un numero qualsiasi di <a href=\"https:\/\/developer.wordpress.org\/plugins\/metadata\/custom-meta-boxes\/\">meta box personalizzate<\/a> per includere elementi di form HTML (o qualsiasi <a href=\"https:\/\/kinsta.com\/it\/blog\/imparare-html\/\">contenuto HTML<\/a>) in cui gli utenti del plugin possono inserire dati specifici del plugin.<\/p>\n<p>L&#8217;API di WordPress fornisce utili funzioni per registrare facilmente meta box personalizzate per includere tutti gli elementi HTML di cui il vostro plugin ha bisogno per funzionare.<\/p>\n<p>Per iniziare, aggiungete il seguente codice al file PHP del plugin che avete appena creato:<\/p>\n<pre><code class=\"language-php\">\/\/ register meta box\nfunction meta_fields_add_meta_box(){\n    add_meta_box(\n   \t 'meta_fields_meta_box',\n   \t __( 'Book details' ),\n   \t 'meta_fields_build_meta_box_callback',\n   \t 'post',\n   \t 'side',\n   \t 'default'\n     );\n}\n\n\/\/ build meta box\nfunction meta_fields_build_meta_box_callback( $post ){\n      wp_nonce_field( 'meta_fields_save_meta_box_data', 'meta_fields_meta_box_nonce' );\n      $title = get_post_meta( $post-&gt;ID, '_meta_fields_book_title', true );\n      $author = get_post_meta( $post-&gt;ID, '_meta_fields_book_author', true );\n      ?&gt;\n      &lt;div class=\"inside\"&gt;\n     \t   &lt;p&gt;&lt;strong&gt;Title&lt;\/strong&gt;&lt;\/p&gt;\n   \t   &lt;p&gt;&lt;input type=\"text\" id=\"meta_fields_book_title\" name=\"meta_fields_book_title\" value=\"&lt;?php echo esc_attr( $title ); ?&gt;\" \/&gt;&lt;\/p&gt;    \n   \t   &lt;p&gt;&lt;strong&gt;Author&lt;\/strong&gt;&lt;\/p&gt;\n   \t   &lt;p&gt;&lt;input type=\"text\" id=\"meta_fields_book_author\" name=\"meta_fields_book_author\" value=\"&lt;?php echo esc_attr( $author ); ?&gt;\" \/&gt;&lt;\/p&gt;\n      &lt;\/div&gt;\n      &lt;?php\n}\nadd_action( 'add_meta_boxes', 'meta_fields_add_meta_box' );<\/code><\/pre>\n<p>La funzione <code>add_meta_box<\/code> registra un nuovo meta box, mentre la funzione di callback crea l&#8217;HTML da iniettare nel meta box. Non approfondiremo questo argomento perch\u00e9 esula dagli scopi del nostro articolo, ma troverete tutti i dettagli necessari <a href=\"https:\/\/developer.wordpress.org\/reference\/hooks\/add_meta_boxes\/\">nella documentazione sull\u2019hook add_meta_boxes<\/a>, <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/add_meta_box\/\">su quella della funzione add_meta_box()<\/a> e <a href=\"https:\/\/www.smashingmagazine.com\/2011\/10\/create-custom-post-meta-boxes-wordpress\/\">in questo articolo di Smashing Magazine<\/a>.<\/p>\n<p>Il passo successivo \u00e8 quello di creare una funzione che salvi i dati inseriti di chi ha scritto il post ogni volta che viene attivato l\u2019<a href=\"https:\/\/kinsta.com\/it\/blog\/hook-wordpress\/\">hook<\/a> <code>save_post<\/code> (si veda le <a href=\"https:\/\/developer.wordpress.org\/reference\/hooks\/save_post\/\">Developer Resources<\/a>):<\/p>\n<pre><code class=\"language-php\">\/\/ save metadata\nfunction meta_fields_save_meta_box_data( $post_id ) {\n    if ( ! isset( $_POST['meta_fields_meta_box_nonce'] ) )\n   \t return;\n    if ( ! wp_verify_nonce( $_POST['meta_fields_meta_box_nonce'], 'meta_fields_save_meta_box_data' ) )\n   \t return;\n    if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE )\n   \t return;\n    if ( ! current_user_can( 'edit_post', $post_id ) )\n   \t return;\n\n    if ( ! isset( $_POST['meta_fields_book_title'] ) )\n   \t return;\n    if ( ! isset( $_POST['meta_fields_book_author'] ) )\n   \t return;\n\n    $title = sanitize_text_field( $_POST['meta_fields_book_title'] );\n    $author = sanitize_text_field( $_POST['meta_fields_book_author'] );\n\n    update_post_meta( $post_id, '_meta_fields_book_title', $title );\n    update_post_meta( $post_id, '_meta_fields_book_author', $author );\n}\nadd_action( 'save_post', 'meta_fields_save_meta_box_data' );<\/code><\/pre>\n<p>Anche in questo caso, consultate la documentazione online per maggiori dettagli. Qui ci limiteremo ad evidenziare il carattere di sottolineatura (<code>_<\/code>) che precede la meta key. Questo indica a WordPress di nascondere le chiavi di questi campi personalizzati dall&#8217;elenco dei campi personalizzati disponibili per impostazione predefinita e rende i vostri campi personalizzati visibili solo nel vostro meta box personalizzato.<\/p>\n<p>L&#8217;immagine seguente mostra l&#8217;aspetto del meta box personalizzato nell\u2019editor classico:<\/p>\n<figure id=\"attachment_142726\" aria-describedby=\"caption-attachment-142726\" style=\"width: 2154px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-142726\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/custom-meta-box.jpg\" alt=\"Schermata di una Meta Box nell\u2019editor classico\" width=\"2154\" height=\"1040\"><figcaption id=\"caption-attachment-142726\" class=\"wp-caption-text\">Un meta box personalizzato nell\u2019editor classic.<\/figcaption><\/figure>\n<p>Ora, se disattivate il plugin Classic Editor e controllate cosa succede nell&#8217;<a href=\"https:\/\/kinsta.com\/it\/blog\/gutenberg-editor-wordpress\/\">editor a blocchi<\/a>, vedrete che il meta box appare e funziona ancora, ma non esattamente nel modo in cui vi aspettereste.<\/p>\n<p>Il nostro obiettivo \u00e8 quello di creare un sistema per la gestione dei metadati allegati agli articoli del blog o ai <a href=\"https:\/\/kinsta.com\/it\/blog\/custom-post-type-wordpress\/\">tipi di post personalizzati<\/a> che si integri perfettamente nell&#8217;editor a blocchi. Per questo motivo, il codice mostrato finora sar\u00e0 necessario solo per garantire la compatibilit\u00e0 con l&#8217;editor classico.<\/p>\n<p>Quindi, prima di proseguire, indicheremo a WordPress di rimuovere il meta box personalizzato dall&#8217;editor a blocchi aggiungendo il flag <code>__back_compat_meta_box<\/code> alla funzione <code>add_meta_box<\/code> (si veda anche <a href=\"https:\/\/make.wordpress.org\/core\/2018\/11\/07\/meta-box-compatibility-flags\/\">Meta Box Compatibility Flags<\/a> e <a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/metabox\/#backward-compatibility\">Backward Compatibility<\/a>).<\/p>\n<p>Torniamo alla funzione di callback che registra il meta box e modifichiamola come segue:<\/p>\n<pre><code class=\"language-php\">\/\/ register meta box\nfunction meta_fields_add_meta_box(){\n    add_meta_box(\n   \t 'meta_fields_meta_box',\n   \t __( 'Book details' ),\n   \t 'meta_fields_build_meta_box_callback',\n   \t 'post',\n   \t 'side',\n   \t 'default',\n   \t \/\/ hide the meta box in Gutenberg\n   \t array('__back_compat_meta_box' =&gt; true)\n     );\n}<\/code><\/pre>\n<p>Salvate il file del plugin e tornate nell&#8217;amministrazione di WordPress. Ora non dovreste pi\u00f9 vedere il meta box personalizzato nell&#8217;editor dei blocchi. Se invece riattivate l&#8217;editor classico, il meta box personalizzato verr\u00e0 visualizzato di nuovo.<\/p>\n<h2>Aggiungere Custom Meta Field all&#8217;Editor a Blocchi di Gutenberg (3 Opzioni)<\/h2>\n<p>Nei nostri precedenti articoli sullo sviluppo dei blocchi di Gutenberg, abbiamo fornito una panoramica dettagliata dell&#8217;editor, delle sue parti e di come sviluppare <a href=\"https:\/\/kinsta.com\/it\/blog\/blocchi-gutenberg\/\">blocchi statici<\/a> e <a href=\"https:\/\/kinsta.com\/it\/blog\/blocchi-dinamici\/\">blocchi dinamici<\/a>.<\/p>\n<p>Come abbiamo detto, in questo articolo faremo un ulteriore passo avanti e parleremo di come aggiungere custom meta field agli articoli del blog.<\/p>\n<p>Esistono diversi modi per memorizzare e utilizzare i metadati degli articoli in Gutenberg. In questo articolo tratteremo i seguenti:<br \/>\n<div><\/div><kinsta-auto-toc list-style=\"disc\" selector=\"h3\" count-number=\"3\" sub-toc=\"true\"><\/kinsta-auto-toc><\/p>\n<h3>Creare un Blocco Personalizzato per Memorizzare e Visualizzare i Custom Meta Field<\/h3>\n<p>In questa sezione vi mostreremo come creare e gestire i custom meta field all&#8217;interno di un <strong>blocco dinamico<\/strong>. Secondo il Manuale dell&#8217;editor di blocchi, un <a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/metabox\/#step-1-register-meta-field\">meta-field di un post<\/a> &#8220;\u00e8 un oggetto di WordPress utilizzato per memorizzare dati extra su un post&#8221; e dobbiamo registrare un nuovo meta-field prima di poterlo utilizzare.<\/p>\n<h4>Registrare i Custom Meta Field<\/h4>\n<p>Prima di registrare un custom meta field, dovete assicurarvi che il <a href=\"https:\/\/kinsta.com\/it\/blog\/custom-post-type-wordpress\/\">tipo di post<\/a> che lo utilizzer\u00e0 supporti i campi personalizzati. Inoltre, quando registrate un custom meta field, dovete impostare il parametro <code>show_in_rest<\/code> su <code>true<\/code>.<\/p>\n<p>Ora torniamo al file del plugin. Aggiungete il seguente codice:<\/p>\n<pre><code class=\"language-php\">\/**\n * Register the custom meta fields\n *\/\nfunction meta_fields_register_meta() {\n\n\t$metafields = [ '_meta_fields_book_title', '_meta_fields_book_author' ];\n\n\tforeach( $metafields as $metafield ){\n    \t\/\/ Pass an empty string to register the meta key across all existing post types.\n    \tregister_post_meta( '', $metafield, array(\n        \t'show_in_rest' =&gt; true,\n        \t'type' =&gt; 'string',\n        \t'single' =&gt; true,\n        \t'sanitize_callback' =&gt; 'sanitize_text_field',\n        \t'auth_callback' =&gt; function() {\n            \treturn current_user_can( 'edit_posts' );\n        \t}\n    \t));\n\t}  \n}\nadd_action( 'init', 'meta_fields_register_meta' );<\/code><\/pre>\n<p><code>register_post_meta<\/code> registra un meta field per i tipi di post specificati. Nel codice qui sopra, abbiamo registrato due custom meta field per tutti i tipi di post registrati sul vostro sito web che supportano i campi personalizzati. Per maggiori informazioni, consultate il <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/register_post_meta\/\">riferimento alla funzione<\/a>.<\/p>\n<p>Una volta fatto, aprite il file <strong>src\/index.js<\/strong> del vostro plugin a blocchi.<\/p>\n<h4>Registrare il Tipo di Blocco sul Client<\/h4>\n<p>Ora andate nella cartella <strong>wp-content\/plugins\/metadata-block\/src<\/strong> e aprite il file <strong>index.js<\/strong>:<\/p>\n<pre><code class=\"language-js\">import { registerBlockType } from '@wordpress\/blocks';\nimport '.\/style.scss';\nimport Edit from '.\/edit';\nimport metadata from '.\/block.json';\n\nregisterBlockType( metadata.name, {\n    edit: Edit,\n} );<\/code><\/pre>\n<p>Con i blocchi statici avremmo visto anche una <a href=\"https:\/\/kinsta.com\/it\/blog\/blocchi-gutenberg\/#indexjs\">funzione<code>save<\/code><\/a>. In questo caso, la funzione <code>save<\/code> \u00e8 assente perch\u00e9 abbiamo installato un blocco dinamico. Il contenuto mostrato nel frontend sar\u00e0 generato dinamicamente tramite PHP.<\/p>\n<h4>Creare il Tipo di Blocco<\/h4>\n<p>Andate alla cartella <strong>wp-content\/plugins\/metadata-block\/src<\/strong> e aprite il file <strong>edit.js<\/strong>. Dovreste vedere il seguente codice (commenti rimossi):<\/p>\n<pre><code class=\"language-js\">import { __ } from '@wordpress\/i18n';\nimport { useBlockProps } from '@wordpress\/block-editor';\nimport '.\/editor.scss';\n\nexport default function Edit() {\n    return (\n   \t &lt;p { ...useBlockProps() }&gt;\n   \t\t { __( 'Meta Fields \u2013 hello from the editor!', 'metadata-block' ) }\n   \t &lt;\/p&gt;\n    );\n}<\/code><\/pre>\n<p>Qui aggiungerete il codice per generare il blocco da visualizzare nell&#8217;editor.<\/p>\n<p>Il primo passo \u00e8 importare i componenti e le funzioni necessarie per creare il blocco. Ecco l&#8217;elenco completo delle dipendenze:<\/p>\n<pre><code class=\"language-js\">import { __ } from '@wordpress\/i18n';\nimport { useBlockProps, InspectorControls, RichText } from '@wordpress\/block-editor';\nimport { useSelect } from '@wordpress\/data';\nimport { useEntityProp } from '@wordpress\/core-data';\nimport { TextControl, PanelBody, PanelRow } from '@wordpress\/components';\nimport '.\/editor.scss';<\/code><\/pre>\n<p>Se avete letto i nostri articoli precedenti, dovreste conoscere molte di queste <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Statements\/import\">dichiarazioni di <code>import<\/code><\/a>. Qui ne indicheremo solo un paio:<\/p>\n<pre><code class=\"language-js\">import { useSelect } from '@wordpress\/data';\nimport { useEntityProp } from '@wordpress\/core-data';<\/code><\/pre>\n<p>Una volta importate queste dipendenze, ecco come <code>useSelect<\/code> e <code>useEntityProp<\/code> vengono inserite nella funzione <code>Edit()<\/code>:<\/p>\n<pre><code class=\"language-js\">const postType = useSelect(\n   \t ( select ) =&gt; select( 'core\/editor' ).getCurrentPostType(),\n   \t []\n    );\nconst [ meta, setMeta ] = useEntityProp( 'postType', postType, 'meta' );<\/code><\/pre>\n<ul>\n<li><code>useSelect<\/code> \u00e8 un hook personalizzato per <a href=\"https:\/\/kinsta.com\/it\/blog\/blocchi-dinamici\/#build-the-block-to-be-rendered-in-the-editor\">recuperare le propriet\u00e0 dai selettori registrati<\/a>. Lo useremo per recuperare il tipo di post corrente (si veda anche il <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-data\/#useselect\"> riferimento @wordpress\/data<\/a> e l&#8217;<a href=\"https:\/\/make.wordpress.org\/core\/2019\/06\/10\/introducing-usedispatch-and-useselect\/\">introduzione a useDispatch e useSelect<\/a>)<\/li>\n<li><code>useEntityProp<\/code> \u00e8 un hook personalizzato che permette ai blocchi di recuperare e modificare i meta field degli articoli. <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/33d84b036592a5bf31af05b7710f3b2b14163dc4\/packages\/core-data\/src\/entity-provider.js#L85\">\u00c8 definito<\/a> come un &#8220;hook che restituisce il valore e un setter per la propriet\u00e0 specificata dell&#8217;entit\u00e0 pi\u00f9 vicina fornita del tipo specificato&#8221;. Restituisce &#8220;un array in cui il primo elemento \u00e8 il valore della propriet\u00e0, il secondo \u00e8 il setter e il terzo \u00e8 l&#8217;oggetto valore completo dell&#8217;API REST contenente ulteriori informazioni come <code>raw<\/code>, <code>rendered<\/code> e <code>protected<\/code> props&#8221; (si veda anche <a href=\"https:\/\/make.wordpress.org\/core\/2020\/03\/02\/general-block-editor-api-updates\/\">General Block Editor API Updates<\/a>).<\/li>\n<\/ul>\n<p>Questo codice fornisce l&#8217;attuale <code>postType<\/code>, un oggetto di meta field (<code>meta<\/code>) e una funzione setter per aggiornarli (<code>setMeta<\/code>).<\/p>\n<p>Ora sostituite il codice attuale della funzione <code>Edit()<\/code> con il seguente:<\/p>\n<pre><code class=\"language-js\">export default function Edit() {\n    const blockProps = useBlockProps();\n    const postType = useSelect(\n   \t ( select ) =&gt; select( 'core\/editor' ).getCurrentPostType(),\n   \t []\n    );\n    const [ meta, setMeta ] = useEntityProp( 'postType', postType, 'meta' );\n    const bookTitle = meta[ '_meta_fields_book_title' ];\n    const bookAuthor = meta[ '_meta_fields_book_author' ];\n    const updateBookTitleMetaValue = ( newValue ) =&gt; {\n   \t setMeta( { ...meta, _meta_fields_book_title: newValue } );\n\t};\n    const updateBookAuthorMetaValue = ( newValue ) =&gt; {\n   \t setMeta( { ...meta, _meta_fields_book_author: newValue } );\n    };\nreturn ( ... );\n}<\/code><\/pre>\n<p>Di nuovo:<\/p>\n<ul>\n<li>Abbiamo usato <code>useSelect<\/code> per ottenere il tipo di post corrente.<\/li>\n<li><code>useEntityProp<\/code> restituisce un array di meta field e una funzione setter per impostare i nuovi valori dei meta.<\/li>\n<li><code>updateBookTitleMetaValue<\/code> e <code>updateBookAuthorMetaValue<\/code> sono due gestori di eventi per salvare i valori dei meta campi.<\/li>\n<\/ul>\n<p>Il passo successivo \u00e8 costruire il codice JSX (JavaScript XML) restituito dalla funzione <code>Edit()<\/code>:<\/p>\n<pre><code class=\"language-jsx\">export default function Edit() {\n    ...\n    return (\n   \t &lt;&gt;\n   \t\t &lt;InspectorControls&gt;\n   \t\t\t &lt;PanelBody\n   \t\t\t\t title={ __( 'Book Details' )}\n   \t\t\t\t initialOpen={true}\n   \t\t\t &gt;\n   \t\t\t\t &lt;PanelRow&gt;\n   \t\t\t\t\t &lt;fieldset&gt;\n   \t\t\t\t\t\t &lt;TextControl\n   \t\t\t\t\t\t\t label={__( 'Book title' )}\n   \t\t\t\t\t\t\t value={ bookTitle }\n   \t\t\t\t\t\t\t onChange={ updateBookTitleMetaValue }\n   \t\t\t\t\t\t \/&gt;\n   \t\t\t\t\t &lt;\/fieldset&gt;\n   \t\t\t\t &lt;\/PanelRow&gt;\n   \t\t\t\t &lt;PanelRow&gt;\n   \t\t\t\t\t &lt;fieldset&gt;\n   \t\t\t\t\t\t &lt;TextControl\n   \t\t\t\t\t\t\t label={ __( 'Book author' ) }\n   \t\t\t\t\t\t\t value={ bookAuthor }\n   \t\t\t\t\t\t\t onChange={ updateBookAuthorMetaValue }\n   \t\t\t\t\t\t \/&gt;\n   \t\t\t\t\t &lt;\/fieldset&gt;\n   \t\t\t\t &lt;\/PanelRow&gt;\n   \t\t\t &lt;\/PanelBody&gt;\n   \t\t &lt;\/InspectorControls&gt;\n   \t\t &lt;div { ...blockProps }&gt;\n   \t\t\t &lt;RichText\n   \t\t\t\t tagName=\"h3\"\n   \t\t\t\t onChange={ updateBookTitleMetaValue }\n   \t\t\t\t allowedFormats={ [ 'core\/bold', 'core\/italic' ] }\n   \t\t\t\t value={ bookTitle }\n   \t\t\t\t placeholder={ __( 'Write your text...' ) }\n   \t\t\t \/&gt;\n   \t\t\t &lt;TextControl\n   \t\t\t\t label=\"Book Author\"\n   \t\t\t\t value={ bookAuthor }\n   \t\t\t\t onChange={ updateBookAuthorMetaValue }\n   \t\t\t \/&gt;\n   \t\t &lt;\/div&gt;\n   \t &lt;\/&gt;\n    );\n}<\/code><\/pre>\n<p>Il componente <code>RichText<\/code> fornisce un input <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Global_attributes\/contenteditable\">contenteditable<\/a>, mentre <code>TextControl<\/code> fornisce semplici campi di testo.<\/p>\n<p>Abbiamo anche creato un pannello laterale contenente due campi di input da utilizzare al posto dei due controlli inclusi nel blocco.<\/p>\n<p>Salvate il file e tornate all&#8217;editor. Aggiungete il blocco <strong>Meta Fields<\/strong> dall&#8217;inseritore di blocchi e inserite il titolo e l&#8217;autore del libro.<\/p>\n<figure id=\"attachment_142769\" aria-describedby=\"caption-attachment-142769\" style=\"width: 1796px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-142769\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/custom-block-with-2-meta-fields.jpg\" alt=\"Schermata di un blocco personalizzato che include due custom meta field.\" width=\"1796\" height=\"880\"><figcaption id=\"caption-attachment-142769\" class=\"wp-caption-text\">Un blocco personalizzato che include due custom meta field.<\/figcaption><\/figure>\n<p>Noterete che ogni volta che modificate il valore del campo nel blocco, cambier\u00e0 anche il valore del campo di testo corrispondente nella barra laterale.<\/p>\n<p>Successivamente, dobbiamo creare il codice PHP che genera l&#8217;HTML da visualizzare nel frontend.<\/p>\n<h4>Visualizzare il Blocco nel Frontend<\/h4>\n<p>Aprite nuovamente il file PHP principale nel vostro editor di codice e riscrivete la funzione di callback che genera l&#8217;output del blocco come segue:<\/p>\n<pre><code class=\"language-php\">function meta_fields_metadata_block_block_init() {\n    register_block_type(\n   \t __DIR__ . '\/build',\n   \t array(\n   \t\t 'render_callback' =&gt; 'meta_fields_metadata_block_render_callback',\n   \t )\n    );\n}\nadd_action( 'init', 'meta_fields_metadata_block_block_init' );\n\nfunction meta_fields_metadata_block_render_callback( $attributes, $content, $block ) {\n    \n    $book_title = get_post_meta( get_the_ID(), '_meta_fields_book_title', true );\n    $book_author = get_post_meta( get_the_ID(), '_meta_fields_book_author', true );\n    \n    $output = \"\";\n\n    if( ! empty( $book_title ) ){\n   \t $output .= '&lt;h3&gt;' . esc_html( $book_title ) . '&lt;\/h3&gt;';\n    }\n    if( ! empty( $book_author ) ){\n   \t $output .= '&lt;p&gt;' . __( 'Book author: ' ) . esc_html( $book_author ) . '&lt;\/p&gt;';\n    }\n    if( strlen( $output ) &gt; 0 ){\n   \t return '&lt;div ' . get_block_wrapper_attributes() . '&gt;' . $output . '&lt;\/div&gt;';\n    } else {\n   \t return '&lt;div ' . get_block_wrapper_attributes() . '&gt;' . '&lt;strong&gt;' . __( 'Sorry. No fields available here!' ) . '&lt;\/strong&gt;' . '&lt;\/div&gt;';\n    }\n}<\/code><\/pre>\n<p>Questo codice si spiega da solo. Per prima cosa, usiamo <code>get_post_meta<\/code> per recuperare i valori dei custom meta field. Poi usiamo questi valori per costruire il contenuto del blocco. Infine, la funzione di callback restituisce l&#8217;HTML del blocco.<\/p>\n<p>Il blocco \u00e8 pronto per essere utilizzato. Abbiamo volutamente mantenuto il codice di questo esempio il pi\u00f9 semplice possibile, ma utilizzando i componenti nativi di Gutenberg potete creare blocchi pi\u00f9 avanzati e ottenere il massimo dai custom meta field di WordPress.<\/p>\n<figure id=\"attachment_142768\" aria-describedby=\"caption-attachment-142768\" style=\"width: 1796px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-142768\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/custom-block-with-custom-meta-fields.jpg\" alt=\"Schermata di un blocco personalizzato che include diversi campi personalizzati.\" width=\"1796\" height=\"1260\"><figcaption id=\"caption-attachment-142768\" class=\"wp-caption-text\">Un blocco personalizzato che include diversi meta campi.<\/figcaption><\/figure>\n<p>Nel nostro esempio, abbiamo usato gli elementi <code>h3<\/code> e <code>p<\/code> per costruire il blocco per il frontend.<\/p>\n<p>Ma potete visualizzare i dati in molti modi. L&#8217;immagine seguente mostra un semplice elenco non ordinato di meta campi.<\/p>\n<figure id=\"attachment_142770\" aria-describedby=\"caption-attachment-142770\" style=\"width: 1794px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-142770\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/custom-block-on-the-front-end.jpg\" alt=\"Schermata con esempio di blocco nel frontend\" width=\"1794\" height=\"1132\"><figcaption id=\"caption-attachment-142770\" class=\"wp-caption-text\">Un esempio di blocco nel frontend.<\/figcaption><\/figure>\n<p>Potete trovare il codice completo di questo esempio in <a href=\"https:\/\/gist.github.com\/carlodaniele\/d44ca1d76457fa6553f44ed863ecdbcd\">questo gist pubblico<\/a>.<\/p>\n<h3>Aggiungere un Custom Meta Field alla Barra Laterale del Documento<\/h3>\n<p>La seconda opzione consiste nell&#8217;aggiungere custom meta field agli articoli utilizzando un plugin che genera un pannello di impostazioni nella barra laterale del documento.<\/p>\n<p>Il processo \u00e8 abbastanza simile a quello dell&#8217;esempio precedente, ma in questo caso non avremo bisogno di un blocco per gestire i metadati. Creeremo un componente per generare un pannello con una serie di controlli nella barra laterale del documento seguendo questi passaggi:<\/p>\n<ol>\n<li><a href=\"#option-2-create-new-block\">Creare un nuovo plugin di blocco con create-block<\/a><\/li>\n<li><a href=\"#option-2-register-custom-meta-box\">Registrare un meta field personalizzato per l&#8217;editor classico<\/a><\/li>\n<li><a href=\"#option-2-register-custom-fields\">Registrare i custom meta field nel file principale del plugin tramite la funzione register_post_meta()<\/a><\/li>\n<li><a href=\"#option-2-register-plugin\">Registrare un plugin nel file index.js<\/a><\/li>\n<li><a href=\"#option-2-build-component\">Costruire il componente usando i componenti integrati di Gutenberg<\/a><\/li>\n<\/ol>\n<h4 id=\"option-2-create-new-block\">Creare un Nuovo Plugin di Blocco con lo Strumento create-block<\/h4>\n<p>Per creare un nuovo plugin a blocchi, seguite i passi della <a href=\"#create-a-custom-block-to-store-and-display-custom-meta-fields\">sezione precedente<\/a>. Potete creare un nuovo plugin o modificare gli script costruiti nell&#8217;esempio precedente.<\/p>\n<h4 id=\"option-2-register-custom-meta-box\">Registrare un Meta Box Personalizzato per l&#8217;Editor Classico<\/h4>\n<p>Successivamente, dovete registrare un meta box personalizzato per garantire la compatibilit\u00e0 con i siti web WordPress che usano ancora l&#8217;editor classico. La procedura \u00e8 la stessa descritta nella <a href=\"#add-a-meta-box-to-the-classic-editor\">sezione precedente<\/a>.<\/p>\n<h4 id=\"option-2-register-custom-fields\">Registrare i Custom Meta Field nel File Principale del Plugin<\/h4>\n<p>Il passo successivo consiste nel registrare i custom meta field nel file principale del plugin tramite la funzione <code>register_post_meta()<\/code>. Anche in questo caso, potete seguire l&#8217;<a href=\"#register-custom-meta-fields\">esempio precedente<\/a>.<\/p>\n<h4 id=\"option-2-register-plugin\">Registrare un Plugin nel File index.js<\/h4>\n<p>Una volta completati i passaggi precedenti, \u00e8 il momento di registrare un plugin nel file <strong>index.js<\/strong> per rendere un componente personalizzato.<\/p>\n<p>Prima di registrare il plugin, create una cartella <strong>components<\/strong> all&#8217;interno della cartella <strong>src<\/strong> del plugin. All&#8217;interno della cartella <strong>components<\/strong>, create un nuovo file <strong>MetaBox.js<\/strong>. Potete scegliere il nome che ritenete pi\u00f9 adatto per il vostro componente, seguendo le <a href=\"https:\/\/github.com\/airbnb\/javascript\/tree\/master\/react#naming\">best practice di denominazione<\/a> in React.<\/p>\n<p>Prima di proseguire, installate il <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-plugins\/\">modulo <code>@wordpress\/plugins<\/code><\/a> dal vostro strumento a riga di comando.<\/p>\n<p>Interrompete il processo (mac), installate il modulo e avviate nuovamente il processo:<\/p>\n<pre><code class=\"language-bash\">^C\nnpm install @wordpress\/plugins --save\nnpm start<\/code><\/pre>\n<p>Una volta terminato, aprite il file <strong>index.js<\/strong> del vostro plugin e aggiungete il seguente codice.<\/p>\n<pre><code class=\"language-js\">\/**\n * Registers a plugin for adding items to the Gutenberg Toolbar\n *\n * @see https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/slotfills\/plugin-sidebar\/\n *\/\nimport { registerPlugin } from '@wordpress\/plugins';\n\nimport MetaBox from '.\/components\/MetaBox';<\/code><\/pre>\n<p>Il codice \u00e8 abbastanza esplicativo. Tuttavia, vogliamo soffermarci un attimo sulle due dichiarazioni di <code>import<\/code> per chi non ha conoscenze avanzate di React.<\/p>\n<p>Con la prima istruzione <code>import<\/code> abbiamo racchiuso il nome della funzione tra parentesi graffe. Con la seconda istruzione <code>import<\/code>, il nome del componente non \u00e8 racchiuso tra parentesi graffe.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Un&#8217;istruzione <code>import<\/code> senza parentesi graffe viene utilizzata per <strong>importare l&#8217;esportazione predefinita<\/strong>. L&#8217;istruzione <code>import<\/code> con le parentesi graffe serve per <strong>importare un&#8217;esportazione con nome<\/strong>. Per ulteriori dettagli, consultate le seguenti risorse:<\/p>\n<ul>\n<li><a href=\"https:\/\/beta.reactjs.org\/learn\/importing-and-exporting-components\">Importing and Exporting Components<\/a><\/li>\n<li><a href=\"https:\/\/create-react-app.dev\/docs\/importing-a-component\/\">Importing a Component<\/a><\/li>\n<li><a href=\"https:\/\/stackoverflow.com\/questions\/36795819\/when-should-i-use-curly-braces-for-es6-import\/36796281#36796281\">When should I use curly braces for ES6 import?<br \/>\n<\/a><\/li>\n<\/ul>\n<p><\/p>\n<\/aside>\n\n<p>Successivamente, registrate il vostro plugin:<\/p>\n<pre><code class=\"language-js\">registerPlugin( 'metadata-plugin', {\n    render: MetaBox\n} );<\/code><\/pre>\n<p><code>registerPlugin<\/code> registra semplicemente un plugin. La funzione accetta due parametri:<\/p>\n<ul>\n<li>Una stringa unica che identifica il plugin<\/li>\n<li>Un oggetto di impostazioni del plugin. Notate che la propriet\u00e0 <code>render<\/code> <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/0b37b3bc71e2c6f200781a53e11fddec4bc0b935\/packages\/plugins\/src\/api\/index.js#L138\">deve essere specificata<\/a> e deve essere una funzione valida.<\/li>\n<\/ul>\n<h4 id=\"option-2-build-component\">Costruire il Componente Utilizzando i Componenti Integrati di Gutenberg<\/h4>\n<p>\u00c8 il momento di costruire il nostro componente React. Aprite il file <strong>MetaBox.js<\/strong> (o come lo avete chiamato) e aggiungete le seguenti dichiarazioni di importazione:<\/p>\n<pre><code class=\"language-js\">import { __ } from '@wordpress\/i18n';\nimport { compose } from '@wordpress\/compose';\nimport { withSelect, withDispatch } from '@wordpress\/data';\nimport { PluginDocumentSettingPanel } from '@wordpress\/edit-post';\nimport { PanelRow, TextControl, DateTimePicker } from '@wordpress\/components';<\/code><\/pre>\n<ul>\n<li>La funzione <code>compose<\/code> esegue la <strong>composizione di funzioni<\/strong>, ovvero il risultato di una funzione viene passato a un&#8217;altra funzione. Prima di poter usare <code>compose<\/code>, potrebbe essere necessario installare il modulo corrispondente:\n<pre><code class=\"language-bash\">npm install @wordpress\/compose --save<\/code><\/pre>\n<p>Tra poco vedremo la funzione <code>compose<\/code> in azione.<\/li>\n<li><code>withSelect<\/code> <code>withDispatch<\/code> sono due <strong>componenti di ordine superiore<\/strong> che vi permettono di prelevare o inviare dati da o verso un negozio WordPress. <code>withSelect<\/code> viene utilizzato per iniettare props state-derived utilizzando <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/trunk\/packages\/data\/README.md#selectors\">selettori<\/a> registrati, mentre <code>withDispatch<\/code> viene utilizzato per inviare oggetti di scena utilizzando <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/trunk\/packages\/data\/README.md#actions\">action creators<\/a> registrati.<\/li>\n<li><code>PluginDocumentSettingPanel<\/code> rende gli elementi della barra laterale del documento (si veda il codice sorgente <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/trunk\/packages\/edit-post\/src\/components\/sidebar\/plugin-document-setting-panel\/index.js#L55\">su Github<\/a>).<\/li>\n<\/ul>\n<p>Successivamente, creerete il componente per visualizzare il pannello MetaBox nella barra laterale del documento. Nel file <strong>MetaBox.js<\/strong>, aggiungete il seguente codice:<\/p>\n<pre><code class=\"language-jsx\">const MetaBox = ( { postType, metaFields, setMetaFields } ) =&gt; {\n\n    if ( 'post' !== postType ) return null;\n\n    return(\n   \t &lt;PluginDocumentSettingPanel\n   \t\t title={ __( 'Book details' ) }\n   \t\t icon=\"book\"\n   \t\t initialOpen={ false }\n   \t &gt;\n   \t\t &lt;PanelRow&gt;\n   \t\t\t &lt;TextControl\n   \t\t\t\t value={ metaFields._meta_fields_book_title }\n   \t\t\t\t label={ __( \"Title\" ) }\n   \t\t\t\t onChange={ (value) =&gt; setMetaFields( { _meta_fields_book_title: value } ) }\n   \t\t\t \/&gt;\n   \t\t &lt;\/PanelRow&gt;\n   \t\t &lt;PanelRow&gt;\n   \t\t\t &lt;TextControl\n   \t\t\t\t value={ metaFields._meta_fields_book_author }\n   \t\t\t\t label={ __( \"Author\" ) }\n   \t\t\t\t onChange={ (value) =&gt; setMetaFields( { _meta_fields_book_author: value } ) }\n   \t\t\t \/&gt;\n   \t\t &lt;\/PanelRow&gt;\n   \t\t &lt;PanelRow&gt;\n   \t\t\t &lt;TextControl\n   \t\t\t\t value={ metaFields._meta_fields_book_publisher }\n   \t\t\t\t label={ __( \"Publisher\" ) }\n   \t\t\t\t onChange={ (value) =&gt; setMetaFields( { _meta_fields_book_publisher: value } ) }\n   \t\t\t \/&gt;\n   \t\t &lt;\/PanelRow&gt;\n   \t\t &lt;PanelRow&gt;\n   \t\t\t &lt;DateTimePicker\n   \t\t\t\t currentDate={ metaFields._meta_fields_book_date }\n   \t\t\t\t onChange={ ( newDate ) =&gt; setMetaFields( { _meta_fields_book_date: newDate } ) }\n   \t\t\t\t __nextRemoveHelpButton\n   \t\t\t\t __nextRemoveResetButton\n   \t\t\t \/&gt;\n   \t\t &lt;\/PanelRow&gt;\n   \t &lt;\/PluginDocumentSettingPanel&gt;\n    );\n}\n\nconst applyWithSelect = withSelect( ( select ) =&gt; {\n    return {\n   \t metaFields: select( 'core\/editor' ).getEditedPostAttribute( 'meta' ),\n   \t postType: select( 'core\/editor' ).getCurrentPostType()\n    };\n} );\n\nconst applyWithDispatch = withDispatch( ( dispatch ) =&gt; {\n    return {\n   \t setMetaFields ( newValue ) {\n   \t\t dispatch('core\/editor').editPost( { meta: newValue } )\n   \t }\n    }\n} );\n\nexport default compose([\n    applyWithSelect,\n    applyWithDispatch\n])(MetaBox);<\/code><\/pre>\n<p>Vediamo come suddividere il codice.<\/p>\n<ul>\n<li>L&#8217;<a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/slotfills\/plugin-document-setting-panel\/\">elemento <code>PluginDocumentSettingPanel<\/code><\/a> <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/trunk\/packages\/edit-post\/src\/components\/sidebar\/plugin-document-setting-panel\/index.js#L55\">crea un nuovo pannello<\/a> nella barra laterale del documento. Impostiamo il titolo (&#8220;Dettagli del libro&#8221;) e l&#8217;icona e impostiamo <code>initialOpen<\/code> su <code>false<\/code>, il che significa che inizialmente il pannello \u00e8 chiuso.<\/li>\n<li>All&#8217;interno di <code>PluginDocumentSettingPanel<\/code> abbiamo tre campi di testo e un elemento <code>DateTimePicker<\/code> che permette all&#8217;utente di impostare la data di pubblicazione.<\/li>\n<li><code>withSelect<\/code> fornisce l&#8217;accesso alla funzione <code>select<\/code> che usiamo per recuperare <code>metaFields<\/code> e <code>postType<\/code>. <code>withDispatch<\/code> fornisce l&#8217;accesso alla funzione <code>dispatch<\/code>, che permette di aggiornare i valori dei metadati.<\/li>\n<li>Infine, la funzione <code>compose<\/code> ci permette di comporre il nostro componente con i componenti di ordine superiore <code>withSelect<\/code> e <code>withDispatch<\/code>. In questo modo il componente ha accesso alle propriet\u00e0 <code>metaFields<\/code> e <code>postType<\/code> e alla funzione <code>setMetaFields<\/code>.<\/li>\n<\/ul>\n<p>Salvate il file <strong>MetaBox.js<\/strong>, create un nuovo post nel vostro sito di sviluppo WordPress e guardate la barra laterale dei documenti. Dovreste vedere il nuovo pannello <strong>Dettagli del libro<\/strong>.<\/p>\n<figure id=\"attachment_142918\" aria-describedby=\"caption-attachment-142918\" style=\"width: 1851px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-142918\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/book-details-panel.jpg\" alt=\"Un pannello di meta box personalizzato nel menu destro dell\u2019editor Gutenberg: si chiama Dettagli del libro\" width=\"1851\" height=\"1617\"><figcaption id=\"caption-attachment-142918\" class=\"wp-caption-text\">Un pannello meta box personalizzato in Gutenberg.<\/figcaption><\/figure>\n<p>Ora eseguite i vostri test. Impostate i valori dei vostri custom meta field e salvate l\u2019articolo. Poi ricaricate la pagina e controllate se i valori inseriti sono al loro posto.<\/p>\n<p>Aggiungete il blocco che abbiamo creato nella sezione precedente e verificate che tutto funzioni correttamente.<\/p>\n<h3>Aggiungere una Barra Laterale Personalizzata per Gestire i Metadati degli Articoli<\/h3>\n<p>Se avete un gran numero di custom meta field da aggiungere ai vostri articoli o ai tipi di post personalizzati, potete anche creare una barra laterale di impostazioni personalizzate specifica per il vostro plugin.<\/p>\n<p>Il processo \u00e8 molto simile a quello dell&#8217;esempio precedente, quindi se avete compreso i passaggi discussi nella sezione precedente, non avrete alcuna difficolt\u00e0 a creare una barra laterale personalizzata per Gutenberg.<\/p>\n<p>Ancora una volta:<\/p>\n<ol>\n<li><a href=\"#option-3-create-new-block\">Creare un nuovo plugin di blocco con create-block<\/a><\/li>\n<li><a href=\"#option-3-register-custom-meta-box\">Registrare un meta field personalizzato per l&#8217;editor classico<\/a><\/li>\n<li><a href=\"#option-3-register-custom-fields\">Registrare i custom meta field nel file principale del plugin tramite la funzione register_post_meta()<\/a><\/li>\n<li><a href=\"#option-3-register-plugin\">Registrare un plugin nel file index.js<\/a><\/li>\n<li><a href=\"#option-3-build-component\">Costruire il componente utilizzando i componenti integrati di Gutenberg<\/a><\/li>\n<\/ol>\n<h4 id=\"#option-3-create-new-block\">Creare un Nuovo Plugin di Blocco con lo Strumento create-block<\/h4>\n<p>Anche in questo caso, per creare un nuovo plugin a blocchi, seguite i passi descritti in precedenza. Potete creare un nuovo plugin o modificare gli script creati negli esempi precedenti.<\/p>\n<h4 id=\"#option-3-register-custom-meta-box\">Registrare una Meta Box Personalizzata per l&#8217;Editor Classico<\/h4>\n<p>Ora registrate un meta box personalizzato per garantire la retrocompatibilit\u00e0 dei siti WordPress che usano ancora l&#8217;editor classico. La procedura \u00e8 la stessa descritta nella sezione precedente.<\/p>\n<h4 id=\"#option-3-register-custom-fields\">Registrare i Custom Meta Field nel File Principale del Plugin<\/h4>\n<p>Registrate i custom meta field nel file principale del plugin tramite la funzione <code>register_post_meta()<\/code>.<\/p>\n<h4 id=\"#option-3-register-plugin\">Registrare un Plugin nel File index.js<\/h4>\n<p>Ora create un file <strong>CustomSidebar.js<\/strong> vuoto nella cartella <strong>components<\/strong>.<\/p>\n<p>Una volta fatto, modificate il file <strong>index.js<\/strong> come segue:<\/p>\n<pre><code class=\"language-js\">\/**\n * Registers a plugin for adding items to the Gutenberg Toolbar\n *\n * @see https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/slotfills\/plugin-sidebar\/\n *\/\nimport { registerPlugin } from '@wordpress\/plugins';\n\nimport CustomSidebar from '.\/components\/CustomSidebar';\n\/\/ import MetaBox from '.\/components\/MetaBox';\n\nregisterPlugin( 'metadata-block', {\n\trender: CustomSidebar\n} );<\/code><\/pre>\n<p>Con il codice qui sopra importiamo prima il componente <code>CustomSidebar<\/code> e poi diciamo alla funzione <code>registerPlugin<\/code> di eseguire il rendering del nuovo componente.<\/p>\n<h4 id=\"#option-3-build-component\">Creare il Componente Utilizzando i Componenti Gutenberg Integrati<\/h4>\n<p>Quindi, aprite il file <strong>CustomSidebar.js<\/strong> e aggiungete le seguenti dipendenze:<\/p>\n<pre><code class=\"language-php\">import { __ } from '@wordpress\/i18n';\nimport { compose } from '@wordpress\/compose';\nimport { withSelect, withDispatch } from '@wordpress\/data';\nimport { PluginSidebar, PluginSidebarMoreMenuItem } from '@wordpress\/edit-post';\nimport { PanelBody, PanelRow, TextControl, DateTimePicker } from '@wordpress\/components';<\/code><\/pre>\n<p>Dovreste notare che stiamo importando due nuovi componenti:<\/p>\n<ul>\n<li><code>PluginSidebar<\/code> aggiunge un&#8217;icona nella barra degli strumenti di Gutenberg che, quando viene cliccata, visualizza una barra laterale che include il contenuto avvolto nell&#8217;<a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/slotfills\/plugin-sidebar\/\">elemento<code>&lt;PluginSidebar \/&gt;<\/code><\/a> (il componente \u00e8 documentato anche <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/569241a3e1b7d0cc0567fccb92b1b57eb1b5b9c5\/packages\/edit-site\/src\/components\/sidebar-edit-mode\/plugin-sidebar\/index.js\">su GitHub<\/a>).<\/li>\n<li><code>PluginSidebarMoreMenuItem<\/code> <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/slotfills\/plugin-sidebar-more-menu-item\/\">trasforma una voce di menu sotto Plugin nel menu a tendina<\/a> <strong>More Menu<\/strong> e pu\u00f2 essere utilizzato per attivare il componente <code>PluginSidebar<\/code> corrispondente (si veda anche <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/a7e2895829c16ecd77a5ba22d84f1dee1cfb0977\/packages\/edit-post\/src\/components\/header\/plugin-sidebar-more-menu-item\/index.js\">su GitHub<\/a>).<\/li>\n<\/ul>\n<p>Ora potete creare il vostro componente personalizzato:<\/p>\n<pre><code class=\"language-jsx\">const CustomSidebar = ( { postType, metaFields, setMetaFields } ) =&gt; {\n   \t \n\tif ( 'post' !== postType ) return null;\n\n\treturn (\n    \t&lt;&gt;\n        \t&lt;PluginSidebarMoreMenuItem\n            \ttarget=\"metadata-sidebar\"\n            \ticon=\"book\"\n        \t&gt;\n            \tMetadata Sidebar\n        \t&lt;\/PluginSidebarMoreMenuItem&gt;\n        \t&lt;PluginSidebar\n            \tname=\"metadata-sidebar\"\n            \ticon=\"book\"\n            \ttitle=\"My Sidebar\"\n        \t&gt;\n            \t&lt;PanelBody title=\"Book details\" initialOpen={ true }&gt;\n                \t&lt;PanelRow&gt;\n                    \t&lt;TextControl\n                        \tvalue={ metaFields._meta_fields_book_title }\n                        \tlabel={ __( \"Title\" ) }\n                        \tonChange={ (value) =&gt; setMetaFields( { _meta_fields_book_title: value } ) }\n                    \t\/&gt;\n                \t&lt;\/PanelRow&gt;\n                \t&lt;PanelRow&gt;\n                    \t&lt;TextControl\n                        \tvalue={ metaFields._meta_fields_book_author }\n                        \tlabel={ __(\"Author\", \"textdomain\") }\n                        \tonChange={ (value) =&gt; setMetaFields( { _meta_fields_book_author: value } ) }\n                    \t\/&gt;\n                \t&lt;\/PanelRow&gt;\n                \t&lt;PanelRow&gt;\n                    \t&lt;TextControl\n                        \tvalue={ metaFields._meta_fields_book_publisher }\n                        \tlabel={ __(\"Publisher\", \"textdomain\") }\n                        \tonChange={ (value) =&gt; setMetaFields( { _meta_fields_book_publisher: value } ) }\n                    \t\/&gt;\n                \t&lt;\/PanelRow&gt;\n                \t&lt;PanelRow&gt;\n                    \t&lt;DateTimePicker\n                        \tcurrentDate={ metaFields._meta_fields_book_date }\n                        \tonChange={ ( newDate ) =&gt; setMetaFields( { _meta_fields_book_date: newDate } ) }\n                        \t__nextRemoveHelpButton\n                        \t__nextRemoveResetButton\n                    \t\/&gt;\n                \t&lt;\/PanelRow&gt;\n            \t&lt;\/PanelBody&gt;\n        \t&lt;\/PluginSidebar&gt;\n    \t&lt;\/&gt;\n\t)\n}<\/code><\/pre>\n<p>Il passo finale \u00e8 la composizione del componente con i componenti di ordine superiore <code>withSelect<\/code> e <code>withDispatch<\/code>:<\/p>\n<pre><code class=\"language-js\">const applyWithSelect = withSelect( ( select ) =&gt; {\n\treturn {\n    \tmetaFields: select( 'core\/editor' ).getEditedPostAttribute( 'meta' ),\n    \tpostType: select( 'core\/editor' ).getCurrentPostType()\n\t};\n} );\n\nconst applyWithDispatch = withDispatch( ( dispatch ) =&gt; {\n\treturn {\n    \tsetMetaFields ( newValue ) {\n        \tdispatch('core\/editor').editPost( { meta: newValue } )\n    \t}\n\t}\n} );\n\nexport default compose([\n\tapplyWithSelect,\n\tapplyWithDispatch\n])(CustomSidebar);<\/code><\/pre>\n<p>Salvate le modifiche, quindi controllate l&#8217;interfaccia dell&#8217;editor. Se aprite il menu a tendina <strong>Opzioni<\/strong>, vedrete una nuova voce <strong>Metadata Sidebar<\/strong> nella sezione <strong>Plugin<\/strong>. Facendo clic su questa nuova voce, attiverete la vostra nuova barra laterale personalizzata.<\/p>\n<figure id=\"attachment_143176\" aria-describedby=\"caption-attachment-143176\" style=\"width: 1858px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-143176\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/plugin-sidebar-more-menu-item.jpg\" alt=\"Il componente PluginSidebarMoreMenuItem aggiunge una voce di menu in Opzioni - Plugin\" width=\"1858\" height=\"1096\"><figcaption id=\"caption-attachment-143176\" class=\"wp-caption-text\">Il componente PluginSidebarMoreMenuItem aggiunge una voce di menu sotto Opzioni &#8211; Plugin.<\/figcaption><\/figure>\n<p>Lo stesso accade quando fate clic sull&#8217;icona del libro nell&#8217;angolo in alto a destra.<\/p>\n<figure id=\"attachment_143175\" aria-describedby=\"caption-attachment-143175\" style=\"width: 1860px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-143175\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/custom-sidebar-open.jpg\" alt=\"La barra laterale delle impostazioni dei plugin\" width=\"1860\" height=\"1198\"><figcaption id=\"caption-attachment-143175\" class=\"wp-caption-text\">La barra laterale delle impostazioni dei plugin.<\/figcaption><\/figure>\n<p>Ora tornate al vostro sito di sviluppo e create un nuovo articolo sul blog. Compilate i meta field e poi aggiungete il blocco all&#8217;editor. Dovrebbe includere gli stessi valori meta inseriti nella barra laterale personalizzata.<\/p>\n<p>Salvate l\u2019articolo e visualizzate l&#8217;anteprima della pagina sul frontend. Dovreste vedere la vostra scheda con il titolo del libro, l&#8217;autore, l&#8217;editore e la data di pubblicazione.<\/p>\n<p>Potete trovare il codice completo di questo articolo in questo <a href=\"https:\/\/gist.github.com\/carlodaniele\/05d4e8b6d982a4ef30840015fbdfb35f\">gist pubblico<\/a>.<br \/>\n<\/p>\n<h2>Altre Letture<\/h2>\n<p>In questo articolo abbiamo trattato diversi argomenti, dai selettori ai componenti di ordine superiore e molto altro ancora. Abbiamo linkato le principali risorse che abbiamo usato come riferimento in tutto l&#8217;articolo.<\/p>\n<p>Ma se volete approfondire questi argomenti, potete anche consultare le seguenti risorse aggiuntive:<\/p>\n<h3>Documentazione di Gutenberg e Risorse Ufficiali di WordPress<\/h3>\n<ul>\n<li>Plugin Handbook \/ <a href=\"https:\/\/developer.wordpress.org\/plugins\/metadata\/custom-meta-boxes\/\">Custom Meta Boxes<\/a><\/li>\n<li>Plugin Handbook \/ <a href=\"https:\/\/developer.wordpress.org\/plugins\/metadata\/managing-post-metadata\/\">Managing Post Metadata<\/a><\/li>\n<li>How-to Guides \/ <a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/metabox\/\">Meta Boxes<\/a><\/li>\n<li>How-to Guides \/ <a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/plugin-sidebar-0\/\">Plugin Sidebar<\/a><\/li>\n<li>Block Editor Handbook \/ <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/slotfills\/plugin-sidebar\/\">PluginSidebar<\/a><\/li>\n<li>Package Reference \/ <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-compose\/\">@wordpress\/compose<\/a><\/li>\n<li>Packages \/ data \/ <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/trunk\/packages\/data\/README.md#comparison-with-redux\">Comparison with Redux<\/a><\/li>\n<li>Packages \/ data \/ <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/trunk\/packages\/data\/README.md#withdispatch\">withDispatch<\/a><\/li>\n<li>Packages \/ data \/ <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-data\/#dispatch\">dispatch<\/a><\/li>\n<li>Packages \/ data \/ <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/trunk\/packages\/data\/README.md#withselect\">withSelect<\/a><\/li>\n<li>Packages \/ data \/ <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-data\/#select\">select<\/a><\/li>\n<\/ul>\n<h3>Altre Risorse Ufficiali<\/h3>\n<ul>\n<li><a href=\"https:\/\/reactjs.org\/docs\/higher-order-components.html\">Higher-Order Components<\/a> in React<\/li>\n<li><a href=\"https:\/\/redux.js.org\/tutorials\/fundamentals\/part-7-standard-patterns#action-creators\">Action creators<\/a> in Redux<\/li>\n<li><a href=\"https:\/\/redux.js.org\/usage\/deriving-data-selectors\">Deriving Data with Selectors<\/a> in Redux<\/li>\n<\/ul>\n<h3>Altre Risorse dalla Comunit\u00e0<\/h3>\n<ul>\n<li><a href=\"https:\/\/unfoldingneurons.com\/2019\/fantastic-hooks-and-where-to-use-them\">Fantastic hooks and where to use them<\/a> (di Darren Ethier)<\/li>\n<li><a href=\"https:\/\/unfoldingneurons.com\/2020\/wordpress-data-series-overview-and-introduction\">WordPress Data Series Overview and Introduction<\/a> (di Darren Ethier)<\/li>\n<li><a href=\"https:\/\/github.com\/airbnb\/javascript\/tree\/master\/react\">Airbnb React\/JSX Style Guide<\/a><\/li>\n<li><a href=\"https:\/\/www.robinwieruch.de\/react-higher-order-components\/\">React Higher-Order Components (HOCs)<\/a> (di Robin Wieruch)<\/li>\n<li><a href=\"https:\/\/www.educative.io\/answers\/function-composition-in-javascript\">Function composition in JavaScript<\/a><\/li>\n<li><a href=\"https:\/\/ryanwelcher.com\/2021\/08\/requesting-data-in-gutenberg-with-getentityrecords\/\">Requesting data in Gutenberg with getEntityRecords<\/a> (di Ryan Welcher)<\/li>\n<\/ul>\n<h3>Letture Utili dal Sito di Kinsta<\/h3>\n<ul>\n<li><a href=\"https:\/\/kinsta.com\/it\/blog\/react-js\/\">Cos\u2019\u00e8 React.js? Uno Sguardo alla Popolare Libreria JavaScript<br \/>\n<\/a><\/li>\n<li><a href=\"https:\/\/kinsta.com\/it\/blog\/best-practice-react\/\">Le Best Practice di React per Migliorare il Tuo Codice<\/a><\/li>\n<li><a href=\"https:\/\/kinsta.com\/it\/blog\/libreria-componenti-react\/\">Librerie di Componenti React UI: Le Migliori Opzioni<\/a><\/li>\n<li><a href=\"https:\/\/kinsta.com\/it\/blog\/workflow-wordpress\/\">Come Creare un Workflow Efficace Quando si Sviluppa con WordPress<\/a><\/li>\n<li><a href=\"https:\/\/kinsta.com\/it\/blog\/reddito-sviluppatore-wordpress\/\">Il Reddito di uno Sviluppatore WordPress: Qual \u00e8 la Media, e Come Aumentarlo<br \/>\n<\/a><\/li>\n<li><a href=\"https:\/\/kinsta.com\/it\/blog\/cosa-e-javascript\/\">Cosa \u00c8 JavaScript? Uno Sguardo al Linguaggio di Scripting pi\u00f9 Popolare del Web<\/a><\/li>\n<li><a href=\"https:\/\/kinsta.com\/it\/blog\/errori-in-javascript\/\">Guida Definitiva alla Gestione degli Errori in JavaScript<\/a><\/li>\n<li><a href=\"https:\/\/kinsta.com\/it\/blog\/librerie-javascript\/\">I 40 Migliori Framework e Librerie JavaScript per il 2026<\/a><\/li>\n<\/ul>\n<h2>Riepilogo<\/h2>\n<p>In questo terzo articolo della nostra serie sullo sviluppo dei blocchi di Gutenberg, abbiamo trattato nuovi argomenti avanzati che dovrebbero rendere pi\u00f9 completo il quadro delineato negli articoli precedenti sullo sviluppo dei blocchi <a href=\"https:\/\/kinsta.com\/it\/blog\/blocchi-gutenberg\/\">statici<\/a> e <a href=\"https:\/\/kinsta.com\/it\/blog\/blocchi-dinamici\/\">dinamici<\/a>.<\/p>\n<p>Ora dovreste essere in grado di sfruttare le potenzialit\u00e0 dei campi personalizzati in Gutenberg e creare siti web WordPress pi\u00f9 avanzati e funzionali.<\/p>\n<p>Ma c&#8217;\u00e8 di pi\u00f9. Grazie alle competenze acquisite con i nostri articoli sullo sviluppo dei blocchi, dovreste anche avere una buona idea di come sviluppare componenti React al di fuori di WordPress. Dopo tutto, Gutenberg \u00e8 una SPA basata su React.<\/p>\n<p>E ora tocca a voi! Avete gi\u00e0 creato blocchi Gutenberg che usano custom meta field? Condividete con noi le vostre creazioni nei commenti qui sotto.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I custom field permettono di assegnare informazioni aggiuntive ai contenuti del sito. Queste informazioni sono di solito note come metadati. I metadati sono informazioni sulle informazioni. &#8230;<\/p>\n","protected":false},"author":36,"featured_media":64171,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[25872,25873],"class_list":["post-64170","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-suggerimenti-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>Come Aggiungere Meta Box e Custom Field ai Post in Gutenberg<\/title>\n<meta name=\"description\" content=\"Gutenberg cambia il modo in cui usare i meta box e i custom field in WordPress. Questo articolo spiega come gestire i metadati nell&#039;editor di blocchi da vero professionista.\" \/>\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\/aggiungere-meta-box-ai-post-di-wordpress\/\" \/>\n<meta property=\"og:locale\" content=\"it_IT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Come Aggiungere Meta Box e Custom Field ai Post in Gutenberg\" \/>\n<meta property=\"og:description\" content=\"Gutenberg cambia il modo in cui usare i meta box e i custom field in WordPress. Questo articolo spiega come gestire i metadati nell&#039;editor di blocchi da vero professionista.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/it\/blog\/aggiungere-meta-box-ai-post-di-wordpress\/\" \/>\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=\"2023-01-25T11:11:14+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-03-07T10:35:32+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/01\/how-to-add-custom-fields-and-meta-boxes-to-posts-in-gutenberg-01.jpeg\" \/>\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\/jpeg\" \/>\n<meta name=\"author\" content=\"Carlo Daniele\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Gutenberg cambia il modo in cui usare i meta box e i custom field in WordPress. Questo articolo spiega come gestire i metadati nell&#039;editor di blocchi da vero professionista.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/01\/how-to-add-custom-fields-and-meta-boxes-to-posts-in-gutenberg-01.jpeg\" \/>\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=\"25 minuti\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/aggiungere-meta-box-ai-post-di-wordpress\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/aggiungere-meta-box-ai-post-di-wordpress\/\"},\"author\":{\"name\":\"Carlo Daniele\",\"@id\":\"https:\/\/kinsta.com\/it\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63\"},\"headline\":\"Come Aggiungere Meta Box e Custom Field ai Post in Gutenberg\",\"datePublished\":\"2023-01-25T11:11:14+00:00\",\"dateModified\":\"2023-03-07T10:35:32+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/aggiungere-meta-box-ai-post-di-wordpress\/\"},\"wordCount\":4133,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/it\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/aggiungere-meta-box-ai-post-di-wordpress\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/01\/how-to-add-custom-fields-and-meta-boxes-to-posts-in-gutenberg-01.jpeg\",\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/it\/blog\/aggiungere-meta-box-ai-post-di-wordpress\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/aggiungere-meta-box-ai-post-di-wordpress\/\",\"url\":\"https:\/\/kinsta.com\/it\/blog\/aggiungere-meta-box-ai-post-di-wordpress\/\",\"name\":\"Come Aggiungere Meta Box e Custom Field ai Post in Gutenberg\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/it\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/aggiungere-meta-box-ai-post-di-wordpress\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/aggiungere-meta-box-ai-post-di-wordpress\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/01\/how-to-add-custom-fields-and-meta-boxes-to-posts-in-gutenberg-01.jpeg\",\"datePublished\":\"2023-01-25T11:11:14+00:00\",\"dateModified\":\"2023-03-07T10:35:32+00:00\",\"description\":\"Gutenberg cambia il modo in cui usare i meta box e i custom field in WordPress. Questo articolo spiega come gestire i metadati nell'editor di blocchi da vero professionista.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/aggiungere-meta-box-ai-post-di-wordpress\/#breadcrumb\"},\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/it\/blog\/aggiungere-meta-box-ai-post-di-wordpress\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/aggiungere-meta-box-ai-post-di-wordpress\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/01\/how-to-add-custom-fields-and-meta-boxes-to-posts-in-gutenberg-01.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/01\/how-to-add-custom-fields-and-meta-boxes-to-posts-in-gutenberg-01.jpeg\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/aggiungere-meta-box-ai-post-di-wordpress\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/it\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Sviluppo di WordPress\",\"item\":\"https:\/\/kinsta.com\/it\/argomenti\/sviluppo-wordpress\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Come Aggiungere Meta Box e Custom Field ai Post in Gutenberg\"}]},{\"@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\/962dde02ea6f5df089b5d8d0853bbc63\",\"name\":\"Carlo Daniele\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/kinsta.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:\/\/kinsta.com\/it\/blog\/author\/carlodaniele\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Come Aggiungere Meta Box e Custom Field ai Post in Gutenberg","description":"Gutenberg cambia il modo in cui usare i meta box e i custom field in WordPress. Questo articolo spiega come gestire i metadati nell'editor di blocchi da vero professionista.","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\/aggiungere-meta-box-ai-post-di-wordpress\/","og_locale":"it_IT","og_type":"article","og_title":"Come Aggiungere Meta Box e Custom Field ai Post in Gutenberg","og_description":"Gutenberg cambia il modo in cui usare i meta box e i custom field in WordPress. Questo articolo spiega come gestire i metadati nell'editor di blocchi da vero professionista.","og_url":"https:\/\/kinsta.com\/it\/blog\/aggiungere-meta-box-ai-post-di-wordpress\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstaitalia\/","article_published_time":"2023-01-25T11:11:14+00:00","article_modified_time":"2023-03-07T10:35:32+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/01\/how-to-add-custom-fields-and-meta-boxes-to-posts-in-gutenberg-01.jpeg","type":"image\/jpeg"}],"author":"Carlo Daniele","twitter_card":"summary_large_image","twitter_description":"Gutenberg cambia il modo in cui usare i meta box e i custom field in WordPress. Questo articolo spiega come gestire i metadati nell'editor di blocchi da vero professionista.","twitter_image":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/01\/how-to-add-custom-fields-and-meta-boxes-to-posts-in-gutenberg-01.jpeg","twitter_creator":"@carlodaniele","twitter_site":"@Kinsta_IT","twitter_misc":{"Scritto da":"Carlo Daniele","Tempo di lettura stimato":"25 minuti"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/it\/blog\/aggiungere-meta-box-ai-post-di-wordpress\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/it\/blog\/aggiungere-meta-box-ai-post-di-wordpress\/"},"author":{"name":"Carlo Daniele","@id":"https:\/\/kinsta.com\/it\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63"},"headline":"Come Aggiungere Meta Box e Custom Field ai Post in Gutenberg","datePublished":"2023-01-25T11:11:14+00:00","dateModified":"2023-03-07T10:35:32+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/it\/blog\/aggiungere-meta-box-ai-post-di-wordpress\/"},"wordCount":4133,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/it\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/it\/blog\/aggiungere-meta-box-ai-post-di-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/01\/how-to-add-custom-fields-and-meta-boxes-to-posts-in-gutenberg-01.jpeg","inLanguage":"it-IT","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/it\/blog\/aggiungere-meta-box-ai-post-di-wordpress\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/it\/blog\/aggiungere-meta-box-ai-post-di-wordpress\/","url":"https:\/\/kinsta.com\/it\/blog\/aggiungere-meta-box-ai-post-di-wordpress\/","name":"Come Aggiungere Meta Box e Custom Field ai Post in Gutenberg","isPartOf":{"@id":"https:\/\/kinsta.com\/it\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/it\/blog\/aggiungere-meta-box-ai-post-di-wordpress\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/it\/blog\/aggiungere-meta-box-ai-post-di-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/01\/how-to-add-custom-fields-and-meta-boxes-to-posts-in-gutenberg-01.jpeg","datePublished":"2023-01-25T11:11:14+00:00","dateModified":"2023-03-07T10:35:32+00:00","description":"Gutenberg cambia il modo in cui usare i meta box e i custom field in WordPress. Questo articolo spiega come gestire i metadati nell'editor di blocchi da vero professionista.","breadcrumb":{"@id":"https:\/\/kinsta.com\/it\/blog\/aggiungere-meta-box-ai-post-di-wordpress\/#breadcrumb"},"inLanguage":"it-IT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/it\/blog\/aggiungere-meta-box-ai-post-di-wordpress\/"]}]},{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/kinsta.com\/it\/blog\/aggiungere-meta-box-ai-post-di-wordpress\/#primaryimage","url":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/01\/how-to-add-custom-fields-and-meta-boxes-to-posts-in-gutenberg-01.jpeg","contentUrl":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/01\/how-to-add-custom-fields-and-meta-boxes-to-posts-in-gutenberg-01.jpeg","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/it\/blog\/aggiungere-meta-box-ai-post-di-wordpress\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/it\/"},{"@type":"ListItem","position":2,"name":"Sviluppo di WordPress","item":"https:\/\/kinsta.com\/it\/argomenti\/sviluppo-wordpress\/"},{"@type":"ListItem","position":3,"name":"Come Aggiungere Meta Box e Custom Field ai Post in Gutenberg"}]},{"@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\/962dde02ea6f5df089b5d8d0853bbc63","name":"Carlo Daniele","image":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/kinsta.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:\/\/kinsta.com\/it\/blog\/author\/carlodaniele\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/posts\/64170","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\/36"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/comments?post=64170"}],"version-history":[{"count":16,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/posts\/64170\/revisions"}],"predecessor-version":[{"id":66426,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/posts\/64170\/revisions\/66426"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/64170\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/64170\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/64170\/translations\/pt"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/64170\/translations\/jp"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/64170\/translations\/de"},{"embeddable":true,"hreflang":"da","title":"Danish","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/64170\/translations\/dk"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/64170\/translations\/nl"},{"embeddable":true,"hreflang":"sv","title":"Swedish","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/64170\/translations\/se"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/64170\/translations\/es"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/64170\/translations\/fr"},{"href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/64170\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/media\/64171"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/media?parent=64170"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/tags?post=64170"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/topic?post=64170"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}