Le WordPress d'aujourd'hui, décodé pour les développeurs

Blocs Gutenberg

templateLock verrouille un gabarit de bloc sans bloquer tout le contenu

Verrouiller un template de blocs ressemble à verrouiller un formulaire papier : la structure des cases ne bouge pas, mais chacun reste libre de remplir le texte à l'intérieur.

Par WordPress Développement • 13 décembre 2021 • 4 min de lecture • Aucun commentaire
templateLock verrouille un gabarit de bloc sans bloquer tout le contenu

Un formulaire papier bien conçu impose des cases précises, dans un ordre fixe, mais laisse chacun libre d’écrire ce qu’il veut à l’intérieur de chaque case. C’est exactement le compromis que propose la propriété templateLock pour un bloc composite construit avec InnerBlocks : verrouiller la structure sans transformer le contenu en simple affichage figé.

Cette propriété devient indispensable dès qu’un bloc composite est livré à un client peu technique : elle évite qu’un bloc soit supprimé par erreur, réordonné de façon incohérente, ou complété par un bloc étranger à la structure prévue, sans pour autant transformer l’éditeur en simple visionneuse.

Les trois valeurs possibles

templateLock accepte trois valeurs distinctes, chacune avec un comportement précis :

  • 'all' : aucune modification de structure n’est possible. Les blocs enfants ne peuvent être ni ajoutés, ni supprimés, ni réordonnés. Le texte à l’intérieur des blocs enfants reste néanmoins modifiable.
  • 'insert' : l’ajout et la suppression de blocs sont bloqués, mais le réordonnancement par glisser-déposer reste autorisé.
  • false : retire explicitement tout verrouillage, y compris celui hérité d’un bloc parent. Utile pour une exception ponctuelle dans une structure globalement verrouillée.

Un exemple concret : une fiche produit figée

L'essentiel à retenir : all empêche toute modification de structure, y compris le texte ; insert autorise le texte mais bloque l'ajout ou la suppression de blocs ; false retire tout verrouillage hérité d'un parent

Un bloc « fiche produit » impose trois zones fixes : un titre, une image, un prix. Le client doit pouvoir modifier chaque texte, mais jamais supprimer l’une des trois zones ni en ajouter une quatrième :

import { InnerBlocks } from '@wordpress/block-editor';

const TEMPLATE = [
    [ 'core/heading', { placeholder: 'Nom du produit' } ],
    [ 'core/image', {} ],
    [ 'core/paragraph', { placeholder: 'Prix TTC' } ],
];

function Edit() {
    return (
        <InnerBlocks
            template={ TEMPLATE }
            templateLock="all"
        />
    );
}

Avec templateLock="all", les trois zones restent exactement dans cet ordre, sans possibilité d’en supprimer une. Le rédacteur reste toutefois libre de modifier le nom du produit, changer l’image, ou ajuster le prix affiché.

Un cas plus souple : autoriser le réordonnancement seul

Pour un bloc « liste de témoignages » où l’ordre d’affichage doit rester à la discrétion du rédacteur, mais où le nombre de témoignages doit rester fixe (pour des raisons de mise en page en trois colonnes, par exemple), 'insert' convient mieux :

<InnerBlocks
    template={ [
        [ 'mon-extension/temoignage' ],
        [ 'mon-extension/temoignage' ],
        [ 'mon-extension/temoignage' ],
    ] }
    templateLock="insert"
/>

Le rédacteur peut glisser-déposer les trois témoignages dans un ordre différent, mais ne peut ni en ajouter un quatrième, ni en supprimer un des trois existants.

L’héritage du verrouillage entre parent et enfants

Un point souvent méconnu : un bloc enfant peut définir sa propre valeur de templateLock, y compris false, pour créer une exception locale à l’intérieur d’une structure globalement verrouillée par son parent. Cela permet, par exemple, de figer la structure générale d’un bloc composite tout en laissant une zone précise (une colonne de contenu libre) totalement ouverte à l’ajout de n’importe quel bloc.

<InnerBlocks
    template={ TEMPLATE_ZONE_LIBRE }
    templateLock={ false }
    allowedBlocks={ [ 'core/paragraph', 'core/image', 'core/list' ] }
/>

Ce qu’il ne faut pas confondre

  • templateLock agit sur la structure de blocs, pas sur les permissions par rôle : un administrateur et un contributeur voient le même comportement de verrouillage.
  • Le verrouillage n’empêche pas la modification du texte à l’intérieur des blocs, contrairement à ce que son nom pourrait laisser penser au premier abord.
  • Un verrouillage réglé à 'all' au niveau du bloc parent (dans useBlockProps ou les réglages globaux d’un gabarit) peut se combiner avec un templateLock différent au niveau d’un InnerBlocks interne.

Sur les blocs livrés à des clients peu technophiles, on part systématiquement de templateLock="all" par défaut, quitte à l’assouplir ensuite si le retour d’usage montre que la rigidité gêne plus qu’elle ne protège.

En résumé

templateLock offre un curseur précis entre liberté totale et rigidité complète, sans jamais aller jusqu’à bloquer le contenu textuel lui-même. Bien choisi selon le public visé, il évite la majorité des demandes de support liées à une structure de bloc accidentellement cassée par un rédacteur non technique.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Partager :

À propos de l'auteur

WordPress Développement

Développeur WordPress, passionné par Elementor, le FSE et l’automatisation par IA.

Voir tous ses articles

Dans la même veine

À lire aussi