Chapitre 8.8 — Variations, transforms & styles

⏱️ TL;DR — Trois façons d’enrichir un bloc sans en créer un nouveau : les variations (un même bloc avec des attributs pré-remplis et une entrée d’inséreur distincte), les transforms (convertir depuis/vers un autre bloc, ou depuis un shortcode/du texte), et les block styles (variantes visuelles nommées, is-style-…). Plus les supports (couleur, espacement, typo…) déclarés dans block.json qui offrent, gratuitement, des réglages natifs. Ces mécanismes rendent vos blocs flexibles et cohérents avec l’écosystème.

🎯 Objectifs

• Créer des variations d’un bloc.
• Définir des transforms (from/to).
• Enregistrer des block styles (JS ou PHP).
• Exploiter les supports natifs.

1. Les variations

Une variation est le même bloc avec des attributs par défaut différents et sa propre entrée dans l’inséreur. Exemple : un bloc « Livre à la une » avec des variations « Compact » et « Détaillé ».

import { registerBlockVariation } from '@wordpress/blocks';
 
registerBlockVariation( 'wpr/livre-une', {
    name: 'compact',
    title: 'Livre à la une (compact)',
    icon: 'book',
    attributes: { afficherPrix: false, style: 'compact' },
    // isDefault: true, // pour en faire la variation par défaut
    scope: [ 'inserter', 'block' ],
} );

• Une seule définition de bloc, plusieurs presets proposés à l’insertion.
• core/embed est l’exemple canonique : YouTube, Twitter… sont des variations d’un même bloc embed.

💡 Pour un dev React — Une variation = un composant avec des props par défaut différentes, exposé comme une entrée distincte (comme plusieurs <Button variant="primary|ghost"> présentés séparément). Vous factorisez la logique dans un bloc et déclinez par presets, au lieu de dupliquer.

2. Les transforms (conversions)

Les transforms permettent de convertir un bloc en un autre (menu « Transformer en… »), ou de créer votre bloc depuis du texte/un shortcode collé.

// dans registerBlockType( name, { transforms: … } )
transforms: {
    from: [
        {
            type: 'shortcode',
            tag: 'wpr_livres',
            attributes: {
                genre: { type: 'string', shortcode: ( { named } ) => named.genre },
            },
        },
    ],
    to: [
        {
            type: 'block',
            blocks: [ 'core/paragraph' ],
            transform: ( attrs ) => wp.blocks.createBlock( 'core/paragraph', { content: attrs.titre } ),
        },
    ],
}

• from : convertir vers votre bloc (depuis un shortcode [wpr_livres], un autre bloc, du HTML brut collé…).
• to : convertir votre bloc vers un autre.
• Cas d’usage majeur : migrer d’anciens shortcodes (ch. 7.6) vers un bloc moderne — l’utilisateur colle son shortcode, il devient votre bloc.

3. Les block styles (variantes visuelles)

Comme au ch. 6.6, mais côté bloc. En JS :

import { registerBlockStyle } from '@wordpress/blocks';
 
registerBlockStyle( 'wpr/livre-une', {
    name: 'bordure',
    label: 'Avec bordure',
} );
// + du CSS ciblant .is-style-bordure

Ou en PHP (register_block_style, ch. 6.6). Choisir le style ajoute la classe is-style-bordure. Idéal pour offrir des variantes d’apparence sans nouvel attribut ni nouveau bloc.

4. Les supports : des réglages gratuits

Dans block.json, la clé supports active des fonctionnalités natives (gérées par le cœur), sans code :

"supports": {
  "align": ["wide", "full"],
  "color": { "background": true, "text": true, "gradients": true },
  "typography": { "fontSize": true, "lineHeight": true },
  "spacing": { "margin": true, "padding": true },
  "__experimentalBorder": { "radius": true }
}

→ l’utilisateur obtient les contrôles de couleur, typo, espacement, bordure dans l’Inspector, et le cœur applique les classes/styles (front via get_block_wrapper_attributes, ch. 8.5). Ne réinventez pas ces réglages : activez-les via supports.

⚠️ Piège — recoder ce que supports offre. Ajouter un RangeControl maison pour le padding, ou un ColorPalette pour le fond, alors que supports.spacing/supports.color le font nativement, c’est du travail en double et incohérent avec les autres blocs. Vérifiez toujours si un support existe avant de coder un réglage.

5. Récapitulatif : enrichir sans dupliquer

Ensemble, ils font d’un bloc bien conçu une brique flexible, cohérente avec l’écosystème et facile à faire évoluer — sans multiplier les blocs.

✏️ Exercices

1. Vous voulez proposer votre bloc en deux presets « compact » et « détaillé ». Quel mécanisme ?
2. Un client a 200 articles contenant [wpr_livres]. Comment faciliter la migration vers votre bloc ?
3. Vous allez ajouter un contrôle de couleur de fond à votre bloc. Que vérifiez-vous d’abord ?

🧠 Quiz de révision

Chapitre suivant : Tutoriel : le bloc « Livre à la une ».