{"id":82055,"date":"2026-01-09T09:46:08","date_gmt":"2026-01-09T08:46:08","guid":{"rendered":"https:\/\/kinsta.com\/fr\/?p=82055&preview=true&preview_id=82055"},"modified":"2026-01-13T09:00:29","modified_gmt":"2026-01-13T08:00:29","slug":"api-wordpress-block-bindings","status":"publish","type":"post","link":"https:\/\/kinsta.com\/fr\/blog\/api-wordpress-block-bindings\/","title":{"rendered":"L’API WordPress Block Bindings : Qu’est-ce que c’est et comment l’utiliser pour construire des sites web dynamiques ?"},"content":{"rendered":"

L’API Block Bindings est un outil puissant de l’\u00e9diteur de blocs qui vous permet de connecter n’importe quelle source de donn\u00e9es aux attributs d’un bloc.<\/p>\n

Cette API a \u00e9t\u00e9 introduite pour la premi\u00e8re fois dans WordPress 6.5<\/a> et, dans sa version initiale<\/span>, elle permettait aux utilisateurs de WordPress d’afficher les valeurs des champs personnalis\u00e9s dans les articles et les pages.<\/p>\n

L’API Block Bindings sert de base \u00e0 d’autres fonctionnalit\u00e9s robustes de WordPress. Parmi les exemples, on peut citer le mod\u00e8le Synced<\/a> et la variation du bloc Date de publication<\/strong>\u00a0introduite dans WordPress 6.9<\/a>.<\/p>\n

Alors, qu’est-ce que l’API Block Bindings ? Et \u00e0 quoi sert-elle ? Nous vous proposons une introduction simple et un exemple concret montrant comment cr\u00e9er des liens entre les blocs Gutenberg et des sources de donn\u00e9es externes.<\/p>\n

Mettons-nous au travail.
\n

<\/div><\/kinsta-auto-toc><\/p>\n

L’API Block Bindings : Concepts de base<\/h2>\n

Comme nous l’avons mentionn\u00e9 plus haut, l’API Block Bindings vous permet de cr\u00e9er des liens entre une source de donn\u00e9es et les attributs d’un bloc.<\/p>\n

Si vous n’\u00eates pas familier avec les attributs de bloc, naviguez jusqu’au r\u00e9pertoire src<\/code> de la biblioth\u00e8que de blocs du projet Gutenberg sur GitHub, trouvez le bloc Paragraphe et ouvrez le fichier block.json<\/code><\/a>. La propri\u00e9t\u00e9 attributes<\/code> fournit une liste des attributs du bloc Paragraphe.<\/p>\n

\"attributes\": {\n\t\"content\": {\n\t\t\"type\": \"rich-text\",\n\t\t\"source\": \"rich-text\",\n\t\t\"selector\": \"p\",\n\t\t\"role\": \"content\"\n\t},\n\t\"dropCap\": {\n\t\t\"type\": \"boolean\",\n\t\t\"default\": false\n\t},\n\t\"placeholder\": {\n\t\t\"type\": \"string\"\n\t},\n\t\"direction\": {\n\t\t\"type\": \"string\",\n\t\t\"enum\": [ \"ltr\", \"rtl\" ]\n\t}\n},<\/code><\/pre>\n
Les blocs suivants prennent en charge l’API Block Bindings \u00e0 partir de WordPress 6.9 et peuvent donc \u00eatre li\u00e9s \u00e0 vos champs personnalis\u00e9s :<\/p>\n\n\n\n\n\n\n\n\n
Blocs pris en charge<\/th>\nAttributs<\/th>\n<\/tr>\n<\/thead>\n
Paragraphe<\/td>\ncontenu<\/td>\n<\/tr>\n
Titre<\/td>\ncontenu<\/td>\n<\/tr>\n
Image<\/td>\nid, url, alt, title, caption<\/td>\n<\/tr>\n
Bouton<\/td>\ntexte, url, linkTarget, rel<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
Pour connecter vos champs personnalis\u00e9s aux blocs Gutenberg, vous devez d’abord les enregistrer<\/a>. Le code suivant enregistre un champ personnalis\u00e9 via une extension WordPress ou le fichier functions.php<\/code><\/a> de votre th\u00e8me :<\/p>\n
add_action( 'init', function() {\n\tregister_post_meta( 'your-post-type', 'myplugin_meta_key', [\n\t\t'show_in_rest'  => true,\n\t\t'single'        => true,\n\t\t'type'          => 'string',\n\t\t'description'   => __( 'City name', 'textdomain' ),\n\t\t'auth_callback' => 'is_user_logged_in',\n\t] );\n} );<\/code><\/pre>\n
register_post_meta<\/code> accepte un tableau d’attributs qui d\u00e9finissent les caract\u00e9ristiques des champs personnalis\u00e9s, et la documentation en fournit une liste compl\u00e8te<\/a>. Pour qu’un champ personnalis\u00e9 soit accessible \u00e0 l’API Block Bindings, vous devez attribuer la valeur true \u00e0 show_in_rest<\/code>. Depuis WordPress 6.9, string<\/code> est le seul type pris en charge.<\/p>\n
Pour voir l’API Block Bindings en action avec les champs personnalis\u00e9s, cr\u00e9ez une nouvelle extension WordPress et enregistrez un champ m\u00e9ta avec le code ci-dessus.<\/p>\n
<?php\n\/**\n * Plugin Name: Block Bindings example\n * Description: Example plugin that uses the Block Bindings API.\n * Version: 1.0.0\n * Author: Your Name\n * License: GPL2 or later\n * Text Domain: block-bindings-example\n *\/\n\nif ( ! defined( 'ABSPATH' ) ) {\n\texit;\n}\n\nadd_action( 'init', function() {\n\tregister_post_meta( '', 'block_bindings_image_url', [\n\t\t'show_in_rest'  => true,\n\t\t'single'\t    => true,\n\t\t'type'\t\t    => 'string',\n\t\t'description'   => __( 'City name', 'block-bindings-example' ),\n\t\t'auth_callback' => 'is_user_logged_in',\n\t] );\n} );<\/code><\/pre>\n
Dans votre tableau de bord WordPress, activez l’extension. Ensuite, acc\u00e9dez \u00e0 l’\u00e9cran Articles et cr\u00e9ez un nouvel article. Lorsque vous s\u00e9lectionnez un bloc pris en charge, le panneau Attributs<\/strong> dans la colonne lat\u00e9rale R\u00e9glages du bloc affiche la liste des attributs qui peuvent \u00eatre li\u00e9s \u00e0 un champ personnalis\u00e9 enregistr\u00e9.<\/p>\n
\"Attributs
Attributs du bloc d’images prenant en charge Block Bindings<\/figcaption><\/figure>\n
Ouvrez le menu Options<\/strong> dans le coin sup\u00e9rieur droit et s\u00e9lectionnez Pr\u00e9f\u00e9rences<\/strong>. Dans l’onglet G\u00e9n\u00e9ral<\/strong>, localisez la section Avanc\u00e9<\/strong> et activez les champs personnalis\u00e9s. Enregistrez vos modifications, attendez que la page se recharge, puis revenez \u00e0 l’\u00e9diteur.<\/p>\n
\"Activer
Activer les champs personnalis\u00e9s dans les pr\u00e9f\u00e9rences de l’\u00e9diteur.<\/figcaption><\/figure>\n