L’affichage de données personnalisées dans l’éditeur de blocs de WordPress n’a pas toujours été un processus facile. Il fallait construire un bloc personnalisé pour aller chercher les données dans les champs personnalisés ou dans d’autres sources.

C’est beaucoup de travail et souvent hors de portée de certains développeurs. Dans certains cas, cela signifie aussi qu’il faut créer des fonctionnalités en double. Par exemple, il est possible d’afficher les données d’un champ personnalisé dans un titre de texte. Cela ne devrait-il pas être possible sans construire un tout nouveau bloc ?

C’est enfin possible. L’arrivée de l’API Block Bindings dans WordPress 6.5 offre une solution native. Elle te permet de lier une source de données à une sélection de blocs WordPress fondamentaux, ce qui te permet de construire des sites WordPress dynamiques en moins de temps. Elle apporte également un nouveau niveau de fonctionnalité aux thèmes basés sur des blocs.

Cet article vous présente l’API Block Bindings, vous montre comment elle fonctionne à l’aide d’une simple démo et explore ce que l’avenir nous réserve au fur et à mesure que l’API évolue.

Pourquoi l’API Block Bindings est un outil qui change la donne

Les champs personnalisés font partie du cœur de WordPress depuis des années. Ils apportent des données dynamiques aux articles statiques et offrent aux développeurs davantage d’options de personnalisation. Cependant, le processus d’utilisation de ces champs est fastidieux.

Vous devezs utiliser la fonction register_meta() ou installer une extension pour enregistrer et configurer de nouveaux champs. Ce n’est que la première étape. L’affichage de ces données sur votre site est un autre défi.

Toutes les données des champs personnalisés d’un article sont enregistrées en tant que méta de l’article. Cependant, il n’y avait pas de moyen direct d’afficher les résultats. Pour cela, il fallait utiliser une extension et/ou ajouter du code à votre thème. Non seulement c’est plus difficile pour les développeurs, mais c’est aussi un autre élément de la dette technique à gérer.

L’introduction de l’éditeur de blocs et des thèmes de blocs n’a pas arrangé les choses. Les données des champs personnalisés ne pouvaient être affichées dans aucun des blocs de base inclus dans WordPress, et les mêmes limitations s’appliquaient aux thèmes de blocs. C’est peut-être l’une des raisons pour lesquelles certains développeurs sont restés fidèles à l’éditeur classique et/ou aux thèmes classiques.

L’API Block Bindings apporte cette fonctionnalité à WordPress. Enfin, vous n’avez pas besoin d’extensions pour vous aider à afficher des données. Elle lie une source de données à des blocs spécifiques comme Bouton, Titre, Image et Paragraphe – ce qui ouvre un nouveau monde d’options de personnalisation pour les thèmes de blocs et l’Éditeur de blocs.

Il ne reproduit pas entièrement les possibilités offertes par l’écriture de PHP ou l’utilisation d’une extension de champ personnalisé. Cependant, c’est un pas dans la bonne direction. Et c’est peut-être tout ce dont vous avez besoin dans certains scénarios.

Un cas d’utilisation simple de l’API Block Bindings

Comment fonctionne l’API Block Bindings dans le monde réel ? Nous avons rassemblé un exemple simple de la façon dont elle peut être utile.

Avant d’entrer dans le vif du sujet, voici les grandes lignes de notre projet :

  • Installez la dernière version de WordPress et utilisez le thème par défaut Twenty Twenty-Four.
  • Enregistrez quelques champs personnalisés :
    • Citation : Une citation célèbre que nous voulons mettre en avant sur chaque page, liée à un bloc Paragraphe.
    • Photo : L’URL d’une photo différente pour chaque page, liée à un bloc Image.
  • Enfin, modifiez le modèle de page du thème et ajoutez des blocs qui récupèrent les valeurs de ces champs personnalisés.

Maintenant que nous avons notre plan, mettons l’API WordPress Block Bindings en action.

Activer les champs personnalisés dans l’éditeur de blocs

WordPress masque les champs personnalisés par défaut, la première étape consiste donc à les activer dans l’éditeur de blocs.

Pour activer les champs personnalisés, ouvrez le menu Options (icône ⋮) dans l’éditeur de blocs. Cliquez ensuite sur Préférences.

Ensuite, cliquez sur la bascule Champs personnalisés pour les afficher dans l’éditeur. Cliquez sur le bouton Afficher et recharger la page pour enregistrer vos modifications.

Activation des champs personnalisés dans l'éditeur de blocs
Activation des champs personnalisés dans l’éditeur de blocs

Enregistrer les champs personnalisés

Pour enregistrer nos champs personnalisés, ouvrez le fichier functions.php du thème. Ajoutez ensuite le code suivant :

// 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');

Notez le slug de chaque champ, car nous en aurons besoin à l’étape suivante :

  • kinsta_famous_quote
  • kinsta_photo

Vous pouvez personnaliser davantage ces champs en suivant la documentation de WordPress register_meta().

Notons également que vous pouvez enregistrer ces champs via une extension personnalisée. L’avantage est que les champs continueront à fonctionner – même si vous changez de thème.

Ajouter les valeurs des champs personnalisés à une page

Ensuite, ajoutez les valeurs des champs personnalisés à une page en suivant les étapes suivantes :

  1. Naviguez vers Pages > Toutes les pages et sélectionnez la page de votre choix.
  2. Faîtes défiler jusqu’au bas de la page et trouvez le panneau Champs personnalisés. Clique sur le bouton Enter new situé sous le premier champ. Ajoutez kinsta_famous_quote dans la colonne de gauche. Puis, ajoutez le contenu de notre citation à droite : The future belongs to those who believe in the beauty of their dreams. – Eleanor Roosevelt
  3. Ensuite, cliquez sur le bouton Ajouter un champ personnalisé pour ajouter le champ kinsta_photo. Ajoutez l’URL de l’image que nous voulons utiliser à droite.
Ajout de champs personnalisés à l'éditeur de blocs de WordPress
Ajout de champs personnalisés à l’éditeur de blocs de WordPress

Nous pouvons maintenant enregistrer la page et répéter ce processus pour les autres pages de notre site.

Lier les données des champs personnalisés aux blocs

Nous voulons afficher nos données sur les pages, nous devons donc modifier le modèle de page de notre thème dans l’Éditeur de site. Pour cela :

Naviguez vers Apparence > Éditeur, puis cliquez sur le lien Modèles dans la colonne de gauche. Trouvez le modèle Pages et cliquez dessus pour l’ouvrir dans l’éditeur.

Trouver le modèle Pages dans l'éditeur de site WordPress
Trouver le modèle Pages dans l’éditeur de site WordPress

Tout d’abord, nous devons choisir un endroit pour afficher les données de notre champ personnalisé. Ajoutons une zone au bas de chaque page.

Nous allons ajouter un bloc Groupe et insérer un bloc Colonnes à l’intérieur de celui-ci. La colonne de gauche contient un bloc Image (pour afficher notre photo), tandis que la colonne de droite comporte un bloc Paragraphe (pour afficher notre citation).

Nous avons renommé notre bloc Groupe en Données de champ personnalisé pour pouvoir nous y référer ultérieurement. Il est ainsi plus facile de le retrouver si nous voulons le modifier à nouveau plus tard.

Ajout des blocs qui afficheront les données de notre champ personnalisé
Ajout des blocs qui afficheront les données de notre champ personnalisé

L’API Block Bindings ne dispose pas encore d’une interface visuelle pour l’affichage des valeurs (nous y reviendrons plus loin). Nous devons donc modifier le code de nos blocs Image et Paragraphe. Cela nous permet de leur associer des données personnalisées.

Cliquez sur le menu Options (icône ⋮) en haut à droite de l’éditeur de site. Sélectionnez le lien Éditeur de code. Cela permet d’ouvrir l’éditeur de code.

Cherchez le bloc de groupe que nous venons d’ajouter. Le code commence par :

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

Nous avons également mis en évidence le code approprié dans l’image ci-dessous :

Visualisation de notre bloc Groupe dans l'éditeur de code.
Visualisation de notre bloc Groupe dans l’éditeur de code.

Ensuite, localisez les blocs Image et Paragraphe au sein de ce groupe. Leur code par défaut ressemble à ce qui suit :

Image :

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

Paragraphe :

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

Nous pouvons modifier ces blocs pour les lier à nos champs personnalisés :

Image :

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

Note que la valeur key est associée à notre champ personnalisé kinsta_photo.

Paragraphe :

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

Dans ce cas, la valeur key correspond à notre champ personnalisé kinsta_famous_quote.

Enregistrez les modifications et quittez l’éditeur de code.

Cliquez sur les blocs Image et Paragraphe. WordPress souligne chaque bloc en violet pour indiquer qu’il est lié à une source de données. En outre, le panneau de droite affichera une zone d’attributs avec plus de détails.

WordPress indique que le bloc Image est lié à une source de données.
WordPress indique que le bloc Image est lié à une source de données.
Notre bloc Paragraphe est également lié à une source de données.
Notre bloc Paragraphe est également lié à une source de données.

Remarque : Vous ne verrez pas ces blocs lors de l’édition des pages. Cependant, ils s’affichent sur la page d’accueil de votre site web.

La dernière étape consiste à visiter l’interface publique du site. Nous devrions voir notre image et notre citation sur toutes les pages qui ont des valeurs de champs personnalisés.

Les données de notre champ personnalisé s'affichent en bas de la page.
Les données de notre champ personnalisé s’affichent en bas de la page.

Autres possibilités pour les blocs de liaison

Nous avons créé un exemple de base pour lier des blocs à une source de données. Cependant, il existe d’autres façons d’améliorer notre projet, notamment :

  • Ajouter des attributs ALT : Nous pourrions enregistrer un autre champ personnalisé qui définit les attributs ALT sur nos photos. Cela rendrait la fonctionnalité plus accessible. Par exemple, nous pourrions lier un nouveau champ, kinsta_photo_alt, à l’attribut alt comme suit : 
    <!-- 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 -->
  • Utiliser une source de données personnalisée : Les champs personnalisés fonctionnent très bien pour nos besoins. Cependant, nous aurions pu choisir de récupérer des données à partir d’une source personnalisée. Les possibilités incluent les API, les tables de base de données personnalisées, les options de plugin/thème, les données du site et les taxonomies.

L’idée est de réfléchir à la façon dont vous voulez inclure des données personnalisées dans votre site. À partir de là, vous créerez un plan pour les mettre en œuvre d’une manière qui sera facile à maintenir. L’API Block Bindings offre de nombreuses options pour cela.

Aller plus loin avec l’API Block Bindings

L’API Block Bindings n’est pas un produit fini. Elle continue d’évoluer avec chaque nouvelle version de WordPress.

Par exemple, plusieurs améliorations sont prévues pour WordPress 6.7 :

  • Une interface utilisateur par défaut pour lier les blocs aux sources de données disponibles.
  • Des libellés de méta d’article pour faciliter l’identification des articles.
  • Compatibilité avec les modèles de thèmes personnalisés de post-type.
  • Autorisations par défaut pour déterminer qui peut modifier les liaisons de blocs.
  • Plusieurs améliorations techniques sous le capot.

Restez à l’affût des nouvelles fonctionnalités qui rendront l’API plus facile à utiliser et plus puissante.

Vous pouvez également installer l’extension Gutenberg pour obtenir un accès anticipé aux fonctionnalités avant qu’elles ne soient fusionnées dans le cœur de WordPress. Nous recommandons de l’utiliser sur un environnement de staging ou local.

Tous les clients de Kinsta ont accès à un environnement de staging pour les tests et peuvent également ajouter des fonctionnalités premium au mélange.

Et tout le monde peut utiliser notre suite de développement WordPress locale DevKinsta gratuite. Vous pouvez créer de nouveaux sites en un seul clic et développer depuis votre machine locale.

Résumé

L’API Block Bindings représente un changement dans la façon dont nous travaillons avec les données personnalisées dans WordPress. Elle remplace le besoin d’extensions ou de blocs personnalisés dans de nombreux cas. Et elle apporte plus de flexibilité aux blocs WordPress et aux thèmes de blocs.

L’ajouter à votre flux de travail peut réduire votre temps de développement. En tant que fonctionnalité native, cela peut également améliorer les performances par rapport à l’utilisation d’extensions.

Voilà quelques bonnes raisons de commencer à l’utiliser dès aujourd’hui. Et l’avenir s’annonce encore plus prometteur !

Nous n’avons fait que commencer à explorer les possibilités décrites dans cet article. Plongez plus profondément dans l’API Block Bindings en explorant davantage la connexion des champs personnalisés, en travaillant avec des sources de liaison personnalisées et en apprenant comment obtenir et définir des valeurs de liaison de bloc dans l’éditeur.

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.