L’API Block Bindings est un outil puissant de l’éditeur de blocs qui vous permet de connecter n’importe quelle source de données aux attributs d’un bloc.
Cette API a été introduite pour la première fois dans WordPress 6.5 et, dans sa version initiale, elle permettait aux utilisateurs de WordPress d’afficher les valeurs des champs personnalisés dans les articles et les pages.
L’API Block Bindings sert de base à d’autres fonctionnalités robustes de WordPress. Parmi les exemples, on peut citer le modèle Synced et la variation du bloc Date de publication introduite dans WordPress 6.9.
Alors, qu’est-ce que l’API Block Bindings ? Et à quoi sert-elle ? Nous vous proposons une introduction simple et un exemple concret montrant comment créer des liens entre les blocs Gutenberg et des sources de données externes.
Mettons-nous au travail.
L’API Block Bindings : Concepts de base
Comme nous l’avons mentionné plus haut, l’API Block Bindings vous permet de créer des liens entre une source de données et les attributs d’un bloc.
Si vous n’êtes pas familier avec les attributs de bloc, naviguez jusqu’au répertoire src de la bibliothèque de blocs du projet Gutenberg sur GitHub, trouvez le bloc Paragraphe et ouvrez le fichier block.json. La propriété attributes fournit une liste des attributs du bloc Paragraphe.
"attributes": {
"content": {
"type": "rich-text",
"source": "rich-text",
"selector": "p",
"role": "content"
},
"dropCap": {
"type": "boolean",
"default": false
},
"placeholder": {
"type": "string"
},
"direction": {
"type": "string",
"enum": [ "ltr", "rtl" ]
}
},Les blocs suivants prennent en charge l’API Block Bindings à partir de WordPress 6.9 et peuvent donc être liés à vos champs personnalisés :
| Blocs pris en charge | Attributs |
|---|---|
| Paragraphe | contenu |
| Titre | contenu |
| Image | id, url, alt, title, caption |
| Bouton | texte, url, linkTarget, rel |
Pour connecter vos champs personnalisés aux blocs Gutenberg, vous devez d’abord les enregistrer. Le code suivant enregistre un champ personnalisé via une extension WordPress ou le fichier functions.php de votre thème :
add_action( 'init', function() {
register_post_meta( 'your-post-type', 'myplugin_meta_key', [
'show_in_rest' => true,
'single' => true,
'type' => 'string',
'description' => __( 'City name', 'textdomain' ),
'auth_callback' => 'is_user_logged_in',
] );
} );register_post_meta accepte un tableau d’attributs qui définissent les caractéristiques des champs personnalisés, et la documentation en fournit une liste complète. Pour qu’un champ personnalisé soit accessible à l’API Block Bindings, vous devez attribuer la valeur true à show_in_rest. Depuis WordPress 6.9, string est le seul type pris en charge.
Pour voir l’API Block Bindings en action avec les champs personnalisés, créez une nouvelle extension WordPress et enregistrez un champ méta avec le code ci-dessus.
<?php
/**
* Plugin Name: Block Bindings example
* Description: Example plugin that uses the Block Bindings API.
* Version: 1.0.0
* Author: Your Name
* License: GPL2 or later
* Text Domain: block-bindings-example
*/
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
add_action( 'init', function() {
register_post_meta( '', 'block_bindings_image_url', [
'show_in_rest' => true,
'single' => true,
'type' => 'string',
'description' => __( 'City name', 'block-bindings-example' ),
'auth_callback' => 'is_user_logged_in',
] );
} );Dans votre tableau de bord WordPress, activez l’extension. Ensuite, accédez à l’écran Articles et créez un nouvel article. Lorsque vous sélectionnez un bloc pris en charge, le panneau Attributs dans la colonne latérale Réglages du bloc affiche la liste des attributs qui peuvent être liés à un champ personnalisé enregistré.
Ouvrez le menu Options dans le coin supérieur droit et sélectionnez Préférences. Dans l’onglet Général, localisez la section Avancé et activez les champs personnalisés. Enregistrez vos modifications, attendez que la page se recharge, puis revenez à l’éditeur.
L’étape suivante consiste à insérer un bloc Image. Une fois le bloc sélectionné, cliquez sur l’icône + dans le panneau Attributs et sélectionnez l’attribut url. Le panneau Attributs affiche alors une liste des champs méta disponibles. Sélectionnez à nouveau l’attribut url. Vous verrez maintenant la liste des champs méta disponibles pour le type de publication actuel.
Sélectionnez votre champ méta et enregistrez la publication. Vous devriez maintenant voir votre image à la fois dans l’éditeur et dans l’interface publique.
À partir de la version 6.7 de WordPress, vous pouvez utiliser l’attribut Label pour afficher du texte dans l’interface de l’éditeur. Le bloc de code suivant en est un exemple :
add_action( 'init', function() {
register_post_meta( '', 'block_bindings_image_url', [
'show_in_rest' => true,
'single' => true,
'type' => 'string',
'description' => __( 'City image', 'block-bindings-example' ),
'label' => __('Image URL'),
'auth_callback' => 'is_user_logged_in',
] );
} );
Lorsque vous ouvrez l’éditeur de code, vous pouvez voir un objet JSON dans le délimiteur du bloc d’images. La propriété metadata.bindings.url indique que l’adresse url du bloc d’images est liée à un champ de métadonnées.
<!-- wp:image {
"metadata":{
"bindings":{
"url":{
"source":"core/post-meta",
"args":{
"key":"block_bindings_image_url"
}
}
}
}
} -->
<figure class="wp-block-image"><img alt="/></figure>
<!-- /wp:image -->La propriété source spécifie la source de données pour les liaisons de blocs. La propriété args.key établit une référence à votre champ de métadonnées.
L’aspect le plus intéressant de l’API Block Bindings est sa capacité à enregistrer des sources de données personnalisées, ce qui ouvre de nouvelles possibilités intéressantes pour les développeurs. Nous allons maintenant voir comment utiliser des données provenant de services tiers avec l’API Block Bindings.
Comment enregistrer des sources de données Block Bindings personnalisées : Un exemple concret
Une fois que vous vous serez familiarisé avec les concepts de base de l’API Block Bindings, nous pourrons passer à ses aspects les plus avancés et les plus intéressants pour les développeurs.
Comme nous l’avons déjà mentionné, l’API Block Bindings vous permet d’enregistrer des sources de données personnalisées. Vous pouvez ainsi récupérer des données à partir d’une source distante et/ou manipuler des données brutes pour générer des informations utiles qui peuvent être insérées automatiquement dans votre contenu.
Dans cette section, vous apprendrez à maximiser le potentiel des Block Bindings grâce à un exemple pratique que vous pourrez utiliser comme base pour développer vos propres applications personnalisées.
Supposons que vous souhaitiez récupérer des données à partir d’une source externe et les afficher dans vos articles, pages ou types de publication personnalisés. Par exemple, vous pourriez interroger l’API d’un service météorologique en envoyant une requête contenant la latitude et la longitude d’une ville pour obtenir des données météorologiques en temps réel, que vous pourriez ensuite afficher sur votre site.
Grâce à l’API Block Bindings, vous pouvez afficher la température actuelle ou fournir à vos lecteurs les prévisions météorologiques pour les jours à venir. Vous pouvez également modifier par programme l’attribut url d’une ou plusieurs images de la page en fonction des conditions météorologiques.
Pour ajouter cette fonctionnalité à votre site WordPress, vous devez créer une extension. Suivez les étapes suivantes :
Étape 1 : Créer un plugin basique
La première étape consiste à créer les fichiers de l’extension. Naviguez jusqu’au répertoire wp-content/plugins de votre installation WordPress et créez un nouveau dossier appelé block-bindings-example. Dans ce dossier, ajoutez les fichiers suivants :
/wp-content/plugins/
└── /block-bindings-example/
├── block-bindings-example.php
└── /includes/
├── binding-sources.php
├── meta-fields.php
└── weather-api.phpOuvrez le fichier block-bindings-example.php dans votre éditeur de code préféré et ajoutez le code suivant :
<?php
/**
* Plugin Name: Block Bindings Example
* Description: Use WordPress Block Bindings API (6.5+) to dynamically bind weather data from Open-Meteo API to Gutenberg blocks using custom post meta and a custom binding source.
* Version: 1.0.0
* Author: Your Name
* License: GPL2 or later
* Text Domain: block-bindings-example
*/
if ( ! defined( 'ABSPATH' ) ) {
exit; // Exit if accessed directly
}
/**
* Cache duration for weather data: 30 minutes
* This reduces API calls and improves performance
*/
define( 'BB_WEATHER_CACHE_TIME', HOUR_IN_SECONDS / 2 );
require_once plugin_dir_path( __FILE__ ) . 'includes/meta-fields.php';
require_once plugin_dir_path( __FILE__ ) . 'includes/binding-sources.php';
require_once plugin_dir_path( __FILE__ ) . 'includes/weather-api.php';
/**
* Setup function
*/
function bb_init_setup() {
bb_register_post_meta();
bb_register_binding_sources();
}
add_action( 'init', 'bb_init_setup' );Voici ce que fait ce code :
- La constante
BB_WEATHER_CACHE_TIMEdétermine la durée de mise en cache des données météorologiques. Cela permet de réduire les appels à l’API, d’améliorer les performances des pages et de diminuer les coûts de service. - Les expressions
require_oncecomprennent les scripts nécessaires pour enregistrer les champs méta, enregistrer la source de liaison et récupérer les données de l’API. - La fonction d’installation appelle deux fonctions qui enregistrent les champs méta des publications et les sources de liaison personnalisées.
Étape 2 : Enregistrement des champs méta des publications
L’étape suivante consiste à enregistrer les champs méta dont vous avez besoin pour votre cas d’utilisation. Ouvrez le fichier meta-fields.php dans le dossier includes et ajoutez le code suivant :
<?php
/**
* Registers custom post meta fields so they appear in the REST API and Block Bindings editor panel
*/
function bb_register_post_meta() {
if ( ! function_exists( 'register_post_meta' ) ) {
return;
}
register_post_meta( 'post', 'block_bindings_city_name', [
'show_in_rest' => true,
'single' => true,
'type' => 'string',
'description' => __( 'Add city name', 'block-bindings-example' ),
'label' => __( 'City name', 'block-bindings-example' ),
'auth_callback' => 'is_user_logged_in',
] );
register_post_meta( 'post', 'block_bindings_image_url', [
'show_in_rest' => true,
'single' => true,
'type' => 'string',
'description' => __( 'Add city image URL', 'block-bindings-example' ),
'label' => __( 'City image URL', 'block-bindings-example' ),
'auth_callback' => 'is_user_logged_in',
] );
register_post_meta( 'post', 'block_bindings_city_lat', [
'show_in_rest' => true,
'single' => true,
'type' => 'string',
'description' => __( 'Add city latitude', 'block-bindings-example' ),
'label' => __( 'Latitude', 'block-bindings-example' ),
'auth_callback' => 'is_user_logged_in',
] );
register_post_meta( 'post', 'block_bindings_city_lng', [
'show_in_rest' => true,
'single' => true,
'type' => 'string',
'description' => __( 'Add city longitude', 'block-bindings-example' ),
'label' => __( 'Longitude', 'block-bindings-example' ),
'auth_callback' => 'is_user_logged_in',
] );
}La fonction register_post_meta enregistre une clé méta à utiliser dans les publications. Notez que pour utiliser les champs méta enregistrés de cette manière avec l’API Block Bindings, vous devez définir show_in_rest sur true et type sur string. Consultez la documentation pour plus d’informations.
Étape 3 : Enregistrement de la source de Block Bindings
Il est temps d’enregistrer la source de votre liaison. Ouvrez le fichier binding-sources.php et ajoutez le code suivant :
<?php
/**
* Registers a custom Block Bindings source: bb/weather-condition
*/
function bb_register_binding_sources() {
if ( ! function_exists( 'register_block_bindings_source' ) ) {
return;
}
register_block_bindings_source(
'bb/weather-condition',
[
'label' => __( 'Weather Condition', 'block-bindings-example' ),
'get_value_callback' => 'bb_get_weather_condition_value',
'uses_context' => [ 'postId' ], // We need postId to get meta values
]
);
}La fonction register_block_bindings_source() requiert le nom de la source et une fonction de rappel qui récupère les données d’une source et renvoie la valeur manipulée.
Ensuite, dans le même fichier binding-sources.php, définissez la fonction de rappel.
function bb_get_weather_condition_value( array $source_args, WP_Block $block_instance ) {
$key = $source_args['key'] ?? null;
if ( ! $key ) {
return null;
}
// Get current post ID from block context (always available in post content)
$post_id = $block_instance->context['postId'] ?? null;
// Fallback: use global loop if context is missing
if ( ! $post_id && in_the_loop() ) {
$post_id = get_the_ID();
}
if ( ! $post_id || $post_id <= 0 ) {
error_log( 'BB DEBUG: Could not determine post ID for weather binding' );
return null;
}
$weather_data = bb_fetch_and_cache_weather_data( $post_id );
if ( ! is_array( $weather_data ) || ! isset( $weather_data[ $key ] ) ) {
return null;
}
$value = $weather_data[ $key ];
// Append °C symbol for temperature
if ( $key === 'temperature' ) {
return $value . '°C';
}
return $value;
}Décomposons cette fonction :
$source_args['key']identifie les données liées à l’attribut block.- La ligne suivante récupère l’ID de l’article en cours à partir de
context. Sicontextest manquant, comme cela peut être le cas avec les aperçus, l’ID de l’article en cours est récupéré à l’aide deget_the_ID(). - Ensuite, elle appelle la fonction
bb_fetch_and_cache_weather_data, qui récupère les données de l’API. Nous définirons cette fonction à l’étape suivante. $weather_data[$key]contient les données fournies par l’API, telles que la température et le temps qu’il fait.- Si la clé est
temperature, elle ajoute°Cà la valeur fournie. - La fonction renvoie ensuite la valeur finale.
Étape 4 : Récupérer des données à partir d’une source externe
Comme indiqué ci-dessus, nous récupérons les données du service Open-Meteo (gratuit pour une utilisation non commerciale).
Pour récupérer la température et les conditions météorologiques actuelles, vous devez envoyer une requête à l’API qui inclut la latitude et la longitude d’un lieu donné et la requête var current=weather_code,temperature_2m. Vous trouverez ci-dessous un exemple de requête :
https://api.open-meteo.com/v1/forecast?latitude=-33.8717&longitude=151.2299¤t=weather_code,temperature_2mL’API fournit une réponse similaire à la suivante :
{
"latitude": -33.8717,
"longitude": 151.2299,
"generationtime_ms": 0.030875205993652344,
"utc_offset_seconds": 0,
"timezone": "GMT",
"timezone_abbreviation": "GMT",
"elevation": 13.0,
"current_units": {
"time": "iso8601",
"interval": "seconds",
"weather_code": "wmo code",
"temperature_2m":"°C"
},
"current": {
"time": "2025-12-01T16:00",
"interval": 900,
"weather_code": 3,
"temperature_2m":7.3
}
}
Maintenant que vous savez comment obtenir les données dont vous avez besoin, ouvrez le fichier weather-api.php et ajoutez le code suivant :
function bb_fetch_and_cache_weather_data( $post_id ) {
$lat = get_post_meta( $post_id, 'block_bindings_city_lat', true );
$lng = get_post_meta( $post_id, 'block_bindings_city_lng', true );
$lat = str_replace( ',', '.', trim( $lat ) );
$lng = str_replace( ',', '.', trim( $lng ) );
if ( ! is_numeric( $lat ) || ! is_numeric( $lng ) ) {
error_log( 'BB DEBUG: Invalid latitude/longitude values after normalization' );
return false;
}
$transient_key = 'bb_weather_data_' . $post_id;
$cached_data = get_transient( $transient_key );
if ( $cached_data !== false ) {
error_log( "BB DEBUG: Cache hit for post ID {$post_id}" );
return $cached_data;
}
// Build Open-Meteo API URL
$api_url = sprintf(
'https://api.open-meteo.com/v1/forecast?latitude=%s&longitude=%s¤t=weather_code,temperature_2m',
rawurlencode( $lat ),
rawurlencode( $lng )
);
error_log( "BB DEBUG: Fetching weather data from: {$api_url}" );
$response = wp_remote_get( $api_url, [ 'timeout' => 10 ] );
if ( is_wp_error( $response ) ) {
error_log( 'BB DEBUG: API request failed – ' . $response->get_error_message() );
return false;
}
if ( wp_remote_retrieve_response_code( $response ) !== 200 ) {
error_log( 'BB DEBUG: API returned non-200 status code' );
return false;
}
$body = wp_remote_retrieve_body( $response );
$data = json_decode( $body, true );
if ( ! $data || ! isset( $data['current'] ) ) {
error_log( 'BB DEBUG: Invalid or empty API response' );
return false;
}
$temperature = $data['current']['temperature_2m'] ?? null;
$weather_code = $data['current']['weather_code'] ?? 0;
$mapped_data = [
'temperature' => round( (float) $temperature ),
'weather_state' => bb_map_wmo_code_to_state( (int) $weather_code ),
];
// Cache for 30 minutes
set_transient( $transient_key, $mapped_data, BB_WEATHER_CACHE_TIME );
error_log( 'BB DEBUG: Weather data fetched and cached successfully' );
return $mapped_data;
}Cette fonction récupère les données météorologiques actuelles de l’API Open-Meteo et les stocke dans le cache à l’aide de transients. Regardons de plus près.
- Deux appels à
get_post_metarécupèrent la latitude et la longitude de votre position. - Les deux lignes suivantes normalisent le séparateur décimal au cas où l’utilisateur saisirait une virgule au lieu d’un point.
- Le bloc conditionnel vérifie que les valeurs sont au format numérique à l’aide de
is_numeric(). - Ensuite, il vérifie si les données sont dans le cache. Si c’est le cas, il renvoie les données mises en cache et arrête la fonction sans envoyer de requête à l’API.
- Si aucune donnée n’est trouvée dans le cache, la requête est créée et la réponse est stockée.
- Les lignes suivantes fournissent
temperatureetweather_code. weather_codeest mappé àweather_stategrâce à la fonctionbb_map_wmo_code_to_state, qui est définie ci-dessous.- Les données sont sauvegardées avec
set_transient. - Enfin, la fonction renvoie les données mappées.
Enfin, définissez la fonction qui traduit weather_code en une chaîne lisible par l’homme :
function bb_map_wmo_code_to_state( $code ) {
if ( $code >= 0 && $code <= 3 ) {
return 'clear';
} elseif ( $code >= 51 && $code <= 67 ) {
return 'rainy';
} elseif ( $code >= 71 && $code <= 77 ) {
return 'snowy';
} elseif ( $code >= 95 ) {
return 'thunderstorm';
}
return 'cloudy';
}Le code est terminé et votre extension est prête à être testée.
Comment utiliser l’API Block Bindings
Il est temps d’apprendre à utiliser les nouvelles fonctionnalités ajoutées à votre site grâce à l’API Block Bindings !
Dans votre tableau de bord WordPress, accédez à l’écran Extensions et activez l’extension Block Bindings Example que vous venez de créer.
Ensuite, créez un nouvel article ou une nouvelle page. Ajoutez un bloc Image, un titre et quatre blocs Row contenant chacun deux paragraphes, comme le montre l’image ci-dessous. Sauvegardez ensuite la publication.
Ensuite, ajoutez vos champs personnalisés et enregistrez à nouveau la publication.
Sélectionnez le bloc Image et trouvez le panneau Attributs dans la colonne latérale Réglages du bloc. Cliquez sur le bouton + pour ouvrir le menu déroulant, qui affiche la liste des attributs du bloc Image qui prennent en charge Block Bindings. Sélectionnez l’élément url.
Après avoir sélectionné l’attribut de bloc, l’onglet Avancé affiche un nouvel élément URL avec la description « Non connecté » Cliquez à nouveau sur l’élément url pour afficher la liste des sources de liaison disponibles. Post Meta fournit les quatre champs personnalisés enregistrés pour le type de message, ainsi que leurs valeurs respectives. Sélectionnez City Image URL.
Vous avez attribué le champ méta City Image URL à l’attribut url du bloc Image. Vous devriez maintenant voir une photo de la ville que vous avez choisie.
Procédez de la même manière pour les autres champs méta. Attribuez le champ Nom de la ville à l’attribut content du bloc Titre et les champs Latitude et Longitude aux blocs Paragraphe correspondants.
Reliez maintenant les deux derniers blocs à votre source de liaison personnalisée. Malheureusement, comme vous l’avez vu dans les captures d’écran précédentes, cette option n’est pas disponible dans l’interface utilisateur de l’éditeur.
Actuellement, vous devez passer à l’éditeur de code et écrire manuellement le balisage pour les deux blocs liés à votre source de liaison. Vous trouverez ci-dessous le code permettant d’afficher la température fournie par le service Open-Meteo :
<!-- wp:paragraph {
"metadata":{
"bindings":{
"content":{
"source":"bb/weather-condition",
"args":{
"key":"temperature"
}
}
}
}
} -->
<p>Placeholder</p>
<!-- /wp:paragraph -->Avec cette méthode, le nom de votre source de liaison apparaîtra dans l’éditeur comme Weather Condition, mais les données réelles ne seront visibles que dans la partie frontend.
Il est clair que l’ajout manuel d’un objet JSON à la balise du bloc n’est pas un processus convivial. Heureusement, WordPress 6.9 a apporté des améliorations significatives à l’API Block Bindings, rendant possible la création d’une interface utilisateur pour les sources de données personnalisées. Essayons d’améliorer notre extension avec une interface utilisateur personnalisée.
Comment créer une interface utilisateur pour vos sources Block Bindings personnalisées ?
Pour créer une interface utilisateur pour votre source de liaison personnalisée, vous devez écrire du code JavaScript. Tout d’abord, créez un sous-dossier js sous /includes et créez-y un fichier block-bindings-ui.js. La structure de l’extension est maintenant la suivante :
/wp-content/plugins/
└── /block-bindings-example/
├── block-bindings-example.php
└── /includes/
├── binding-sources.php
├── meta-fields.php
└── weather-api.php
└── /js/
└── block-bindings-ui.jsDans un premier temps, ajoutez le script JS au fichier principal de votre extension :
function bb_enqueue_weather_bindings_ui() {
if ( ! function_exists( 'register_block_bindings_source' ) ) {
return;
}
$js_file_path = plugin_dir_path( __FILE__ ) . 'includes/js/block-bindings-ui.js';
if ( ! file_exists( $js_file_path ) ) {
return;
}
// Enqueue the script only in the editor
wp_enqueue_script(
'bb-weather-bindings-ui',
plugin_dir_url( __FILE__ ) . 'includes/js/block-bindings-ui.js',
[ 'wp-blocks', 'wp-element', 'wp-dom-ready', 'wp-block-bindings' ],
filemtime( $js_file_path ),
true
);
}
add_action( 'enqueue_block_editor_assets', 'bb_enqueue_weather_bindings_ui' );Voici ce que fait cette fonction :
- Tout d’abord, elle vérifie que la fonction
register_block_bindings_source()existe. - Ensuite, elle vérifie que le fichier
block-bindings-ui.jsexiste dans le dossier/includes/jsde l’extension. - La fonction
wp_enqueue_script()met en file d’attente le script à utiliser dans l’éditeur. Pour une description détaillée de la fonction, veuillez vous référer à la documentation. - Elle utilise le crochet
enqueue_block_editor_assetspour mettre en file d’attente les scripts pour l’interface d’édition.
Ouvrez maintenant le fichier block-bindings-ui.js et écrivez le code suivant :
wp.blocks.registerBlockBindingsSource({
name: 'bb/weather-condition',
label: 'Weather Condition',
useContext: [ 'postId', 'postType' ],
getValues: ( { bindings } ) => {
if ( bindings.content?.args?.key === 'temperature' ) {
return {
content: 'Current temperature provided by Open-Meteo.',
};
}
if ( bindings.content?.args?.key === 'weather_state' ) {
return {
content: 'Current conditions.',
};
}
return {
content: bindings.content,
};
},
getFieldsList() {
return [
{ label: 'Temperature (°C)', type: 'string', args: { key: 'temperature' } },
{ label: 'Weather Conditions', type: 'string', args: { key: 'weather_state' } }
];
}
});- La fonction
registerBlockBindingsSource()enregistre une source de reliure dans l’éditeur de blocs. nameest un identifiant unique pour votre source de liaison. Il doit correspondre exactement au nom utilisé en PHP avecregister_block_bindings_source().labelest un nom lisible par l’homme, affiché dans le menu déroulant Source du panneau Attributs.useContextdéfinit les valeurs de contexte dont cette source a besoin dans le bloc.postIdest nécessaire pour que la source sache quelles données méta/météo de l’article doivent être lues.getValuesfournit un aperçu de la valeur délimitée dans l’éditeur de bloc. Elle renvoie les options qui apparaissent dans la liste déroulante après que l’utilisateur a sélectionné la source de liaison (« Météo » dans notre exemple). Cette méthode est disponible depuis WordPress 6.9.getFieldsListrenvoie les options qui apparaissent dans la liste déroulante après que l’utilisateur a sélectionné la source de liaison (« Conditions météorologiques » dans notre exemple).
Enregistrez le fichier et revenez à l’éditeur. Votre source Weather Conditions est maintenant disponible dans l’interface de l’éditeur, à côté de Post Meta. Rechargez la page, puis connectez un bloc Paragraphe ou En-tête à votre source de liaison. L’image ci-dessous montre le résultat.
L’image finale montre le résultat sur le frontend du site web.
Que pouvez-vous faire d’autre avec l’API Block Bindings ?
Cet article ne fait qu’effleurer la surface de ce que vous pouvez construire avec l’API Block Bindings. Ce qui est formidable, c’est que le développement de cette puissante fonctionnalité de WordPress est loin d’être terminé, et nous pouvons nous attendre à de nouvelles implémentations et à de nouveaux ajouts à l’avenir.
L’intégration de l’API Block Bindings avec d’autres API puissantes de WordPress, telles que l’API Interactivity, vous permet de créer des applications dynamiques et interactives qui vont bien au-delà des fonctions traditionnelles de blogging qui ont rendu WordPress populaire dans ses premières années d’existence.
WordPress n’est plus seulement une plateforme de blogs ou un constructeur de sites web. Il est désormais en passe de devenir une plateforme de développement polyvalente pour tous les types d’applications web.
Plus vos applications sont puissantes, plus votre service d’hébergement devient important. Kinsta propose un hébergement infogéré Premium avec de hautes performances, une sécurité robuste, une automatisation poussée et un support de premier ordre reconnu comme le meilleur de l’industrie par les utilisateurs de G2.
Les applications web les plus puissantes nécessitent la meilleure infrastructure d’hébergement. Jetez un coup d’œil aux plans de Kinsta pour trouver celui qui répond le mieux aux besoins de votre site.
Carlo est un passionné de webdesign et de développement frontend. Il joue avec WordPress depuis plus de 10 ans, notamment en collaboration avec des universités et des établissements d'enseignement italiens et européens. Il a écrit des dizaines d'articles et de guides sur WordPress, publiés à la fois sur des sites web italiens et internationaux, ainsi que dans des magazines imprimés. Vous pouvez trouver Carlo sur X et LinkedIn.
