Projet : refonte Sacrée Photo (WordPress + thème Kadence).
Je joins : [la capture du bloc à reproduire] + design-system-sacree-photo.html
(+ mon CSS additionnel actuel si je l’ai sous la main).
Crée-moi le bloc : [nom du bloc, ex. « les thèmes en 4 cartes »].
MÉTHODE (celle qui marche pour moi, ne pas en changer) :
Le bloc = du HTML Gutenberg à coller dans l’Éditeur de code de la page.
Blocs WordPress natifs uniquement : columns, column, group, heading,
paragraph, buttons, button, image, list. PAS de blocs Kadence.
Le balisage doit être valide (identique à ce que WordPress enregistre),
pour ne jamais afficher « ce bloc contient du contenu inattendu ».
Chaque bloc porte sa classe via « className » et dans son HTML.
Tous les textes restent modifiables dans l’éditeur visuel.
Un mot en couleur = mot (classes existantes :
jaune, cramoisi, rouge, creme, encre, gras, fin).
Le style = du CSS à coller dans Personnaliser > CSS additionnel.
Codes couleur en dur (#CC0031), JAMAIS de var(–…).
Noms de classes courts, en français, sans « __ »
(ex. matiere, rythme, carte-rouge).
Ne pas toucher aux styles globaux h1, h2, body.
!important seulement sur les boutons (Kadence les force).
Responsive inclus (@media max-width:900px).
Réutiliser mes classes existantes au lieu de les redéfinir :
surtitre, titre-hero, chapo, btn-rose, btn-trait, carte-rouge,
matiere, rythme, carte-verre, jaune, cramoisi, rouge, creme, gras, fin.
Commencer par un commentaire /* ===== Bloc « … » ===== */.
Les fonds = des images, pas du CSS compliqué.
Si le bloc a un fond travaillé (dégradé, halos, cercles, trame),
génère l’image : WebP, 1200 px environ, sans texte.
Dans le CSS, l’image est appelée sur UNE ligne bien repérable :
background:#990100 url(COLLE-ICI-L-URL) center/cover no-repeat;
pour que je puisse changer l’image moi-même.
Palette : rouge #990100 · cramoisi #CC0031 · rose bouton #C21D3B ·
crème #F2F0EB · encre #1F0808 · texte doux #5A3B3B · jaune #F2B138
(très peu). Police Jost. Titres en 300, mot clé en gras ou en couleur.
À ME RENDRE, dans cet ordre :
le HTML du bloc, 2. le CSS, 3. l’image de fond si besoin,
trois lignes maximum pour la mise en place.
Je ferai ensuite « Créer une composition »