Cet article vous pr\u00e9sente l’API Block Bindings, vous montre comment elle fonctionne \u00e0 l’aide d’une simple d\u00e9mo et explore ce que l’avenir nous r\u00e9serve au fur et \u00e0 mesure que l’API \u00e9volue.<\/p>\n
Pourquoi l’API Block Bindings est un outil qui change la donne<\/h2>\n
Les champs personnalis\u00e9s<\/a> font partie du c\u0153ur de WordPress depuis des ann\u00e9es. Ils apportent des donn\u00e9es dynamiques aux articles statiques et offrent aux d\u00e9veloppeurs davantage d’options de personnalisation. Cependant, le processus d’utilisation de ces champs est fastidieux.<\/p>\n Vous devezs utiliser la fonction Toutes les donn\u00e9es des champs personnalis\u00e9s d’un article sont enregistr\u00e9es en tant que m\u00e9ta de l’article<\/a>. Cependant, il n’y avait pas de moyen direct d’afficher les r\u00e9sultats. Pour cela, il fallait utiliser une extension et\/ou ajouter du code<\/a> \u00e0 votre th\u00e8me. Non seulement c’est plus difficile pour les d\u00e9veloppeurs, mais c’est aussi un autre \u00e9l\u00e9ment de la dette technique \u00e0 g\u00e9rer.<\/p>\n L’introduction de l’\u00e9diteur de blocs et des th\u00e8mes de blocs<\/a> n’a pas arrang\u00e9 les choses. Les donn\u00e9es des champs personnalis\u00e9s ne pouvaient \u00eatre affich\u00e9es dans aucun des blocs de base inclus dans WordPress, et les m\u00eames limitations s’appliquaient aux th\u00e8mes de blocs. C’est peut-\u00eatre l’une des raisons pour lesquelles certains d\u00e9veloppeurs sont rest\u00e9s fid\u00e8les \u00e0 l’\u00e9diteur classique et\/ou aux th\u00e8mes classiques<\/a>.<\/p>\n L’API Block Bindings apporte cette fonctionnalit\u00e9 \u00e0 WordPress. Enfin, vous n’avez pas besoin d’extensions pour vous aider \u00e0 afficher des donn\u00e9es. Elle lie une source de donn\u00e9es \u00e0 des blocs sp\u00e9cifiques comme Bouton<\/a>, Titre<\/a>, Image<\/a> et Paragraphe<\/a> – ce qui ouvre un nouveau monde d’options de personnalisation pour les th\u00e8mes de blocs et l’\u00c9diteur de blocs.<\/p>\n Il ne reproduit pas enti\u00e8rement les possibilit\u00e9s offertes par l’\u00e9criture de PHP ou l’utilisation d’une extension de champ personnalis\u00e9. Cependant, c’est un pas dans la bonne direction. Et c’est peut-\u00eatre tout ce dont vous avez besoin dans certains sc\u00e9narios.<\/p>\n Comment fonctionne l’API Block Bindings dans le monde r\u00e9el ? Nous avons rassembl\u00e9 un exemple simple de la fa\u00e7on dont elle peut \u00eatre utile.<\/p>\n Avant d’entrer dans le vif du sujet, voici les grandes lignes de notre projet :<\/p>\n Maintenant que nous avons notre plan, mettons l’API WordPress Block Bindings en action.<\/p>\n WordPress masque les champs personnalis\u00e9s par d\u00e9faut, la premi\u00e8re \u00e9tape consiste donc \u00e0 les activer dans l’\u00e9diteur de blocs.<\/p>\n Pour activer les champs personnalis\u00e9s, ouvrez le menu Options<\/strong> (ic\u00f4ne \u22ee) dans l’\u00e9diteur de blocs. Cliquez ensuite sur Pr\u00e9f\u00e9rences<\/strong>.<\/p>\n Ensuite, cliquez sur la bascule Champs personnalis\u00e9s<\/strong> pour les afficher dans l’\u00e9diteur. Cliquez sur le bouton Afficher et recharger la page<\/strong> pour enregistrer vos modifications.<\/p>\n Pour enregistrer nos champs personnalis\u00e9s, ouvrez le fichier Notez le slug de chaque champ, car nous en aurons besoin \u00e0 l’\u00e9tape suivante :<\/p>\n Vous pouvez personnaliser davantage ces champs en suivant la documentation<\/a> de WordPress Notons \u00e9galement que vous pouvez enregistrer ces champs via une extension personnalis\u00e9e<\/a>. L’avantage est que les champs continueront \u00e0 fonctionner – m\u00eame si vous changez de th\u00e8me.<\/p>\n Ensuite, ajoutez les valeurs des champs personnalis\u00e9s \u00e0 une page en suivant les \u00e9tapes suivantes :<\/p>\n Nous pouvons maintenant enregistrer la page et r\u00e9p\u00e9ter ce processus pour les autres pages de notre site.<\/p>\n Nous voulons afficher nos donn\u00e9es sur les pages, nous devons donc modifier le mod\u00e8le de page de notre th\u00e8me dans l’\u00c9diteur de site<\/a>. Pour cela :<\/p>\n Naviguez vers Apparence > \u00c9diteur<\/strong>, puis cliquez sur le lien Mod\u00e8les<\/strong> dans la colonne de gauche. Trouvez le mod\u00e8le Pages<\/strong> et cliquez dessus pour l’ouvrir dans l’\u00e9diteur.<\/p>\n Tout d’abord, nous devons choisir un endroit pour afficher les donn\u00e9es de notre champ personnalis\u00e9. Ajoutons une zone au bas de chaque page.<\/p>\n Nous allons ajouter un bloc Groupe<\/strong> et ins\u00e9rer un bloc Colonnes<\/strong> \u00e0 l’int\u00e9rieur de celui-ci. La colonne de gauche contient un bloc Image<\/strong> (pour afficher notre photo), tandis que la colonne de droite comporte un bloc Paragraphe<\/strong> (pour afficher notre citation).<\/p>\n Nous avons renomm\u00e9<\/a> notre bloc Groupe en Donn\u00e9es de champ personnalis\u00e9<\/strong> pour pouvoir nous y r\u00e9f\u00e9rer ult\u00e9rieurement. Il est ainsi plus facile de le retrouver si nous voulons le modifier \u00e0 nouveau plus tard.<\/p>\n 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\u00e9es personnalis\u00e9es.<\/p>\n Cliquez sur le menu Options<\/strong> (ic\u00f4ne \u22ee) en haut \u00e0 droite de l’\u00e9diteur de site. S\u00e9lectionnez le lien \u00c9diteur de code<\/strong>. Cela permet d’ouvrir l’\u00e9diteur de code.<\/p>\n Cherchez le bloc de groupe<\/strong> que nous venons d’ajouter. Le code commence par :<\/p>\n Nous avons \u00e9galement mis en \u00e9vidence le code appropri\u00e9 dans l’image ci-dessous :<\/p>\n Ensuite, localisez les blocs Image et Paragraphe au sein de ce groupe. Leur code par d\u00e9faut ressemble \u00e0 ce qui suit :<\/p>\n Image :<\/strong><\/p>\n Paragraphe :<\/strong><\/p>\n Nous pouvons modifier ces blocs pour les lier \u00e0 nos champs personnalis\u00e9s :<\/p>\n Image :<\/strong><\/p>\n Note que la valeur Paragraphe :<\/strong><\/p>\n Dans ce cas, la valeur Enregistrez les modifications et quittez l’\u00e9diteur de code.<\/strong><\/p>\n Cliquez sur les blocs Image et Paragraphe. WordPress souligne chaque bloc en violet pour indiquer qu’il est li\u00e9 \u00e0 une source de donn\u00e9es. En outre, le panneau de droite affichera une zone d’attributs avec plus de d\u00e9tails.<\/p>\n Remarque :<\/strong> Vous ne verrez pas ces blocs lors de l’\u00e9dition des pages. Cependant, ils s’affichent sur la page d’accueil de votre site web.<\/p>\n La derni\u00e8re \u00e9tape consiste \u00e0 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\u00e9s.<\/p>\n Nous avons cr\u00e9\u00e9 un exemple de base pour lier des blocs \u00e0 une source de donn\u00e9es. Cependant, il existe d’autres fa\u00e7ons d’am\u00e9liorer notre projet, notamment :<\/p>\n L’id\u00e9e est de r\u00e9fl\u00e9chir \u00e0 la fa\u00e7on dont vous voulez inclure des donn\u00e9es personnalis\u00e9es dans votre site. \u00c0 partir de l\u00e0, vous cr\u00e9erez un plan pour les mettre en \u0153uvre d’une mani\u00e8re qui sera facile \u00e0 maintenir. L’API Block Bindings offre de nombreuses options pour cela.<\/p>\n L’API Block Bindings n’est pas un produit fini. Elle continue d’\u00e9voluer avec chaque nouvelle version de WordPress.<\/p>\n Par exemple, plusieurs am\u00e9liorations<\/a> sont pr\u00e9vues pour WordPress 6.7 :<\/p>\n Restez \u00e0 l’aff\u00fbt des nouvelles fonctionnalit\u00e9s qui rendront l’API plus facile \u00e0 utiliser et plus puissante.<\/p>\n Vous pouvez \u00e9galement installer l’extension Gutenberg<\/a> pour obtenir un acc\u00e8s anticip\u00e9 aux fonctionnalit\u00e9s avant qu’elles ne soient fusionn\u00e9es dans le c\u0153ur de WordPress. Nous recommandons de l’utiliser sur un environnement de staging ou local.<\/p>\n Tous les clients de Kinsta ont acc\u00e8s \u00e0 un environnement de staging<\/a> pour les tests et peuvent \u00e9galement ajouter des fonctionnalit\u00e9s premium<\/a> au m\u00e9lange.<\/p>\n Et tout le monde peut utiliser notre suite de d\u00e9veloppement WordPress locale DevKinsta<\/a> gratuite. Vous pouvez cr\u00e9er de nouveaux sites en un seul clic et d\u00e9velopper depuis votre machine locale.<\/p>\n L’API Block Bindings repr\u00e9sente un changement dans la fa\u00e7on dont nous travaillons avec les donn\u00e9es personnalis\u00e9es dans WordPress. Elle remplace le besoin d’extensions ou de blocs personnalis\u00e9s dans de nombreux cas. Et elle apporte plus de flexibilit\u00e9 aux blocs WordPress et aux th\u00e8mes de blocs.<\/p>\n L’ajouter \u00e0 votre flux de travail peut r\u00e9duire votre temps de d\u00e9veloppement. En tant que fonctionnalit\u00e9 native, cela peut \u00e9galement am\u00e9liorer les performances par rapport \u00e0 l’utilisation d’extensions.<\/p>\n Voil\u00e0 quelques bonnes raisons de commencer \u00e0 l’utiliser d\u00e8s aujourd’hui. Et l’avenir s’annonce encore plus prometteur !<\/p>\n Nous n’avons fait que commencer \u00e0 explorer les possibilit\u00e9s d\u00e9crites dans cet article. Plongez plus profond\u00e9ment dans l’API Block Bindings en explorant davantage la connexion des champs personnalis\u00e9s<\/a>, en travaillant avec des sources de liaison personnalis\u00e9es<\/a> et en apprenant comment obtenir et d\u00e9finir des valeurs de liaison de bloc dans l’\u00e9diteur<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":" L’affichage de donn\u00e9es personnalis\u00e9es dans l’\u00e9diteur de blocs de WordPress n’a pas toujours \u00e9t\u00e9 un processus facile. Il fallait construire un bloc personnalis\u00e9 pour aller chercher …<\/p>\n","protected":false},"author":51,"featured_media":78936,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[1028],"class_list":["post-78935","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-developpement-wordpress"],"yoast_head":"\nregister_meta()<\/a><\/code> ou installer une extension pour enregistrer et configurer de nouveaux champs. Ce n’est que la premi\u00e8re \u00e9tape. L’affichage de ces donn\u00e9es sur votre site est un autre d\u00e9fi.<\/p>\nUn cas d’utilisation simple de l’API Block Bindings<\/h2>\n
\n
\n
Activer les champs personnalis\u00e9s dans l’\u00e9diteur de blocs<\/h3>\n
![\"Activation](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/10\/block-bindings-api-editor-preferences.png\" "\\"The")
Enregistrer les champs personnalis\u00e9s<\/h3>\n
functions.php<\/code> du th\u00e8me. Ajoutez ensuite le code suivant :<\/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>\nAjouter les valeurs des champs personnalis\u00e9s \u00e0 une page<\/h3>\n
\n
kinsta_famous_quote<\/code> dans la colonne de gauche. Puis, ajoutez le contenu de notre citation \u00e0 droite : The future belongs to those who believe in the beauty of their dreams. – Eleanor Roosevelt<\/li>\nkinsta_photo<\/code>. Ajoutez l’URL de l’image que nous voulons utiliser \u00e0 droite.<\/li>\n<\/ol>\n![\"Ajout](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/10\/block-bindings-api-editor-custom-field-config.png\" "\\"WordPress")
Lier les donn\u00e9es des champs personnalis\u00e9s aux blocs<\/h3>\n
![\"Trouver](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/10\/block-bindings-api-site-editor-templates.png\" "\\"The")
![\"Ajout](\"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![\"Visualisation](\"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> est associ\u00e9e \u00e0 notre champ personnalis\u00e9 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> correspond \u00e0 notre champ personnalis\u00e9 kinsta_famous_quote<\/code>.<\/p>\n![\"WordPress](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/10\/block-bindings-api-site-editor-image-block-bound.png\" "\\"Image")
![\"Notre](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/10\/block-bindings-api-site-editor-paragraph-block-bound.png\" "\\"Paragraph")
![\"Les](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/10\/block-bindings-api-result.jpg\" "\\"WordPress")
Autres possibilit\u00e9s pour les blocs de liaison<\/h3>\n
\n
kinsta_photo_alt<\/code>, \u00e0 l’attribut alt<\/code> comme suit :\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>\nAller plus loin avec l’API Block Bindings<\/h2>\n
\n
R\u00e9sum\u00e9<\/h2>\n