{"id":58805,"date":"2022-08-08T07:59:20","date_gmt":"2022-08-08T06:59:20","guid":{"rendered":"https:\/\/kinsta.com\/it\/?p=58805&#038;preview=true&#038;preview_id=58805"},"modified":"2022-12-07T13:03:53","modified_gmt":"2022-12-07T12:03:53","slug":"blocchi-dinamici","status":"publish","type":"post","link":"https:\/\/kinsta.com\/it\/blog\/blocchi-dinamici\/","title":{"rendered":"Come Creare Blocchi Dinamici per Gutenberg"},"content":{"rendered":"<p>Siete ancora perplessi su <a href=\"https:\/\/kinsta.com\/it\/blog\/gutenberg-editor-wordpress\/\">Gutenberg<\/a>? Oppure siete tra quelli che credono fermamente nelle potenzialit\u00e0 dell&#8217;editor dei blocchi e vogliono scoprire fino a che punto sia possibile spingere la propria creativit\u00e0?<\/p>\n<p>Qualunque sia la categoria di utenti in cui rientrate, Gutenberg \u00e8 qui per restare e questo articolo vi offrir\u00e0 una panoramica approfondita di quello che succede dietro le quinte dell&#8217;editor dei blocchi di WordPress. Ma non \u00e8 tutto!<\/p>\n<p>Dopo il <a href=\"https:\/\/kinsta.com\/it\/blog\/blocchi-gutenberg\/\">nostro precedente tutorial<\/a> in cui abbiamo offerto un&#8217;introduzione generale allo sviluppo dei blocchi di Gutenberg, questo articolo va oltre le basi, introducendo tipi di blocchi pi\u00f9 avanzati. Questi blocchi sono chiamati blocchi dinamici.<\/p>\n<p>Oggi scoprirete cosa sono i blocchi dinamici, come funzionano e tutto ci\u00f2 che c&#8217;\u00e8 da sapere per creare blocchi dinamici da zero.<\/p>\n<p>Allora, cosa sono i blocchi dinamici di Gutenberg e quali sono le differenze principali tra blocchi <a href=\"https:\/\/kinsta.com\/it\/blog\/blocchi-gutenberg\/\">statici<\/a> e dinamici?<\/p>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc>\n<h2>Cosa Sono i Blocchi Dinamici? Un Esempio<\/h2>\n<p>Mentre con i blocchi statici il contenuto viene aggiunto manualmente dall&#8217;utente durante la modifica di un post o di una pagina, con i blocchi dinamici il contenuto viene caricato ed elaborato al volo al caricamento della pagina. Con i blocchi dinamici, il contenuto del blocco viene prelevato dal database e visualizzato cos\u00ec com&#8217;\u00e8 o come risultato di un qualsiasi tipo di manipolazione dei dati.<\/p>\n<p>Spieghiamolo con un esempio. Supponiamo di voler creare un gruppo di blocchi annidati che mostrino i dettagli dell&#8217;autore del post e una selezione degli ultimi post dello stesso autore.<\/p>\n<figure id=\"attachment_119966\" aria-describedby=\"caption-attachment-119966\" style=\"width: 1470px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-119966\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/from-the-author.jpg\" alt=\"Un blocco Gruppo che include l'autore del post e gli ultimi post\" width=\"1470\" height=\"1064\"><figcaption id=\"caption-attachment-119966\" class=\"wp-caption-text\">Un blocco Gruppo che include l&#8217;autore del post e gli ultimi post<\/figcaption><\/figure>\n<p>Come utenti di Gutenberg, potete utilizzare i seguenti blocchi:<\/p>\n<ul>\n<li>Il blocco core <strong>Intestazione<\/strong><\/li>\n<li>Il blocco core <strong>Autore del post<\/strong><\/li>\n<li>Il blocco core <strong>Ultimi Articoli<\/strong><\/li>\n<\/ul>\n<p>Potreste anche creare un gruppo che includa questi blocchi e aggiungere il gruppo ai blocchi riutilizzabili per un utilizzo futuro.<\/p>\n<figure id=\"attachment_119967\" aria-describedby=\"caption-attachment-119967\" style=\"width: 1470px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-119967\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/add-to-reusable-blocks.jpg\" alt=\"Aggiungere un blocco Gruppo a blocchi riutilizzabili\" width=\"1470\" height=\"1064\"><figcaption id=\"caption-attachment-119967\" class=\"wp-caption-text\">Aggiungere un blocco Gruppo a blocchi riutilizzabili<\/figcaption><\/figure>\n<p>\u00c8 abbastanza semplice, non \u00e8 vero? \u00c8 possibile creare un blocco dinamico e aggiungerlo ai vostri post e alle vostre pagine in un attimo.<\/p>\n<p>A partire da <a href=\"https:\/\/kinsta.com\/it\/blog\/wordpress-5-9\/\">WordPress 5.9<\/a>, <a href=\"https:\/\/kinsta.com\/it\/blog\/gutenberg-editor-wordpress\/\">l&#8217;editor dei blocchi<\/a> offre pi\u00f9 di 90 blocchi diversi: \u00e8 probabile che troverete il blocco che fa per voi. E se ne volete altri, fate una veloce ricerca nella directory dei plugin di WordPress e troverete molti plugin gratuiti che forniscono <a href=\"https:\/\/wordpress.org\/plugins\/search\/gutenberg\/\">altri blocchi<\/a>.<\/p>\n<p>Ma cosa succede se siete uno sviluppatore di WordPress o se state pianificando una carriera come <a href=\"https:\/\/kinsta.com\/it\/blog\/reddito-sviluppatore-wordpress\/\">sviluppatori WordPress<\/a>? Forse avete esigenze molto specifiche e non riuscite a trovare il blocco che state cercando, oppure volete semplicemente acquisire nuove competenze professionali. In queste situazioni, potreste voler imparare a creare i vostri blocchi dinamici.<\/p>\n\n<h2>I Blocchi Dinamici di Gutenberg dal Punto di Vista degli Sviluppatori<\/h2>\n<p>I <a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/block-tutorial\/creating-dynamic-blocks\/\">blocchi dinamici<\/a> hanno due casi d&#8217;uso principali.<\/p>\n<p>Il primo caso d&#8217;uso \u00e8 quando dovete aggiornare il contenuto di un blocco quando la pagina che lo contiene non \u00e8 stata aggiornata. Ad esempio, questo accade quando il blocco include un elenco degli ultimi post o commenti e, in generale, quando il contenuto del blocco viene generato dinamicamente utilizzando i dati recuperati dal database.<\/p>\n<figure id=\"attachment_119976\" aria-describedby=\"caption-attachment-119976\" style=\"width: 1996px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-119976\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/query-loop-block.jpg\" alt=\"Aggiunta di un blocco Query Loop\" width=\"1996\" height=\"1176\"><figcaption id=\"caption-attachment-119976\" class=\"wp-caption-text\">Aggiunta di un blocco Query Loop<\/figcaption><\/figure>\n<p>Il secondo caso d&#8217;uso \u00e8 quando un aggiornamento del codice del blocco deve essere immediatamente visualizzato sul front-end. Utilizzando un blocco dinamico invece di un blocco statico, le modifiche vengono applicate immediatamente a tutte le occorrenze del blocco.<\/p>\n<p>D&#8217;altro canto, se modificate l&#8217;HTML prodotto da un blocco statico, l&#8217;utente vedr\u00e0 una <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/block-api\/block-edit-save\/#validation\">finestra di dialogo di invalidazione<\/a> fino a quando ogni singola istanza della versione precedente del blocco non verr\u00e0 rimossa e sostituita con la nuova versione, oppure fino a quando avrete contrassegnato la vecchia versione come deprecata (vedi anche <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/block-api\/block-deprecation\/\">Deprecation<\/a> e <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/issues\/7604\">Block Validation, Deprecation and Migration Experience<\/a>).<\/p>\n<figure id=\"attachment_120364\" aria-describedby=\"caption-attachment-120364\" style=\"width: 1350px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-120364\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/this-block-contains-unexpected-or-invalid-content.jpg\" alt=\"Contenuto inatteso o non valido.\" width=\"1350\" height=\"378\"><figcaption id=\"caption-attachment-120364\" class=\"wp-caption-text\">Contenuto inatteso o non valido.<\/figcaption><\/figure>\n<p>Detto questo, ci sono alcuni concetti che bisogna comprendere prima di iniziare a costruire blocchi dinamici.<\/p>\n<div><\/div><kinsta-auto-toc list-style=\"decimal\" selector=\"h3\" count-number=\"3\" sub-toc=\"true\"><\/kinsta-auto-toc>\n<h3>Stato dell&#8217;Applicazione e Data Store<\/h3>\n<p><a href=\"https:\/\/kinsta.com\/it\/blog\/blocchi-gutenberg\/#what-is-a-gutenberg-block\">Gutenberg \u00e8 un&#8217;applicazione SPA React<\/a> e tutto in Gutenberg \u00e8 un componente React. Il titolo del post, le intestazioni, i paragrafi, le immagini e qualsiasi blocco di contenuto HTML presente nell&#8217;editor sono componenti React, cos\u00ec come lo sono i controlli della barra laterale e della barra degli strumenti dei blocchi.<\/p>\n<p>Nel nostro precedente articolo, per memorizzare i dati abbiamo utilizzato solo le propriet\u00e0. In questo articolo faremo un passo avanti introducendo il concetto di <strong>stato<\/strong>.<\/p>\n<p>In parole semplici, l&#8217;oggetto <code>state<\/code> \u00e8 <a href=\"https:\/\/www.w3schools.com\/react\/react_state.asp\">un semplice oggetto JavaScript<\/a> utilizzato per contenere informazioni su un componente. Lo <code>state<\/code> del componente pu\u00f2 cambiare nel tempo e ogni volta che cambia, il componente viene reso nuovamente.<\/p>\n<p>Analogamente all&#8217;oggetto <code>state<\/code>, le propriet\u00e0 sono semplici oggetti JavaScript utilizzati per contenere informazioni sul componente. Ma c&#8217;\u00e8 <a href=\"https:\/\/reactjs.org\/docs\/faq-state.html#what-is-the-difference-between-state-and-props\">una differenza fondamentale<\/a> tra propriet\u00e0 e <code>state<\/code>:<\/p>\n<blockquote><p>Le <code>props<\/code> vengono passate al componente (come i parametri di una funzione) mentre lo <code>state<\/code> viene gestito all&#8217;interno del componente (come le variabili dichiarate all&#8217;interno di una funzione).<\/p><\/blockquote>\n<p>Potete pensare allo stato come a un&#8217;istantanea di dati, presi in un determinato momento, che un&#8217;applicazione memorizza per controllare il comportamento di un componente. Ad esempio, se la barra laterale delle impostazioni dell&#8217;editor di blocchi \u00e8 aperta, un&#8217;informazione sar\u00e0 memorizzata da qualche parte nell&#8217;oggetto <code>state<\/code>.<\/p>\n<p>Quando le informazioni sono condivise all&#8217;interno di un singolo componente, si parla di <strong>local state<\/strong>. Quando le informazioni sono condivise tra i componenti di un&#8217;applicazione, si parla di <strong>Application State<\/strong>.<\/p>\n<p>Lo Stato dell&#8217;Applicazione \u00e8 strettamente legato al concetto di store. Secondo la <a href=\"https:\/\/redux.js.org\/api\/store\">documentazione di Redux<\/a>:<\/p>\n<blockquote><p>Uno store contiene l&#8217;intero <a href=\"https:\/\/redux.js.org\/understanding\/thinking-in-redux\/glossary#state\">albero di stato<\/a> dell&#8217;applicazione. L&#8217;unico modo per cambiare lo stato al suo interno \u00e8 inviare <a href=\"https:\/\/redux.js.org\/understanding\/thinking-in-redux\/glossary#action\">un&#8217;azione<\/a> su di esso.<\/p><\/blockquote>\n<p>Quindi, Redux memorizza lo stato di un&#8217;applicazione in un unico albero di oggetti immutabile (ovvero uno store). L&#8217;albero degli oggetti pu\u00f2 essere modificato solo creando un nuovo oggetto utilizzando <a href=\"https:\/\/redux.js.org\/tutorials\/fundamentals\/part-3-state-actions-reducers#designing-actions\">azioni<\/a> e <a href=\"https:\/\/redux.js.org\/tutorials\/fundamentals\/part-3-state-actions-reducers#writing-reducers\">riduttori<\/a>.<\/p>\n<p>In WordPress, gli store sono gestiti dal <strong>modulo data<\/strong> <strong>di<\/strong> <strong>WordPress<\/strong>.<\/p>\n<h3>Modularit\u00e0, Pacchetti e Archivi di Dati in Gutenberg<\/h3>\n<p>Il repository di Gutenberg \u00e8 costruito da zero su diversi <strong>moduli riutilizzabili e indipendenti<\/strong> che, combinati insieme, creano l&#8217;interfaccia di editing. Questi moduli sono chiamati anche <strong>pacchetti<\/strong>.<\/p>\n<p>La documentazione ufficiale elenca due diversi <a href=\"https:\/\/developer.wordpress.org\/block-editor\/explanations\/architecture\/modularity\/#types-of-packages\">tipi di pacchetti<\/a>:<\/p>\n<ul>\n<li>I <strong>pacchetti di produzione<\/strong> costituiscono il codice di produzione che viene eseguito nel browser. In WordPress esistono due tipi di pacchetti di produzione:\n<ul>\n<li>I <strong>pacchetti con fogli di stile<\/strong> forniscono fogli di stile per funzionare correttamente.<\/li>\n<li>I <strong>pacchetti con archivi di dati<\/strong> definiscono gli archivi di dati per la gestione dello stato. I <a href=\"https:\/\/developer.wordpress.org\/block-editor\/explanations\/architecture\/modularity\/#packages-with-data-stores\">pacchetti con archivi di dati<\/a> possono essere utilizzati da plugin e temi di terze parti per recuperare e manipolare i dati.<\/li>\n<\/ul>\n<\/li>\n<li>I <strong>pacchetti di sviluppo<\/strong> sono utilizzati in modalit\u00e0 di sviluppo. Questi pacchetti includono strumenti per il linting, il testing, il building, ecc.<\/li>\n<\/ul>\n<p>In questo caso ci interessano soprattutto i <a href=\"https:\/\/developer.wordpress.org\/block-editor\/explanations\/architecture\/modularity\/#packages-with-data-stores\">pacchetti con i data store<\/a>, utilizzati per recuperare e manipolare i dati.<\/p>\n<h3>Il Data Store di WordPress<\/h3>\n<p>Il Data Store di WordPress \u00e8 costruito su <a href=\"https:\/\/redux.js.org\/\">Redux<\/a> e condivide i <a href=\"https:\/\/redux.js.org\/understanding\/thinking-in-redux\/three-principles\">tre principi fondamentali di Redux<\/a>, anche se con <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/e9994b49786570391b5690b85bd1f1fd78de845e\/packages\/data\/README.md#comparison-with-redux\">alcune differenze fondamentali<\/a>.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p><a href=\"https:\/\/redux.js.org\/introduction\/getting-started\">Redux<\/a> \u00e8 un gestore di stati per applicazioni JavaScript. Il funzionamento di Redux \u00e8 riassunto in <a href=\"https:\/\/redux.js.org\/understanding\/thinking-in-redux\/three-principles\">tre principi fondamentali<\/a>:<\/p>\n<ul>\n<li><strong>Un&#8217;unica fonte di verit\u00e0<\/strong>: lo <a href=\"https:\/\/redux.js.org\/understanding\/thinking-in-redux\/glossary#state\">stato globale<\/a> dell&#8217;applicazione \u00e8 memorizzato in un albero di oggetti all&#8217;interno di un unico archivio.<\/li>\n<li><strong>Lo<\/strong> <strong>stato \u00e8 di sola lettura<\/strong>: l&#8217;unico modo per cambiare lo stato \u00e8 emettere un&#8217;azione, un oggetto che descriva cosa \u00e8 successo.<\/li>\n<li><strong>Le<\/strong> <strong>modifiche vengono effettuate con funzioni pure<\/strong>: per specificare il modo in cui l&#8217;albero di stato viene trasformato dalle azioni, si scrivono dei riduttori puri.<\/li>\n<\/ul>\n<p><\/p>\n<\/aside>\n\n<p>La documentazione ufficiale fornisce la <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/e9994b49786570391b5690b85bd1f1fd78de845e\/packages\/data\/README.md\">seguente definizione<\/a>:<\/p>\n<blockquote><p>Il modulo Data di WordPress funge da hub per la gestione dello stato dell&#8217;applicazione sia per i plugin che per lo stesso WordPress, fornendo strumenti per la gestione dei dati all&#8217;interno e tra moduli distinti. \u00c8 stato progettato come modello modulare per l&#8217;organizzazione e la condivisione dei dati: abbastanza semplice da soddisfare le esigenze di un piccolo plugin, ma allo stesso tempo scalabile per soddisfare i requisiti di una complessa applicazione a pagina singola.<\/p><\/blockquote>\n<p>Di default, Gutenberg registra <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/data\/\">diversi data store<\/a> all&#8217;interno dello stato dell&#8217;applicazione. Ognuno di questi archivi ha un nome e uno scopo specifici:<\/p>\n<ul>\n<li><code>core<\/code>: <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/tree\/trunk\/packages\/core-data\">WordPress Core Data<\/a><\/li>\n<li><code>core\/annotations<\/code>: <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/tree\/trunk\/packages\/annotations\">Annotazioni<\/a><\/li>\n<li><code>core\/blocks<\/code>: <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/tree\/trunk\/packages\/blocks\">Dati dei Tipi di Blocchi<\/a><\/li>\n<li><code>core\/block-editor<\/code>: <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/tree\/trunk\/packages\/block-editor\">Dati dell&#8217;Editor dei Blocchi<\/a><\/li>\n<li><code>core\/editor<\/code>: <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/tree\/trunk\/packages\/editor\">Dati dell&#8217;editor dei Post<\/a><\/li>\n<li><code>core\/edit-post<\/code>: <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/tree\/trunk\/packages\/edit-post\">Dati della UI dell&#8217;Editor<\/a><\/li>\n<li><code>core\/notices<\/code>: <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/tree\/trunk\/packages\/notices\">Dati degli Avvisi<\/a><\/li>\n<li><code>core\/nux<\/code>: <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/tree\/trunk\/packages\/nux\">Dati della NUX (New User Experience)<\/a><\/li>\n<li><code>core\/viewport<\/code>: <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/tree\/trunk\/packages\/viewport\">Dati del Viewport<\/a><\/li>\n<\/ul>\n<p>Attraverso questi archivi, potrete accedere a una serie di dati:<\/p>\n<ol>\n<li><strong>Dati relativi al post corrente<\/strong>, come il titolo del post, l&#8217;estratto, le categorie e i tag, i blocchi, ecc.<\/li>\n<li><strong>Dati relativi all&#8217;interfaccia utente<\/strong>, ad esempio se un interruttore \u00e8 attivato o disattivato.<\/li>\n<li><strong>Dati relativi all&#8217;intera installazione di WordPress<\/strong>, come le tassonomie registrate, i tipi di post, il titolo del blog, gli autori, ecc.<\/li>\n<\/ol>\n<p>Questi store risiedono nell&#8217;oggetto globale <code>wp<\/code>. Per accedere allo stato di un archivio, si utilizzer\u00e0 la funzione <code>select<\/code>.<\/p>\n<p>Per vedere come funziona, create un nuovo post o una nuova pagina e lanciate <a href=\"https:\/\/kinsta.com\/it\/blog\/ispeziona-elemento\/\">l&#8217;inspector del browser<\/a>. Trovate la console e digitate la seguente riga di codice:<\/p>\n<pre><code class=\"language-js\">wp.data.select(\"core\")<\/code><\/pre>\n<p>Il risultato sar\u00e0 un oggetto che include un elenco di funzioni che potete utilizzare per ottenere i dati dal Data Store <code>core<\/code>. Queste funzioni sono chiamate <strong>selettori<\/strong> e agiscono come interfacce per accedere ai valori dello stato.<\/p>\n<figure id=\"attachment_120245\" aria-describedby=\"caption-attachment-120245\" style=\"width: 1306px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-120245 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/wp-data-select-core.jpg\" alt=\"L'oggetto Core del data store di WordPress\" width=\"1306\" height=\"1332\"><figcaption id=\"caption-attachment-120245\" class=\"wp-caption-text\">L&#8217;oggetto Core del data store di WordPress<\/figcaption><\/figure>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>L&#8217;oggetto <code>selectors<\/code> include una serie di funzioni per accedere e derivare i valori dello stato. Un selettore \u00e8 una funzione che accetta lo stato e argomenti opzionali e restituisce un valore dallo stato. <em>La<\/em> <em>chiamata ai selettori \u00e8 il meccanismo principale per recuperare i dati dallo stato<\/em> e rappresenta un&#8217;utile astrazione rispetto ai dati grezzi, che in genere sono pi\u00f9 suscettibili di modifiche e meno facilmente utilizzabili come <a href=\"https:\/\/redux.js.org\/usage\/structuring-reducers\/normalizing-state-shape#designing-a-normalized-state\">oggetto normalizzato<\/a>. (Fonte: <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/9d4b83cbbafcd6c6cbd20c86b572f458fc65ff16\/packages\/data\/README.md#selectors\">Github<\/a>)<\/p>\n<\/aside>\n\n<p>Il data store di WordPress include informazioni su WordPress in generale e i selettori sono il modo per ottenere queste informazioni. Ad esempio, <code>getCurrentUser()<\/code> restituisce i dati dell&#8217;utente corrente:<\/p>\n<pre><code class=\"language-js\">wp.data.select(\"core\").getCurrentUser()<\/code><\/pre>\n<figure id=\"attachment_120246\" aria-describedby=\"caption-attachment-120246\" style=\"width: 1306px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-120246 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/wp-data-select-core-getcurrentuser.jpg\" alt=\"Ispezione della risposta di getCurrentUser\" width=\"1306\" height=\"1058\"><figcaption id=\"caption-attachment-120246\" class=\"wp-caption-text\">Ispezione della risposta di getCurrentUser<\/figcaption><\/figure>\n<p>Un altro selettore utile per recuperare i dati dell&#8217;utente dall&#8217;archivio dati \u00e8 <code>getUsers()<\/code><a id=\"getusers\"><\/a> :<\/p>\n<pre><code class=\"language-js\">wp.data.select(\"core\").getUsers()<\/code><\/pre>\n<p>L&#8217;immagine seguente mostra l&#8217;oggetto della risposta:<\/p>\n<figure id=\"attachment_120247\" aria-describedby=\"caption-attachment-120247\" style=\"width: 1306px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-120247 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/wp-data-select-core-getusers.jpg\" alt=\"Ispezione della risposta di getUsers\" width=\"1306\" height=\"990\"><figcaption id=\"caption-attachment-120247\" class=\"wp-caption-text\">Ispezione della risposta di getUsers<\/figcaption><\/figure>\n<p>Per ottenere i dati di un singolo utente, basta digitare la seguente riga:<\/p>\n<pre><code class=\"language-js\">wp.data.select(\"core\").getUsers()[0]<\/code><\/pre>\n<p>Utilizzando lo stesso selettore, \u00e8 anche possibile recuperare gli utenti del sito con il ruolo <code>author<\/code>:<\/p>\n<pre><code class=\"language-js\">wp.data.select( 'core' ).getUsers({ who: 'authors' })<\/code><\/pre>\n<p>Potete anche recuperare le tassonomie registrate:<\/p>\n<pre><code class=\"language-js\">wp.data.select(\"core\").getTaxonomies()<\/code><\/pre>\n<figure id=\"attachment_120248\" aria-describedby=\"caption-attachment-120248\" style=\"width: 1306px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-120248 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/wp-data-select-core-gettaxonomies.jpg\" alt=\"Ispezione della risposta di getTaxonomies.\" width=\"1306\" height=\"790\"><figcaption id=\"caption-attachment-120248\" class=\"wp-caption-text\">Ispezione della risposta di getTaxonomies.<\/figcaption><\/figure>\n<p>Un elenco dei tipi di post registrati:<\/p>\n<pre><code class=\"language-js\">wp.data.select(\"core\").getPostTypes()<\/code><\/pre>\n<p>Oppure un elenco di plugin:<\/p>\n<pre><code class=\"language-js\">wp.data.select(\"core\").getPlugins()<\/code><\/pre>\n<p>Ora proviamo ad accedere a un data store diverso. Per farlo, utilizzerete ancora la funzione <code>select<\/code>, ma fornendo un diverso namespace. Proviamo a fare come segue:<\/p>\n<pre><code class=\"language-js\">wp.data.select(\"core\/edit-post\")<\/code><\/pre>\n<p>Ora otterrete il seguente oggetto di risposta.<\/p>\n<figure id=\"attachment_120249\" aria-describedby=\"caption-attachment-120249\" style=\"width: 1306px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-120249 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/wp-data-select-core-edit-post.jpg\" alt=\"Accedere ai dati dell'interfaccia utente dell'editor\" width=\"1306\" height=\"1310\"><figcaption id=\"caption-attachment-120249\" class=\"wp-caption-text\">Accedere ai dati dell&#8217;interfaccia utente dell&#8217;editor<\/figcaption><\/figure>\n<p>Se volete sapere se la barra laterale delle impostazioni \u00e8 aperta o meno, utilizzate il selettore <code>isEditorSidebarOpened<\/code>:<\/p>\n<pre><code class=\"language-js\">wp.data.select(\"core\/edit-post\").isEditorSidebarOpened()<\/code><\/pre>\n<p>Questa funzione restituisce <code>true<\/code> se la barra laterale \u00e8 aperta:<\/p>\n<figure id=\"attachment_120957\" aria-describedby=\"caption-attachment-120957\" style=\"width: 1718px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-120957 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/wp-data-select-core-edit-post-iseditorsidebaropened-2.jpg\" alt=\"La barra laterale \u00e8 aperta.\" width=\"1718\" height=\"1052\"><figcaption id=\"caption-attachment-120957\" class=\"wp-caption-text\">La barra laterale \u00e8 aperta.<\/figcaption><\/figure>\n<h2>Come Accedere ai Dati dei Post<\/h2>\n<p>Ora dovreste avere le nozioni di base per accedere ai dati e possiamo analizzare pi\u00f9 da vicino un selettore specifico, la <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/data\/data-core\/#getentityrecords\">funzione <code>getEntityRecords<\/code><\/a>, che \u00e8 il selettore che d\u00e0 accesso ai dati del post.<\/p>\n<p>Nell&#8217;editor dei blocchi, fate clic con il tasto destro del mouse e selezionate <strong>Ispeziona<\/strong>. Nella scheda Console, copiate e incollate la seguente riga:<\/p>\n<pre><code class=\"language-js\">wp.data.select(\"core\").getEntityRecords('postType', 'post')<\/code><\/pre>\n<p>Questo invia una richiesta alla Rest API e restituisce un array di record corrispondenti agli ultimi post pubblicati sul blog.<\/p>\n<figure id=\"attachment_120303\" aria-describedby=\"caption-attachment-120303\" style=\"width: 1698px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-120303 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/wp-data-select-core-getentityrecords.jpg\" alt=\"getEntityRecords restituisce un elenco di post.\" width=\"1698\" height=\"330\"><figcaption id=\"caption-attachment-120303\" class=\"wp-caption-text\">getEntityRecords restituisce un elenco di post.<\/figcaption><\/figure>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>La prima volta che inviate una richiesta alla Rest API, la risposta sar\u00e0 <code>null<\/code> fino al completamento della richiesta. Quindi, se ottenete <code>null<\/code>, non preoccupatevi e riprovate.<\/p>\n<\/aside>\n\n<p><code>getEntityRecords<\/code> accetta <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/data\/data-core\/#getentityrecords\">tre parametri<\/a>:<\/p>\n<ul>\n<li><code>kind<\/code> <em>stringa<\/em>: Tipo di entit\u00e0 (es. <code>postType<\/code>).<\/li>\n<li><code>name<\/code> <em>stringa<\/em>: Nome dell&#8217;entit\u00e0 (es. <code>post<\/code>).<\/li>\n<li><code>query<\/code> <em>oggetto<\/em>: Query di termini opzionale (es. <code>{author: 0}<\/code>).<\/li>\n<\/ul>\n<p>Potete creare richieste pi\u00f9 specifiche utilizzando un <a href=\"https:\/\/developer.wordpress.org\/rest-api\/reference\/posts\/#arguments\">oggetto di argomenti<\/a>.<\/p>\n<p>Ad esempio, potete decidere che la risposta debba contenere solo i post di una determinata categoria:<\/p>\n<pre><code class=\"language-js\">wp.data.select(\"core\").getEntityRecords('postType', 'post', {categories: 3})<\/code><\/pre>\n<p>Potete anche richiedere solo articoli di un determinato autore:<\/p>\n<pre><code class=\"language-js\">wp.data.select(\"core\").getEntityRecords('postType', 'post', {author: 2})<\/code><\/pre>\n<p>Se fate clic su uno dei record restituiti da <code>getEntityRecords<\/code>, otterrete un elenco delle propriet\u00e0 del record selezionato:<\/p>\n<figure id=\"attachment_120305\" aria-describedby=\"caption-attachment-120305\" style=\"width: 1846px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-120305 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/getentityrecords.jpg\" alt=\"Un esempio di richiesta API con getEntityRecords.\" width=\"1846\" height=\"746\"><figcaption id=\"caption-attachment-120305\" class=\"wp-caption-text\">Un esempio di richiesta API con getEntityRecords.<\/figcaption><\/figure>\n<p>Se volete che la risposta includa l&#8217;immagine in primo piano, dovrete aggiungere un ulteriore argomento alla richiesta precedente:<\/p>\n<pre><code class=\"language-js\">wp.data.select(\"core\").getEntityRecords('postType', 'post', {author: 2, _embed: true})<\/code><\/pre>\n<figure id=\"attachment_120307\" aria-describedby=\"caption-attachment-120307\" style=\"width: 1684px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-120307 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/getentityrecords-wp-featuredmedia.jpg\" alt=\"Dati dell'immagine in primo piano nella risposta di getEntityRecords.\" width=\"1684\" height=\"1152\"><figcaption id=\"caption-attachment-120307\" class=\"wp-caption-text\">Dati dell&#8217;immagine in primo piano nella risposta di getEntityRecords.<\/figcaption><\/figure>\n<p>Ora dovreste aver compreso bene come accedere al datastore di WordPress e recuperare i dati dei post. Per una visione pi\u00f9 approfondita del selettore <code>getEntityRecords<\/code>, si veda anche <a href=\"https:\/\/ryanwelcher.com\/2021\/08\/requesting-data-in-gutenberg-with-getentityrecords\/\">Requesting data in Gutenberg with getEntityRecords<\/a>.<\/p>\n<h2>Come Creare un Blocco Dinamico: Un Progetto di Esempio<\/h2>\n<p>Dopo la nostra lunga premessa teorica, possiamo passare alla pratica e creare un blocco dinamico utilizzando gli strumenti che abbiamo introdotto nel nostro precedente tutorial sullo sviluppo dei blocchi.<\/p>\n<p>Nel precedente articolo abbiamo parlato di:<\/p>\n<ol>\n<li><a href=\"https:\/\/kinsta.com\/it\/blog\/blocchi-gutenberg\/#setting-up-your-wordpress-development-environment\">Come Configurare un Ambiente di Sviluppo WordPress<\/a><\/li>\n<li><a href=\"https:\/\/kinsta.com\/it\/blog\/blocchi-gutenberg\/#a-walkthrough-of-the-starter-block-scaffolding\">Cos&#8217;\u00e8 un Block Scaffolding<\/a><\/li>\n<li><a href=\"https:\/\/kinsta.com\/it\/blog\/blocchi-gutenberg\/#the-project-building-your-first-gutenberg-block\">Come Costruire un Blocco Statico di Gutenberg<\/a><\/li>\n<\/ol>\n<p>Per questo motivo non tratteremo questi argomenti in modo approfondito nel presente articolo, ma fate riferimento alla nostra guida precedente per qualsiasi informazione aggiuntiva o semplicemente per un ripasso.<\/p>\n<h3>Configurare un Ambiente di Sviluppo JavaScript<\/h3>\n<p>Iniziamo con la configurazione di un ambiente di sviluppo JavaScript.<\/p>\n<h4>Installare o Aggiornare Node.js<\/h4>\n<p>Per prima cosa, <a href=\"https:\/\/nodejs.org\/en\/download\/\">installate o aggiornate<\/a> Node.js. Una volta terminato, lanciate il vostro strumento a riga di comando ed eseguite quanto segue:<\/p>\n<pre><code class=\"language-bash\">node -v<\/code><\/pre>\n<p>Dovreste vedere la vostra versione di Node.<\/p>\n<h4>Configurare l&#8217;Ambiente di Sviluppo<\/h4>\n<p>Successivamente, avrete bisogno di un ambiente di sviluppo per WordPress. Per i nostri esempi abbiamo utilizzato <a href=\"https:\/\/kinsta.com\/it\/devkinsta\/\">DevKinsta<\/a>, il nostro strumento di sviluppo WordPress gratuito che permette di lanciare un sito WordPress locale in pochissimo tempo.<\/p>\n<figure id=\"attachment_120268\" aria-describedby=\"caption-attachment-120268\" style=\"width: 2050px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-120268 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/devkinsta-create-custom-site.jpg\" alt=\"Creare un sito personalizzato in DevKinsta\" width=\"2050\" height=\"1258\"><figcaption id=\"caption-attachment-120268\" class=\"wp-caption-text\">Creare un sito personalizzato in DevKinsta<\/figcaption><\/figure>\n<p>Ma siete comunque liberi di scegliere qualsiasi <a href=\"https:\/\/kinsta.com\/it\/ebooks\/wordpress\/wordpress-sviluppo-locale\/\">ambiente di sviluppo locale di WordPress<\/a>, come MAMP o XAMPP, o anche la <a href=\"https:\/\/www.npmjs.com\/package\/@wordpress\/env\">soluzione ufficiale wp-env<\/a>.<\/p>\n<p>Se state usando DevKinsta, fate clic su <strong>Nuovo Sito WordPress<\/strong> o su <strong>Sito Personalizzato<\/strong>, compila i campi del modulo e premete <strong>Crea sito<\/strong>.<\/p>\n<p>Il processo di installazione richiede uno o due minuti. Al termine, avviate il vostro sito WordPress di sviluppo locale.<\/p>\n<figure id=\"attachment_120269\" aria-describedby=\"caption-attachment-120269\" style=\"width: 2050px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-120269 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/devkinsta.jpg\" alt=\"Schermata delle informazioni sul sito in DevKinsta.\" width=\"2050\" height=\"1258\"><figcaption id=\"caption-attachment-120269\" class=\"wp-caption-text\">Schermata delle informazioni sul sito in DevKinsta.<\/figcaption><\/figure>\n<h4>Configurare il Plugin del Blocco<\/h4>\n<p>Ora vi serve un plugin del blocco iniziale. Per evitare il fastidio di una configurazione manuale, il <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-create-block\/\">team di sviluppatori<\/a> di WordPress ha rilasciato lo <a href=\"https:\/\/www.npmjs.com\/package\/@wordpress\/create-block\">strumento @wordpress\/create-block<\/a>, che \u00e8 <em>lo strumento ufficiale a configurazione zero per la creazione di blocchi Gutenberg<\/em>.<\/p>\n<p>Abbiamo trattato in modo approfondito <code>@wordpress\/create-block<\/code> nel nostro <a href=\"https:\/\/kinsta.com\/it\/blog\/blocchi-gutenberg\/#dev-environment\">precedente articolo<\/a>, quindi possiamo iniziare subito la configurazione.<\/p>\n<p>Nel vostro strumento a riga di comando, spostatevi nella cartella <strong>\/wp-content\/plugins<\/strong>:<\/p>\n<figure id=\"attachment_105130\" aria-describedby=\"caption-attachment-105130\" style=\"width: 1224px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-105130 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/10\/new-terminal-at-folder.jpg\" alt=\"New terminal at folder in Mac OS.\" width=\"1224\" height=\"958\"><figcaption id=\"caption-attachment-105130\" class=\"wp-caption-text\">New terminal at folder in Mac OS.<\/figcaption><\/figure>\n<p>Una volta l\u00ec, eseguite il seguente comando:<\/p>\n<pre><code class=\"language-bash\">npx @wordpress\/create-block<\/code><\/pre>\n<p>Ora siete pronti per installare il pacchetto <code>@wordpress\/create-block<\/code>:<\/p>\n<figure id=\"attachment_120270\" aria-describedby=\"caption-attachment-120270\" style=\"width: 1432px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-120270 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/installing-wordpress-create-block.jpg\" alt=\"Installazione del pacchetto @wordpress\/create-block.\" width=\"1432\" height=\"296\"><figcaption id=\"caption-attachment-120270\" class=\"wp-caption-text\">Installazione del pacchetto @wordpress\/create-block.<\/figcaption><\/figure>\n<p>Per confermare, digitate <code>y<\/code> e premete Invio.<\/p>\n<p>Questo genera i file PHP, SCSS e JS del plugin in <a href=\"https:\/\/kinsta.com\/it\/blog\/blocchi-gutenberg\/#set-up-the-plugin\">modalit\u00e0 interattiva<\/a>.<\/p>\n<p>Di seguito sono riportati i dati che utilizzeremo nel nostro esempio. Modificate questi dati in base alle vostre preferenze:<br \/>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><\/p>\n<ul>\n<li>Block slug used for identification (also the plugin and output folder name): <strong>author-plugin<\/strong><\/li>\n<li>The internal namespace for the block name (something unique for your products): <strong>author-box<\/strong><\/li>\n<li>The display title for your block: <strong>Author box<\/strong><\/li>\n<li>The short description for your block (optional): <strong>An example block for Kinsta readers<\/strong><\/li>\n<li>The dashicon to make it easier to identify your block (optional): <strong>businessperson<\/strong><\/li>\n<li>The category name to help users browse and discover your block: <strong>widgets<\/strong><\/li>\n<li>The name of the plugin author (optional). Multiple authors may be listed using commas: <strong>your name<\/strong><\/li>\n<li>The short name of the plugin\u2019s license (optional): <strong>\u2013<\/strong><\/li>\n<li>A link to the full text of the license (optional): <strong>\u2013<\/strong><\/li>\n<li>The current version number of the plugin: <strong>0.1.0<\/strong><\/li>\n<\/ul>\n<p><\/p>\n<\/aside>\n<br \/>\nUna volta premuto invio, il plugin viene scaricato e configurato.<\/p>\n<figure id=\"attachment_120271\" aria-describedby=\"caption-attachment-120271\" style=\"width: 1424px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-120271 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/installing-the-block-plugin.jpg\" alt=\"Installazione del plugin del blocco.\" width=\"1424\" height=\"878\"><figcaption id=\"caption-attachment-120271\" class=\"wp-caption-text\">Installazione del plugin del blocco.<\/figcaption><\/figure>\n<p>Il processo potrebbe richiedere un paio di minuti. Al termine, dovreste vedere la seguente schermata:<\/p>\n<figure id=\"attachment_120272\" aria-describedby=\"caption-attachment-120272\" style=\"width: 1428px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-120272 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/block-bootstrapped.jpg\" alt=\"Blocco avviato nella cartella dei plugin.\" width=\"1428\" height=\"1026\"><figcaption id=\"caption-attachment-120272\" class=\"wp-caption-text\">Blocco avviato nella cartella dei plugin.<\/figcaption><\/figure>\n<p>Vedrete un elenco dei comandi che potete eseguire dalla cartella dei plugin:<\/p>\n<ul>\n<li><code>$ npm start<\/code> &#8211; Avvia la build per lo sviluppo.<\/li>\n<li><code>$ npm run build<\/code> &#8211; Crea il codice per la produzione.<\/li>\n<li><code>$ npm run format<\/code> &#8211; Formatta i file.<\/li>\n<li><code>$ npm run lint:css<\/code> &#8211; Controlla i file CSS.<\/li>\n<li><code>$ npm run lint:js<\/code> &#8211; Controlla i file JavaScript.<\/li>\n<li><code>$ npm run packages-update<\/code> &#8211; Aggiorna i pacchetti di WordPress all&#8217;ultima versione.<\/li>\n<\/ul>\n<p>Ok, ora spostatevi nella cartella dei plugin con il seguente comando:<\/p>\n<pre><code class=\"language-bash\">cd author-plugin<\/code><\/pre>\n<p>E avviate la vostra build di sviluppo:<\/p>\n<pre><code class=\"language-bash\">npm start<\/code><\/pre>\n<p>Successivamente, accedi alla schermata dei plugin nella vostra dashboard di WordPress e attivate il plugin <strong>Author box<\/strong>:<\/p>\n<figure id=\"attachment_120273\" aria-describedby=\"caption-attachment-120273\" style=\"width: 2104px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-120273 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/plugins-screen.jpg\" alt=\"Il plugin del blocco \u00e8 elencato nella schermata dei plugin.\" width=\"2104\" height=\"1268\"><figcaption id=\"caption-attachment-120273\" class=\"wp-caption-text\">Il plugin del blocco \u00e8 elencato nella schermata dei plugin.<\/figcaption><\/figure>\n<p>Ora potete verificare se il plugin funziona correttamente. Create un nuovo post e inizia a digitare <code>\/<\/code> per lanciare l&#8217;inseritore rapido:<\/p>\n<figure id=\"attachment_120958\" aria-describedby=\"caption-attachment-120958\" style=\"width: 1402px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-120958 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/quick-inserter-2.jpg\" alt=\"L'elemento blocco nell'inseritore rapido.\" width=\"1402\" height=\"804\"><figcaption id=\"caption-attachment-120958\" class=\"wp-caption-text\">L&#8217;elemento blocco nell&#8217;inseritore rapido.<\/figcaption><\/figure>\n<p>Il blocco <strong>Author box<\/strong> si trova anche nel Block Inserter, sotto la categoria <strong>Widgets<\/strong>. Selezionate il blocco per aggiungerlo all&#8217;editor:<\/p>\n<figure id=\"attachment_120275\" aria-describedby=\"caption-attachment-120275\" style=\"width: 1434px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-120275\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/block-inserter.jpg\" alt=\"Il Block Inserter di WordPress.\" width=\"1434\" height=\"860\"><figcaption id=\"caption-attachment-120275\" class=\"wp-caption-text\">Il Block Inserter di WordPress<\/figcaption><\/figure>\n<p>E il gioco \u00e8 fatto. Ora salvate il post e visualizzate l&#8217;anteprima della pagina per verificare che il blocco venga visualizzato correttamente.<\/p>\n<h4>L&#8217;Impalcatura dei Blocchi<\/h4>\n<p>Abbiamo <a href=\"https:\/\/kinsta.com\/it\/blog\/blocchi-gutenberg\/#a-walkthrough-of-the-starter-block-scaffolding\">trattato l&#8217;impalcatura dei blocchi<\/a> (<em>block scaffolding<\/em>) nel nostro precedente articolo. Quindi, qui forniremo solo una rapida panoramica dei file che modificheremo nei nostri esempi.<\/p>\n<p><strong>La Cartella Principale<\/strong><br \/>\nNella cartella principale si trovano il file PHP principale e diverse sottocartelle.<\/p>\n<p><strong>author-plugin.php<\/strong><br \/>\nDi default, il pacchetto <code>@wordpress\/create-block<\/code> genera il seguente <a href=\"https:\/\/kinsta.com\/it\/blog\/blocchi-gutenberg\/#plugin-file\">file PHP<\/a>:<\/p>\n<pre><code class=\"language-php\">\/**\n * Plugin Name:       Author box\n * Description:       An example block for Kinsta readers\n * Requires at least: 5.8\n * Requires PHP:      7.0\n * Version:           0.1.0\n * Author:            Carlo\n * License:           GPL-2.0-or-later\n * License URI:       https:\/\/www.gnu.org\/licenses\/gpl-2.0.html\n * Text Domain:       author-plugin\n *\n * @package           author-box\n *\/\n\n\/**\n * Registers the block using the metadata loaded from the `block.json` file.\n * Behind the scenes, it registers also all assets so they can be enqueued\n * through the block editor in the corresponding context.\n *\n * @see https:\/\/developer.wordpress.org\/reference\/functions\/register_block_type\/\n *\/\nfunction author_box_author_plugin_block_init() {\n\tregister_block_type( __DIR__ . '\/build' );\n}\nadd_action( 'init', 'author_box_author_plugin_block_init' );<\/code><\/pre>\n<p>Nell&#8217;intestazione, noterete i dati che abbiamo inserito al momento della configurazione.<\/p>\n<p>Con i blocchi statici, lavorerete per la maggior parte del tempo sui file JavaScript che si trovano nella cartella <em>src<\/em>. Con i blocchi dinamici, scriverete il codice PHP per visualizzare il contenuto del blocco sul front-end.<\/p>\n<p><strong>La Cartella <em>src<\/em><\/strong><br \/>\nLa cartella <em>src<\/em> \u00e8 la cartella di sviluppo. Qui troverete i seguenti file:<\/p>\n<ul>\n<li><em>block.json<\/em><\/li>\n<li><em>index.js<\/em><\/li>\n<li><em>edit.js<\/em><\/li>\n<li><em>save.js<\/em><\/li>\n<li><em>editor.scss<\/em><\/li>\n<li><em>style.scss<\/em><\/li>\n<\/ul>\n<p><strong>block.json<\/strong><br \/>\nIl file <em>block.json<\/em> \u00e8 il file dei metadati. <code>@wordpress\/create-block<\/code> genera il seguente file <strong>block.json<\/strong>:<\/p>\n<pre><code class=\"language-json\">{\n\t\"$schema\": \"https:\/\/schemas.wp.org\/trunk\/block.json\",\n\t\"apiVersion\": 2,\n\t\"name\": \"author-box\/author-plugin\",\n\t\"version\": \"0.1.0\",\n\t\"title\": \"Author box\",\n\t\"category\": \"widgets\",\n\t\"icon\": \"businessperson\",\n\t\"description\": \"An example block for Kinsta readers\",\n\t\"supports\": {\n\t\t\"html\": false\n\t},\n\t\"textdomain\": \"author-plugin\",\n\t\"editorScript\": \"file:.\/index.js\",\n\t\"editorStyle\": \"file:.\/index.css\",\n\t\"style\": \"file:.\/style-index.css\"\n}<\/code><\/pre>\n<p>Per una visione pi\u00f9 approfondita del file <em>block.json<\/em> in generale, consultate il <a href=\"https:\/\/kinsta.com\/it\/blog\/blocchi-gutenberg\/#block-json\">nostro precedente articolo<\/a>.<\/p>\n<p><strong>index.js<\/strong><br \/>\nIl file <em>index.js<\/em> \u00e8 il punto in cui si registra il tipo di blocco sul client:<\/p>\n<pre><code class=\"language-js\">import { registerBlockType } from '@wordpress\/blocks';\n\nimport '.\/style.scss';\n\nimport Edit from '.\/edit';\nimport save from '.\/save';\n\nregisterBlockType('author-box\/author-plugin', {\n\tedit: Edit,\n\tsave,\n});<\/code><\/pre>\n<p><strong>edit.js<\/strong><br \/>\nIl file <em>edit.js<\/em> \u00e8 dove costruirete l&#8217;interfaccia del blocco visualizzata nell&#8217;editor:<\/p>\n<pre><code class=\"language-js\">import { __ } from '@wordpress\/i18n';\n\nimport { useBlockProps } from '@wordpress\/block-editor';\n\nimport '.\/editor.scss';\n\nexport default function Edit() {\n\treturn (\n\t\t&lt;p {...useBlockProps()}&gt;\n\t\t\t{__('Author box \u2013 hello from the editor!', 'author-plugin')}\n\t\t&lt;\/p&gt;\n\t);\n}<\/code><\/pre>\n<p><strong>save.js<\/strong><br \/>\nIl file <em>save.js<\/em> contiene lo script che crea il contenuto del blocco da salvare nel database. In questo tutorial non utilizzeremo questo file:<\/p>\n<pre><code class=\"language-js\">import { __ } from '@wordpress\/i18n';\n\nimport { useBlockProps } from '@wordpress\/block-editor';\n\nexport default function save() {\n\treturn (\n\t\t&lt;p {...useBlockProps.save()}&gt;\n\t\t\t{__('Author box \u2013 hello from the saved content!', 'author-plugin')}\n\t\t&lt;\/p&gt;\n\t);\n}<\/code><\/pre>\n<h2>Creare il Blocco da Rendere nell&#8217;Editor<\/h2>\n<p>Aprite il vostro progetto in <a href=\"https:\/\/kinsta.com\/it\/blog\/migliori-editor-di-testo\/#visual-studio-code\">Visual Studio Code<\/a> o in qualsiasi altro <a href=\"https:\/\/kinsta.com\/it\/blog\/migliori-editor-di-testo\/\">editor di codice<\/a>.<\/p>\n<p>Se state usando Visual Studio Code, andate su <strong>Terminale -&gt; Nuovo Terminale<\/strong>. In questo modo si aprir\u00e0 una finestra del terminale nella cartella principale del progetto.<\/p>\n<p>Nel terminale (o nel vostro strumento a riga di comando preferito), digitate il seguente comando:<\/p>\n<pre><code class=\"language-bash\">npm start<\/code><\/pre>\n<p>Ora state eseguendo l&#8217;ambiente node in modalit\u00e0 di sviluppo.<\/p>\n<figure id=\"attachment_120337\" aria-describedby=\"caption-attachment-120337\" style=\"width: 2378px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-120337 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/the-project-in-visual-studio-code.jpg\" alt=\"Il progetto del plugin del blocco in Visual Studio Code.\" width=\"2378\" height=\"1628\"><figcaption id=\"caption-attachment-120337\" class=\"wp-caption-text\">Il progetto del plugin del blocco in Visual Studio Code.<\/figcaption><\/figure>\n<p>Da qui in poi, seguirete due strade diverse. Per rendere il blocco nell&#8217;editor, lavorerete nel file <em>edit.js<\/em>. Per rendere il blocco sul front-end, dovrete scrivere del codice PHP nel file principale del plugin.<\/p>\n<p>Ora rimbocchiamoci le maniche perch\u00e9 iniziamo con il codice:<\/p>\n<div><\/div><kinsta-auto-toc list-style=\"decimal\" selector=\"h3\" count-number=\"10\" sub-toc=\"true\"><\/kinsta-auto-toc>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>In questo articolo forniamo solo degli snippet di codice. Il codice completo \u00e8 <a href=\"https:\/\/gist.github.com\/carlodaniele\/27e292fbbe4b897ca3bda4539dfd74df\">disponibile su Gist<\/a>.<\/p>\n<\/aside>\n\n<h3>Registriamo il Blocco sul Server<\/h3>\n<p>Per prima cosa, dovete registrare il blocco sul server e scrivere il codice PHP per recuperare i dati dal database.<\/p>\n<p>Nel file <em>author-plugin.php<\/em>, dovrete passare un secondo argomento alla <a href=\"https:\/\/kinsta.com\/it\/blog\/blocchi-gutenberg\/#plugin-file\">funzione <code>register_block_type<\/code><\/a>:<\/p>\n<pre><code class=\"language-php\">function author_box_author_plugin_block_init() {\n\tregister_block_type( __DIR__ . '\/build', array(\n\t\t'render_callback' =&gt; 'author_box_author_plugin_render_author_content'\n\t) );\n}\nadd_action( 'init', 'author_box_author_plugin_block_init' );<\/code><\/pre>\n<p>Il secondo parametro \u00e8 un array di argomenti per la registrazione di un tipo di blocco (vedi <a href=\"https:\/\/developer.wordpress.org\/reference\/classes\/wp_block_type\/__construct\/\">l&#8217;elenco completo degli argomenti disponibili<\/a>). Nel codice qui sopra abbiamo fornito solo <code>render_callback<\/code>, che determina la funzione di callback che rende il blocco sullo schermo.<\/p>\n<p>Poi dichiarerete la funzione:<\/p>\n<pre><code class=\"language-php\">function author_box_author_plugin_render_author_content() {\n\treturn 'Hello World!';\n}<\/code><\/pre>\n<p>Salvate il file, create un nuovo post o una nuova pagina e aggiungete il blocco <strong>Author Box<\/strong> al canvas dell&#8217;editor.<\/p>\n<figure id=\"attachment_120275\" aria-describedby=\"caption-attachment-120275\" style=\"width: 1434px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-120275 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/block-inserter.jpg\" alt=\"Il Block Inserter di WordPress.\" width=\"1434\" height=\"860\"><figcaption id=\"caption-attachment-120275\" class=\"wp-caption-text\">Il Block Inserter di WordPress.<\/figcaption><\/figure>\n<p>L&#8217;editor dei blocchi mostra ancora il blocco iniziale, dato che non abbiamo ancora modificato il file <em>edit.js<\/em>.<\/p>\n<p>Ma se visualizzate l&#8217;anteprima del post nel front-end, vedrete che il contenuto del blocco originale \u00e8 stato sostituito dalla stringa &#8220;Hello World&#8221;.<\/p>\n<p>Ora, dato che l&#8217;HTML reso sul front-end \u00e8 generato dal file PHP, non sar\u00e0 necessario che la funzione <code>save<\/code> restituisca qualcosa. Andiamo quindi direttamente al file <em>save.js<\/em> e modifichiamo il codice come mostrato di seguito:<\/p>\n<pre><code class=\"language-js\">export default function save() {\n\treturn null;\n}<\/code><\/pre>\n<h3>Definiamo gli Attributi del Blocco<\/h3>\n<p>Ora avete bisogno di un posto dove memorizzare le impostazioni dell&#8217;utente. Ad esempio, il numero di post da recuperare dal database, se visualizzare o meno un campo specifico, ecc. Per farlo, dovrete definire una serie di <code>attributes<\/code> nel file <em>block.json<\/em>.<\/p>\n<p>Ad esempio, potete dare all&#8217;utente la possibilit\u00e0 di stabilire il numero di post da includere nel blocco, l&#8217;opzione di visualizzare l&#8217;immagine principale, la data, l&#8217;estratto e\/o di nascondere\/mostrare l&#8217;immagine del profilo dell&#8217;autore.<\/p>\n<p>Ecco l&#8217;elenco completo degli attributi che utilizzeremo per creare il nostro blocco di esempio:<\/p>\n<pre><code class=\"language-json\">{\n\t...\n\t\"attributes\": {\n\t\t\"numberOfItems\": {\n\t\t\t\"type\": \"number\",\n\t\t\t\"default\": 3\n\t\t},\n\t\t\"columns\": {\n\t\t\t\"type\": \"number\",\n\t\t\t\"default\": 1\n\t\t},\n\t\t\"displayDate\": {\n\t\t\t\"type\": \"boolean\",\n\t\t\t\"default\": true\n\t\t},\n\t\t\"displayExcerpt\": {\n\t\t\t\"type\": \"boolean\",\n\t\t\t\"default\": true\n\t\t},\n\t\t\"displayThumbnail\": {\n\t\t\t\"type\": \"boolean\",\n\t\t\t\"default\": true\n\t\t},\n\t\t\"displayAuthorInfo\": {\n\t\t\t\"type\": \"boolean\",\n\t\t\t\"default\": true\n\t\t},\n\t\t\"showAvatar\": {\n\t\t\t\"type\": \"boolean\",\n\t\t\t\"default\": true\n\t\t}, \n\t\t\"avatarSize\": {\n\t\t\t\"type\": \"number\",\n\t\t\t\"default\": 48\n\t\t},\n\t\t\"showBio\": {\n\t\t\t\"type\": \"boolean\",\n\t\t\t\"default\": true\n\t\t}\n\t}\n}<\/code><\/pre>\n<h3>Il Blocco da Visualizzare nell&#8217;Editor<\/h3>\n<p>Il selettore <code>getEntityRecords<\/code> \u00e8 incluso nel pacchetto <code>@wordpress\/data<\/code>. Per utilizzarlo, dovrete importare l&#8217;hook <code>useSelect<\/code> di quel pacchetto nel vostro file <code>edit.js<\/code>:<\/p>\n<pre><code class=\"language-js\">import { useSelect } from '@wordpress\/data';<\/code><\/pre>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p><code>useSelect<\/code> \u00e8 un custom hook react per recuperare i valori dei selettori registrati, basato <a href=\"https:\/\/reactjs.org\/docs\/hooks-reference.html#usecallback\">sull&#8217;hook React <code>useCallback<\/code><\/a>.<\/p>\n<\/aside>\n\n<p>Quindi, aggiungete il seguente codice alla funzione <code>Edit()<\/code>:<\/p>\n<pre><code class=\"language-js\">const posts = useSelect( ( select ) =&gt; {\n\treturn select( 'core' ).getEntityRecords( 'postType', 'post', {\n\t\t'per_page': 3\n\t});\n});<\/code><\/pre>\n<p>Nel codice precedente abbiamo inserito il numero di post. Ma potreste voler dare agli utenti la possibilit\u00e0 di impostare un numero diverso di post. A tal fine potete utilizzare un attributo.<\/p>\n<p>Nel vostro <em>block.json<\/em> dovreste aver definito un attributo <code>numberOfItems<\/code>. \u00c8 possibile utilizzarlo nella funzione <code>Edit<\/code> come mostrato di seguito:<\/p>\n<pre><code class=\"language-js\">export default function Edit( { attributes } ) {\n\n\tconst { numberOfItems } = attributes;\n\n\tconst posts = useSelect( ( select ) =&gt; {\n\t\treturn select( 'core' ).getEntityRecords( 'postType', 'post', {\n\t\t\t'per_page': numberOfItems\n\t\t});\n\t});\n\n\tconsole.log( posts );\n\n\treturn (\n\t\t...\n\t);\n}<\/code><\/pre>\n<p>Non vedrete ancora i post sullo schermo, ma eseguite un <code>console.log<\/code> e guardate cosa succede nella console dell&#8217;ispector del browser:<\/p>\n<figure id=\"attachment_120340\" aria-describedby=\"caption-attachment-120340\" style=\"width: 1714px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-120340 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/console-log.jpg\" alt=\"Il risultato nella console del browser.\" width=\"1714\" height=\"906\"><figcaption id=\"caption-attachment-120340\" class=\"wp-caption-text\">Il risultato nella console del browser.<\/figcaption><\/figure>\n<p><a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-data\/#useselect\"><code>useSelect<\/code> accetta due argomenti<\/a>: una callback in linea e un array di dipendenze. Entrambi restituiscono una versione <a href=\"https:\/\/en.wikipedia.org\/wiki\/Memoization\">memoizzata<\/a> della callback che cambia solo quando cambia una delle dipendenze.<\/p>\n<p>Quindi, per recuperare i post ad ogni modifica dell&#8217;attributo <code>numberOfItems<\/code>, dovrete modificare la funzione <code>Edit<\/code> come mostrato di seguito:<\/p>\n<pre><code class=\"language-js\">export default function Edit( { attributes } ) {\n\n\tconst { numberOfItems } = attributes;\n\n\tconst posts = useSelect(\n\t\t( select ) =&gt; {\n\t\t\treturn select( 'core' ).getEntityRecords( 'postType', 'post', {\n\t\t\t\t'per_page': numberOfItems\n\t\t\t});\n\t\t}, \n\t\t[ numberOfItems ]\n\t);\n\n\tconsole.log(posts);\n\n\treturn (\n\t\t...\n\t);\n}<\/code><\/pre>\n<p>Poi dovrete eseguire il <a href=\"https:\/\/reactjs.org\/docs\/lists-and-keys.html\">rendering dell&#8217;elenco dei post<\/a>. Per farlo, potete utilizzare il <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Array\/map\">metodo JavaScript integrato <code>map<\/code>:<\/a><\/p>\n<pre><code class=\"language-jsx\">export default function Edit( { attributes } ) {\n\n\tconst { numberOfItems } = attributes;\n\n\tconst posts = useSelect(\n\t\t( select ) =&gt; {\n\t\t\treturn select( 'core' ).getEntityRecords( 'postType', 'post', {\n\t\t\t\t'per_page': numberOfItems\n\t\t\t});\n\t\t},\n\t\t[ numberOfItems ]\n\t);\n\n\tconsole.log(posts);\n\t\n\treturn (\n\t\t&lt;div { ...useBlockProps() }&gt;\n\t\t\t&lt;ul&gt;\n\t\t\t\t{ posts && posts.map( ( post ) =&gt; {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t&lt;li key={ post.id }&gt;\n\t\t\t\t\t\t\t&lt;h5&gt;\n\t\t\t\t\t\t\t\t&lt;a href={ post.link }&gt;\n\t\t\t\t\t\t\t\t\t{ \n\t\t\t\t\t\t\t\t\t\tpost.title.rendered ? \n\t\t\t\t\t\t\t\t\t\tpost.title.rendered :\n\t\t\t\t\t\t\t\t\t\t__( 'Default title', 'author-plugin' )\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t&lt;\/a&gt;\n\t\t\t\t\t\t\t&lt;\/h5&gt;\n\t\t\t\t\t\t&lt;\/li&gt;\n\t\t\t\t\t)\n\t\t\t\t})}\n\t\t\t&lt;\/ul&gt;\n\t\t&lt;\/div&gt;\n\t);\n}<\/code><\/pre>\n<p>Per prima cosa, questo codice controlla se c&#8217;\u00e8 almeno un post nell&#8217;array, quindi esegue il ciclo.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Il metodo <code>map()<\/code> crea un nuovo array popolato con i risultati della chiamata di una funzione fornita su ogni elemento dell&#8217;array chiamante &#8211; Fonte: <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Array\/map\">MDN web docs<\/a>.<\/p>\n<\/aside>\n\n<p>Si noti che, dato che stiamo utilizzando il metodo <code>map<\/code> con un componente React, stiamo anche utilizzando un attributo <code>key<\/code> per assegnare l&#8217;ID del post all&#8217;elemento corrente dell&#8217;elenco.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Una &#8220;key&#8221; \u00e8 uno speciale attributo stringa che \u00e8 necessario includere quando si creano elenchi di elementi &#8211; Fonte: <a href=\"https:\/\/reactjs.org\/docs\/lists-and-keys.html\">Lists and Keys<\/a> in React Docs.<\/p>\n<\/aside>\n\n<p><code>post.link<\/code> e <code>post.title.rendered<\/code> rendono rispettivamente l&#8217;URL e il titolo del post.<\/p>\n<p>L&#8217;immagine seguente mostra l&#8217;elenco completo delle propriet\u00e0 dell&#8217;oggetto <code>post<\/code>.<\/p>\n<figure id=\"attachment_120341\" aria-describedby=\"caption-attachment-120341\" style=\"width: 2290px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-120341 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/js-loop-1.jpg\" alt=\"L'oggetto Post.\" width=\"2290\" height=\"1270\"><figcaption id=\"caption-attachment-120341\" class=\"wp-caption-text\">L&#8217;oggetto Post.<\/figcaption><\/figure>\n<p>Il codice qui sopra \u00e8 solo un esempio di base di <code>getEntityRecords<\/code>. Ora \u00e8 il momento di mettere in pratica le nostre conoscenze.<\/p>\n<p>Supponiamo di voler evitare che il vostro blocco renda i tag HTML che l&#8217;utente potrebbe aver aggiunto al titolo del post. A questo scopo, WordPress mette a disposizione un <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-element\/#rawhtml\">componente <code>RawHTML<\/code><\/a>.<\/p>\n<p>Per prima cosa, dovrete importare il componente dal <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-element\/\">pacchetto @wordpress\/element<\/a>:<\/p>\n<pre><code class=\"language-js\">import { RawHTML } from '@wordpress\/element';<\/code><\/pre>\n<p>Poi, racchiuderete il titolo del post in un elemento <code>RawHTML<\/code>:<\/p>\n<pre><code class=\"language-jsx\">&lt;div { ...useBlockProps() }&gt;\n\t&lt;ul&gt;\n\t\t{ posts && posts.map((post) =&gt; {\n\t\t\treturn (\n\t\t\t\t&lt;li key={ post.id }&gt;\n\t\t\t\t\t&lt;h5&gt;\n\t\t\t\t\t\t&lt;a href={ post.link }&gt;\n\t\t\t\t\t\t\t{ post.title.rendered ? (\n\t\t\t\t\t\t\t\t&lt;RawHTML&gt;\n\t\t\t\t\t\t\t\t\t{ post.title.rendered }\n\t\t\t\t\t\t\t\t&lt;\/RawHTML&gt;\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t__( 'Default title', 'author-plugin' )\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t&lt;\/a&gt;\n\t\t\t\t\t&lt;\/h5&gt;\n\t\t\t\t&lt;\/li&gt;\n\t\t\t)\n\t\t})}\n\t&lt;\/ul&gt;\n&lt;\/div&gt;<\/code><\/pre>\n<p>E questo \u00e8 tutto. Ora aggiungete un tag HTML al titolo del post e salvatelo. Poi provate il vostro codice con e senza <code>RawHTML<\/code> e guardate come cambia il contenuto del vostro blocco sullo schermo.<\/p>\n<h3>Aggiungiamo la Data<\/h3>\n<p>WordPress fornisce una serie di funzioni JavaScript per gestire e formattare le date. Per utilizzare queste funzioni bisogna prima importarle dal <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-date\/\">pacchetto <code>@wordpress\/date<\/code><\/a> nel file <em>edit.js<\/em>:<\/p>\n<pre><code class=\"language-js\">import { dateI18n, format, __experimentalGetSettings } from '@wordpress\/date';<\/code><\/pre>\n<ul>\n<li><code>dateI18n<\/code>: Formatta una data, traducendola nel locale del sito.<\/li>\n<li><code>format<\/code>: Formatta una data.<\/li>\n<li><code>__experimentalGetSettings<\/code>: Visualizza la data nel formato impostato nelle impostazioni generali di WordPress.<\/li>\n<\/ul>\n<p>Queste funzioni non sono documentate, ma troverete utili esempi nel codice sorgente di diversi blocchi. Si vedano ad esempio i file <em>edit.js<\/em> di <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/trunk\/packages\/block-library\/src\/latest-posts\/edit.js\">latest-posts<\/a> e <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/trunk\/packages\/block-library\/src\/post-date\/edit.js\">post-date<\/a>.<\/p>\n<p>Ora aggiungete l&#8217;attributo <code>displayDate<\/code>:<\/p>\n<pre><code class=\"language-js\">const { numberOfItems, displayDate } = attributes;<\/code><\/pre>\n<p>Quindi aggiungete il seguente codice all&#8217;interno dell&#8217;elemento <code>&lt;li&gt;<\/code>:<\/p>\n<pre><code class=\"language-jsx\">{ \n\tdisplayDate && (\n\t\t&lt;time\n\t\t\tclassName='wp-block-author-box-author-plugin__post-date'\n\t\t\tdateTime={ format( 'c', post.date_gmt ) }\n\t\t&gt;\n\t\t\t{ dateI18n(\n\t\t\t\t__experimentalGetSettings().formats.date, \n\t\t\t\tpost.date_gmt\n\t\t\t)}\n\t\t&lt;\/time&gt;\n\t) \n}<\/code><\/pre>\n<p>Cosa succede qui?<\/p>\n<ul>\n<li>Se <code>displayDate<\/code> \u00e8 <code>true<\/code>, allora visualizza la data utilizzando un <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Element\/time\">elemento <code>time<\/code><\/a>.<\/li>\n<li>L&#8217;attributo <code>dateTime<\/code> fornisce l&#8217;ora e\/o la data dell&#8217;elemento in uno dei <a href=\"https:\/\/wordpress.org\/support\/article\/formatting-date-and-time\/\">formati consentiti<\/a>.<\/li>\n<li><code>dateI18n<\/code> recupera la data nel formato localizzato. Questa funzione funziona in modo simile alla <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/date_i18n\/\">funzione PHP <code>date_i18n<\/code> di WordPress<\/a>.<\/li>\n<\/ul>\n<h3>Aggiungiamo il Riassunto<\/h3>\n<p>Ora dovrebbe essere facile aggiungere l&#8217;estratto del post. Per prima cosa, date un&#8217;occhiata alla propriet\u00e0 <code>excerpt<\/code> nell&#8217;ispector del browser. Vedrete che il contenuto effettivo \u00e8 memorizzato in <code>excerpt.rendered<\/code>.<\/p>\n<figure id=\"attachment_120343\" aria-describedby=\"caption-attachment-120343\" style=\"width: 1640px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-120343 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/inspecting-post-excerpt.jpg\" alt=\"Ispezione dell'estratto del post in Chrome DevTools.\" width=\"1640\" height=\"868\"><figcaption id=\"caption-attachment-120343\" class=\"wp-caption-text\">Ispezione dell&#8217;estratto del post in Chrome DevTools.<\/figcaption><\/figure>\n<p>Quindi aggiungete l&#8217;attributo <code>displayExcerpt<\/code> all&#8217;oggetto <code>attributes<\/code>:<\/p>\n<pre><code class=\"language-js\">const { numberOfItems, displayDate, displayExcerpt } = attributes;<\/code><\/pre>\n<p>Poi aggiungete il seguente codice prima del tag di chiusura <code>&lt;\/li&gt;<\/code> nella funzione <code>Edit<\/code>:<\/p>\n<pre><code class=\"language-jsx\">{\n\tdisplayExcerpt &&\n\tpost.excerpt.rendered && (\n\t\t&lt;p&gt;\n\t\t\t&lt;RawHTML&gt;\n\t\t\t\t{ post.excerpt.rendered }\n\t\t\t&lt;\/RawHTML&gt;\n\t\t&lt;\/p&gt;\n\t)\n}<\/code><\/pre>\n<p>Se non avete dimestichezza con JavaScript, qui e sopra abbiamo utilizzato la <strong>Short Circuit Evaluation<\/strong>, in base alla quale, se tutte le condizioni sono vere, viene restituito il valore dell&#8217;ultimo operando (per saperne di pi\u00f9, si legga <a href=\"https:\/\/reactjs.org\/docs\/conditional-rendering.html#inline-if-with-logical--operator\">Inline If with Logical &#038;&#038; Operator<\/a> e <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Operators\/Logical_AND\">Logical AND (&#038;&#038;)<\/a>).<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>In JavaScript, <code>true &amp;&amp; expression<\/code> si valuta sempre come <code>expression<\/code>, e <code>false &amp;&amp; expression<\/code> si valuta sempre come <code>false<\/code>.<\/p>\n<p>Pertanto, se la condizione \u00e8 <code>true<\/code>, apparir\u00e0 nell&#8217;output l&#8217;elemento subito dopo <code>&amp;&amp;<\/code>. Se invece \u00e8 <code>false<\/code>, React lo ignorer\u00e0 e lo salter\u00e0. Fonte: <a href=\"https:\/\/reactjs.org\/docs\/conditional-rendering.html#inline-if-with-logical--operator\">Rendering condizionale<\/a> nei documenti di React.<\/p>\n<\/aside>\n\n<p>Quindi testate nuovamente il vostro codice. Cambiate il valore dell&#8217;attributo nel file <em>block.json<\/em> e guardate cosa succede nell&#8217;editor.<\/p>\n<h3>Aggiungiamo l&#8217;Immagine in Primo Piano<\/h3>\n<p>Ora dovete aggiungere il codice che rende le immagini in primo piano. Iniziate aggiungendo l&#8217;attributo <code>displayThumbnail<\/code> a <code>attributes<\/code>:<\/p>\n<pre><code class=\"language-js\">const { \n\tnumberOfItems, \n\tdisplayDate, \n\tdisplayExcerpt, \n\tdisplayThumbnail \n} = attributes;<\/code><\/pre>\n<p>Ora dovete capire dove viene memorizzata l&#8217;immagine in primo piano. Come abbiamo detto sopra, per ottenere l&#8217;immagine in primo piano bisogna aggiungere un nuovo argomento <code>_embed<\/code> alla query. Tornate al vostro codice e modificate gli argomenti della query come segue:<\/p>\n<pre><code class=\"language-js\">const posts = useSelect(\n\t( select ) =&gt; {\n\t\treturn select( 'core' ).getEntityRecords( 'postType', 'post', {\n\t\t\t'per_page': numberOfItems,\n\t\t\t'_embed': true\n\t\t});\n\t},\n\t[ numberOfItems ]\n);<\/code><\/pre>\n<p>Qui abbiamo semplicemente aggiunto <code>'_embed': true<\/code> all&#8217;array di argomenti. In questo modo si ottiene un oggetto <code>post<\/code> che contiene la propriet\u00e0 <code>_embedded<\/code>, la quale fornisce i dettagli dell&#8217;immagine di cui avete bisogno per visualizzare le immagini in primo piano.<\/p>\n<p>Ora dovreste sapere dove <a href=\"#accessing-post-data-using-the-wordpress-rest-api\">trovare i dati delle immagini<\/a>.<\/p>\n<figure id=\"attachment_120307\" aria-describedby=\"caption-attachment-120307\" style=\"width: 1684px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-120307 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/getentityrecords-wp-featuredmedia.jpg\" alt=\"Dati dell'immagine in primo piano nella risposta di getEntityRecords.\" width=\"1684\" height=\"1152\"><figcaption id=\"caption-attachment-120307\" class=\"wp-caption-text\">Dati dell&#8217;immagine in primo piano nella risposta di getEntityRecords.<\/figcaption><\/figure>\n<p>Dovete solo aggiungere il codice che rende l&#8217;immagine sullo schermo:<\/p>\n<pre><code class=\"language-jsx\">{\n\tdisplayThumbnail && \n\tpost._embedded && \n\tpost._embedded['wp:featuredmedia'] &&\n\tpost._embedded['wp:featuredmedia'][0] &&\n\t&lt;img \n\tclassName='wp-block-author-box-author-plugin__post-thumbnail'\n\t\tsrc={ post._embedded['wp:featuredmedia'][0].media_details.sizes.medium.source_url }\n\t\talt={ post._embedded['wp:featuredmedia'][0].alt_text }\n\t\/&gt;\n}<\/code><\/pre>\n<p>Salvate il file, passate all&#8217;editor dei blocchi e verificate se l&#8217;immagine viene visualizzata correttamente quando l&#8217;attributo <code>displayThumbnail<\/code> \u00e8 impostato su <code>true<\/code>.<\/p>\n<figure id=\"attachment_120354\" aria-describedby=\"caption-attachment-120354\" style=\"width: 2192px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-120354 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/list-of-posts-with-featured-images-date-excerpt.jpg\" alt=\"Un elenco di post con immagine in evidenza, data ed estratto.\" width=\"2192\" height=\"1220\"><figcaption id=\"caption-attachment-120354\" class=\"wp-caption-text\">Un elenco di post con immagine in evidenza, data ed estratto.<\/figcaption><\/figure>\n<h3>I Controlli della Barra Laterale<\/h3>\n<p>Finora abbiamo utilizzato i valori predefiniti degli attributi impostati nel file <em>block.json<\/em>. Ma <a href=\"https:\/\/kinsta.com\/it\/blog\/blocchi-gutenberg\/#define-attributes\">dall&#8217;articolo precedente<\/a> sappiamo che possiamo definire dei gestori di eventi per dare agli utenti la possibilit\u00e0 di assegnare valori personalizzati a ogni attributo.<\/p>\n<p>Per farlo, aggiungerete una serie di controlli alla <a href=\"https:\/\/kinsta.com\/it\/blog\/blocchi-gutenberg\/#settings-sidebar\">barra laterale delle impostazioni del blocco<\/a>. In <em>edit.js<\/em>, importate i seguenti componenti dai pacchetti corrispondenti:<\/p>\n<pre><code class=\"language-js\">import { \n\tuseBlockProps,\n\tInspectorControls\n} from '@wordpress\/block-editor';\n\nimport {\n\tPanelBody,\n\tPanelRow,\n\tQueryControls,\n\tToggleControl,\n\tRangeControl\n} from '@wordpress\/components';<\/code><\/pre>\n<ul>\n<li><code>InspectorControls<\/code>: contiene le impostazioni della barra laterale che riguardano l&#8217;intero blocco (vedi <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/a84c037a0e62a344005054102544c34d7b970a6b\/packages\/block-editor\/src\/components\/inspector-controls\/README.md\">su GitHub<\/a>)<\/li>\n<li><code>PanelBody<\/code>: aggiunge un contenitore a scomparsa alla barra laterale delle impostazioni (vedi <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/a84c037a0e62a344005054102544c34d7b970a6b\/packages\/components\/src\/panel\/README.md#panelbody\">su GitHub<\/a>)<\/li>\n<li><code>PanelRow<\/code>: produce un contenitore generico per i controlli della barra laterale (vedi <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/a84c037a0e62a344005054102544c34d7b970a6b\/packages\/components\/src\/panel\/README.md#panelrow\">su GitHub<\/a>)<\/li>\n<li><code>QueryControls<\/code>: fornisce i controlli delle impostazioni per costruire una query (vedi <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/tree\/a84c037a0e62a344005054102544c34d7b970a6b\/packages\/components\/src\/query-controls\">su GitHub<\/a>)<\/li>\n<li><code>ToggleControl<\/code>: fornisce un pulsante di attivazione\/disattivazione di un&#8217;opzione specifica per gli utenti (vedi <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/a84c037a0e62a344005054102544c34d7b970a6b\/packages\/components\/src\/toggle-control\/README.md\">su GitHub<\/a>)<\/li>\n<li><code>RangeControl<\/code>: viene utilizzato per effettuare selezioni da una gamma di valori incrementali (vedi <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/tree\/a84c037a0e62a344005054102544c34d7b970a6b\/packages\/components\/src\/range-control\">su GitHub<\/a>)<\/li>\n<\/ul>\n<p>Dovete quindi aggiornare la funzione <code>Edit<\/code> per utilizzare i controlli ora disponibili. Per prima cosa, modificate la funzione <code>Edit<\/code> come segue:<\/p>\n<pre><code class=\"language-jsx\">export default function Edit( { attributes, setAttributes } ) {\n\n\tconst { \n\t\tnumberOfItems, \n\t\tcolumns, \n\t\tdisplayExcerpt, \n\t\tdisplayDate, \n\t\tdisplayThumbnail\n\t} = attributes;\n\n\tconst posts = useSelect(\n\t\t( select ) =&gt; {\n\t\t\treturn select( 'core' ).getEntityRecords( 'postType', 'post', {\n\t\t\t\t'per_page': numberOfItems,\n\t\t\t\t'_embed': true\n\t\t\t});\n\t\t},\n\t\t[ numberOfItems ]\n\t);\n\t...\n}<\/code><\/pre>\n<p>Si noti la propriet\u00e0 <code>setAttributes<\/code> passata alla funzione <code>Edit<\/code>.<\/p>\n<p>Ora potete aggiungere gli elementi corrispondenti al vostro codice JSX:<\/p>\n<pre><code class=\"language-jsx\">return (\n\t&lt;&gt;\n\t\t&lt;InspectorControls&gt;\n\t\t\t&lt;PanelBody title={ __( 'Content Settings', 'author-plugin' ) }&gt;\n\t\t\t\t&lt;PanelRow&gt;\n\t\t\t\t\t&lt;QueryControls \n\t\t\t\t\t\tnumberOfItems={ numberOfItems }\n\t\t\t\t\t\tonNumberOfItemsChange={ ( value ) =&gt;\n\t\t\t\t\t\t\tsetAttributes( { numberOfItems: value } )\n\t\t\t\t\t\t}\n\t\t\t\t\t\tminItems={ 1 }\n\t\t\t\t\t\tmaxItems={ 10 }\n\t\t\t\t\t\/&gt;\n\t\t\t\t&lt;\/PanelRow&gt;\n\t\t\t\t&lt;PanelRow&gt;\n\t\t\t\t\t&lt;RangeControl\n\t\t\t\t\t\tlabel={ __( 'Number of Columns', 'author-plugin' ) }\n\t\t\t\t\t\tvalue={ columns }\n\t\t\t\t\t\tonChange={ ( value ) =&gt;\n\t\t\t\t\t\t\tsetAttributes( { columns: value } )\n\t\t\t\t\t\t}\n\t\t\t\t\t\tmin={ 1 }\n\t\t\t\t\t\tmax={ 4 }\n\t\t\t\t\t\trequired\n\t\t\t\t\t\/&gt;\n\t\t\t\t&lt;\/PanelRow&gt;\n\t\t\t\t&lt;PanelRow&gt;\n\t\t\t\t\t&lt;ToggleControl\n\t\t\t\t\t\tlabel={ __( 'Show Featured Image', 'author-plugin' ) }\n\t\t\t\t\t\tchecked={ displayThumbnail }\n\t\t\t\t\t\tonChange={ () =&gt;\n\t\t\t\t\t\t\tsetAttributes( { displayThumbnail: ! displayThumbnail } )\n\t\t\t\t\t\t}\n\t\t\t\t\t\/&gt;\n\t\t\t\t&lt;\/PanelRow&gt;\n\t\t\t\t&lt;PanelRow&gt;\n\t\t\t\t\t&lt;ToggleControl\n\t\t\t\t\t\tlabel={ __( 'Show Date', 'author-plugin' ) }\n\t\t\t\t\t\tchecked={ displayDate }\n\t\t\t\t\t\tonChange={ () =&gt;\n\t\t\t\t\t\t\tsetAttributes( { displayDate: ! displayDate } )\n\t\t\t\t\t\t}\n\t\t\t\t\t\/&gt;\n\t\t\t\t&lt;\/PanelRow&gt;\n\t\t\t\t&lt;PanelRow&gt;\n\t\t\t\t\t&lt;ToggleControl\n\t\t\t\t\t\tlabel={ __( 'Display Excerpt', 'author-plugin' ) }\n\t\t\t\t\t\tchecked={ displayExcerpt }\n\t\t\t\t\t\tonChange={ () =&gt;\n\t\t\t\t\t\t\tsetAttributes( { displayExcerpt: ! displayExcerpt } )\n\t\t\t\t\t\t}\n\t\t\t\t\t\/&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 { ...useBlockProps() }&gt;\n\t\t\t...\n\t\t&lt;\/div&gt;\n\t&lt;\/&gt;\n);<\/code><\/pre>\n<p>Se state pensando che \u00e8 un sacco di codice&#8230; \u00e8 vero! Ma \u00e8 piuttosto facile da capire.<\/p>\n<p>Gli attributi dell&#8217;elemento che meritano maggiormente la nostra attenzione sono <code>onNumberOfItemsChange<\/code> in <code>QueryControls<\/code> e <code>onChange<\/code> in <code>RangeControl<\/code> e <code>ToggleControl<\/code>. Questi attributi impostano i <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Events\/Event_handlers\">gestori di eventi<\/a> necessari per consentire all&#8217;utente di personalizzare l&#8217;aspetto e\/o il comportamento di un blocco.<\/p>\n<p>Noterete anche che abbiamo utilizzato i tag <code>&lt;&gt;<\/code> e <code>&lt;\/&gt;<\/code>, che sono la sintassi breve per dichiarare i <a href=\"https:\/\/reactjs.org\/docs\/fragments.html#short-syntax\">frammenti di React<\/a>.<\/p>\n<p>Ora salvate il file, passate all&#8217;editor e aggiornate la pagina:<\/p>\n<figure id=\"attachment_120367\" aria-describedby=\"caption-attachment-120367\" style=\"width: 1862px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-120367 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/author-box-content-settings.jpg\" alt=\"Impostazioni del blocco.\" width=\"1862\" height=\"1022\"><figcaption id=\"caption-attachment-120367\" class=\"wp-caption-text\">Impostazioni del blocco.<\/figcaption><\/figure>\n<p>C&#8217;\u00e8 tutto? Allora andiamo avanti e aggiungiamo i dati dell&#8217;autore del post.<\/p>\n<h3>L&#8217;Autore del Post<\/h3>\n<p>Come abbiamo detto sopra, il nostro blocco mostrer\u00e0 un elenco di articoli scritti dallo stesso autore del post corrente.<\/p>\n<p>Per ottenere l&#8217;ID dell&#8217;autore del post, \u00e8 necessario importare il <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/data\/data-core-editor\/#getcurrentpostattribute\">selettore <code>getCurrentPostAttribute<\/code><\/a> dal datastore <code>core\/editor<\/code>:<\/p>\n<pre><code class=\"language-js\">wp.data.select( 'core\/editor' ).getCurrentPostAttribute( 'author' )<\/code><\/pre>\n<p><code>getCurrentPostAttribute<\/code> restituisce il valore di un attributo per il post salvato.<\/p>\n<p>Una volta ottenuto l&#8217;ID dell&#8217;autore, potrete modificare la query come mostrato di seguito:<\/p>\n<pre><code class=\"language-js\">const posts = useSelect(\n\t( select ) =&gt; {\n\n\t\tconst _authorId = select( 'core\/editor' ).getCurrentPostAttribute( 'author' );\n\t\n\t\treturn select( 'core' ).getEntityRecords( 'postType', 'post', {\n\t\t\t'author': _authorId,\n\t\t\t'per_page': numberOfItems,\n\t\t\t'_embed': true\n\t\t});\n\t},\n\t[ numberOfItems ]\n);<\/code><\/pre>\n<p>Con questo codice otterrete un elenco di <code>n<\/code> articoli dello stesso autore del post corrente.<\/p>\n<p>Ora che avete l&#8217;ID dell&#8217;autore, potete usarlo anche per recuperare altri dati dal database.<\/p>\n<h3>Visualizzare i Dati dell&#8217;Autore<\/h3>\n<p>Dato che non abbiamo a disposizione alcuna documentazione, abbiamo utilizzato il codice del <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/trunk\/packages\/block-library\/src\/post-author\/edit.js\">blocco core Post Author<\/a> come riferimento.<\/p>\n<p>Per visualizzare i dati dell&#8217;autore, dovete prima importare una nuova dipendenza:<\/p>\n<pre><code class=\"language-js\">import { forEach } from 'lodash';<\/code><\/pre>\n<p>Poi, nella funzione <code>Edit<\/code>, aggiornate l&#8217;oggetto <code>attributes<\/code> come segue:<\/p>\n<pre><code class=\"language-js\">const { \n\tnumberOfItems, \n\tcolumns, \n\tdisplayExcerpt, \n\tdisplayDate, \n\tdisplayThumbnail, \n\tdisplayAuthorInfo, \n\tshowAvatar, \n\tavatarSize, \n\tshowBio \n} = attributes;<\/code><\/pre>\n<p>Una volta fatto, modificherete il codice visto nella sezione precedente per recuperare i dati dell&#8217;autore:<\/p>\n<pre><code class=\"language-js\">const { authorDetails, posts } = useSelect(\n\t( select ) =&gt; {\n\n\t\tconst _authorId = select( 'core\/editor' ).getCurrentPostAttribute( 'author' );\n\n\t\tconst authorDetails = _authorId ? select( 'core' ).getUser( _authorId ) : null;\n\t\n\t\tconst posts = select( 'core' ).getEntityRecords( 'postType', 'post', {\n\t\t\t'author': _authorId,\n\t\t\t'per_page': numberOfItems,\n\t\t\t'_embed': true\n\t\t});\n\n\t\treturn { \n\t\t\tauthorDetails: authorDetails,\n\t\t\tposts: posts\n\t\t};\n\t},\n\t[ numberOfItems ]\n);<\/code><\/pre>\n<p>Si noti che abbiamo utilizzato il <a href=\"#getusers\">selettore <code>getUser<\/code><\/a> per ottenere i dati dell&#8217;autore.<\/p>\n<p>Successivamente, potreste voler ottenere l&#8217;avatar dell&#8217;autore. Il codice seguente crea un array di elementi che contengono gli URL e le dimensioni degli avatar:<\/p>\n<pre><code class=\"language-js\">const avatarSizes = [];\nif ( authorDetails ) {\n\tforEach( authorDetails.avatar_urls, ( url, size ) =&gt; {\n\t\tavatarSizes.push( {\n\t\t\tvalue: size,\n\t\t\tlabel: `${ size } x ${ size }`,\n\t\t} );\n\t} );\n}<\/code><\/pre>\n<p>Poi aggiungerete i pannelli e i controlli della barra laterale per consentire agli utenti di personalizzare l&#8217;area dell&#8217;autore nel blocco:<\/p>\n<pre><code class=\"language-jsx\">return (\n\t&lt;&gt;\n\t\t&lt;InspectorControls&gt;\n\t\t\t&lt;PanelBody title={ __( 'Author Info', 'author-plugin' ) }&gt;\n\t\t\t\t&lt;PanelRow&gt;\n\t\t\t\t\t&lt;ToggleControl\n\t\t\t\t\t\tlabel={ __( 'Display Author Info', 'author-plugin' ) }\n\t\t\t\t\t\tchecked={ displayAuthorInfo }\n\t\t\t\t\t\tonChange={ () =&gt;\n\t\t\t\t\t\t\tsetAttributes( { displayAuthorInfo: ! displayAuthorInfo } )\n\t\t\t\t\t\t}\n\t\t\t\t\t\/&gt;\n\t\t\t\t&lt;\/PanelRow&gt;\n\t\t\t\t{ displayAuthorInfo && (\n\t\t\t\t\t&lt;&gt;\n\t\t\t\t\t\t&lt;PanelRow&gt;\n\t\t\t\t\t\t\t&lt;ToggleControl\n\t\t\t\t\t\t\t\tlabel={ __( 'Show avatar' ) }\n\t\t\t\t\t\t\t\tchecked={ showAvatar }\n\t\t\t\t\t\t\t\tonChange={ () =&gt;\n\t\t\t\t\t\t\t\t\tsetAttributes( { showAvatar: ! showAvatar } )\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\/&gt;\n\t\t\t\t\t\t\t{ showAvatar && (\n\t\t\t\t\t\t\t\t&lt;SelectControl\n\t\t\t\t\t\t\t\t\tlabel={ __( 'Avatar size' ) }\n\t\t\t\t\t\t\t\t\tvalue={ avatarSize }\n\t\t\t\t\t\t\t\t\toptions={ avatarSizes }\n\t\t\t\t\t\t\t\t\tonChange={ ( size ) =&gt; {\n\t\t\t\t\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\t\t\t\t\tavatarSize: Number( size ),\n\t\t\t\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\/&gt;\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t&lt;\/PanelRow&gt;\n\t\t\t\t\t\t&lt;PanelRow&gt;\n\t\t\t\t\t\t\t&lt;ToggleControl\n\t\t\t\t\t\t\t\tlabel={ __( 'Show Bio', 'author-plugin' ) }\n\t\t\t\t\t\t\t\tchecked={ showBio }\n\t\t\t\t\t\t\t\tonChange={ () =&gt;\n\t\t\t\t\t\t\t\t\tsetAttributes( { showBio: ! showBio } )\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\/&gt;\n\t\t\t\t\t\t&lt;\/PanelRow&gt;\n\t\t\t\t\t&lt;\/&gt;\n\t\t\t\t) }\n\t\t\t&lt;\/PanelBody&gt;\n\t\t\t...\n\t\t&lt;\/InspectorControls&gt;\n\t\t...\n\t&lt;\/&gt;\n);<\/code><\/pre>\n<p>L&#8217;immagine qui sotto mostra la barra laterale delle impostazioni aggiornata:<\/p>\n<figure id=\"attachment_120379\" aria-describedby=\"caption-attachment-120379\" style=\"width: 1908px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-120379 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/author-info-settings-panel.jpg\" alt=\"Il pannello delle impostazioni delle Info Autore.\" width=\"1908\" height=\"960\"><figcaption id=\"caption-attachment-120379\" class=\"wp-caption-text\">Il pannello delle impostazioni delle Info Autore.<\/figcaption><\/figure>\n<p>Infine, potete aggiungere la sezione dell&#8217;autore al vostro blocco:<\/p>\n<pre><code class=\"language-jsx\">return (\n\t&lt;&gt;\n\t\t&lt;InspectorControls&gt;\n\t\t...\n\t\t&lt;\/InspectorControls&gt;\n\n\t\t&lt;div { ...useBlockProps() }&gt;\n\t\t\t{ displayAuthorInfo  && authorDetails && (\n\t\t\t\t&lt;div className=\"wp-block-author-box-author-plugin__author\"&gt;\n\t\t\t\t\t{ showAvatar && (\n\t\t\t\t\t\t&lt;div className=\"wp-block-author-box-author-plugin__avatar\"&gt;\n\t\t\t\t\t\t\t&lt;img\n\t\t\t\t\t\t\t\twidth={ avatarSize }\n\t\t\t\t\t\t\t\tsrc={\n\t\t\t\t\t\t\t\t\tauthorDetails.avatar_urls[\n\t\t\t\t\t\t\t\t\t\tavatarSize\n\t\t\t\t\t\t\t\t\t]\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\talt={ authorDetails.name }\n\t\t\t\t\t\t\t\/&gt;\n\t\t\t\t\t\t&lt;\/div&gt;\n\t\t\t\t\t) }\n\t\t\t\t\t&lt;div className='wp-block-author-box-author-plugin__author-content'&gt;\n\t\t\t\t\t\t&lt;p className='wp-block-author-box-author-plugin__name'&gt;\n\t\t\t\t\t\t\t{ authorDetails.name }\n\t\t\t\t\t\t&lt;\/p&gt;\n\t\t\t\t\t\t{ showBio &&\n\t\t\t\t\t\t\t\/\/ https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Operators\/Optional_chaining\n\t\t\t\t\t\t\tauthorDetails?.description &&\n\t\t\t\t\t\t\tauthorDetails.description.length &gt; 0 && (\n\t\t\t\t\t\t\t&lt;p className='wp-block-author-box-author-plugin__description'&gt;{ authorDetails.description }&lt;\/p&gt;\n\t\t\t\t\t\t) }\n\t\t\t\t\t&lt;\/div&gt;\n\t\t\t\t&lt;\/div&gt;\n\t\t\t)}\n\t\t\t&lt;ul&gt;\n\t\t\t...\n\t\t\t&lt;\/ul&gt;\n\t\t&lt;\/div&gt;\n\t&lt;\/&gt;\n);<\/code><\/pre>\n<p>L&#8217;immagine che segue mostra cosa viene visualizzato sullo schermo.<\/p>\n<figure id=\"attachment_120380\" aria-describedby=\"caption-attachment-120380\" style=\"width: 1912px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-120380 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/author-info-with-settings.jpg\" alt=\"Sezione dei dati dell'autore.\" width=\"1912\" height=\"844\"><figcaption id=\"caption-attachment-120380\" class=\"wp-caption-text\">Sezione dei dati dell&#8217;autore.<\/figcaption><\/figure>\n<p>Ora salvate il file <em>edit.js<\/em> ed eseguite i test. Il vostro blocco dovrebbe includere elementi diversi a seconda delle impostazioni del blocco.<\/p>\n<figure id=\"attachment_120384\" aria-describedby=\"caption-attachment-120384\" style=\"width: 1912px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-120384 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/author-info-with-settings-no-bio-2.jpg\" alt=\"I dati dell'autore non mostrano la biografia.\" width=\"1912\" height=\"484\"><figcaption id=\"caption-attachment-120384\" class=\"wp-caption-text\">I dati dell&#8217;autore non mostrano la biografia.<\/figcaption><\/figure>\n<p>Manca ancora un&#8217;ultima cosa: il numero di colonne per la visualizzazione degli articoli.<\/p>\n<h3>Cambiamo il Numero di Colonne<\/h3>\n<p>Per dare all&#8217;utente la possibilit\u00e0 di mostrare le anteprime degli articoli in colonne, abbiamo definito l&#8217;attributo <code>columns<\/code> nel file <em>block.json<\/em>. Abbiamo anche incluso un attributo <code>columns<\/code> nello script e creato un controllo delle impostazioni per consentire agli utenti di modificare il numero di colonne, anche se questa modifica non ha alcun effetto al momento.<\/p>\n<p>Nel codice JSX precedente dovreste aver notato che abbiamo aggiunto delle classi CSS a diversi elementi:<\/p>\n<p>Classi assegnate agli elementi della sezione Autore:<\/p>\n<ul>\n<li><code>wp-block-author-box-author-plugin__author<\/code><\/li>\n<li><code>wp-block-author-box-author-plugin__avatar<\/code><\/li>\n<li><code>wp-block-author-box-author-plugin__author-content<\/code><\/li>\n<li><code>wp-block-author-box-author-plugin__name<\/code><\/li>\n<li><code>wp-block-author-box-author-plugin__description<\/code><\/li>\n<\/ul>\n<p>Classi assegnate agli elementi della sezione Contenuto:<\/p>\n<ul>\n<li><code>wp-block-author-box-author-plugin__post-items<\/code><\/li>\n<li><code>wp-block-author-box-author-plugin__post-thumbnail<\/code><\/li>\n<li><code>wp-block-author-box-author-plugin__post-title<\/code><\/li>\n<li><code>wp-block-author-box-author-plugin__post-date<\/code><\/li>\n<li><code>wp-block-author-box-author-plugin__post-excerpt<\/code><\/li>\n<\/ul>\n<p>Manca ancora una classe. Il nome di questa classe sar\u00e0 generato dinamicamente per riflettere il numero di colonne impostato dall&#8217;utente.<\/p>\n<p>Tornate al file <code>Edit.js<\/code> e modificate l&#8217;elemento <code>ul<\/code> come segue:<\/p>\n<pre><code class=\"language-jsx\">&lt;ul className={ `wp-block-author-box-author-plugin__post-items columns-${ columns }` }&gt;\n\t...\n&lt;\/ul&gt;<\/code><\/pre>\n<p>Abbiamo aggiunto una nuova classe <code>columns-${ columns }<\/code> secondo la sintassi dei <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Template_literals\">Template literals<\/a> per inserire un&#8217;espressione all&#8217;interno di una stringa. In questo modo, l&#8217;attributo collegato all&#8217;elemento <code>ul<\/code> dipender\u00e0 dalle impostazioni dell&#8217;utente (ad esempio <code>columns-1<\/code>, <code>columns-2<\/code>, ecc.).<\/p>\n<p>Ora aprite il file <code>style.scss<\/code> e sostituite il codice esistente con il seguente:<\/p>\n<pre><code class=\"language-css\">.wp-block-author-box-author-plugin {\n\tbackground-color: #21759b;\n\tcolor: #fff;\n\tpadding: .6em;\n\tul.wp-block-author-box-author-plugin__post-items {\n\t\tpadding: 0;\n\t\tlist-style-type: none;\n\t\tdisplay: grid;\n\t\tgap: .5em;\n\t\t@for $i from 2 through 4 {\n\t\t\t&.columns-#{ $i } {\n\t\t\t\tgrid-template-columns: repeat(#{ $i }, 1fr);\n\t\t\t}\n\t\t}\n\t\tli {\n\t\t\tlist-style: none;\n\t\t\timg.wp-block-author-box-author-plugin__post-thumbnail {\n\t\t\t\theight: auto;\n\t\t\t\tmax-width: 100%;\n\t\t\t}\n\t\t}\n\t\t\n\t}\n}\n.wp-block-author-box-author-plugin__author {\n\tdisplay: flex;\n    flex-wrap: wrap;\n}\n\n.wp-block-author-box-author-plugin__avatar {\n\tmargin-right: 1em;\n}\n\n.wp-block-author-box-author-plugin__author-content {\n\tflex-basis: 0;\n    flex-grow: 1;\n}<\/code><\/pre>\n<p>Non ci addentreremo in questo codice perch\u00e9 non rientra negli scopi di questo articolo. Ma chi volesse approfondire pu\u00f2 fare riferimento alle seguenti risorse:<\/p>\n<ul>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/CSS_Grid_Layout\">CSS Grid Layout<\/a><\/li>\n<li><a href=\"https:\/\/learncssgrid.com\/\">Learn CSS Grid<\/a><\/li>\n<li><a href=\"https:\/\/sass-lang.com\/documentation\/at-rules\/control\/for\">The @for rule in Sass<\/a><\/li>\n<li><a href=\"https:\/\/sass-lang.com\/documentation\/style-rules#nesting\">Nesting in Sass<\/a><\/li>\n<\/ul>\n<figure id=\"attachment_120388\" aria-describedby=\"caption-attachment-120388\" style=\"width: 2880px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-120388 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/author-block-editor-view.jpg\" alt=\"Il blocco Autore nell'editor.\" width=\"2880\" height=\"1800\"><figcaption id=\"caption-attachment-120388\" class=\"wp-caption-text\">Il blocco Autore nell&#8217;editor.<\/figcaption><\/figure>\n<p>E questo \u00e8 tutto per il rendering del blocco nell&#8217;editor.<\/p>\n<h2>Creare il Blocco da Rendere sulla Pagina<\/h2>\n<p>Ora che il codice per il rendering del blocco nell&#8217;editor \u00e8 completo, possiamo passare a costruire il blocco per il rendering sul front-end.<\/p>\n<p>Come abbiamo detto in precedenza, quando si tratta di blocchi dinamici, il file del plugin \u00e8 responsabile della generazione dell&#8217;HTML da renderizzare sul front-end.<\/p>\n<p>Quindi, aprite il file principale del vostro plugin (<em>author-plugin.php<\/em> nel nostro esempio).<\/p>\n<p>La prima cosa da fare \u00e8 rendere disponibili gli attributi del blocco alla funzione PHP di WordPress. Nel vostro file PHP, modificate la definizione della funzione come segue:<\/p>\n<pre><code class=\"language-php\">function author_box_author_plugin_render_author_content( $attr ) {\n\t...\n}<\/code><\/pre>\n<p>Ora potete utilizzare le funzioni di WordPress per recuperare e manipolare i dati. Ad esempio, potete utilizzare <code>get_posts<\/code> per recuperare gli ultimi articoli del blog (per saperne di pi\u00f9, si legga il nostro articolo di approfondimento sulla <a href=\"https:\/\/kinsta.com\/it\/blog\/wordpress-get_posts\/\">funzione<code>get_posts<\/code><\/a>):<\/p>\n<pre><code class=\"language-php\">function author_box_author_plugin_render_author_content( $attr ) {\n\t$args = array(\n\t\t'numberposts'\t=&gt; $attr['numberOfItems'],\n\t);\n\t$my_posts = get_posts( $args );\n\t\n\tif( ! empty( $my_posts ) ){\n\t\t$output = '&lt;ul&gt;';\n\t\tforeach ( $my_posts as $p ){\n\t\t\t$output .= '&lt;li&gt;&lt;a href=\"' . esc_url( get_permalink( $p-&gt;ID ) ) . '\"&gt;' \n\t\t\t. $p-&gt;post_title . '&lt;\/a&gt;&lt;\/li&gt;';\n\t\t}\n\t\t$output .= '&lt;\/ul&gt;';\n\t}\n\treturn $output ?? '&lt;strong&gt;Sorry. No posts matching your criteria!&lt;\/strong&gt;';\n}<\/code><\/pre>\n<p>La funzione qui sopra recupera gli ultimi <code>numberOfItems<\/code> post del blog dal database di WordPress (di default <code>post_type<\/code> \u00e8 impostato su <code>post<\/code>) e restituisce un array di oggetti <code>$post<\/code>. Poi itera sull&#8217;array per costruire gli elementi dell&#8217;elenco.<\/p>\n<p>Se ispezionate l&#8217;output HTML, noterete che si tratta di un semplice elenco di post, come quello mostrato nell&#8217;immagine che segue:<\/p>\n<figure id=\"attachment_120521\" aria-describedby=\"caption-attachment-120521\" style=\"width: 1866px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-120521 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/list-of-posts.jpg\" alt=\"Un semplice elenco di post.\" width=\"1866\" height=\"732\"><figcaption id=\"caption-attachment-120521\" class=\"wp-caption-text\">Un semplice elenco di post.<\/figcaption><\/figure>\n<p>Nell&#8217;articolo precedente abbiamo accennato all&#8217;utilizzo dell&#8217;hook React <code>useBlockProps<\/code> per contrassegnare <a href=\"https:\/\/kinsta.com\/it\/blog\/blocchi-gutenberg\/#import-components\">l&#8217;elemento wrapper<\/a> del blocco nel codice JSX. Dovrete fare lo stesso nella vostra funzione PHP.<\/p>\n<p>A questo scopo, WordPress mette a disposizione la <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/get_block_wrapper_attributes\/\">funzione <code>get_block_wrapper_attributes<\/code><\/a>.<\/p>\n<p>Quindi modificate il vostro codice PHP come segue:<\/p>\n<pre><code class=\"language-php\">function author_box_author_plugin_render_author_content( $attr ) {\n\t$args = array(\n\t\t'numberposts'\t=&gt; $attr['numberOfItems']\n\t);\n\t$my_posts = get_posts( $args );\n\t\n\tif( ! empty( $my_posts ) ){\n\t\t$output = '&lt;div ' . get_block_wrapper_attributes() . '&gt;';\n\t\t$output .= '&lt;ul&gt;';\n\t\tforeach ( $my_posts as $p ){\n\t\t\t\n\t\t\t$title = $p-&gt;post_title ? $p-&gt;post_title : 'Default title';\n\t\t\t$url = esc_url( get_permalink( $p-&gt;ID ) );\n\n\t\t\t$output .= '&lt;li&gt;';\n\t\t\t$output .= '&lt;a href=\"' . $url . '\"&gt;' . $title . '&lt;\/a&gt;';\n\t\t\t$output .= '&lt;\/li&gt;';\n\t\t}\n\t\t$output .= '&lt;\/ul&gt;';\n\t\t$output .= '&lt;\/div&gt;';\n\t}\n\treturn $output ?? '&lt;strong&gt;Sorry. No posts matching your criteria!&lt;\/strong&gt;';\n}<\/code><\/pre>\n<p>Ora \u00e8 stata assegnata una <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/get_block_wrapper_attributes\/\">classe <code>wp-block-author-box-author-plugin<\/code><\/a> all&#8217;elemento container e il blocco ha un colore di sfondo diverso.<\/p>\n<p>La funzione <code>get_posts<\/code> riceve i dati di <code>WP_Posts<\/code> e il ciclo <code>foreach<\/code> costruisce gli elementi dell&#8217;elenco (si veda anche <a href=\"https:\/\/kinsta.com\/it\/blog\/wordpress-get_posts\/#display\">Come Visualizzare i Dati Restituiti da get_posts<\/a>).<\/p>\n<figure id=\"attachment_120520\" aria-describedby=\"caption-attachment-120520\" style=\"width: 1866px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-120520 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/list-of-posts-2.jpg\" alt=\"Un elenco di post con assegnata una classe CSS.\" width=\"1866\" height=\"650\"><figcaption id=\"caption-attachment-120520\" class=\"wp-caption-text\">Un elenco di post con assegnata una classe CSS.<\/figcaption><\/figure>\n<h3>Immagini in Primo Piano, Data ed Estratto<\/h3>\n<p>Successivamente, dovrete aggiungere le miniature dei post, le date e gli estratti. Nello stesso file, modificate il codice PHP come segue:<\/p>\n<pre><code class=\"language-php\">function author_box_author_plugin_render_author_content( $attr ) {\n\t$args = array(\n\t\t'numberposts'\t=&gt; $attr['numberOfItems']\n\t);\n\t$my_posts = get_posts( $args );\n\t\n\tif( ! empty( $my_posts ) ){\n\t\t$output = '&lt;div ' . get_block_wrapper_attributes() . '&gt;';\n\t\t$output .= '&lt;ul class=\"wp-block-author-box-author-plugin__post-items columns-\"&gt;';\n\n\t\tforeach ( $my_posts as $p ){\n\t\t\t\n\t\t\t$title = $p-&gt;post_title ? $p-&gt;post_title : 'Default title';\n\t\t\t$url = esc_url( get_permalink( $p-&gt;ID ) );\n\t\t\t$thumbnail = has_post_thumbnail( $p-&gt;ID ) ? get_the_post_thumbnail( $p-&gt;ID, 'medium' ) : '';\n\n\t\t\t$output .= '&lt;li&gt;';\n\t\t\tif( ! empty( $thumbnail ) && $attr['displayThumbnail'] ){\n\t\t\t\t$output .= $thumbnail;\n\t\t\t}\n\t\t\t$output .= '&lt;h5&gt;&lt;a href=\"' . $url . '\"&gt;' . $title . '&lt;\/a&gt;&lt;\/h5&gt;';\n\t\t\tif( $attr['displayDate'] ){\n\t\t\t\t$output .= '&lt;time datetime=\"' . esc_attr( get_the_date( 'c', $p ) ) . '\"&gt;' . esc_html( get_the_date( '', $p ) ) . '&lt;\/time&gt;';\n\t\t\t}\n\t\t\tif( get_the_excerpt( $p ) && $attr['displayExcerpt'] ){\n\t\t\t\t$output .= '&lt;p&gt;' . get_the_excerpt( $p ) . '&lt;\/p&gt;';\n\t\t\t}\n\t\t\t$output .= '&lt;\/li&gt;';\n\t\t}\n\t\t$output .= '&lt;\/ul&gt;';\n\t\t$output .= '&lt;\/div&gt;';\n\t}\n\treturn $output ?? '&lt;strong&gt;Sorry. No posts matching your criteria!&lt;\/strong&gt;';\n}<\/code><\/pre>\n<p>Il ciclo <code>foreach<\/code> esegue l&#8217;iterazione dell&#8217;array <code>$my_posts<\/code>. Ad ogni iterazione, diverse condizioni controllano i valori degli attributi e creano l&#8217;output di conseguenza.<\/p>\n<p>Ora guardate l&#8217;output sullo schermo:<\/p>\n<figure id=\"attachment_120649\" aria-describedby=\"caption-attachment-120649\" style=\"width: 2192px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-120649 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/list-of-posts-with-featured-images-date-excerpt-1.jpg\" alt=\"Un elenco di post con immagini in evidenza, date ed estratti.\" width=\"2192\" height=\"1220\"><figcaption id=\"caption-attachment-120649\" class=\"wp-caption-text\">Un elenco di post con immagini in evidenza, date ed estratti.<\/figcaption><\/figure>\n<p>Ora potete eseguire i vostri test. Cambiate le impostazioni di date, estratti e miniature e verificate come cambia il contenuto del blocco sul front-end.<\/p>\n<h3>Visualizziamo i Post in Colonne<\/h3>\n<p>Nel nostro codice JavaScript abbiamo utilizzato una classe <code>columns-${ columns }<\/code> per visualizzare le anteprime dei post in colonne. Ora dobbiamo fare lo stesso in PHP.<\/p>\n<p>Per farlo, dovete semplicemente aggiungere queste due righe di codice:<\/p>\n<pre><code class=\"language-php\">$num_cols = $attr['columns'] &gt; 1 ? strval( $attr['columns'] ) : '1';\n\n$output .= '&lt;ul class=\"wp-block-author-box-author-plugin__post-items columns-' . $num_cols . '\"&gt;';<\/code><\/pre>\n<p>Questo aggiunger\u00e0 una classe <code>columns-n<\/code> all&#8217;elemento <code>ul<\/code> che contiene le anteprime dei post. Ora il numero di colonne visualizzate nella pagina dovrebbe corrispondere al numero di colonne memorizzato nelle impostazioni del blocco.<\/p>\n<h3>Il Riquadro Autore<\/h3>\n<p>Infine, dovrete creare il riquadro contenente le informazioni sull&#8217;autore, tra cui l&#8217;avatar, il nome e la descrizione.<\/p>\n<p>All&#8217;interno della funzione di callback, dovrete aggiungere una serie di condizioni per verificare il valore corrente di ogni attributo:<\/p>\n<pre><code class=\"language-php\">if( $attr['displayAuthorInfo'] ){\n\t$output .= '&lt;div class=\"wp-block-author-box-author-plugin__author\"&gt;';\n\t\n\tif( $attr['showAvatar'] ){\n\t\t$output .= '&lt;div class=\"wp-block-author-box-author-plugin__avatar\"&gt;' \n\t\t\t. get_avatar( get_the_author_meta( 'ID' ), $attr['avatarSize'] ) \n\t\t\t. '&lt;\/div&gt;';\n\t}\n\n\t$output .= '&lt;div class=\"wp-block-author-box-author-plugin__author-content\"&gt;';\n\t\n\t$output .= '&lt;div class=\"wp-block-author-box-author-plugin__name\"&gt;' \n\t\t. get_the_author_meta( 'display_name' ) \n\t\t. '&lt;\/div&gt;';\n\n\tif( $attr['showBio'] ){\n\t\t$output .= '&lt;div class=\"wp-block-author-box-author-plugin__description\"&gt;' \n\t\t\t. get_the_author_meta( 'description' ) \n\t\t\t. '&lt;\/div&gt;';\n\t}\n\n\t$output .= '&lt;\/div&gt;';\n\t$output .= '&lt;\/div&gt;';\n}<\/code><\/pre>\n<p>Il codice \u00e8 piuttosto semplice. Controlla il valore corrente di ogni attributo e, se \u00e8 <code>true<\/code>, allora genera l&#8217;HTML necessario.<\/p>\n<p>Ora salvate il vostro file PHP e confrontate il blocco nell&#8217;editor con lo stesso blocco sul front-end.<\/p>\n<figure id=\"attachment_120952\" aria-describedby=\"caption-attachment-120952\" style=\"width: 2880px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-120952 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/full-block.jpg\" alt=\"Il nostro blocco personalizzato nell'editor di blocchi.\" width=\"2880\" height=\"1800\"><figcaption id=\"caption-attachment-120952\" class=\"wp-caption-text\">Il nostro blocco personalizzato nell&#8217;editor di blocchi.<\/figcaption><\/figure>\n<p>Troverete il codice completo del blocco di esempio in <a href=\"https:\/\/gist.github.com\/carlodaniele\/27e292fbbe4b897ca3bda4539dfd74df\">questo Gist pubblico<\/a>.<\/p>\n\n<h2>Risorse Consigliate per lo Sviluppo di Blocchi Dinamici<\/h2>\n<p>Se leggendo questo articolo avete drizzato le orecchie e avete iniziato a riconoscere le opportunit\u00e0 di sviluppo professionale che possono nascere imparando a creare blocchi Gutenberg, il nostro consiglio \u00e8 quello di continuare a esplorare e acquisire nuove competenze sulle tecnologie alla base dello sviluppo dei blocchi.<\/p>\n<p>Sebbene manchi ancora una documentazione ufficiale completa e affidabile, esistono comunque ottime risorse, sia gratuite che a pagamento, che abbiamo consultato durante la stesura di questo articolo. Tra le tante risorse disponibili, vi consigliamo le seguenti:<\/p>\n<p><strong>Risorse ufficiali<\/strong><\/p>\n<ul>\n<li><a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/trunk\/packages\/data\/README.md\">Data<\/a><\/li>\n<li><a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/trunk\/packages\/core-data\/README.md\">Cora Data<\/a><\/li>\n<li><a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/block-tutorial\/creating-dynamic-blocks\/\">Creating dynamic blocks<\/a><\/li>\n<li><a href=\"https:\/\/learn.wordpress.org\/workshop\/intro-to-gutenberg-block-development\/\">Intro to Gutenberg Block Development<\/a><\/li>\n<li><a href=\"https:\/\/www.meetup.com\/en-US\/wordpress-social-learning\/\">WordPress Social Learning<\/a> su MeetUp<\/li>\n<\/ul>\n<p><strong>Tutorial Consigliati dai Contributor al Core di WordPress<\/strong><\/p>\n<ul>\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 (@<a href=\"https:\/\/twitter.com\/ryanwelcher\">ryanwelcher<\/a>)<\/li>\n<li><a href=\"https:\/\/unfoldingneurons.com\/2020\/wordpress-data-series-overview-and-introduction\">A Practical Overview of the @wordpress\/data API<\/a> di Darren Ethier (@<a href=\"https:\/\/twitter.com\/nerrad\">nerrad<\/a>)<\/li>\n<\/ul>\n<p><strong>Risorse su JavaScript, React e Redux<\/strong><\/p>\n<ul>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Tutorials#javascript_tutorials\">JavaScript Tutorials<\/a> di MDN<\/li>\n<li><a href=\"https:\/\/reactjs.org\/docs\/getting-started.html\">Getting Started with React<\/a> (ufficiale)<\/li>\n<li><a href=\"https:\/\/redux.js.org\/tutorials\/essentials\/part-1-overview-concepts\">Redux Tutorial<\/a> (ufficiale)<\/li>\n<\/ul>\n<p><strong>Risorse correlate di Kinsta<\/strong><\/p>\n<ul>\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\/node-js\/\">Cos\u2019\u00c8 Node.js e Perch\u00e9 Utilizzarlo<\/a><\/li>\n<li><a href=\"https:\/\/kinsta.com\/it\/blog\/come-installare-node-js\/\">Come Installare Node.js e npm su Windows, macOS e Linux<\/a><\/li>\n<li><a href=\"https:\/\/kinsta.com\/it\/blog\/debug-node\/\">Come Eseguire il Debug del Codice in Node.js Con Diversi Strumenti<\/a><\/li>\n<li><a href=\"https:\/\/kinsta.com\/it\/blog\/node-js-vs-php\/\">Node.js vs PHP: Un Confronto Dettagliato<\/a><\/li>\n<li><a href=\"https:\/\/kinsta.com\/it\/blog\/app-node-js\/\">Le 10 App Node.js Pi\u00f9 Popolari nel 2022<\/a><\/li>\n<li><a href=\"https:\/\/kinsta.com\/it\/blog\/angular-vs-react\/\">Angular vs React: Un Testa a Testa Dettagliato<\/a><\/li>\n<\/ul>\n<h2>Riepilogo<\/h2>\n<p>Siamo giunti alla fine di questo (secondo) lungo viaggio nello sviluppo dei blocchi di Gutenberg.<\/p>\n<p>In questo articolo abbiamo trattato alcuni argomenti avanzati, come l&#8217;Application State e gli store Redux. Ma speriamo che ora abbiate una migliore comprensione dello sviluppo dei blocchi in generale.<\/p>\n<p>Certo, le competenze su Node.js, Webpack, <a href=\"https:\/\/kinsta.com\/it\/blog\/traspiling-php\/#what-is-transpiling\">Babel<\/a>, React e Redux sono essenziali quando si tratta di costruire blocchi Gutenberg avanzati, ma non \u00e8 necessario essere un ninja di React per iniziare. Imparare a sviluppare blocchi Gutenberg non deve necessariamente essere complicato. Basta farlo con la giusta motivazione e seguendo un percorso di apprendimento adeguato.<\/p>\n<p>Speriamo che questo articolo e il <a href=\"https:\/\/kinsta.com\/it\/blog\/blocchi-gutenberg\/\">precedente<\/a> vi forniscano la mappa giusta per trovare la vostra strada e iniziare subito a sviluppare per Gutenberg.<\/p>\n<p><em>Ora tocca a voi! Avete gi\u00e0 creato dei blocchi dinamici? Avete qualche esempio da condividere con noi? E quali sono stati i maggiori ostacoli nella vostra esperienza? Lasciate un commento qui sotto.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Siete ancora perplessi su Gutenberg? Oppure siete tra quelli che credono fermamente nelle potenzialit\u00e0 dell&#8217;editor dei blocchi e vogliono scoprire fino a che punto sia possibile &#8230;<\/p>\n","protected":false},"author":36,"featured_media":58906,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[25641,79,25635],"topic":[25873],"class_list":["post-58805","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-block-editor","tag-gutenberg","tag-sviluppo","topic-sviluppo-wordpress"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Come Creare Blocchi Dinamici per Gutenberg<\/title>\n<meta name=\"description\" content=\"Cosa aspetti a diventare sviluppatore di blocchi. In questa guida imparerai tutto ci\u00f2 che occorre sapere per creare blocchi dinamici da zero.\" \/>\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\/blocchi-dinamici\/\" \/>\n<meta property=\"og:locale\" content=\"it_IT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Come Creare Blocchi Dinamici per Gutenberg\" \/>\n<meta property=\"og:description\" content=\"Cosa aspetti a diventare sviluppatore di blocchi. In questa guida imparerai tutto ci\u00f2 che occorre sapere per creare blocchi dinamici da zero.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/it\/blog\/blocchi-dinamici\/\" \/>\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=\"2022-08-08T06:59:20+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-12-07T12:03:53+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2022\/08\/blocchi-dinamici.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=\"Cosa aspetti a diventare sviluppatore di blocchi. In questa guida imparerai tutto ci\u00f2 che occorre sapere per creare blocchi dinamici da zero.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2022\/08\/blocchi-dinamici.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=\"42 minuti\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/blocchi-dinamici\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/blocchi-dinamici\/\"},\"author\":{\"name\":\"Carlo Daniele\",\"@id\":\"https:\/\/kinsta.com\/it\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63\"},\"headline\":\"Come Creare Blocchi Dinamici per Gutenberg\",\"datePublished\":\"2022-08-08T06:59:20+00:00\",\"dateModified\":\"2022-12-07T12:03:53+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/blocchi-dinamici\/\"},\"wordCount\":6380,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/it\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/blocchi-dinamici\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2022\/08\/blocchi-dinamici.jpeg\",\"keywords\":[\"Block Editor\",\"Gutenberg\",\"sviluppo\"],\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/it\/blog\/blocchi-dinamici\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/blocchi-dinamici\/\",\"url\":\"https:\/\/kinsta.com\/it\/blog\/blocchi-dinamici\/\",\"name\":\"Come Creare Blocchi Dinamici per Gutenberg\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/it\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/blocchi-dinamici\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/blocchi-dinamici\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2022\/08\/blocchi-dinamici.jpeg\",\"datePublished\":\"2022-08-08T06:59:20+00:00\",\"dateModified\":\"2022-12-07T12:03:53+00:00\",\"description\":\"Cosa aspetti a diventare sviluppatore di blocchi. In questa guida imparerai tutto ci\u00f2 che occorre sapere per creare blocchi dinamici da zero.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/blocchi-dinamici\/#breadcrumb\"},\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/it\/blog\/blocchi-dinamici\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/blocchi-dinamici\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2022\/08\/blocchi-dinamici.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2022\/08\/blocchi-dinamici.jpeg\",\"width\":1460,\"height\":730,\"caption\":\"Come Creare Blocchi Dinamici per Gutenberg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/blocchi-dinamici\/#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 Creare Blocchi Dinamici per 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 Creare Blocchi Dinamici per Gutenberg","description":"Cosa aspetti a diventare sviluppatore di blocchi. In questa guida imparerai tutto ci\u00f2 che occorre sapere per creare blocchi dinamici da zero.","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\/blocchi-dinamici\/","og_locale":"it_IT","og_type":"article","og_title":"Come Creare Blocchi Dinamici per Gutenberg","og_description":"Cosa aspetti a diventare sviluppatore di blocchi. In questa guida imparerai tutto ci\u00f2 che occorre sapere per creare blocchi dinamici da zero.","og_url":"https:\/\/kinsta.com\/it\/blog\/blocchi-dinamici\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstaitalia\/","article_published_time":"2022-08-08T06:59:20+00:00","article_modified_time":"2022-12-07T12:03:53+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2022\/08\/blocchi-dinamici.jpeg","type":"image\/jpeg"}],"author":"Carlo Daniele","twitter_card":"summary_large_image","twitter_description":"Cosa aspetti a diventare sviluppatore di blocchi. In questa guida imparerai tutto ci\u00f2 che occorre sapere per creare blocchi dinamici da zero.","twitter_image":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2022\/08\/blocchi-dinamici.jpeg","twitter_creator":"@carlodaniele","twitter_site":"@Kinsta_IT","twitter_misc":{"Scritto da":"Carlo Daniele","Tempo di lettura stimato":"42 minuti"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/it\/blog\/blocchi-dinamici\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/it\/blog\/blocchi-dinamici\/"},"author":{"name":"Carlo Daniele","@id":"https:\/\/kinsta.com\/it\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63"},"headline":"Come Creare Blocchi Dinamici per Gutenberg","datePublished":"2022-08-08T06:59:20+00:00","dateModified":"2022-12-07T12:03:53+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/it\/blog\/blocchi-dinamici\/"},"wordCount":6380,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/it\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/it\/blog\/blocchi-dinamici\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2022\/08\/blocchi-dinamici.jpeg","keywords":["Block Editor","Gutenberg","sviluppo"],"inLanguage":"it-IT","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/it\/blog\/blocchi-dinamici\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/it\/blog\/blocchi-dinamici\/","url":"https:\/\/kinsta.com\/it\/blog\/blocchi-dinamici\/","name":"Come Creare Blocchi Dinamici per Gutenberg","isPartOf":{"@id":"https:\/\/kinsta.com\/it\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/it\/blog\/blocchi-dinamici\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/it\/blog\/blocchi-dinamici\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2022\/08\/blocchi-dinamici.jpeg","datePublished":"2022-08-08T06:59:20+00:00","dateModified":"2022-12-07T12:03:53+00:00","description":"Cosa aspetti a diventare sviluppatore di blocchi. In questa guida imparerai tutto ci\u00f2 che occorre sapere per creare blocchi dinamici da zero.","breadcrumb":{"@id":"https:\/\/kinsta.com\/it\/blog\/blocchi-dinamici\/#breadcrumb"},"inLanguage":"it-IT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/it\/blog\/blocchi-dinamici\/"]}]},{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/kinsta.com\/it\/blog\/blocchi-dinamici\/#primaryimage","url":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2022\/08\/blocchi-dinamici.jpeg","contentUrl":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2022\/08\/blocchi-dinamici.jpeg","width":1460,"height":730,"caption":"Come Creare Blocchi Dinamici per Gutenberg"},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/it\/blog\/blocchi-dinamici\/#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 Creare Blocchi Dinamici per 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\/58805","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=58805"}],"version-history":[{"count":9,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/posts\/58805\/revisions"}],"predecessor-version":[{"id":62671,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/posts\/58805\/revisions\/62671"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/58805\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/58805\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/58805\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/58805\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/58805\/translations\/de"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/58805\/translations\/es"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/58805\/translations\/nl"},{"href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/58805\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/media\/58906"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/media?parent=58805"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/tags?post=58805"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/topic?post=58805"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}