Kit Périmètre natif pour WooCommerce (thème bloc, blocs Panier et Commande)

Ce kit s’adresse aux designers, aux freelances et aux agences qui conçoivent une boutique sur WooCommerce® et WordPress avec un thème bloc, et qui doivent la chiffrer avant de la dessiner. Il répond, bloc par bloc, à une seule question : ce que vous dessinez est-il natif, réglable dans l’administration ou l’éditeur de site, payant ou à développer ? Chaque bloc des écrans porte une étiquette qui renvoie à une ligne de la matrice, et chaque ligne cite la page de documentation officielle ou le fichier publié sur lequel elle repose. Vous présentez au client des maquettes que l’extension de commerce et le thème savent livrer, et vous mettez à part, dans le devis, ce qui demande une extension, une passerelle de paiement ou du développement.

Le kit dessine la boutique avec les blocs Panier et Validation de commande et le thème par défaut Twenty Twenty-Five. Une ligne repérée au cadrage se chiffre avant la maquette plutôt qu’à la passation : un modèle de fiche produit qui garde l’ancien formulaire d’ajout au panier et l’ancienne galerie, des filtres absents du modèle de catalogue, une extension incompatible avec les blocs qui renvoie le panier et la commande au code court, des pages Mon compte dont la mise en page ne se compose pas dans l’éditeur de site, un paiement en ligne qui passe toujours par une passerelle.

Sources officielles vérifiées le 11 novembre 2026, pour WooCommerce 11.2.2, WordPress 7.1.4 et le thème Twenty Twenty-Five 1.5, sur une installation neuve. Le kit aide à cadrer et à concevoir : il ne vaut ni conseil juridique, ni audit de votre boutique, ni garantie d’exhaustivité.

Une matrice de 120 lignes, une par fonctionnalité, rangées par domaine : catalogue, navigation et recherche, fiche produit, panier, commande, compte, contenus, e-mails, international et thème. Trois colonnes en font le devis :

• Risque fort : les 8 lignes où le devis peut changer de nature, comme les abonnements, le contenu multilingue, une extension incompatible avec les blocs ou prévue pour la commande classique seulement, des champs de commande ajoutés par du code, une commande en étapes, une autre mise en page du compte et un mode sombre au choix du visiteur.
• Sources : chaque ligne cite sa page officielle, sa date de lecture et un extrait court en langue d’origine, de 25 mots au plus, soit 87 URL sources au total, dont 9 fichiers publiés de WooCommerce ou du thème. Le tableur compte 5 feuilles : Mode d’emploi, Matrice, Écrans, Extensions (les 18 extensions citées, avec leurs conditions et sans prix) et Sources.
• Un fichier de conception pour Figma : 23 écrans en desktop et en mobile, et 3 e-mails (commande en cours, nouveau compte, réinitialisation du mot de passe).
  • Écrans : accueil, boutique et catégorie avec filtres, résultats de recherche, produit simple, produit variable à pastilles, produit groupé, produit externe, mini-panier en tiroir, panier, commande en une page, confirmation de commande, connexion et inscription, tableau de bord du compte, commandes, détail d’une commande, téléchargements, adresses, détails du compte, mot de passe perdu, page de contenu, article de blog, page introuvable, demande de rétractation.
  • Variante en étapes : la commande a une variante en étapes, en desktop et en mobile, dont l’étiquette dit qu’elle demande du développement. Soit 24 cadres desktop et 24 cadres mobiles.
  • Étiquettes : 93 lignes de la matrice sont dessinées, en 93 blocs par jeu d’écrans et 280 étiquettes au total. Chaque bloc porte une étiquette sur deux lignes, l’identifiant et le statut, puis la valeur du front des blocs, toujours écrites en toutes lettres ; le contour redouble le statut. Les étiquettes sont posées dans un calque d’annotations que vous pouvez masquer.
  • Fondations et composants : 50 variables, 13 styles de texte, 2 styles d’effet, 24 jeux de composants pour 88 variantes (étiquette de périmètre, boutons, champs, cases et boutons radio, pastilles, quantité, badges, prix, carte produit, facettes, filtres actifs, fil d’Ariane, pagination, onglets, accordéon, messages, notes, étapes de la commande, ligne de panier, récapitulatif de commande, en-tête et pied de page, tiroirs, modale) et 36 icônes. Aucun logo : les moyens de paiement sont écrits en libellés texte.
• 52 tokens, dont 15 couleurs, 9 espacements, 5 rayons, 7 pas de texte avec leur taille et leur interligne, 2 familles de polices, 2 graisses, 2 tailles, 1 épaisseur de trait et 2 ombres. Ils sont identiques dans le fichier de conception, les deux fichiers de tokens et theme/theme.json, et leurs noms reprennent les slugs des préréglages du thème, complétés par le kit. Espacements, rayons, tailles, interlignes et décalages d’ombre sont des multiples de 4 px.
• Un fichier theme/theme.json qui pose ces tokens sur les slugs de Twenty Twenty-Five, à placer dans un thème enfant : palette, échelle d’espacement, tailles de texte, police, rayons, ombres et styles globaux (texte, liens, titres, bouton). S’y ajoute theme/ecarts-config-defaut.md : les 12 écarts entre ce fichier et le theme.json du thème, chacun avec sa raison, sa saisie et l’action à décider à la passation, puis les 19 valeurs du thème qui sortent de la grille de 4 px.
• Un guide de cadrage de 26 pages, en français : le périmètre natif et les versions relevées, lire la matrice et les étiquettes, les 8 questions à poser au client avant la maquette, un atelier de cadrage pas à pas, 12 pièges où une maquette plausible sort du natif sans le dire, la passation au développement, l’application de theme.json et de ses écarts, les 15 fonctionnalités que le kit ne tranche pas (10 sans page officielle, 3 hors de son périmètre, 2 sans écran de boutique), et 28 sources.
• Une checklist de passation de 19 points, dans le guide et en fichier texte à copier dans un ticket.

Fichiers du kit :

LICENCE.txt
LISEZMOI.txt
CREDITS.txt
figma/native-scope-kit-for-woocommerce-blocks-1.0.0.fig
guide/guide-cadrage.pdf
guide/checklist-passation.md
matrice/perimetre-natif.xlsx
matrice/perimetre-natif.csv
tokens/tokens.json
tokens/tokens.2025-10.json
theme/theme.json
theme/ecarts-config-defaut.md

• Matrice en XLSX et en CSV UTF-8, avec les mêmes identifiants : le tableur a ses listes déroulantes et son en-tête figé, et se filtre par écran, par statut ou par risque ; le CSV s’importe dans tout tableur ou outil de suivi. Les chemins d’administration sont ceux de l’interface en français, avec le libellé anglais de la documentation entre parenthèses.
• Guide en PDF A4 balisé, et checklist en Markdown.
• Tokens en DTCG JSON au format antérieur à 2025.10, valeurs en chaîne (tokens/tokens.json), et les mêmes tokens au format DTCG 2025.10 pour les autres outils (tokens/tokens.2025-10.json).
• Thème : theme/theme.json suit la version 3 du format et a été validé contre le schéma officiel de theme.json pour WordPress 7.0 et 7.1. Il se place dans un thème enfant de Twenty Twenty-Five, avec le style.css qui déclare le thème parent ; la boutique doit tourner sur WordPress 7.0 au moins, version demandée par WooCommerce 11.2.2. Il n’a pas été installé dans une boutique réelle.
• Code de l’extension et du thème : le kit ne contient aucun fichier ni aucune composition de WooCommerce ni du thème Twenty Twenty-Five. Son theme.json reprend les slugs des préréglages du thème, pour que les blocs et les compositions les retrouvent, avec les valeurs du kit ; 3 valeurs courantes coïncident avec celles du thème, et le guide les déclare. Les valeurs du thème ne sont citées, pour comparaison, que dans theme/ecarts-config-defaut.md et dans la matrice.
• Fichier .fig : un fichier compatible Figma, à importer dans votre espace. Écrans desktop en 1 440 px, mobiles en 375 px, e-mails en 600 px.
• Polices : Inter (SIL OFL 1.1) est référencée par les tokens et par theme.json, sans fichier de police : installez-la dans le thème enfant. Le guide est composé en Work Sans (SIL OFL 1.1), embarquée dans le PDF.
• Versions relevées : WooCommerce 11.2.2, WordPress 7.1.4 et thème Twenty Twenty-Five 1.5, sur une installation neuve ; documentation officielle lue le 11 novembre 2026, chaque ligne de la matrice portant sa date de lecture.

• Le panier et la commande sont dessinés en blocs, l’expérience par défaut des boutiques récentes. Une boutique plus ancienne peut garder son panier et sa commande en code court, et une extension incompatible avec les blocs y renvoie, ou demande du développement : le guide fait poser la question avant la maquette.
• La commande tient en une page : une commande en plusieurs étapes sous le bloc se chiffre en développement, et la variante en étapes du fichier de conception porte cette étiquette.
• Les pages Mon compte gardent leur mise en page par défaut : elles suivent les couleurs et la typographie du thème, mais ne se composent pas dans l’éditeur de site. Le kit les dessine telles qu’elles sont ; toute autre mise en page se chiffre en développement.
• Le paiement en ligne passe par une passerelle : le cœur ne propose que des paiements hors ligne (virement, chèque, paiement à la livraison). Le kit ne cite aucun prix d’extension ni de passerelle : relevez-les à la date du devis.
• Des blocs dessinés dépendent d’un bloc bêta ou d’une fonction expérimentale de WooCommerce 11.2.2 (nouveau formulaire d’ajout au panier, pastilles de couleur, liste d’envies, mise de côté au panier), qui peuvent changer d’une version à l’autre ; leur étiquette porte configurable et leur risque est moyen. WooCommerce 11.3 n’était pas sortie au 11 novembre 2026 : à sa sortie, relisez ces lignes ; si un statut change, il entre dans les mises à jour du kit.
• Les noms de boutique, de personnes et de produits des écrans sont fictifs.
• Le PDF est balisé, mais sa conformité PDF/UA n’a pas été mesurée.
• Le kit n’est pas un thème et ne contient aucune extension : il sert à cadrer, à concevoir et à passer la main au développement.
• La matrice cite quelques extensions, passerelles et moyens de paiement par leur nom, à titre nominatif.
• Le guide, la matrice et les étiquettes sont en français ; les extraits de documentation restent en langue d’origine.
• Mises à jour : gratuites pour les acheteurs, publiées au fil des versions de la plateforme, sans calendrier garanti. Elles couvrent les corrections du kit et, quand une nouvelle version de WooCommerce, de WordPress ou du thème change un statut, une source ou un réglage, la mise à jour de la matrice, des étiquettes, des tokens, de theme.json et du guide. Elles ne couvrent pas les fonctionnalités laissées hors de la matrice, que le guide liste à part.

Le kit est vendu avec la licence commerciale, en paiement unique : vous pouvez l’utiliser pour vos projets personnels et professionnels, y compris pour vos clients, mais pas revendre ni redistribuer ses fichiers, même modifiés, comme kit ou comme modèle. Vous pouvez livrer theme/theme.json dans le thème enfant d’un projet client : c’est un usage dans un produit fini, que la licence permet ; seule sa redistribution comme ressource réutilisable en est exclue.

• Design tokens : ce que change vraiment le nouveau standard W3C DTCG

1.0.0 (11 novembre 2026) : première version.

WooCommerce® et ses designs associés sont des marques d’Automattic Inc. WordPress est une marque de la WordPress Foundation. Twenty Twenty-Five est le nom du thème par défaut de WordPress, cité à titre de référence. Les autres noms d’extensions et de prestataires cités appartiennent à leurs titulaires respectifs et ne sont cités que pour décrire une compatibilité. Kit indépendant, ni affilié à, ni approuvé ni sponsorisé par Automattic Inc. ou par la WordPress Foundation.

Les noms de WooCommerce, de WordPress et du thème ne servent que de mention de compatibilité et de périmètre ; le contenu de démonstration du fichier de conception porte des marques inventées. Aucun logo, aucune capture d’une boutique réelle ni du thème, aucune interface imitée : les écrans sont redessinés à partir de la structure de page documentée.

Déclaration d’IA : la matrice, les textes du guide, les tokens, theme.json, les scripts de contrôle et la construction du fichier de conception ont été produits avec un assistant d’IA (Claude Code, Anthropic), puis contrôlés par des scripts et par relecture. Sources officielles vérifiées le 11 novembre 2026 : chaque ligne de la matrice cite la source sur laquelle elle repose. Le kit ne contient aucune image générée par IA.