Réconcilier le PHP et le JavaScript avec le block binding de WordPress 6.5

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

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 :

1. 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.
2. Flexibilité : Vous pouvez lier des données provenant de diverses sources, y compris des champs personnalisés, des bases de données sur mesure…
3. 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 :

1. Il est actuellement limité aux blocs Paragraphe, Titre, Bouton et Image.
2. 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 :

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.