# useBlockEditingMode : restreindre l’édition à une zone précise

> Un client ne devait modifier que le texte d'un bandeau promotionnel, jamais sa structure. Un seul hook a permis de le garantir sans verrouiller tout le template.

- Auteur : Clément Hadrot
- Publié le : 2022-02-22
- Mis à jour le : 2022-02-22
- Catégorie : Blocs Gutenberg
- URL : https://wpmoderne.dev.wordpress-developpement.fr/blocs/useblockeditingmode-restreindre-edition-zone/

## L’essentiel

- Trois modes possibles, du plus permissif au plus strict
- contentOnly limite l'édition au texte sans exposer la structure
- Le mode s'applique au niveau du bloc, pas du template entier

Un client gérant une boutique de cosmétiques artisanaux voulait pouvoir modifier lui-même le texte d'un bandeau promotionnel en haut de sa page d'accueil, sans jamais risquer de casser la mise en page savamment calée par l'agence : une image de fond, un bouton avec un lien précis, un espacement calculé au pixel près. Verrouiller tout le bloc avec `templateLock="all"` aurait empêché la moindre modification, y compris celle, légitime, du texte. Laisser le bloc totalement ouvert exposait au risque inverse : un déplacement accidentel de l'image ou une suppression malheureuse du bouton.

Le hook `useBlockEditingMode`, introduit dans l'éditeur pour répondre précisément à ce genre de besoin intermédiaire, permet de restreindre l'édition à une zone précise d'un bloc composé, sans devoir choisir entre un verrouillage total et une liberté totale.

## Les trois modes disponibles

Le hook accepte trois valeurs distinctes, chacune correspondant à un niveau de liberté différent applicable à un bloc et à ses enfants directs :

- `default` : comportement normal, aucune restriction particulière n'est appliquée.
- `contentOnly` : seuls les champs de contenu (texte, image, lien) restent modifiables, la structure et les réglages de mise en page disparaissent de l'interface.
- `disabled` : le bloc devient entièrement non sélectionnable, comme s'il faisait partie du décor.

## Appliquer contentOnly au bandeau promotionnel

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

function Edit( { clientId } ) {
    useBlockEditingMode( 'contentOnly' );
    // ... reste du composant d'édition
}
```

Une fois ce mode appliqué au bloc conteneur du bandeau, la barre d'outils contextuelle perd ses options de déplacement, de duplication et de suppression, mais les champs de texte imbriqués restent directement éditables au clic, exactement comme s'ils n'étaient soumis à aucune restriction. C'est ce qui distingue fondamentalement ce mode d'un verrouillage classique via `templateLock` : la restriction porte sur la structure, jamais sur le contenu affiché.

> L'essentiel à retenir : Trois modes possibles, du plus permissif au plus strict ; contentOnly limite l'édition au texte sans exposer la structure ; Le mode s'applique au niveau du bloc, pas du template entier

## Le mode s'applique au bloc, pas globalement

Une confusion fréquente consiste à croire que ce hook agit sur l'ensemble du document une fois appelé quelque part dans l'arbre. En réalité, `useBlockEditingMode` s'applique uniquement au bloc dans lequel le hook est appelé, ainsi qu'à ses descendants directs, sauf si l'un de ces descendants réapplique lui-même un mode différent, qui prendra alors le pas localement sur celui hérité du parent.

```
function EditImage() {
    // Ce bloc enfant reprend le mode "contentOnly" hérité,
    // sauf s'il définit explicitement le sien
    const blockProps = useBlockProps();
    return <img { ...blockProps } />;
}
```

## disabled : le cas du bloc purement décoratif

Le mode `disabled` convient à des éléments qui ne doivent jamais être sélectionnés ni modifiés dans l'éditeur, par exemple un fond décoratif généré automatiquement ou un élément de mise en page technique sans valeur éditoriale. Contrairement à `contentOnly`, aucun champ ne reste éditable dans ce mode : le bloc devient un simple élément visuel figé, cliquable seulement pour la sélection d'un bloc parent englobant.

## Différence avec templateLock, une nuance importante

| Mécanisme | Portée | Effet sur le contenu |
| --- | --- | --- |
| templateLock | Insertion, suppression, ordre des blocs enfants | Aucun effet direct sur l'édition du texte |
| useBlockEditingMode | Interface d'édition du bloc lui-même | Peut restreindre ou masquer les champs de contenu |

Sur le projet du bandeau promotionnel, la combinaison des deux s'est révélée nécessaire : `templateLock="all"` pour empêcher toute insertion ou suppression de blocs enfants, et `contentOnly` pour garantir que seuls les champs de texte et l'attribut de lien du bouton restent accessibles au client, sans qu'il puisse toucher à l'image de fond ni à l'espacement.

> Un client qui casse la mise en page d'un bandeau n'est presque jamais négligent : c'est l'interface qui lui a laissé une liberté que le projet n'aurait jamais dû lui accorder.

## En résumé

useBlockEditingMode comble un vide réel entre le verrouillage structurel classique et la liberté totale d'édition, en offrant un niveau intermédiaire centré sur le contenu plutôt que sur la structure. Pour tout bloc composé livré à un client final, la question ne devrait plus être « faut-il verrouiller ce bloc », mais « quel niveau, parmi ces trois, correspond exactement à ce que ce client doit pouvoir faire ».