Questo articolo presenta l’API Block Bindings, mostra come funziona con una semplice demo e getta uno sguardo sul futuro dell’evoluzione dell’API.<\/p>\n
Perch\u00e9 l’API Block Bindings \u00e8 uno strumento che cambia le carte in tavola<\/h2>\n
I campi personalizzati<\/a> fanno parte del core di WordPress da anni. Apportano dati dinamici ai post statici e offrono agli sviluppatori maggiori possibilit\u00e0 di personalizzazione. Tuttavia, la procedura per utilizzarli \u00e8 macchinosa.<\/p>\n \u00c8 necessario utilizzare la funzione Tutti i dati dei campi personalizzati di un post vengono salvati come meta del post<\/a>. Tuttavia, non esisteva un modo diretto per visualizzare i risultati. Per farlo era necessario un plugin e\/o l’aggiunta di codice<\/a> al tema. Questa soluzione non solo \u00e8 pi\u00f9 difficile dal punto di vista della programmazione, ma rappresenta anche un ulteriore debito tecnico da gestire.<\/p>\n L’introduzione dell’Editor a blocchi e dei temi a blocchi<\/a> non ha aiutato la situazione. I dati dei campi personalizzati non potevano essere visualizzati in nessuno dei blocchi principali inclusi in WordPress e le stesse limitazioni si applicavano ai temi dei blocchi. Questo potrebbe essere uno dei motivi principali per cui alcuni sviluppatori sono rimasti fedeli all’editor classico e\/o ai temi classici<\/a>.<\/p>\n L’API Block Bindings porta questa funzionalit\u00e0 su WordPress. Finalmente, non avrete bisogno di plugin per visualizzare i dati. L’API associa una fonte di dati a blocchi specifici come Pulsante<\/a>, Titolo<\/a>, Immagine<\/a> e Paragrafo<\/a>, aprendo un nuovo mondo di opzioni di personalizzazione per i temi a blocchi e l’Editor a blocchi.<\/p>\n Non \u00e8 in grado di duplicare completamente le funzionalit\u00e0 della scrittura di PHP o dell’utilizzo di un plugin per campi personalizzati. Tuttavia, \u00e8 un passo nella giusta direzione. E in alcuni casi potrebbe essere tutto ci\u00f2 che vi serve.<\/p>\n Come funziona l’API Block Bindings? Abbiamo messo insieme un semplice esempio di come pu\u00f2 essere utile.<\/p>\n Prima di entrare nel dettaglio, ecco una panoramica del nostro progetto:<\/p>\n Ora che abbiamo il nostro piano, mettiamo in azione l’API WordPress Block Bindings.<\/p>\n WordPress nasconde i campi personalizzati per impostazione predefinita, quindi il primo passo \u00e8 quello di abilitarli nell’editor a blocchi.<\/p>\n Per abilitare i campi personalizzati, apriamo il menu Opzioni<\/strong> (icona \u22ee) nell’Editor a blocchi. Poi clicchiamo su Preferenze<\/strong>.<\/p>\n Successivamente, clicchiamo sulla levetta Campi personalizzati<\/strong> per visualizzarli nell’editor. Clicchiamo sul pulsante Mostra e ricarica la pagina<\/strong> per salvare le modifiche.<\/p>\n Per registrare i campi personalizzati, apriamo il file Prendiamo nota dello slug di ogni campo, perch\u00e9 ci servir\u00e0 nel prossimo passo:<\/p>\n \u00c8 possibile personalizzare ulteriormente questi campi seguendo la documentazione<\/a> di WordPress Inoltre, \u00e8 possibile registrare questi campi tramite un plugin personalizzato<\/a>. Il vantaggio \u00e8 che i campi continueranno a funzionare anche se cambieremo tema.<\/p>\n Quindi, aggiungiamo i valori dei campi personalizzati a una pagina seguendo questi passaggi:<\/p>\n Ora possiamo salvare la pagina e ripetere il procedimento per le altre pagine del nostro sito.<\/p>\n Per visualizzare i nostri dati sulle pagine, dobbiamo modificare il template di pagina del nostro tema nell’Editor del sito<\/a>. Per farlo:<\/p>\n Andiamo su Aspetto > Editor<\/strong>, poi clicchiamo sul link Template<\/strong> nella colonna di sinistra. Individuiamo il template Pagine<\/strong> e clicchiamo per aprirlo nell’editor.<\/p>\n Per prima cosa, dobbiamo scegliere un punto in cui visualizzare i dati del nostro campo personalizzato. Aggiungiamo un’area in fondo a ogni pagina.<\/p>\n Aggiungiamo un blocco Gruppo<\/strong> e inseriamo un blocco Colonne<\/strong> al suo interno. La colonna di sinistra contiene un blocco Immagine<\/strong> (per visualizzare la nostra foto), mentre quella di destra contiene un blocco Paragrafo<\/strong> (per visualizzare la nostra citazione).<\/p>\n Abbiamo rinominato<\/a> il nostro blocco Gruppo in Campo dati personalizzato<\/strong> per riferimento futuro. In questo modo sar\u00e0 pi\u00f9 facile trovarlo se vogliamo modificarlo di nuovo in seguito.<\/p>\n L’API Block Bindings non dispone ancora di un’interfaccia visiva per la visualizzazione dei valori (per saperne di pi\u00f9, fate riferimento qui in basso). Pertanto, dobbiamo modificare il codice dei nostri blocchi Immagine e Paragrafo. Questo ci permette di associare i dati personalizzati ad essi.<\/p>\n Clicchiamo sul menu Opzioni<\/strong> (icona \u22ee) in alto a destra dell’Editor del sito. Selezioniamo il link Editor del codice<\/strong>.<\/p>\n Cerchiamo il blocco Gruppo<\/strong> che abbiamo appena aggiunto. Il codice inizia con:<\/p>\n Abbiamo anche evidenziato il codice appropriato nell’immagine sottostante:<\/p>\n Successivamente, individuiamo i blocchi Immagine e Paragrafo all’interno di questo gruppo. Il loro codice predefinito \u00e8 il seguente:<\/p>\n Immagine:<\/strong><\/p>\n Paragrafo:<\/strong><\/p>\n Possiamo modificare questi blocchi per associarli ai nostri campi personalizzati:<\/p>\n Immagine:<\/strong><\/p>\n Il valore Paragrafo:<\/strong><\/p>\n In questo caso, il valore Salviamo le modifiche e usciamo dall’Editor del Codice.<\/strong><\/p>\n Clicchiamo sui blocchi Immagine e Paragrafo. WordPress delinea ogni blocco in viola per indicare che \u00e8 associato a una fonte di dati. Inoltre, il pannello di destra mostrer\u00e0 un’area Attributi con ulteriori dettagli.<\/p>\n Nota:<\/strong> non vedrete questi blocchi durante la modifica delle pagine. Tuttavia, vengono visualizzati nel front-end del sito web.<\/p>\n Il passo finale consiste nel visitare il front-end del sito web. Dovremmo vedere la nostra immagine e la nostra citazione su tutte le pagine che hanno valori di campo personalizzati.<\/p>\n Mostrare dati personalizzati nell’editor a blocchi di WordPress non \u00e8 sempre stato semplice. In passato era necessario creare un blocco personalizzato per recuperare i dati dai custom field o da altre fonti.<\/p>\n Si tratta di un lavoro molto impegnativo e spesso non alla portata di tutti. In alcuni casi, comporta anche il dover duplicare una funzionalit\u00e0. Ad esempio, pensiamo alla visualizzazione dei dati di un custom field in un’intestazione di testo. Non dovrebbe essere possibile farlo senza dover creare un blocco completamente nuovo?<\/p>\n Finalmente, \u00e8 possibile. L’introduzione della Block Bindings API in WordPress 6.5<\/a> offre una soluzione nativa. La nuova API permette di associare una fonte di dati a una selezione di blocchi core di WordPress, consentendo di costruire siti WordPress dinamici in minor tempo. Inoltre, offre un nuovo livello di funzionalit\u00e0 per i temi a blocchi.<\/p>\n Questo articolo presenta la Block Bindings API, mostra come funziona con una semplice demo e getta un occhio sul futuro dell’API.<\/p>\n I custom field<\/a> fanno parte del core di WordPress da anni. Apportano dati dinamici ai post statici e offrono agli sviluppatori maggiori possibilit\u00e0 di personalizzazione. Tuttavia, la procedura per utilizzarli \u00e8 macchinosa.<\/p>\n \u00c8 necessario utilizzare la funzione Tutti i dati dei custom field di un post vengono salvati come meta del post<\/a>. Tuttavia, fino ad ora non esisteva un modo diretto per visualizzare i risultati. Per farlo era necessario un plugin e\/o aggiungere codice<\/a> al tema. Questa soluzione non solo \u00e8 pi\u00f9 complessa dal punto di vista della programmazione, ma rappresenta anche un ulteriore debito tecnico da gestire.<\/p>\n L’introduzione dell’Editor a blocchi e dei temi a blocchi<\/a> non ha migliorato la situazione. I dati dei custom field non potevano essere visualizzati in nessuno dei blocchi core inclusi in WordPress e le stesse limitazioni valevano per i temi a blocchi. Questo potrebbe essere uno dei motivi principali per cui alcuni sviluppatori sono rimasti fedeli all’editor e ai temi classici<\/a>.<\/p>\n La Block Bindings API porta questa funzionalit\u00e0 in WordPress. Finalmente, non c’\u00e8 pi\u00f9 bisogno di plugin per visualizzare i dati. L’API associa una fonte di dati a blocchi specifici come Pulsante<\/a>, Titolo<\/a>, Immagine<\/a> e Paragrafo<\/a>, aprendo un nuovo mondo di possibilit\u00e0 di personalizzazione per i temi e l’Editor a blocchi.<\/p>\n Non \u00e8 in grado di duplicare completamente le funzionalit\u00e0 del codice PHP o di un plugin per custom field. Tuttavia, \u00e8 un passo nella giusta direzione. E in alcuni casi potrebbe essere tutto ci\u00f2 che serve.<\/p>\n Come funziona la Block Bindings API? Abbiamo messo insieme un semplice esempio.<\/p>\n Prima di entrare nel dettaglio, ecco una panoramica del nostro progetto:<\/p>\n Ora che abbiamo il nostro piano, mettiamo in azione la Block Bindings API di WordPress.<\/p>\n Di deafult, WordPress nasconde i custom field, quindi il primo passo \u00e8 quello di abilitarli nell’editor a blocchi.<\/p>\n Per abilitare i custom field, apriamo il menu Opzioni<\/strong> (icona \u22ee) nell’Editor a blocchi e clicchiamo su Preferenze<\/strong>.<\/p>\n Successivamente, clicchiamo sulla levetta Campi personalizzati<\/strong> per visualizzarli nell’editor. Clicchiamo sul pulsante Mostra e ricarica la pagina<\/strong> per salvare le modifiche.<\/p>\n Per registrare i custom field, apriamo il file Prendiamo nota dello slug di ogni campo, perch\u00e9 ci servir\u00e0 nel prossimo passaggio:<\/p>\n \u00c8 possibile personalizzare ulteriormente questi campi seguendo la documentazione<\/a> di Possiamo anche registrare questi campi tramite un plugin personalizzato<\/a>. Il vantaggio \u00e8 che i campi continueranno a funzionare anche se cambieremo tema.<\/p>\n Aggiungiamo i valori dei custom field a una pagina seguendo questi passaggi:<\/p>\n Ora possiamo salvare la pagina e ripetere il procedimento per le altre pagine del nostro sito.<\/p>\n Per visualizzare i nostri dati sulle pagine, dobbiamo modificare il template di pagina del nostro tema nell’Editor del sito<\/a>. Per farlo:<\/p>\n Andiamo su Aspetto > Editor<\/strong> e clicchiamo sul link Template<\/strong> nella colonna di sinistra. Individuiamo il template Pagine<\/strong> e facciamo clic per aprirlo nell’editor.<\/p>\n Per prima cosa, dobbiamo scegliere un punto in cui visualizzare i dati del nostro custom field. Aggiungiamo un’area in fondo a ogni pagina.<\/p>\n Aggiungiamo un blocco Gruppo<\/strong> e inseriamo un blocco Colonne<\/strong> al suo interno. La colonna di sinistra contiene un blocco Immagine<\/strong> (per visualizzare la nostra foto), mentre quella di destra contiene un blocco Paragrafo<\/strong> (per visualizzare la nostra citazione).<\/p>\n Abbiamo rinominato<\/a> il nostro blocco Gruppo in Campo dati personalizzato<\/strong> per riferimento futuro. In questo modo sar\u00e0 pi\u00f9 facile trovarlo se vogliamo modificarlo di nuovo.<\/p>\n La Block Bindings API non dispone ancora di un’iinerfaccia visiva per la visualizzazione dei valori (maggiori informazioni pi\u00f9 in basso). Pertanto, dobbiamo modificare il codice dei nostri blocchi Immagine e Paragrafo. Questo ci permette di associarvi i dati personalizzati.<\/p>\n Clicchiamo sul menu Opzioni<\/strong> (icona \u22ee) in alto a destra dell’Editor del sito. Selezioniamo il link Editor del codice<\/strong>.<\/p>\n Cerchiamo il blocco Gruppo<\/strong> che abbiamo appena aggiunto. Il codice inizia con:<\/p>\n Abbiamo anche evidenziato il codice appropriato nell’immagine sottostante:<\/p>\n Successivamente, individuiamo i blocchi Immagine e Paragrafo all’interno di questo gruppo. Il loro codice predefinito \u00e8 il seguente:<\/p>\n Immagine:<\/strong><\/p>\n Paragrafo:<\/strong><\/p>\n Possiamo modificare questi blocchi per associarli ai nostri campi personalizzati:<\/p>\n Immagine:<\/strong><\/p>\n Il valore Paragrafo:<\/strong><\/p>\n In questo caso, il valore Salviamo le modifiche e usciamo dall’Editor del Codice.<\/strong><\/p>\n Clicchiamo sui blocchi Immagine e Paragrafo. WordPress delinea ogni blocco in viola per indicare che \u00e8 associato a una fonte di dati. Inoltre, il pannello di destra mostrer\u00e0 un’area Attributi con ulteriori dettagli.<\/p>\n Nota:<\/strong> questi blocchi non sono visibili durante la modifica delle pagine. Tuttavia, vengono visualizzati nel front-end del sito.<\/p>\n Il passo conclusivo consiste nel visitare il front-end del sito web. Dovremmo vedere la nostra immagine e la nostra citazione su tutte le pagine che hanno valori di campi personalizzati.<\/p>\n Abbiamo creato un esempio di base di blocchi collegati a una fonte di dati. Tuttavia, ci sono altri modi per migliorare il nostro progetto. Ad esempio:<\/p>\n L’idea \u00e8 quella di pensare a come vogliamo includere i dati personalizzati nel nostro sito. Da l\u00ec, creeremo un piano per implementarli in che sia facile mantenere. La Block Bindings API offre molte soluzioni per farlo.<\/p>\n La Block Bindings API non \u00e8 un prodotto finito. Continua ad evolvere con ogni nuova versione di WordPress.<\/p>\n Ad esempio, sono previsti diversi register_meta()<\/a><\/code> o installare un plugin per registrare e configurare i nuovi campi. Questo \u00e8 solo il primo passo. La visualizzazione di questi dati sul sito \u00e8 un’altra sfida.<\/p>\nUn semplice caso d’uso dell’API Block Bindings<\/h2>\n
\n
\n
Abilitare i campi personalizzati nell’editor a blocchi<\/h3>\n
![\"Abilitazione](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/10\/block-bindings-api-editor-preferences.png\" "\\"The")
Registrare i campi personalizzati<\/h3>\n
functions.php<\/code> del tema. Quindi aggiungiamo il seguente codice:<\/p>\n\/\/ Register custom fields for pages in WordPress using register_meta()\nfunction kinsta_register_custom_meta_fields_for_pages() {\n \/\/ Register the text field \"kinsta_famous_quote\" for pages\n register_meta('post', 'kinsta_famous_quote', array(\n 'type' => 'string', \/\/ Text field\n 'single' => true, \/\/ Single value for the field\n 'sanitize_callback' => 'wp_strip_all_tags', \/\/ Sanitize the input\n 'show_in_rest' => true, \/\/ Expose this field in the REST API for Gutenberg\n )); \n\n\/\/ Register the image field \"kinsta_photo\" for pages\n register_meta('post', 'kinsta_photo', array(\n 'type' => 'string', \/\/ Can store the URL or attachment ID as a string\n 'single' => true, \/\/ Single value for the field\n 'sanitize_callback' => 'esc_url_raw', \/\/ Sanitize the input as a URL\n 'show_in_rest' => true, \/\/ Expose this field in the REST API for Gutenberg\n ));\n}\nadd_action('init', 'kinsta_register_custom_meta_fields_for_pages');<\/code><\/pre>\n\n
kinsta_famous_quote<\/code><\/li>\nkinsta_photo<\/code><\/li>\n<\/ul>\nregister_meta()<\/code>.<\/p>\nAggiungere i valori dei campi personalizzati a una pagina<\/h3>\n
\n
kinsta_famous_quote<\/code> nella colonna di sinistra. Poi aggiungiamo il contenuto della nostra citazione a destra: The future belongs to those who believe in the beauty of their dreams. – Eleanor Roosevelt<\/li>\nkinsta_photo<\/code>. Aggiungiamo l’URL dell’immagine che vogliamo utilizzare a destra.<\/li>\n<\/ol>\n![\"Valori](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/10\/block-bindings-api-editor-custom-field-config.png\" "\\"WordPress")
Associare i dati dei campi personalizzati ai blocchi<\/h3>\n
![\"Il](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/10\/block-bindings-api-site-editor-templates.png\" "\\"The")
![\"Modifica](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/10\/block-bindings-api-site-editor-page-template.png\" "\\"The")
<!-- wp:group {\"metadata\":{\"name\":\"Custom Field Data\"},\"layout\":{\"type\":\"constrained\"}} --><\/code><\/pre>\n![\"Visualizzazione](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/10\/block-bindings-api-site-editor-block-code.png\" "\\"WordPress")
<!-- wp:image -->\n<figure class=\"wp-block-image\"><img alt=\"\"\/><\/figure>\n<!-- \/wp:image --><\/code><\/pre>\n<!-- wp:paragraph -->\n<p><\/p>\n<!-- \/wp:paragraph --><\/code><\/pre>\n<!-- wp:image {\"metadata\":{\"bindings\":{\"url\":{\"source\":\"core\/post-meta\",\"args\":{\"key\":\"kinsta_photo\"}}}}} -->\n<figure class=\"wp-block-image\"><img src=\"\" alt=\"\"\/><\/figure>\n<!-- \/wp:image --><\/code><\/pre>\nkey<\/code> \u00e8 impostato sul nostro campo personalizzato kinsta_photo<\/code>.<\/p>\n<!-- wp:paragraph {\"metadata\":{\"bindings\":{\"content\":{\"source\":\"core\/post-meta\",\"args\":{\"key\":\"kinsta_famous_quote\"}}}}} -->\n<p><\/p>\n<!-- \/wp:paragraph --><\/code><\/pre>\nkey<\/code> \u00e8 impostato sul nostro campo personalizzato kinsta_famous_quote<\/code>.<\/p>\n![\"Un](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/10\/block-bindings-api-site-editor-image-block-bound.png\" "\\"Image")
![\"Un](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/10\/block-bindings-api-site-editor-paragraph-block-bound.png\" "\\"Paragraph")
Perch\u00e9 la Block Bindings API \u00e8 uno strumento che cambia le carte in tavola<\/h2>\n
register_meta()<\/a><\/code> o installare un plugin per registrare e configurare i nuovi campi. Questo \u00e8 solo il primo passo. La visualizzazione di questi dati sul sito \u00e8 un altro problema.<\/p>\nUn semplice caso d’uso della Block Bindings API<\/h2>\n
\n
\n
Abilitare i custom field nell’editor a blocchi<\/h3>\n
Registrare i custom field<\/h3>\n
functions.php<\/code> del tema. Quindi aggiungiamo il seguente codice:<\/p>\n\/\/ Register custom fields for pages in WordPress using register_meta()\nfunction kinsta_register_custom_meta_fields_for_pages() {\n \/\/ Register the text field \"kinsta_famous_quote\" for pages\n register_meta('post', 'kinsta_famous_quote', array(\n 'type' => 'string', \/\/ Text field\n 'single' => true, \/\/ Single value for the field\n 'sanitize_callback' => 'wp_strip_all_tags', \/\/ Sanitize the input\n 'show_in_rest' => true, \/\/ Expose this field in the REST API for Gutenberg\n )); \n\n\/\/ Register the image field \"kinsta_photo\" for pages\n register_meta('post', 'kinsta_photo', array(\n 'type' => 'string', \/\/ Can store the URL or attachment ID as a string\n 'single' => true, \/\/ Single value for the field\n 'sanitize_callback' => 'esc_url_raw', \/\/ Sanitize the input as a URL\n 'show_in_rest' => true, \/\/ Expose this field in the REST API for Gutenberg\n ));\n}\nadd_action('init', 'kinsta_register_custom_meta_fields_for_pages');<\/code><\/pre>\n\n
kinsta_famous_quote<\/code><\/li>\nkinsta_photo<\/code><\/li>\n<\/ul>\nregister_meta()<\/code> di WordPress.<\/p>\nAggiungere i valori dei custom field a una pagina<\/h3>\n
\n
kinsta_famous_quote<\/code> nella colonna di sinistra. Poi aggiungiamo il contenuto della nostra citazione a destra: The future belongs to those who believe in the beauty of their dreams. – Eleanor Roosevelt<\/li>\nkinsta_photo<\/code>. Aggiungiamo l’URL dell’immagine che vogliamo utilizzare a destra.<\/li>\n<\/ol>\nAssociare i dati dei custom field ai blocchi<\/h3>\n
<!-- wp:group {\"metadata\":{\"tom Field Data\"},\"layout\":{\"type\":\"constrained\"}} --><\/code><\/pre>\n<!-- wp:image -->\n<figure class=\"wp-block-image\"><img alt=\"\"\/><\/figure>\n<!-- \/wp:image --><\/code><\/pre>\n<!-- wp:paragraph -->\n<p><\/p>\n<!-- \/wp:paragraph --><\/code><\/pre>\n<!-- wp:image {\"metadata\":{\"bindings\":{\"url\":{\"source\":\"core\/post-meta\",\"args\":{\"key\":\"kinsta_photo\"}}}}} -->\n<figure class=\"wp-block-image\"><img src=\"\" alt=\"\"\/><\/figure>\n<!-- \/wp:image --><\/code><\/pre>\nkey<\/code> \u00e8 impostato sul nostro campo personalizzato kinsta_photo<\/code>.<\/p>\n<!-- wp:paragraph {\"metadata\":{\"bindings\":{\"content\":{\"source\":\"core\/post-meta\",\"args\":{\"key\":\"kinsta_famous_quote\"}}}}} -->\n<p><\/p>\n<!-- \/wp:paragraph --><\/code><\/pre>\nkey<\/code> \u00e8 impostato sul nostro campo personalizzato kinsta_famous_quote<\/code>.<\/p>\n![\"Dati](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/10\/block-bindings-api-result.jpg\" "\\"WordPress")
Altre possibilit\u00e0 per collegare i blocchi<\/h3>\n
\n
kinsta_photo_alt<\/code>, all’attributo alt<\/code> in questo modo:\n<!-- wp:image {\"metadata\":{\"bindings\":{\"url\":{\"source\":\"namespace\/slug\",\"args\":{\"key\":\"kinsta_photo\"}},\"alt\":{\"source\":\"namespace\/slug\",\"args\":{\"key\":\"kinsta_photo_alt\"}}}}} -->\n<figure class=\"wp-block-image\"><img src=\"\" alt=\"\"\/><\/figure>\n<!-- \/wp:image --><\/code><\/pre>\n<\/li>\nApprofondimenti sulla Block Bindings API<\/h2>\n