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
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.
