Un aperçu du Block Bindings actif dans l’éditeur, pour les rédacteurs

« Vous pouvez maintenant connecter un bloc à une source de données personnalisée sans écrire de code. » La documentation officielle de WordPress présente ainsi l’API Block Bindings, stabilisée avec la version 6.5. Le problème ne se situe pas côté développeur : la liaison entre un bloc paragraphe et un champ personnalisé fonctionne très bien techniquement. Il se situe côté rédacteur, qui ouvre l’article, voit un texte comme n’importe quel autre, le modifie en pensant corriger une faute, et découvre après publication que sa modification a été silencieusement ignorée puisque le contenu réel provient d’ailleurs.

Ce cas s’est produit sur un site institutionnel où plusieurs blocs de la page d’accueil étaient liés à des champs personnalisés alimentés par un import automatisé. Le correctif ne modifie rien à la mécanique de liaison : il ajoute un signal visuel dans l’éditeur pour que la personne qui rédige sache, avant de cliquer, qu’elle regarde un contenu piloté par une source externe.

Comprendre où vit l’information de liaison

Un bloc lié via Block Bindings porte l’information dans son attribut metadata.bindings, visible dans le HTML du contenu stocké en base sous forme de commentaire de bloc Gutenberg.

<!-- wp:paragraph {"metadata":{"bindings":{"content":{"source":"core/post-meta","args":{"key":"adresse_agence"}}}}} -->
<p>12 rue des Tilleuls, 69003 Lyon</p>
<!-- /wp:paragraph -->

Côté éditeur, cette information reste accessible via l’API JavaScript des blocs, notamment à travers wp.data.select( 'core/block-editor' ).getBlockAttributes(), qui retourne l’objet metadata complet pour un bloc donné.

Ajouter un badge visuel dans l’inspecteur du bloc

Le filtre JavaScript editor.BlockEdit permet d’envelopper le rendu de n’importe quel bloc et d’y injecter un élément d’interface supplémentaire, sans modifier son comportement d’édition.

import { addFilter } from '@wordpress/hooks';
import { createHigherOrderComponent } from '@wordpress/compose';
import { InspectorControls } from '@wordpress/block-editor';
import { PanelBody, Notice } from '@wordpress/components';

const ajouterBadgeLiaison = createHigherOrderComponent( ( BlockEdit ) => {
    return ( props ) => {
        const bindings = props.attributes?.metadata?.bindings;

        if ( ! bindings ) {
            return <BlockEdit { ...props } />;
        }

        const sources = Object.values( bindings ).map( ( b ) => b.source );

        return (
            <>
                <BlockEdit { ...props } />
                <InspectorControls>
                    <PanelBody title="Donnée liée">
                        <Notice status="info" isDismissible={ false }>
                            Ce bloc affiche une valeur liée à : { sources.join( ', ' ) }. Toute modification directe sera ignorée à l'enregistrement.
                        </Notice>
                    </PanelBody>
                </InspectorControls>
            </>
        );
    };
}, 'ajouterBadgeLiaison' );

addFilter( 'editor.BlockEdit', 'wpmoderne/badge-liaison', ajouterBadgeLiaison );

Rendre le badge visible sans ouvrir l’inspecteur

Un panneau dans l’inspecteur reste caché tant que le rédacteur ne clique pas dessus. Pour un signal réellement visible, un contour de couleur directement sur le bloc, ajouté via useBlockProps et une classe conditionnelle, attire l’œil sans étape supplémentaire.

.has-liaison-active {
    outline: 2px dashed #2271b1;
    outline-offset: 4px;
    position: relative;
}

.has-liaison-active::before {
    content: "Donnée liée";
    position: absolute;
    top: -10px;
    left: 8px;
    background: #2271b1;
    color: #fff;
    font-size: 11px;
    padding: 1px 6px;
    border-radius: 2px;
}

Nommer la source de façon compréhensible

Afficher core/post-meta ne signifie rien pour un rédacteur non technique. Une table de correspondance entre la clé technique et un libellé métier rend le badge réellement utile.

• adresse_agence devient « Adresse de l’agence (import CRM) ».
• horaires_ouverture devient « Horaires (synchronisés chaque nuit) ».
• prix_a_partir_de devient « Prix (mis à jour automatiquement) ».

Cette table peut vivre dans un simple tableau PHP filtré côté REST, exposé au script JavaScript de l’éditeur via wp_add_inline_script, pour rester facilement maintenable par la personne qui configure les imports.

Empêcher la modification plutôt que la tolérer silencieusement

Au-delà du signal visuel, il est possible de verrouiller le contenu du bloc lié pour qu’il ne soit même plus éditable directement, via l’attribut lock du bloc combiné à la liaison, forçant le rédacteur à passer par la source (le champ personnalisé ou l’import) plutôt que par le bloc affiché.

En résumé

Block Bindings résout un vrai problème technique — afficher une donnée dynamique dans un contenu structuré — mais déplace le risque vers l’expérience rédacteur si rien ne signale la liaison. Un badge visuel, correctement nommé, suffit à transformer une confusion silencieuse en information claire, sans toucher à la mécanique de liaison elle-même.