# Configurateur de teinte personnalisée en bloc, pour un artisan peintre

> Un artisan peintre en bâtiment veut un aperçu de teinte à partir des références de son fabricant, sans configurateur du commerce ni commande en ligne.

- Auteur : Clément Hadrot
- Publié le : 2025-12-31
- Mis à jour le : 2025-12-31
- Catégorie : Blocs Gutenberg
- URL : https://wpmoderne.dev.wordpress-developpement.fr/blocs/configurateur-teinte-bloc-artisan-peintre/

## L’essentiel

- Les références de teinte vivent dans un fichier JSON versionné avec le thème
- L'aperçu se calcule côté client, sans requête serveur
- Aucune commande en ligne, juste un outil d'aide à la décision

Combien de fois un client hésite-t-il devant un nuancier papier avant de se décider ? Un artisan peintre en bâtiment de la région lyonnaise, qui travaille avec un fabricant de peintures artisanales local, voulait proposer sur son site un outil simple : sélectionner une teinte de référence, ajuster sa luminosité, et visualiser un aperçu approximatif appliqué à une pièce type. Pas de commande en ligne — l'artisan facture toujours un devis sur mesure après visite.

Les configurateurs de peinture du commerce existent, mais ils imposent presque toujours leur propre catalogue de marques industrielles, sans possibilité d'y intégrer un nuancier artisanal local. Construire un bloc dédié, alimenté par les références réelles du fabricant partenaire, s'est révélé plus rapide que d'adapter un outil générique.

## Étape 1 — Structurer le nuancier en données statiques

Le fabricant fournit un nuancier de quarante-huit teintes, chacune avec un code hexadécimal approximatif et un nom évocateur. Cette liste, qui ne change que deux fois par an, est stockée dans un fichier JSON chargé par le bloc plutôt qu'en base de données :

```
{
  "teintes": [
    { "code": "ocre-doux", "nom": "Ocre doux", "hex": "#C8935B" },
    { "code": "gris-lin", "nom": "Gris lin", "hex": "#B7B2A8" },
    { "code": "vert-sauge", "nom": "Vert sauge", "hex": "#8A9A7E" }
  ]
}
```

Ce fichier est enregistré comme script dans `block.json` puis chargé via `wp_add_inline_script()`, ce qui évite un appel réseau supplémentaire au chargement de la page.

## Étape 2 — Le panneau de réglages dans l'éditeur

Côté édition, l'artisan (ou plus souvent son webmaster) choisit la teinte par défaut et la pièce d'exemple depuis `InspectorControls` :

```
import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
import { PanelBody, SelectControl } from '@wordpress/components';

function Edit( { attributes, setAttributes } ) {
    const { teinteParDefaut, piece } = attributes;
    return (
        <>
            <InspectorControls>
                <PanelBody title="Réglages du configurateur">
                    <SelectControl
                        label="Pièce d'exemple"
                        value={ piece }
                        options={ [
                            { label: 'Salon', value: 'salon' },
                            { label: 'Chambre', value: 'chambre' },
                            { label: 'Façade', value: 'facade' },
                        ] }
                        onChange={ ( value ) => setAttributes( { piece: value } ) }
                    />
                </PanelBody>
            </InspectorControls>
            <div { ...useBlockProps() }>Configurateur : { piece }</div>
        </>
    );
}
```

## Étape 3 — Le calcul d'aperçu côté front

> L'essentiel à retenir : Les références de teinte vivent dans un fichier JSON versionné avec le thème ; L'aperçu se calcule côté client, sans requête serveur ; Aucune commande en ligne, juste un outil d'aide à la décision

Le cœur du bloc reste l'ajustement de luminosité en temps réel, géré côté client via l'Interactivity API pour éviter tout rechargement de page à chaque changement de curseur :

```
import { store, getContext } from '@wordpress/interactivity';

store( 'artisan/configurateur', {
    actions: {
        ajusterLuminosite( event ) {
            const contexte = getContext();
            contexte.luminosite = Number( event.target.value );
        },
    },
    callbacks: {
        appliquerApercu() {
            const { hexBase, luminosite } = getContext();
            const element = document.querySelector( '.zone-apercu' );
            element.style.setProperty(
                '--teinte-calculee',
                ajusterHex( hexBase, luminosite )
            );
        },
    },
} );
```

La fonction `ajusterHex()` reste un simple calcul mathématique sur les composantes RVB, sans dépendance externe — un aperçu approximatif suffit largement à l'usage visé, l'artisan appliquant ensuite la vraie teinte lors de son devis, en atelier, avec ses propres pigments.

## Ce que le configurateur ne fait pas

- Il ne calcule pas de quantité de peinture nécessaire ni de devis chiffré.
- Il ne permet aucune commande ni paiement en ligne.
- Il n'importe pas de photo réelle de la pièce du client : la « pièce d'exemple » reste une illustration générique, pas une simulation photoréaliste.

> Un configurateur d'aide à la décision n'a pas besoin d'être exact au pixel près : il doit surtout donner au client l'envie de prendre rendez-vous pour un vrai nuancier en main.

## Retour d'usage après trois mois

L'artisan rapporte que l'outil sert surtout de point de départ à la conversation lors du premier rendez-vous : les clients arrivent avec une teinte déjà en tête, ce qui raccourcit l'échange initial. Aucun client n'a exprimé d'attente de précision colorimétrique parfaite — l'aperçu approximatif remplit exactement le rôle attendu, celui d'un déclencheur de décision plutôt que d'un outil de validation finale.

## En résumé

Un configurateur de teinte en bloc natif, appuyé sur un nuancier statique versionné et un calcul d'aperçu géré par l'Interactivity API, permet à un artisan peintre de proposer un outil sur mesure sans dépendre d'un configurateur générique ni développer un système de commande en ligne dont il n'a pas l'usage.