WordPress 6.5 introduit une nouvelle fonctionnalité : l'API Block Bindings. Il s'agit d'un outil qui facilite l'utilisation de l'éditeur de blocs et vous permet d'ajouter toutes sortes de données à différentes parties de votre site web. Cela signifie que vous aurez beaucoup moins de code personnalisé à écrire lors de l'édition.
Qu'est-ce que l'API de liaison par blocs ?
Supposons que vous ayez un bloc de base à utiliser sur une page web pour afficher des informations provenant d'une source spécifique, comme les détails d'un article ou des règles personnalisées formulées dans un code PHP. Comment procéder ? Voici comment rendre les choses simples et claires.
Dans les versions précédentes de WordPress, si vous souhaitiez afficher des informations spéciales sur une page web, telles que des détails supplémentaires pour un article ou un contenu personnalisé par la logique PHP, vous deviez généralement créer un tout nouveau bloc personnalisé. Ce processus pouvait s'avérer à la fois compliqué et chronophage.
Cependant, à partir de WordPress 6.5, les choses sont devenues beaucoup plus faciles. Avec l'API Block Binding, vous pouvez maintenant faire en sorte qu'un bloc standard existant, tel qu'un paragraphe ou un titre, récupère des données directement à partir d'une source différente sans avoir à créer un bloc entièrement nouveau. Cela signifie que vous pouvez faire en sorte qu'un bloc de paragraphe affiche directement les métadonnées d'un article, ou qu'un bloc de titre affiche la logique PHP générée par un plugin, le tout sans avoir à vous plonger dans la programmation React, l'enregistrement des blocs ou la création d'un nouveau bloc personnalisé à partir de zéro.
L'API Block Binding de WordPress 6.5 est une mise à jour majeure qui rend l'extension de l'éditeur et des blocs beaucoup plus facile. En fait, cette nouvelle API a été utilisée pour démontrer comment lier les champs personnalisés d'un article à un bloc central.
Pour aller un peu plus loin, vous pouvez également utiliser cette fonctionnalité pour personnaliser les blocs et obtenir des données à partir de sources spéciales que vous avez définies.
Pour un examen approfondi de la manière de créer et d'utiliser les liaisons de blocs, consultez le blog des développeurs de WordPress sur le siteDidacticiel d'introduction.
Comment fonctionne la reliure par blocs ?
esquissée
Avant de voir comment utiliser l'API Block Binding pour établir un lien avec une source de données personnalisée, nous allons expliquer brièvement le fonctionnement de cette API. Ensuite, nous verrons plus en détail comment lier un bloc standard à un champ personnalisé dans un article.
Le tableau ci-dessous présente les blocs qui peuvent désormais être liés et leurs propriétés :
Bien qu'il n'y ait pas beaucoup de blocs et d'attributs pouvant être utilisés avec cette nouvelle fonctionnalité pour l'instant, ils sont suffisants pour couvrir de nombreux besoins courants. À l'avenir, il est prévu d'étendre cette fonctionnalité à d'autres blocs principaux et personnalisés.
Pour utiliser la liaison par bloc, vous devez la configurer de manière à indiquer à WordPress d'utiliser des balises spécifiques pour récupérer des informations à partir des sources de données que vous avez choisies. Une fois configurée, la logique de ces sources de données sera utilisée pour afficher le contenu lorsqu'il sera affiché sur le front-end de la page.
Une fois qu'une propriété est liée, vous ne pouvez pas la modifier dans l'éditeur, et l'éditeur affiche un drapeau vous indiquant que la propriété est déjà connectée à une source de données.
Voici un exemple de la manière dont on peut en tirer parti grâce à la prise en charge intégrée des champs personnalisés.
Champs personnalisés
Dans la première version de l'API Block Binding, il n'y avait pas d'interface directe pour lier les propriétés aux champs personnalisés. Cela signifie que vous devez aller manuellement dans l'éditeur de code de Gutenberg pour ajouter un code spécifique.
Si vous souhaitez relier les attributs pris en charge aux champs personnalisés de l'article, vous pouvez ajouter le code dans le format suivant :
<!-- wp:paragraph {
"metadata":{
"bindings":{
"content":{
"source":"core/post-meta",
"args":{
"key":"book-genre"
}
}
}
}
} -->
<p></p>
<!-- /wp:paragraph -->Pour que cela fonctionne, vous devez ajouter un code au fichier functions.php de votre thème ou à un plugin afin de vous assurer que vos champs personnalisés ont bien été enregistrés dans les métadonnées de l'article.
register_meta(
'post',
'book-genre'.
array(
'show_in_rest' => true,
'single' => true,
'type' => 'string', 'single' => true, 'type' => 'string', 'single' => true
'default' => 'Champ de texte par défaut',
)
) ;Gardez à l'esprit que, par mesure de sécurité, vous devez supprimer temporairement le fichiershow_in_restest fixée àvrai.
Plus de sources de données pour l'avenir
La prise en charge des métadonnées des articles n'est qu'une première étape. Nous prévoyons d'ajouter d'autres sources de données dans WordPress 6.6, telles que les informations sur le site, les informations sur les utilisateurs et les petites annonces.
De plus, l'API Block Binding vous permet d'enregistrer vos propres sources de données, ce qui est la même fonctionnalité que nous utilisons pour enregistrer les métadonnées des articles.
Enregistrer une source personnalisée
esquissée
Pour créer une nouvelle source de données liée à un bloc, vous devez utiliser une source de données liée à un bloc nomméeregister_block_bindings_source()voici son format de base :
register_block_bindings_source(
chaîne de caractères $source_name,
array $source_properties
).Pour enregistrer une nouvelle source de liaison de blocs, vous pouvez utiliser deux paramètres :
- $source_name: Il s'agit de l'identifiant unique de votre source de données personnalisée, qui doit être au format "espace de noms/nom". N'oubliez pas que chaque source de données a besoin d'un espace de noms unique.
- $source_properties: Il s'agit d'un tableau qui définit les caractéristiques de la source de données, y compris :
- étiquette: Il s'agit d'une chaîne de texte qui décrit votre source de données, bien qu'actuellement cette étiquette ne soit pas visible dans l'interface.
- get_value_callback: Il s'agit d'une fonction PHP ou d'une fermeture qui sera appelée lorsque la source de liaison du bloc devra utiliser les données.
- use_context(facultatif) : il s'agit d'un tableau qui spécifie ce qui doit être inclus si votre source de données requiert des informations supplémentaires (par exemple, l'ID de l'article en cours).
Lorsque WordPress traite le bloc et trouve une source de données personnalisée à charger, il appelle la fonctionget_value_callbackfonction. La fonction doit être configurée comme suit :
projectslug_bindings_callback(
array $source_args,
WP_Block $block_instance,
chaîne $attribute_name
).Utilisation de mécanismes d'enregistrement
En pratique, vous pouvez utiliser les fonctions d'enregistrement suivantes pour créer des liens simples pour les informations sur les droits d'auteur :
add_action( 'init', 'projectslug_register_block_bindings' ) ;
function projectslug_register_block_bindings() {
register_block_bindings_source( 'projectslug/copyright', array(
'label' => __('Copyright', 'projectslug' ),
'get_value_callback' => 'projectslug_copyright_binding'
) ) ;
}
function projectslug_copyright_binding() {
return '© ' . date( 'Y' ) ; } function projectslug_copyright_binding() { return '© ' .
}Voici un exemple de lien entre un bloc de paragraphe et une source de données pour les informations sur les droits d'auteur, qui montre ce que cela donne sur le front-end d'un site web :
<!-- wp:paragraph {
"metadata":{
"bindings":{
"content":{
"source":"projectslug/copyright"
}
}
}
} -->
<p>Blocage du droit d'auteur</p>
<!-- /wp:paragraph -->
Bien entendu, il ne s'agit que d'un exemple de base. Vous pouvez utiliser d'autres paramètres dans la fonction pour créer des fonctionnalités plus complexes.
Autres fonctions de l'API
En outre, un certain nombre d'autres fonctions sont actuellement accessibles au public :
- unregister_block_bindings_source($source_name): Permet de désenregistrer une source de données qui a déjà été définie.
- get_all_registered_block_bindings_sources(): Permet d'obtenir la liste de toutes les sources de données enregistrées.
- get_block_bindings_source($source_name): Permet d'obtenir les détails d'une source de données enregistrée spécifique.
Notez également que si les sources de données principales sont disponibles dans l'interface utilisateur de l'éditeur, ces API pour l'éditeur sont actuellement privées. Cela signifie que nous discutons encore de la manière de standardiser l'utilisation de ces fonctionnalités dans l'interface utilisateur.
Par conséquent, si vous souhaitez disposer d'une interface conviviale pour gérer les champs personnalisés, vous devez maintenant développer cette fonctionnalité vous-même.
Poursuite de l'étude et prochaines étapes
Vous voulez être encore plus inspiré en utilisant des blocs de reliure dans vos projets ? Jetez un coup d'œil à lablock-bindings.phpLe code d'enregistrement dans le fichier et le code d'identification intégrécore/post-metaet ne manquez pas nos block bindings !Série de tutoriels d'introduction.
La reliure en bloc n'en est qu'à ses débuts.À l'avenir, nous prévoyons deLes fonctions suivantes sont mises en œuvre :
- Permet de modifier les valeurs des champs méta directement dans l'interface utilisateur.
- Ajouter une fonctionnalité à l'éditeur pour permettre aux utilisateurs d'ajouter facilement des liaisons.
- Introduction de nouvelles sources de données intégrées, notamment les données relatives aux sites, aux articles et aux catégories.
- Prise en charge étendue d'un plus grand nombre de blocs de base.
- Fournit des outils aux développeurs pour étendre l'interface utilisateur de l'éditeur.
Vos commentaires sont les bienvenus ! Vous pouvez en savoir plus sur nous viaGithubou WordPress Slack pour partager vos idées et vos cas d'utilisation avec nous afin de nous aider à affiner ensemble l'API de liaison de blocs.
