Une rédactrice en chef, habituée à préparer ses contenus dans Word avant de les coller dans WordPress, se plaignait régulièrement que ses tableaux de comparatifs de produits arrivaient méconnaissables dans l’éditeur : des cellules fusionnées transformées en blocs de paragraphe désordonnés, une mise en forme perdue, et un travail de reprise manuelle systématique. La CMS de l’agence avait bien un bloc « Comparatif » sur mesure, pensé exactement pour ce cas, mais rien ne le proposait automatiquement au moment du collage.
C’est précisément le rôle des transforms de type raw : intercepter un fragment de HTML brut détecté au moment du collage, avant que l’éditeur ne le convertisse par défaut en une suite de blocs génériques, et le rediriger vers un bloc personnalisé si sa structure correspond à un motif attendu.
Différencier raw des transforms classiques
Les transforms « classiques », de type block, convertissent un bloc déjà existant dans l’éditeur vers un autre type de bloc, par exemple une liste vers des paragraphes séparés. Les transforms de type raw interviennent à un moment différent et bien plus précoce : celui où l’éditeur analyse le HTML collé depuis le presse-papiers, avant même qu’un bloc n’ait été créé. Cette distinction est cruciale, car la logique de correspondance ne porte pas sur un objet bloc mais sur un nœud DOM brut.
Déclarer le transform raw
Le transform s’enregistre dans la propriété transforms.from du bloc, avec un type raw, une fonction isMatch qui reçoit le nœud DOM candidat, et une fonction transform qui construit l’objet bloc final à partir de ce nœud.
transforms: {
from: [
{
type: 'raw',
isMatch: ( node ) =>
node.nodeName === 'TABLE' &&
node.classList.contains( 'MsoTableGrid' ),
transform: ( node ) => {
const lignes = Array.from( node.querySelectorAll( 'tr' ) ).map(
( tr ) =>
Array.from( tr.querySelectorAll( 'td' ) ).map(
( td ) => td.textContent.trim()
)
);
return createBlock( 'mon-agence/comparatif', { lignes } );
},
},
],
},Ici, isMatch cible spécifiquement les tableaux portant la classe MsoTableGrid, une signature typique laissée par Word lors d’un export HTML, ce qui évite d’intercepter n’importe quel tableau collé depuis une autre source.
Le piège de la sélectivité
Un isMatch trop permissif capture des contenus qui n’ont rien à voir avec l’intention initiale : un tableau collé depuis une feuille de calcul, depuis un autre site WordPress, ou depuis un simple copier-coller de navigateur, se retrouverait transformé de force dans un bloc qui ne lui correspond pas. À l’inverse, un isMatch trop restrictif ne se déclenche jamais et le transform devient une fonctionnalité invisible, jamais testée par les rédacteurs.
- Vérifier une classe CSS spécifique reste plus fiable que vérifier uniquement le nom de balise.
- Tester la présence d’attributs particuliers (comme
data-*) aide à distinguer deux sources différentes. - Un test unitaire avec un vrai extrait HTML collé depuis Word évite les mauvaises surprises en production.
Nettoyer les données pendant la transformation
La fonction transform n’est pas obligée de recopier le HTML tel quel : c’est l’endroit idéal pour nettoyer des espaces insécables parasites, retirer des styles en ligne indésirables ou normaliser des caractères d’apostrophe typographique qui posent parfois problème dans des attributs stockés en JSON.
const nettoyer = ( texte ) =>
texte.replace( / /g, ' ' ).trim();Ce nettoyage, appliqué systématiquement lors du transform plutôt que laissé à la charge du rédacteur après coup, évite des incohérences typographiques difficiles à repérer visuellement mais qui posent problème lors d’une recherche en base de données ou d’un export.
Tester le comportement réel dans l’éditeur
Le moyen le plus fiable de valider un transform raw reste de reproduire exactement le geste du rédacteur final : copier un contenu depuis l’application source réelle (Word, Google Docs, un autre CMS), le coller dans l’éditeur de blocs, puis vérifier dans le mode « Éditeur de code » que le bloc obtenu correspond bien au bloc personnalisé attendu, avec les bons attributs renseignés.
Un transform raw qui fonctionne uniquement avec du HTML écrit à la main pour le test ne prouve rien : testez toujours avec un vrai copier-coller depuis l’outil que vos rédacteurs utilisent réellement.
Pour aller plus loin
Une fois le premier transform raw en place, il devient tentant d’en ajouter d’autres pour différents motifs de collage récurrents : citations depuis un article de presse, listes à puces depuis un e-mail, liens depuis une fiche produit externe. Chacun mérite le même soin dans la définition d’isMatch, sous peine de voir des transforms concurrents se disputer un même fragment de HTML collé, un cas que l’éditeur résout en appliquant le premier match trouvé, dans un ordre qui n’est pas toujours celui espéré.
