Mostrare dati personalizzati nell’editor a blocchi di WordPress non è sempre stato un processo semplice. Era necessario creare un blocco personalizzato per recuperare i dati dai campi personalizzati o da altre fonti.

Si tratta di un lavoro molto impegnativo e spesso non alla portata di alcuni sviluppatori. In alcuni casi, comporta anche il dover creare una funzionalità duplicata. Ad esempio, pensiamo alla visualizzazione dei dati di un campo personalizzato in un’intestazione di testo. Non dovrebbe essere possibile farlo senza dover creare un blocco completamente nuovo?

Finalmente, lo è. L’arrivo dell’API Block Bindings in WordPress 6.5 offre una soluzione nativa. Permette di associare una fonte di dati a una selezione di blocchi principali di WordPress, consentendo di costruire siti web WordPress dinamici in minor tempo. Inoltre, offre un nuovo livello di funzionalità ai temi a blocchi.

Questo articolo presenta l’API Block Bindings, mostra come funziona con una semplice demo e getta uno sguardo sul futuro dell’evoluzione dell’API.

Perché l’API Block Bindings è uno strumento che cambia le carte in tavola

I campi personalizzati fanno parte del core di WordPress da anni. Apportano dati dinamici ai post statici e offrono agli sviluppatori maggiori possibilità di personalizzazione. Tuttavia, la procedura per utilizzarli è macchinosa.

È necessario utilizzare la funzione register_meta() o installare un plugin per registrare e configurare i nuovi campi. Questo è solo il primo passo. La visualizzazione di questi dati sul sito è un’altra sfida.

Tutti i dati dei campi personalizzati di un post vengono salvati come meta del post. Tuttavia, non esisteva un modo diretto per visualizzare i risultati. Per farlo era necessario un plugin e/o l’aggiunta di codice al tema. Questa soluzione non solo è più difficile dal punto di vista della programmazione, ma rappresenta anche un ulteriore debito tecnico da gestire.

L’introduzione dell’Editor a blocchi e dei temi a blocchi 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.

L’API Block Bindings porta questa funzionalità su WordPress. Finalmente, non avrete bisogno di plugin per visualizzare i dati. L’API associa una fonte di dati a blocchi specifici come Pulsante, Titolo, Immagine e Paragrafo, aprendo un nuovo mondo di opzioni di personalizzazione per i temi a blocchi e l’Editor a blocchi.

Non è in grado di duplicare completamente le funzionalità della scrittura di PHP o dell’utilizzo di un plugin per campi personalizzati. Tuttavia, è un passo nella giusta direzione. E in alcuni casi potrebbe essere tutto ciò che vi serve.

Un semplice caso d’uso dell’API Block Bindings

Come funziona l’API Block Bindings? Abbiamo messo insieme un semplice esempio di come può essere utile.

Prima di entrare nel dettaglio, ecco una panoramica del nostro progetto:

  • Installeremo l’ultima versione di WordPress e utilizzeremo il tema predefinito Twenty Twenty-Four.
  • Registreremo alcuni campi personalizzati:
    • Citazione – Una citazione famosa che vogliamo mettere in evidenza in ogni pagina, associata a un blocco Paragrafo.
    • Foto – L’URL di una foto diversa per ogni pagina, associata a un blocco Immagine.
  • Infine, modificheremo il template di pagina del tema e aggiungeremo i blocchi che recuperano i valori dei campi personalizzati.

Ora che abbiamo il nostro piano, mettiamo in azione l’API WordPress Block Bindings.

Abilitare i campi personalizzati nell’editor a blocchi

WordPress nasconde i campi personalizzati per impostazione predefinita, quindi il primo passo è quello di abilitarli nell’editor a blocchi.

Per abilitare i campi personalizzati, apriamo il menu Opzioni (icona ⋮) nell’Editor a blocchi. Poi clicchiamo su Preferenze.

Successivamente, clicchiamo sulla levetta Campi personalizzati per visualizzarli nell’editor. Clicchiamo sul pulsante Mostra e ricarica la pagina per salvare le modifiche.

Abilitazione dei campi personalizzati nella schermata Preferenze dell'editor a blocchi
Abilitazione dei campi personalizzati nell’Editor a blocchi

Registrare i campi personalizzati

Per registrare i campi personalizzati, apriamo il file functions.php del tema. Quindi aggiungiamo il seguente codice:

// Register custom fields for pages in WordPress using register_meta()
function kinsta_register_custom_meta_fields_for_pages() {
     // Register the text field "kinsta_famous_quote" for pages
     register_meta('post', 'kinsta_famous_quote', array(
          'type' => 'string',  // Text field
          'single' => true,    // Single value for the field
          'sanitize_callback' => 'wp_strip_all_tags',  // Sanitize the input
          'show_in_rest' => true,  // Expose this field in the REST API for Gutenberg
     )); 

// Register the image field "kinsta_photo" for pages
    register_meta('post', 'kinsta_photo', array(
          'type' => 'string',  // Can store the URL or attachment ID as a string
          'single' => true,    // Single value for the field
          'sanitize_callback' => 'esc_url_raw',  // Sanitize the input as a URL
          'show_in_rest' => true,  // Expose this field in the REST API for Gutenberg
     ));
}
add_action('init', 'kinsta_register_custom_meta_fields_for_pages');

Prendiamo nota dello slug di ogni campo, perché ci servirà nel prossimo passo:

  • kinsta_famous_quote
  • kinsta_photo

È possibile personalizzare ulteriormente questi campi seguendo la documentazione di WordPress register_meta().

Inoltre, è possibile registrare questi campi tramite un plugin personalizzato. Il vantaggio è che i campi continueranno a funzionare anche se cambieremo tema.

Aggiungere i valori dei campi personalizzati a una pagina

Quindi, aggiungiamo i valori dei campi personalizzati a una pagina seguendo questi passaggi:

  1. Andiamo su Pagine > Tutte le pagine e selezioniamo la pagina desiderata.
  2. Scorriamo fino in fondo alla pagina e individuiamo il pannello Campi personalizzati. Clicchiamo sul pulsante Inserisci nuovo situato sotto il primo campo. Aggiungiamo kinsta_famous_quote 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
  3. Successivamente, clicchiamo sul pulsante Aggiungi campo personalizzato per aggiungere il campo kinsta_photo. Aggiungiamo l’URL dell’immagine che vogliamo utilizzare a destra.
Valori dei campi personalizzati nell'editor dei blocchi di WordPress.
Aggiungere campi personalizzati all’editor di blocchi di WordPress

Ora possiamo salvare la pagina e ripetere il procedimento per le altre pagine del nostro sito.

Associare i dati dei campi personalizzati ai blocchi

Per visualizzare i nostri dati sulle pagine, dobbiamo modificare il template di pagina del nostro tema nell’Editor del sito. Per farlo:

Andiamo su Aspetto > Editor, poi clicchiamo sul link Template nella colonna di sinistra. Individuiamo il template Pagine e clicchiamo per aprirlo nell’editor.

Il template Pagine nell'Editor del sito WordPress
Il template Pagine nell’Editor del sito WordPress

Per prima cosa, dobbiamo scegliere un punto in cui visualizzare i dati del nostro campo personalizzato. Aggiungiamo un’area in fondo a ogni pagina.

Aggiungiamo un blocco Gruppo e inseriamo un blocco Colonne al suo interno. La colonna di sinistra contiene un blocco Immagine (per visualizzare la nostra foto), mentre quella di destra contiene un blocco Paragrafo (per visualizzare la nostra citazione).

Abbiamo rinominato il nostro blocco Gruppo in Campo dati personalizzato per riferimento futuro. In questo modo sarà più facile trovarlo se vogliamo modificarlo di nuovo in seguito.

Modifica del template Pagine nell'Editor del sito WordPress
Aggiunta dei blocchi che mostreranno i dati del nostro campo personalizzato

L’API Block Bindings non dispone ancora di un’interfaccia visiva per la visualizzazione dei valori (per saperne di più, 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.

Clicchiamo sul menu Opzioni (icona ⋮) in alto a destra dell’Editor del sito. Selezioniamo il link Editor del codice.

Cerchiamo il blocco Gruppo che abbiamo appena aggiunto. Il codice inizia con:

<!-- wp:group {"metadata":{"name":"Custom Field Data"},"layout":{"type":"constrained"}} -->

Abbiamo anche evidenziato il codice appropriato nell’immagine sottostante:

Visualizzazione del nostro blocco Gruppo nell'Editor del Codice
Visualizzazione del nostro blocco Gruppo nell’Editor del Codice

Successivamente, individuiamo i blocchi Immagine e Paragrafo all’interno di questo gruppo. Il loro codice predefinito è il seguente:

Immagine:

<!-- wp:image -->
<figure class="wp-block-image"><img alt=""/></figure>
<!-- /wp:image -->

Paragrafo:

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->

Possiamo modificare questi blocchi per associarli ai nostri campi personalizzati:

Immagine:

<!-- wp:image {"metadata":{"bindings":{"url":{"source":"core/post-meta","args":{"key":"kinsta_photo"}}}}} -->
<figure class="wp-block-image"><img src="" alt=""/></figure>
<!-- /wp:image -->

Il valore key è impostato sul nostro campo personalizzato kinsta_photo.

Paragrafo:

<!-- wp:paragraph {"metadata":{"bindings":{"content":{"source":"core/post-meta","args":{"key":"kinsta_famous_quote"}}}}} -->
<p></p>
<!-- /wp:paragraph -->

In questo caso, il valore key è impostato sul nostro campo personalizzato kinsta_famous_quote.

Salviamo le modifiche e usciamo dall’Editor del Codice.

Clicchiamo sui blocchi Immagine e Paragrafo. WordPress delinea ogni blocco in viola per indicare che è associato a una fonte di dati. Inoltre, il pannello di destra mostrerà un’area Attributi con ulteriori dettagli.

Un blocco immagine è associato a una fonte dati
WordPress indica che il blocco Immagine è associato a una fonte di dati
Un blocco Paragrafo è associato a una fonte di dati
Anche il nostro blocco Paragrafo è associato a una fonte di dati

Nota: non vedrete questi blocchi durante la modifica delle pagine. Tuttavia, vengono visualizzati nel front-end del sito web.

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.

Dati del campo personalizzato di WordPress visualizzati in una pagina
I dati del nostro campo personalizzato sono visualizzati in fondo alla pagina

Altre possibilità per i blocchi con associazioni

Abbiamo creato un esempio di base di blocchi con associazioni a una fonte di dati. Tuttavia, ci sono altri modi per migliorare il nostro progetto, tra cui:

  • Aggiungere gli attributi ALT. Potremmo registrare un altro campo personalizzato che definisca gli attributi ALT delle nostre foto. Questo renderebbe la funzione più accessibile. Ad esempio, potremmo associare un nuovo campo, kinsta_photo_alt, all’attributo alt in questo modo: 
    <!-- wp:image {"metadata":{"bindings":{"url":{"source":"namespace/slug","args":{"key":"kinsta_photo"}},"alt":{"source":"namespace/slug","args":{"key":"kinsta_photo_alt"}}}}} -->
<figure class="wp-block-image"><img src="" alt=""/></figure>
<!-- /wp:image -->
  • Usare una fonte di dati personalizzata. I campi personalizzati vanno benissimo per i nostri scopi. Tuttavia, avremmo potuto scegliere di recuperare i dati da una fonte personalizzata. Le possibilità includono API, tabelle di database personalizzate, opzioni di plugin/temi, dati del sito e tassonomie.

L’idea è quella di pensare a come vogliamo includere i dati personalizzati nel nostro sito. Da lì, creeremo un piano per implementarli in modo facile da mantenere. L’API Block Bindings offre molte opzioni per farlo.

Approfondimenti sull’API Block Bindings

L’API Block Bindings non è un prodotto finito. Continua ad evolversi con ogni nuova versione di WordPress.

Ad esempio, sono previsti diversi miglioramenti con WordPress 6.7:

  • Un’interfaccia utente predefinita per associare i blocchi alle fonti di dati disponibili.
  • Etichette meta dei post per una più facile identificazione.
  • Compatibilità con i template di temi personalizzati per i post.
  • Permessi predefiniti per determinare chi può modificare i blocchi.
  • Diversi miglioramenti tecnici.

Tenete d’occhio le nuove funzionalità che renderanno l’API più facile da usare e più versatile.

Potete anche installare il plugin Gutenberg per ottenere l’accesso anticipato alle funzionalità prima che vengano integrate nel nucleo di WordPress. Vi consigliamo di utilizzarlo in un ambiente di staging o locale.

Tutti i clienti di Kinsta hanno accesso a un ambiente di staging per i test e possono anche aggiungere funzionalità premium al mix.

Inoltre, tutti possono utilizzare la nostra suite di sviluppo WordPress locale DevKinsta, gratuita, con cui creare nuovi siti con un solo clic e sviluppare dal proprio computer locale.

Riepilogo

L’API Block Bindings rappresenta un cambiamento nel modo di lavorare con i dati personalizzati in WordPress. In molti casi sostituisce la necessità di plugin o blocchi personalizzati. Inoltre, offre una maggiore flessibilità ai blocchi e ai temi di WordPress.

Aggiungerla al vostro flusso di lavoro può ridurre i tempi di sviluppo. Essendo una funzione nativa, può anche migliorare le prestazioni rispetto ai plugin.

Questi sono alcuni importanti motivi per iniziare a usarla oggi. E il suo futuro ha l’aria di essere ancora più roseo!

Abbiamo solo iniziato a esplorare le possibilità illustrate in questo articolo. Potete trovare ulteriori informazioni sull’API Block Bindings dando uno sguardo a ulteriori informazioni sulla connessione di campi personalizzati, lavorando con fonti di associazioni personalizzate e imparando come ottenere e impostare i valori dei blocchi con associazioni nell’editor.

Eric Karkovack

Eric Karkovack is a freelance web developer and writer with over 25 years of experience. He loves helping others learn about WordPress, freelancing, and technology.