Créer et personnaliser un bloc Gutenberg

Créer et personnaliser un bloc Gutenberg – Personnaliser un site WordPress ne nécessite pas obligatoirement un constructeur de pages payant ou une extension spécialisée. L’éditeur Gutenberg permet déjà de créer des compositions visuelles avancées en combinant des blocs natifs, des couleurs, des bordures, des ombres et des espacements. Avec quelques connaissances en HTML et CSS, il devient possible d’aller beaucoup plus loin : cartes interactives, encadrés élégants, boutons personnalisés et effets de survol.

Cependant, trois méthodes souvent confondues répondent à des besoins différents : personnaliser un bloc existant, insérer un composant HTML dans un article ou développer un nouveau type de bloc reconnu par WordPress.

Ce tutoriel explique ces trois approches, étape par étape. Nous commencerons par une création entièrement visuelle, puis nous construirons une véritable carte personnalisée avec son HTML et son CSS. Enfin, nous découvrirons comment transformer cette approche en un bloc Gutenberg autonome, destiné aux développeurs.

L’objectif est de réaliser des éléments esthétiques, accessibles, adaptatifs et faciles à maintenir, sans dépendances inutiles.

1. Comprendre comment fonctionnent les blocs Gutenberg

Gutenberg est le nom couramment utilisé pour désigner l’éditeur de blocs de WordPress.

Son principe consiste à construire un contenu à partir d’éléments indépendants appelés blocs.

Un paragraphe, un titre, une image, une liste, une citation ou un bouton constituent chacun un bloc.

Mais Gutenberg permet également d’assembler plusieurs blocs dans une structure commune.

Les principaux blocs utiles à la personnalisation

Les fonctions disponibles dépendent du thème, de la version WordPress et parfois des droits de l’utilisateur.

Trois manières différentes de créer un bloc

Il est important de distinguer les approches suivantes.

Première méthode : assembler des blocs natifs. On utilise les éléments déjà fournis par WordPress pour construire une composition. Aucun développement PHP ou JavaScript n’est nécessaire.

Deuxième méthode : utiliser un bloc HTML personnalisé. On écrit une structure HTML qui peut être mise en forme avec du CSS. Le résultat peut être très personnalisé, mais il ne devient pas automatiquement un nouveau type de bloc Gutenberg.

Troisième méthode : développer un véritable bloc. On enregistre un nouveau type de bloc à l’aide des API WordPress. Il apparaît alors dans l’outil d’insertion et peut posséder ses propres champs, réglages et mécanismes de rendu.

Ces trois méthodes sont légitimes. Leur pertinence dépend du niveau de personnalisation recherché.

2. Premier tutoriel : créer une carte élégante sans écrire de code

Nous allons commencer avec un élément que l’on retrouve sur de nombreux sites professionnels : une carte de présentation.

Elle comprendra un titre, un texte explicatif et un bouton.

Nous ajouterons ensuite un fond, une bordure, des coins arrondis et une ombre portée.

Étape 1 — Insérer un bloc Groupe

Ouvrez une page ou un article dans l’éditeur Gutenberg.

Cliquez sur le bouton +, puis recherchez le bloc Groupe.

Insérez-le dans le contenu.

Le bloc Groupe sert de conteneur à plusieurs éléments. Il permet de leur appliquer des réglages communs.

À l’intérieur de ce groupe, ajoutez successivement :

1. Un bloc Titre.
2. Un bloc Paragraphe.
3. Un bloc Boutons contenant un bouton.

Votre organisation ressemble maintenant à ceci :

Groupe
├── Titre
├── Paragraphe
└── Boutons
    └── Bouton

Dans Gutenberg, ouvrez la Vue en liste pour vérifier cette structure.

Cette fonctionnalité est particulièrement utile lorsque plusieurs blocs sont imbriqués.

Elle permet de sélectionner précisément le groupe principal plutôt qu’un élément placé à l’intérieur.

Étape 2 — Ajouter le contenu

Pour notre exemple :

Titre : Un site WordPress à votre image

Paragraphe : Personnalisez votre présentation avec les outils natifs de Gutenberg, sans installer de constructeur de pages supplémentaire.

Bouton : Découvrir les possibilités

Associez ensuite le bouton à une véritable page pertinente.

Un bouton visuel qui sert à naviguer reste généralement un lien HTML. Il doit posséder une destination réelle et compréhensible.

Étape 3 — Définir le fond

Sélectionnez le bloc Groupe, puis ouvrez ses réglages de styles.

Dans la section consacrée à l’arrière-plan, choisissez une couleur claire, par exemple :

#F5F8FC

Pour le texte, vous pouvez retenir :

#18324A

Ces couleurs constituent une proposition graphique, pas une règle universelle.

Un fond clair associé à un texte sombre peut permettre d’obtenir une bonne lisibilité, à condition de vérifier le contraste réel.

Étape 4 — Ajouter les espacements intérieurs

Cherchez la rubrique Dimensions ou Espacement, selon l’interface utilisée.

Réglez les marges intérieures du groupe.

Par exemple, si l’éditeur propose des valeurs en pixels :

• Haut : 32 px.
• Droite : 32 px.
• Bas : 32 px.
• Gauche : 32 px.

Ces valeurs peuvent également être exprimées sous la forme de préréglages d’espacement définis par le thème.

La marge intérieure, appelée padding en CSS, crée un espace entre la bordure de la carte et son contenu.

Sans cet espace, les textes risquent de paraître collés aux contours.

Étape 5 — Arrondir les angles

Dans les réglages de bordure, cherchez l’option Rayon.

Essayez une valeur de 16 pixels.

Le CSS correspondant serait :

border-radius: 16px;

Ce réglage adoucit les angles du conteneur.

Les coins arrondis ne sont pas nécessaires à toutes les interfaces, mais ils peuvent contribuer à une présentation plus contemporaine.

Étape 6 — Ajouter une bordure

Choisissez une bordure discrète, par exemple :

border: 1px solid #d8e3ec;

Elle permet de délimiter visuellement la carte sans utiliser une ombre trop importante.

Étape 7 — Ajouter une ombre

Lorsque le thème et le bloc proposent un contrôle d’ombre, ouvrez la section Bordure et ombre.

Sélectionnez une ombre douce parmi les choix disponibles.

Selon la configuration, les ombres proposées peuvent provenir des préréglages du thème.

Si aucun contrôle d’ombre n’est affiché, cela ne signifie pas nécessairement que WordPress ne possède pas cette fonctionnalité. Le thème ou le bloc peuvent ne pas exposer le réglage souhaité.

Nous verrons plus loin comment obtenir le même résultat avec du CSS.

Étape 8 — Vérifier le résultat

Enregistrez votre brouillon et ouvrez son aperçu.

Vérifiez notamment :

• Les espacements autour du titre.
• La lisibilité du paragraphe.
• L’apparence du bouton.
• L’équilibre entre le fond et la bordure.
• La présentation sur un écran étroit.

Vous disposez maintenant d’une première carte créée uniquement avec les blocs natifs.

3. Comprendre les propriétés CSS qui donnent du relief

Avant de personnaliser davantage notre carte, examinons les propriétés responsables de son apparence.

border-radius : arrondir les angles

border-radius: 16px;

Cette propriété définit le rayon des coins.

Une petite valeur produit des angles légèrement arrondis.

Une valeur plus importante donne un aspect plus doux.

Il est également possible de définir une valeur différente pour chaque coin.

box-shadow : créer une ombre portée

box-shadow: 0 8px 24px rgba(15, 35, 60, 0.12);

Cette propriété comporte plusieurs paramètres.

L’ombre ne représente pas obligatoirement un objet physique. Elle constitue ici un effet visuel destiné à différencier la carte de son arrière-plan.

background : personnaliser le fond

Pour une couleur uniforme :

background: #ffffff;

Pour un dégradé :

background: linear-gradient(
  135deg,
  #ffffff 0%,
  #edf6ff 100%
);

La propriété linear-gradient() permet de définir plusieurs couleurs et une direction.

Un dégradé discret peut apporter de la profondeur sans compromettre la lisibilité.

transition : rendre un changement progressif

transition:
  transform 0.25s ease,
  box-shadow 0.25s ease;

Une transition permet de faire évoluer progressivement certaines propriétés.

Dans notre cas, elle sera utilisée pour l’ombre et le léger déplacement de la carte.

transform : déplacer visuellement l’élément

transform: translateY(-4px);

Cette propriété déplace visuellement un élément de quatre pixels vers le haut.

Elle ne modifie pas directement l’emplacement réservé à cet élément dans le flux normal de la page.

: réagir au pointeur

.atp-carte:hover {
  transform: translateY(-4px);
}

Le sélecteur :hover permet de cibler l’élément lorsqu’un dispositif de pointage le survole.

Il ne faut cependant pas concevoir une interface dont une information essentielle n’apparaît qu’au survol.

Sur un écran tactile, ce comportement peut être absent ou fonctionner différemment.

4. Ajouter sa propre classe CSS dans Gutenberg

Nous allons maintenant séparer le contenu et sa présentation.

Cette approche est intéressante pour conserver une structure éditable dans Gutenberg tout en appliquant des styles communs.

Étape 1 — Sélectionner le bloc principal

Dans la Vue en liste, sélectionnez le groupe contenant le titre, le paragraphe et le bouton.

Ouvrez ses réglages.

Développez la rubrique Avancé.

Cherchez le champ :

Classe(s) CSS additionnelle(s).

Étape 2 — Ajouter une classe personnalisée

Saisissez :

atp-carte

N’ajoutez pas de point devant le nom dans ce champ.

Le point ne sera utilisé que dans le code CSS pour indiquer qu’il s’agit d’un sélecteur de classe.

Étape 3 — Comprendre ce que WordPress enregistre

Le HTML généré pour le groupe pourra contenir une classe semblable à :

<div class="wp-block-group atp-carte">
    ...
</div>

La classe wp-block-group provient de WordPress.

La classe atp-carte correspond à notre personnalisation.

L’ajout de cette classe ne modifie pas le fonctionnement interne du bloc.

Il permet simplement de le sélectionner avec des règles CSS.

Pourquoi utiliser un préfixe ?

Un nom trop générique comme .card ou .button peut déjà être utilisé par le thème ou une extension.

Le préfixe atp- réduit les risques de collision.

Il ne garantit pas une isolation absolue, mais constitue une bonne pratique d’organisation.

5. Construire notre carte complète avec HTML et CSS

Nous allons maintenant concevoir une carte directement avec le bloc HTML personnalisé.

Cela permet de comprendre la structure produite et de contrôler plus précisément les éléments visuels.

Étape 1 — Insérer un bloc HTML personnalisé

Dans Gutenberg, ajoutez un nouveau bloc.

Recherchez :

HTML personnalisé.

Vous pouvez aussi saisir /html dans un bloc vide lorsque le raccourci est disponible.

Depuis WordPress 7.0, le bloc HTML personnalisé possède des panneaux distincts pour HTML, CSS et JavaScript lorsque les permissions de l’utilisateur le permettent.

Pour notre méthode, nous utiliserons uniquement du HTML dans ce bloc. Nous placerons le CSS réutilisable dans les styles du site.

Étape 2 — Copier le HTML de la carte

<article class="atp-carte">
  <span class="atp-carte__etiquette">
    PERSONNALISATION WORDPRESS
  </span>

  <h3>Créez un design qui vous ressemble</h3>

  <p>
    Construisez une carte élégante avec Gutenberg,
    HTML et CSS, sans dépendance externe.
  </p>

  <a
    class="atp-carte__lien"
    href="https://wordpress.org/documentation/article/group-block/"
  >
    Comprendre le bloc Groupe
  </a>
</article>

Ce code possède une structure HTML relativement simple.

La balise <article> représente ici un contenu autonome.

Le titre est déclaré dans un élément <h3>. Ce niveau est pertinent si la carte appartient à une sous-section de niveau H2 ; il faudra l’adapter à la hiérarchie réelle de la page.

Le paragraphe utilise la balise <p>.

Enfin, le lien est un élément <a> avec une destination réelle, ici une page officielle de documentation WordPress.

Pourquoi ne pas utiliser une balise button ?

Parce que notre élément sert à ouvrir une autre page.

En HTML, un lien est approprié pour la navigation.

La balise <button> convient davantage à une action, comme ouvrir un panneau ou déclencher une opération dans l’interface.

Le choix du bon élément HTML contribue à l’accessibilité.

Étape 3 — Comprendre les classes

Nous utilisons plusieurs classes :

Cette organisation permet de distinguer les différentes parties du composant.

Elle facilite également les modifications futures.

6. Ajouter le CSS complet : bordures, ombres, boutons et animation

Voici le code CSS principal de notre carte.

Il peut être copié dans un emplacement adapté aux styles globaux du site.

/* ========================================
   ATOOLPHA — CARTE GUTENBERG
   Exemple pédagogique
======================================== */

.atp-carte {
  box-sizing: border-box;
  width: 100%;
  max-width: 760px;
  margin-inline: auto;
  padding: clamp(20px, 4vw, 36px);

  background: linear-gradient(
    135deg,
    #ffffff 0%,
    #f1f7ff 100%
  );

  color: #18324a;

  border: 1px solid #d9e5ef;
  border-radius: 18px;

  box-shadow:
    0 4px 12px rgba(10, 30, 55, 0.05),
    0 14px 34px rgba(10, 30, 55, 0.10);

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease;
}

/* Petite étiquette */

.atp-carte__etiquette {
  display: inline-block;
  margin-bottom: 12px;

  color: #075b9b;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}

/* Titre */

.atp-carte h3 {
  margin: 0 0 14px;
  color: #142b43;
  font-size: clamp(1.25rem, 2.5vw, 1.65rem);
  line-height: 1.3;
}

/* Paragraphe */

.atp-carte p {
  margin: 0 0 22px;
  color: #334e64;
  line-height: 1.7;
}

/* Lien HTML ou bouton Gutenberg */

.atp-carte__lien,
.atp-carte .wp-block-button__link {
  display: inline-block;
  padding: 12px 20px;

  border-radius: 10px;
  background: #075b9b;
  color: #ffffff;

  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;

  transition:
    background-color 0.2s ease,
    transform 0.2s ease;
}

/* Contraste au survol */

.atp-carte__lien:hover,
.atp-carte .wp-block-button__link:hover {
  background: #054674;
  color: #ffffff;
}

/* Focus visible au clavier */

.atp-carte__lien:focus-visible,
.atp-carte .wp-block-button__link:focus-visible {
  outline: 3px solid #cf7700;
  outline-offset: 4px;
}

/* Effet de la carte avec un pointeur adapté */

@media (hover: hover) and (pointer: fine) {
  .atp-carte:hover {
    transform: translateY(-4px);

    border-color: #aacce8;

    box-shadow:
      0 8px 20px rgba(10, 30, 55, 0.08),
      0 22px 46px rgba(10, 30, 55, 0.14);
  }
}

/* Mise en valeur lors de l'interaction clavier */

.atp-carte:focus-within {
  border-color: #075b9b;
}

/* Adaptation aux petits écrans */

@media (max-width: 600px) {
  .atp-carte {
    padding: 20px;
    border-radius: 14px;
  }

  .atp-carte__lien,
  .atp-carte .wp-block-button__link {
    max-width: 100%;
    overflow-wrap: anywhere;
  }
}

/* Respect des préférences de mouvement */

@media (prefers-reduced-motion: reduce) {
  .atp-carte,
  .atp-carte__lien,
  .atp-carte .wp-block-button__link {
    transition: none;
  }

  .atp-carte:hover {
    transform: none;
  }
}

Pourquoi ce CSS est-il structuré en plusieurs parties ?

Chaque section possède une responsabilité identifiable.

Le conteneur principal définit les dimensions, le fond, les bordures et les ombres.

Les éléments internes contrôlent la typographie et la présentation du lien.

Les règles :hover ajoutent une réactionUne action WordPress est un point d’exécution où des fonctions enregistrées peuvent réagir à un événement ou à une étape du chargement. Elle déclenche des opérations sans transmettre une valeur modifiée au code appelant. visuelle pour les périphériques adaptés.

La pseudo-classe :focus-visible contribue à rendre l’élément de navigation identifiable au clavier.

Enfin, les media queries adaptent le comportement aux petits écrans et aux préférences d’accessibilité.

Pourquoi utiliser deux ombres ?

La propriété box-shadow permet de combiner plusieurs ombres.

La première est légère et proche du composant.

La seconde est plus diffuse.

Cette superposition crée un relief plus subtil qu’une unique ombre très sombre.

Comprendre clamp()

La fonction CSS clamp() permet de définir une valeur minimale, une valeur flexible et une limite maximale.

Dans notre exemple :

padding: clamp(20px, 4vw, 36px);

Le navigateur adapte la marge intérieure selon la largeur de l’écran, tout en respectant les limites prévues.

Cette approche peut réduire le nombre de règles spécifiques nécessaires pour différentes tailles d’écran.

Pourquoi respecter prefers-reduced-motion ?

Certains utilisateurs demandent à leur système de réduire les animations.

Le CSS peut détecter cette préférence :

@media (prefers-reduced-motion: reduce) {
  .atp-carte:hover {
    transform: none;
  }
}

Notre carte reste utilisable et lisible sans déplacement animé.

Les informations essentielles ne dépendent jamais de cet effet.

7. Où faut-il placer le CSS dans WordPress ?

C’est une étape déterminante.

Ajouter du CSS au mauvais endroit peut produire un fonctionnement temporaire, une disparition des styles ou une incompatibilité avec le thème.

Méthode A — Thème classique

Pour un thème classique exposant l’outil de personnalisation, ouvrez :

Apparence > Personnaliser > CSS additionnel

Collez les règles CSS dans cet emplacement.

Prévisualisez le résultat, puis enregistrez.

Le CSS additionnel est associé au thème actif.

Il n’est normalement pas écrasé lors d’une mise à jour ordinaire de ce thème, mais il ne s’appliquera plus de la même manière si vous changez de thème.

Méthode B — Thème de blocs

Avec un thème de blocs, ouvrez généralement :

Apparence > Éditeur > Styles

Accédez ensuite aux options supplémentaires des styles et recherchez CSS additionnel.

Ce réglage permet de définir des règles CSS personnalisées applicables à l’ensemble du site.

Les emplacements et libellés exacts peuvent varier selon la version de WordPress et la configuration du thème.

Attention au CSS propre à un type de bloc

L’éditeur de site permet également d’appliquer du CSS à certains types de blocs.

Cette fonctionnalité ne doit pas être confondue avec les styles globaux.

Dans un champ CSS spécifique à un bloc, WordPress peut attendre uniquement les déclarations de propriétés :

border-radius: 16px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);

Pour notre exemple complet, qui utilise plusieurs classes et media queries, le CSS additionnel global ou une feuille CSS dédiée constitue l’option la plus lisible.

Méthode C — Fichier CSS d’un thème enfant

Pour une personnalisation structurelle durable, un thème enfant peut contenir une feuille de style adaptée.

Les changements doivent être développés et testés dans les fichiers du thème enfant, et non ajoutés directement au thème parent.

Cela évite de perdre des modifications lorsqu’une mise à jour remplace les fichiers du thème parent.

Méthode D — Extension dédiée

Lorsque les styles doivent rester disponibles indépendamment du thème, une extension peut enregistrer et charger une feuille CSS.

Cette méthode devient intéressante pour des composants réutilisables sur plusieurs sites.

Elle nécessite toutefois une mise en œuvre correcte avec les API WordPress et une politique de maintenance.

Pour le premier exercice, le CSS additionnel du site suffit.

8. Réutiliser le même CSS avec un Groupe Gutenberg

Bonne nouvelle : il n’est pas nécessaire de conserver notre carte sous forme de HTML brut.

Nous pouvons utiliser les blocs natifs créés au début du tutoriel.

Méthode

Reprenez le bloc Groupe contenant votre titre, votre paragraphe et votre bouton.

Dans ses réglages avancés, renseignez la classe :

atp-carte

Les styles du conteneur s’appliqueront alors à ce groupe.

Le CSS prévu pour .wp-block-button__link permettra également de personnaliser son bouton Gutenberg.

Quelle différence avec le bloc HTML personnalisé ?

Avec les blocs natifs, le titre et le paragraphe restent modifiables directement dans l’éditeur visuel.

Avec notre bloc HTML, la structure s’édite principalement dans le code.

Les deux approches produisent une présentation comparable, mais n’offrent pas la même expérience d’édition.

Pour un site dont les contenus doivent être régulièrement modifiés par des rédacteurs, les blocs natifs sont souvent plus faciles à maintenir.

9. Créer une carte premium avec un dégradé sombre

Nous allons maintenant construire une variante.

L’idée est de mettre en valeur un service ou une information importante avec un fond bleu profond et un léger accent lumineux.

Étape 1 — Ajouter une seconde classe

Sur le groupe concerné, ajoutez ces deux classes dans le champ des classes CSS additionnelles :

atp-carte atp-carte--premium

La première classe conserve la structure de base.

La seconde permet de modifier son apparence.

Étape 2 — Ajouter les styles de la variante

.atp-carte--premium {
  background: linear-gradient(
    135deg,
    #10283f 0%,
    #174a72 100%
  );

  border: 1px solid #37769f;

  box-shadow:
    0 12px 28px rgba(9, 26, 45, 0.22),
    0 24px 52px rgba(9, 26, 45, 0.12);
}

.atp-carte--premium h3 {
  color: #ffffff;
}

.atp-carte--premium p {
  color: #edf5fc;
}

.atp-carte--premium .atp-carte__etiquette {
  color: #aee6ff;
}

Pourquoi utiliser une classe de variation ?

Parce que les propriétés générales restent centralisées.

La variante ne modifie que les caractéristiques nécessaires.

Il devient alors plus simple de maintenir plusieurs présentations sans dupliquer tout le CSS.

Garder un contraste lisible

Un fond sombre ne garantit pas automatiquement une bonne lisibilité.

Il faut tester les couleurs utilisées pour les textes, les liens et les éléments de navigation.

Pour les textes courants, les recommandations WCAG prévoient généralement un rapport de contraste minimal de 4,5:1 au niveau AA, avec des conditions particulières pour les textes de grande taille.

Un effet visuel doit rester secondaire par rapport à la compréhension du contenu.

10. Créer un encadré de conseil avec une bordure colorée

Les cartes ne sont pas les seuls éléments intéressants à personnaliser.

Un encadré peut permettre de mettre en évidence un conseil, une information technique ou une précaution.

HTML de l’encadré

<aside class="atp-conseil">
  <h3>Conseil WordPress</h3>

  <p>
    Testez vos modifications CSS en local avant
    de les appliquer à un site public.
  </p>
</aside>

La balise <aside> convient ici à une information complémentaire au contenu principal. Pour un élément constituant une partie essentielle de la lecture, un autre conteneur peut être préférable.

CSS de l’encadré

.atp-conseil {
  padding: 24px;

  background: #edf7ff;
  color: #17344d;

  border-left: 5px solid #1874b5;
  border-radius: 8px;

  box-shadow:
    0 6px 20px rgba(17, 53, 85, 0.06);
}

.atp-conseil h3 {
  margin: 0 0 10px;
  color: #123d5d;
}

.atp-conseil p {
  margin: 0;
  color: #17344d;
  line-height: 1.65;
}

Pourquoi une bordure latérale ?

Elle établit une distinction claire avec le reste du texte.

Cette technique est fréquemment utilisée pour les conseils, les rappels et les notes complémentaires.

Il ne faut cependant pas compter uniquement sur la couleur pour signaler une information importante.

Le titre et le texte doivent rester suffisamment explicites.

11. Afficher plusieurs cartes dans une grille responsive

Une seule carte peut être utilisée dans un article.

Mais il est également possible de présenter plusieurs fonctionnalités côte à côte.

La solution native Gutenberg

Pour une mise en page simple, utilisez un bloc Colonnes ou Grille, lorsque disponible.

Placez une carte dans chaque colonne.

Cette méthode permet de gérer la disposition directement dans l’éditeur.

La solution avec CSS Grid

Pour un contrôle plus personnalisé, nous pouvons créer un conteneur portant la classe atp-grille.

Voici l’exemple HTML :

<div class="atp-grille">

  <article class="atp-carte">
    <h3>Design</h3>
    <p>
      Personnalisez les couleurs,
      les bordures et les espacements.
    </p>
  </article>

  <article class="atp-carte">
    <h3>Performance</h3>
    <p>
      Utilisez des styles légers,
      sans bibliothèque externe.
    </p>
  </article>

  <article class="atp-carte">
    <h3>Accessibilité</h3>
    <p>
      Conservez des textes lisibles
      et une navigation compréhensible.
    </p>
  </article>

</div>

Ajoutez ensuite :

.atp-grille {
  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 24px;
}

.atp-grille > .atp-carte {
  min-width: 0;
  max-width: none;
  margin: 0;
}

@media (max-width: 900px) {
  .atp-grille {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .atp-grille {
    grid-template-columns: 1fr;
  }
}

Comprendre grid-template-columns

La propriété définit les colonnes de notre grille.

Sur un écran suffisamment large, trois cartes sont présentées côte à côte.

Lorsque l’espace devient plus limité, la disposition passe à deux colonnes, puis à une seule.

Les valeurs proposées correspondent à notre exemple. Elles devront être adaptées à la largeur réelle du conteneur fourni par le thème.

Pourquoi utiliser minmax(0, 1fr) ?

Cette notation aide à répartir l’espace disponible sans imposer une largeur minimale automatique trop importante aux colonnes.

Elle peut limiter certains débordements, sans remplacer la vérification de contenus longs ou d’éléments possédant leurs propres dimensions.

12. Ajouter des effets sans pénaliser les performances

Les effets CSS peuvent rendre un site plus vivant.

Mais leur présence doit être justifiée.

Les effets généralement simples

Un changement de couleur, un léger déplacement ou une variation d’ombre peut souvent être réalisé sans JavaScript.

Les propriétés transform et opacity sont fréquemment intéressantes pour les animations, car elles peuvent éviter certains recalculs de mise en page.

Cela ne signifie pas que toute animation utilisant ces propriétés est gratuite en ressources.

Les effets à utiliser avec mesure

Les flous importants, les filtres complexes et les animations permanentes peuvent augmenter le travail de rendu.

Une interface comportant de nombreuses cartes animées simultanément peut devenir moins agréable sur certains appareils.

Ne pas confondre effet visuel et fonctionnalité

Un élément qui se déplace au survol n’est pas nécessairement interactif.

Une carte purement informative ne doit pas donner l’impression qu’elle constitue un lien si aucune action n’est prévue.

L’effet doit accompagner une information ou un comportement réel.

Tester sans souris

Utilisez la touche Tab pour naviguer parmi les liens et boutons.

Vérifiez que le focus est visible.

Assurez-vous également qu’aucune information importante n’est accessible uniquement au survol.

Le contenu doit rester utilisable lorsque les animations sont désactivées.

13. Transformer sa composition en élément réutilisable

Nous avons créé notre carte et ses variantes.

Mais comment éviter de recommencer les mêmes manipulations dans chaque article ?

WordPress propose les compositions de blocs, ou patterns.

Créer une composition

Dans Gutenberg, sélectionnez votre groupe de blocs.

Ouvrez le menu des options.

Choisissez l’action permettant de créer une composition, lorsque disponible.

Attribuez un nom clair, par exemple :

Carte éditoriale ATOOLPHA

Enregistrez-la.

La composition pourra ensuite être insérée dans d’autres contenus.

Composition non synchronisée

Une composition non synchronisée sert de modèle de départ.

Lorsqu’elle est insérée dans un article, son contenu peut être modifié sans changer les autres occurrences.

C’est particulièrement adapté à des cartes de services utilisant une même structure graphique avec des textes différents.

Composition synchronisée

Une composition synchronisée conserve un lien entre ses différentes utilisations.

La modification de cette composition peut donc affecter toutes les pages où elle apparaît.

C’est utile pour un message qui doit rester identique sur plusieurs pages.

Mais ce comportement nécessite des précautions : modifier une composition synchronisée peut avoir des conséquences sur de nombreux contenus.

Attention à une distinction importante

Une composition n’est pas un nouveau type de bloc.

Elle constitue un assemblage réutilisable de blocs existants.

Cela suffit pour de nombreux besoins éditoriaux, sans nécessiter de développement JavaScript.

14. Niveau avancé : développer un véritable bloc personnalisé

Jusqu’ici, nous avons créé des mises en page et des composants HTML.

Nous allons maintenant découvrir l’étape supplémentaire permettant à un développeur de créer un bloc qui possède sa propre identité dans Gutenberg.

À quoi reconnaît-on un véritable bloc personnalisé ?

Un bloc enregistré possède notamment :

• Un nom technique unique.
• Des métadonnées.
• Des attributs représentant ses données.
• Une interface d’édition.
• Un mécanisme de sauvegarde ou de rendu.
• Éventuellement ses propres feuilles de style.

Les API du Block Editor permettent de déclarer ces éléments.

Préparer l’environnement

Le développement moderne de blocs WordPress repose généralement sur JavaScript et une étape de compilation.

Pour suivre cette partie, il faut disposer de :

• Node.js et npm.
• Une installation WordPress de développement.
• Un éditeur de code.
• Un accès au dossier des extensions.

WordPress fournit un outil officiel nommé @wordpress/create-block pour générer l’architecture initiale.

Étape 1 — Générer le projet

Dans un terminal, placez-vous dans un répertoire destiné aux projets de développement, puis exécutez :

npx @wordpress/create-block@latest

L’outil lance une configuration interactive.

Choisissez un nom de projet, un slug approprié et, pour cet exemple, une structure de bloc statique lorsqu’elle est proposée.

Un bloc statique enregistre son HTML dans le contenu WordPress.

À l’inverse, un bloc dynamique produit son rendu à l’exécution, généralement côté serveur.

Cette distinction influence directement le développement et la maintenance.

Étape 2 — Comprendre la structure générée

Un projet de bloc peut comporter une organisation proche de celle-ci :

atp-carte/
├── atp-carte.php
├── package.json
├── src/
│   ├── block.json
│   ├── index.js
│   ├── edit.js
│   ├── save.js
│   ├── editor.scss
│   └── style.scss
└── build/

La structure précise dépend des options choisies et de la version de l’outil.

Le dossier src contient les fichiers source.

Le dossier build reçoit les fichiers construits pour être utilisés par WordPress.

Étape 3 — Déclarer le bloc avec block.json

Voici un exemple de métadonnées pour notre carte :

{
  "$schema": "https://schemas.wp.org/trunk/block.json",
  "apiVersion": 3,
  "name": "atoolpha/carte-editoriale",
  "version": "1.0.0",
  "title": "Carte éditoriale",
  "category": "design",
  "icon": "index-card",
  "description": "Carte éditoriale personnalisable.",
  "attributes": {
    "titre": {
      "type": "string",
      "source": "html",
      "selector": "h3"
    },
    "description": {
      "type": "string",
      "source": "html",
      "selector": "p"
    }
  },
  "supports": {
    "html": false
  },
  "textdomain": "atp-carte",
  "editorScript": "file:./index.js",
  "editorStyle": "file:./index.css",
  "style": "file:./style-index.css"
}

Le nom technique comporte deux parties :

atoolpha/carte-editoriale

La première identifie l’espace de noms.

La seconde identifie le bloc.

Les attributs titre et description définissent les informations éditables.

Étape 4 — Créer l’interface d’édition

Dans src/edit.js, une implémentation pédagogique peut utiliser le composant RichText :

import {
  RichText,
  useBlockProps
} from '@wordpress/block-editor';

export default function Edit({
  attributes,
  setAttributes
}) {
  const { titre, description } = attributes;

  const blockProps = useBlockProps({
    className: 'atp-carte'
  });

  return (
    <article {...blockProps}>
      <RichText
        tagName="h3"
        value={titre}
        placeholder="Titre de la carte"
        onChange={(value) =>
          setAttributes({ titre: value })
        }
      />

      <RichText
        tagName="p"
        value={description}
        placeholder="Description de la carte"
        onChange={(value) =>
          setAttributes({ description: value })
        }
      />
    </article>
  );
}

La fonction Edit représente l’interface utilisée dans Gutenberg.

Le composant RichText permet de modifier directement les champs dans l’éditeur.

La fonction setAttributes() enregistre les modifications dans les attributs du bloc.

Étape 5 — Définir le HTML enregistré

Pour un bloc statique, le fichier src/save.js peut contenir :

import {
  RichText,
  useBlockProps
} from '@wordpress/block-editor';

export default function save({ attributes }) {
  const { titre, description } = attributes;

  const blockProps = useBlockProps.save({
    className: 'atp-carte'
  });

  return (
    <article {...blockProps}>
      <RichText.Content
        tagName="h3"
        value={titre}
      />

      <RichText.Content
        tagName="p"
        value={description}
      />
    </article>
  );
}

Cette fonction détermine le HTML enregistré dans le contenu de l’article.

WordPress pourra ensuite vérifier si la structure enregistrée correspond à celle attendue par le bloc.

Étape 6 — Enregistrer l’interface JavaScript

Le fichier src/index.js relie les métadonnées, l’interface d’édition et le mécanisme de sauvegarde.

import { registerBlockType } from '@wordpress/blocks';

import metadata from './block.json';
import Edit from './edit';
import save from './save';

import './style.scss';
import './editor.scss';

registerBlockType(metadata.name, {
  edit: Edit,
  save
});

La feuille style.scss peut contenir les règles de notre carte, tandis que editor.scss peut accueillir les ajustements propres à l’éditeur.

Le projet généré doit conserver son enregistrement PHP et sa configuration de compilation.

Ces fichiers JavaScript ne constituent donc pas, à eux seuls, une extension installable indépendante.

Étape 7 — Compiler et tester

Dans le répertoire du projet :

npm run start

Cette commande sert à suivre les modifications et reconstruire les ressources pendant le développement.

Pour préparer une version destinée à la distribution :

npm run build

La compilation produit les fichiers nécessaires à l’exécution dans WordPress.

Le bloc doit ensuite être testé sur une installation locale.

Points à vérifier

Il faut notamment contrôler :

1. La présence du bloc dans l’outil d’insertion.
2. L’enregistrement correct du titre et du texte.
3. Le rendu après rechargement de la page.
4. L’absence d’erreurs de validation de bloc.
5. La présence des styles dans l’éditeur et sur le site public.
6. Le fonctionnement après désactivation et réactivation de l’extension.
7. La compatibilité avec les versions WordPress réellement ciblées.

Précision : cet exemple présente les composants essentiels d’un bloc statique, mais n’a pas été compilé ni testé dans une installation WordPress pour cet article. Le fonctionnement complet doit être vérifié après intégration dans un projet correctement généré.

15. Les erreurs fréquentes lors de la personnalisation Gutenberg

Placer tout le CSS directement dans le contenu de l’article

Cela peut compliquer la maintenance, provoquer des duplications et rendre difficile la réutilisation des styles.

Pour des composants communs, une feuille CSS centralisée est généralement préférable.

Modifier directement les fichiers d’un thème parent

Les modifications risquent d’être perdues lors des mises à jour.

Un thème enfant ou un mécanisme de styles additionnels constitue souvent une méthode plus appropriée.

Confondre HTML personnalisé et bloc enregistré

Un élément HTML placé dans un article ne devient pas automatiquement un nouveau type de bloc Gutenberg.

L’enregistrement d’un véritable bloc nécessite les API prévues à cet effet.

Utiliser des classes CSS génériques

Des noms comme .card, .box ou .button peuvent provoquer des conflits avec le thème ou des extensions.

Des préfixes cohérents limitent ce risque.

Dépendre uniquement des animations

Un effet de survol peut être agréable, mais il ne doit pas cacher une information indispensable.

L’interface doit rester utilisable au clavier et sur écran tactile.

Ignorer les restrictions de sécurité

Selon les droits d’un utilisateur, WordPress peut supprimer certains éléments HTML interdits.

Depuis WordPress 7.0, les panneaux CSS et JavaScript du bloc HTML personnalisé sont également soumis à des permissions spécifiques.

Les utilisateurs ne doivent pas chercher à contourner ces protections pour insérer du code exécutable.

Ne pas vérifier le rendu public

L’apparence dans l’éditeur peut différer de celle du site public.

Le thème, ses feuilles CSS et les règles de cache peuvent influencer le résultat.

Accumuler les effets graphiques

Une ombre très sombre, plusieurs animations et des dégradés excessifs peuvent rendre la page moins lisible.

La personnalisation doit soutenir le contenu, pas détourner constamment l’attention.

16. Méthode de vérification avant publication

Avant de publier une page contenant nos cartes personnalisées, réalisons quelques contrôles.

Pour contrôler les dimensions d’écran, les outils de développement des navigateurs Chrome, Firefox et Edge permettent notamment de simuler différentes tailles de fenêtre.

Il faut également tester la navigation sans souris.

Pour vérifier les contrastes, un outil d’analyse conforme aux WCAG peut être utilisé.

Enfin, si un système de cache conserve les anciennes feuilles CSS, il peut être nécessaire de purger ce cache après une modification.

17. Quelle méthode choisir selon son projet ?

Les trois approches présentées répondent à des besoins différents.

Il n’existe pas une seule méthode valable pour tous les projets.

Un site éditorial simple peut obtenir une présentation professionnelle avec les seuls blocs natifs.

Un projet plus avancé peut justifier une extension comprenant ses propres blocs.

L’important est de choisir le niveau de complexité correspondant aux besoins réels.

Conclusion — Gutenberg permet d’aller beaucoup plus loin qu’on ne l’imagine

La personnalisation de WordPress ne nécessite pas systématiquement un constructeur de pages externe.

Avec un bloc Groupe, quelques réglages graphiques et une classe CSS, il est déjà possible de créer une carte élégante et réutilisable.

L’ajout de HTML et de CSS permet de concevoir des compositions plus précises : dégradés, ombres, bordures, effets de survol et mises en page responsives.

Pour les développeurs, les API WordPress offrent une étape supplémentaire : construire de véritables types de blocs dotés de leurs propres attributs et interfaces d’édition.

Mais cette liberté technique implique plusieurs responsabilités.

Les composants doivent rester accessibles, lisibles sur mobile, compatibles avec l’éditeur et faciles à maintenir.

La qualité d’une interface ne se mesure donc pas uniquement à son apparence. Elle dépend aussi de la manière dont les utilisateurs peuvent la comprendre, la modifier et l’utiliser.

Un beau bloc Gutenberg n’est pas celui qui contient le plus d’effets. C’est celui qui met réellement le contenu en valeur sans compliquer le fonctionnement du site.

En commençant par les outils natifs, puis en ajoutant progressivement du CSS et du développement personnalisé, il devient possible de construire une identité visuelle cohérente tout en conservant la maîtrise de son environnement WordPress.

ATOOLPHA — Comprendre avant d’agir.

Documentation officielle

WordPress — Bloc Groupe

WordPress — Paramètres de bordures et d’ombres

WordPress — HTML personnalisé

WordPress — Réglages avancés des blocs

WordPress — Styles globaux et CSS additionnel

WordPress — Compositions de blocs

WordPress Developer — Création d’un premier bloc

WordPress Developer — Outil create-block

WordPress Developer — Métadonnées block.json

WordPress Developer — Enregistrement des blocs

W3C — WCAG 2.2

Article pédagogique ATOOLPHA — 23 octobre 2026. Les exemples HTML, CSS et JavaScript sont destinés à être reproduits dans un environnement de test. Ils n’ont pas fait l’objet d’une qualification sur le site ATOOLPHA.