La transition de WordPress vers une interface JavaScript a découragé plusieurs développeurs de thème sur mesure. Cette frustration n’a plus aucune raison d’être.
La Fusion de PHP et JavaScript
![Proportion du PHP dans le code WordPress](https://www.gregoirenoyelle.com/wp-content/uploads/2024/06/xProportion-du-PHP-dans-le-code-WordPress.png.pagespeed.ic.iqA2v8rAr1.png)
WordPress est encore dominé par le PHP. Il représente 64% de son code, et le JavaScript seulement 18%. Cependant, l’introduction de l’éditeur Gutenberg, entièrement basé sur JavaScript, a initialement créé une fracture parmi les professionnels. Cette situation est en train de changer avec les versions récentes de WordPress, notamment la 6.5 et la 6.6 qui vient de sortir. Elles marquent une réconciliation entre ces deux technologies.
J’ai le sentiment que WordPress exploite désormais le meilleur des deux mondes : la robustesse du traitement des données avec PHP et la rapidité de mise en place et d’affichage grâce à React qui l’une des bibliothèques JavaScript les plus populaires. Cette combinaison permet de créer des sites web qui sont non seulement puissants, mais aussi rapides et réactifs.
Je l’annonçais en juin 2023, WordPress a évolué pour devenir un véritable design system, facilitant ainsi la création rapide de sites, faciles à maintenir. Cette évolution permet de se libérer de nombreux outils lourds (Elementor pour ne pas le citer) pour se concentrer sur le cœur de WordPress. Je suis même de plus en plus partisan du « minimum d’extensions » possible.
L’Importance du Block Binding
Le block binding permet de lier des blocs de contenu de manière dynamique, facilitant ainsi le mappage des données (data mapping) et l’appel de données comme le champ personnalisé (ACF, postmeta native…). Cette technique est particulièrement intéressante pour les développeurs qui cherchent à créer des interfaces utilisateur sur mesure, modernes et modulables.
Avantages du Block Binding
Le block binding offre plusieurs avantages :
- Réduction du Code personnalisé : Il n’est plus nécessaire de créer des blocs personnalisés pour chaque type de contenu dynamique. Vous pouvez utiliser les blocs de base de WordPress et les lier à des données dynamiques.
- Flexibilité : Vous pouvez lier des données provenant de diverses sources, y compris des champs personnalisés, des bases de données sur mesure…
- Facilité d’Utilisation : Bien que la première version de l’API ne dispose pas encore d’une interface utilisateur, elle simplifie grandement le processus de liaison des données dynamiques aux blocs.
Limitations du Block Binding
Pour l’instant, la version 6.5 de WordPress introduit le block binding avec certaines limitations :
- Il est actuellement limité aux blocs Paragraphe, Titre, Bouton et Image.
- Il n’y a pas encore d’interface utilisateur pour lier les champs personnalisés aux blocs. Les utilisateurs doivent passer en mode éditeur de codes pour ajouter les métadonnées de liaison directement dans le balisage du bloc.
Ces deux limitations sont plutôt mineures et j’ai pu déjà créer des modèles complexes avec cette base.
Le Block Binding en détail
Voici quelques exemples. Vous pouvez lier un champ personnalisé contenant une URL à l’attribut url
d’un bloc Image, ou un champ contenant du texte à l’attribut content
d’un bloc Paragraphe. Vous pouvez encore récupérer la valeur d’un champ ACF pour l’injecter dans les blocs qui sont compatibles.
Utilisation avec les attributs du bloc image
<!-- wp:image {
"metadata":{
"bindings":{
"url":{
"source":"namespace/slug",
"args":{
"key":"some-field"
}
},
"alt":{
"source":"namespace/slug",
"args":{
"key":"some-other-field"
}
}
}
}
} -->
<figure class="wp-block-image">
<img src="" alt="" />
</figure>
<!-- /wp:image -->
Dans cet exemple, les attributs url
et alt
du bloc Image sont liés à des champs personnalisés définis par namespace/slug
.
Note: J’ai ajouté l’indentation pour faciliter la lecture du code.
Utilisation avec un champ ACF
Ici, j’utilise la version PRO d’ACF. D’abord, je déclare une source sur mesure dans un fichier functions.php
add_action( 'init', 'elclandes_register_metas_custom' );
function elclandes_register_metas_custom() {
// Meta Lien Google Map
register_block_bindings_source(
'spect/google-map',
array(
'label' => 'Google Map',
'get_value_callback' => 'elclandes_callback_meta_google_map',
)
);
}
// Google Map
function elclandes_callback_meta_google_map( $source_args ) {
// Vérification ACF
if (! function_exists('get_field')) {
return '';
}
$lien_map = get_field('spect_lien_map');
$ouvrir_google_map = sprintf(
'<a href="%s" target="_blank">itinéraire vers le lieu</a>',
esc_url( $lien_map )
);
return $ouvrir_google_map;
}
Ensuite, j’applique cette nouvelle source sur mesure dans mon modèle:
<!-- wp:paragraph {"metadata":{"bindings":{"content":{"source":"spect/adresse"}}}} -->
<p>Meta Adresse</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->
La source est le Namespace utilisé dans la déclaration.
Futur du Block Binding
Le block binding est une fonctionnalité en constante évolution. Les futures versions de WordPress devraient bientôt inclure une interface utilisateur pour faciliter la liaison des champs personnalisés aux blocs, ainsi que le support pour un plus grand nombre de blocs et d’attributs. Les développeurs peuvent s’attendre à des améliorations continues qui rendront cette fonctionnalité encore plus puissante et accessible.
De plus, avec l’adoption croissante du block binding, on peut s’attendre à voir émerger de nouvelles bibliothèques et outils tiers pour simplifier encore davantage son utilisation et étendre ses capacités.
Vidéos publiées sur le sujet
Voici quelques-unes de mes vidéos qui offrent un aperçu concret des possibilités offertes par les dernières évolutions de WordPress :
Block Bindind et champs ACF Pro
![Block Binding WordPress avec ACF](https://www.gregoirenoyelle.com/wp-content/uploads/2024/07/Block-Binding-ACF-1-1600x900.png)
Block Binding et Data Mapping sur WordPress
![Block Binding WordPress et Data mapping](https://www.gregoirenoyelle.com/wp-content/uploads/2024/07/Block-Binding-Data-Mapping-1-1600x900.png)
Navigation de Portfolio avec le block binding
![Block binding et navigation de portfolio](https://www.gregoirenoyelle.com/wp-content/uploads/2024/07/Block-Binding-Nav-Porfolio-1600x900.png)
Pour une immersion complète, j’ai tout regroupé dans la playlist : WordPress 100% Bloc Express.
Conclusion
Le block binding représente une avancée majeure pour WordPress, permettant de créer des sites web plus dynamiques et modulables. En combinant les forces de PHP et de JavaScript, WordPress continue d’évoluer pour répondre aux besoins des développeurs. Si vous n’avez pas encore exploré le block binding, il est temps de commencer et de découvrir les possibilités infinies qu’il offre.
Quelques liens
- Ma chaîne Youtube @gregoirenoyelle dans laquelle je compte publier beaucoup de tutoriels sur le FSE.
- La première formation intégrale sur le FSE (Editeur de site).
- Nos meetups mensuel WP Paris.
- Notre association parisienne WP Paris (la refonte du site en FSE est en cours) qui représente WordPress à Paris.
![](https://www.gregoirenoyelle.com/wp-content/uploads/2024/03/xfaaaster-blue.webp.pagespeed.ic.b7208njWSj.webp)
![](https://www.gregoirenoyelle.com/wp-content/uploads/2024/06/75x75xgregoire-noyelle-2024-400x400.png.pagespeed.ic.M_9Pvf8x4O.png)
Laisser un commentaire