Ce qui différencie le FSE d’autres pages builders, c’est le contrôle sur les libertés et les contraintes des réglages de l’éditeur. En effet, on va pouvoir contrôler les réglages à proposer ou cacher via le theme.json, afin d’optimiser l’expérience utilisateur que l’on va donner à nos clients.
Sommaire du cours
Comme on l’a vu dans l’introduction au theme.json, la section settings
nous permet à la fois de configurer les variables globales comme les couleurs, typographies, mais également d’activer ou de désactiver les fonctionnalités de l’éditeur.
Et c’est sur ce second point que l’on va se concentrer dans ce cours. Et vous allez voir qu’on a pas mal de possibilités.
D’ailleurs vous pourrez appliquer ces réglages globalement, pour tous les blocs, ou au contraire aller plus loin dans les détails et les configurer uniquement pour certains blocs.
L’objectif, avec ces réglages, c’est de maîtriser le degré de liberté ou de contrainte que l’on va imposer aux rédacteurs du site.
Fonctionnalités globales de l’éditeur
On va commencer par regarder du côté des fonctionnalités globales de l’éditeur dans la rubrique settings
de notre fichier theme.json
. Les réglages que l’on va activer s’appliqueront ainsi à la majorité des blocs.
Activer tous les réglages d’un coup
Il existe une propriété magique qui vous permet d’activer tous les réglages de l’éditeur, vous passant d’un éditeur minimaliste à un éditeur complet (et complexe).
À utiliser seulement si vous voulez un contrôle créatif complet, mais gardez à l’esprit que ce ne sera peut-être pas forcément la meilleure approche pour vos clients. On verra ensuite comme définir chaque réglage indépendamment.
Pour activer toutes les fonctionnalités, ajoutez la propriété appearanceTools
dans settings
:
Cette propriété nous permet d’activer les réglages suivants :
- Bordure : couleur, arrondi, style, largeur ;
- Couleur des liens, titres, légendes et boutons ;
- Espacements : espacement entre les blocs, marges internes et externes ;
- Typographie : hauteur de ligne ;
- Dimensions du bloc : hauteur et ratio ;
- Position fixe de l’élément (sticky) ;
Voici ce que ça donne avec le bloc groupe, avant et après l’activation de ce réglage :

Le souci avec cette approche, c’est que ça active également la personnalisation des valeurs.

Grâce au bouton à droite des champs, on peut indiquer n’importe quelle valeur, en dehors de celles qu’on aura contraintes via notre design system.
Je vais donc maintenant vous montrer chaque réglage pour un meilleur contrôle de l’éditeur.
Pour la suite, pensez à repasser appearanceTools
à false
pour bien voir les différences dans l’interface.
Les bordures
Commençons avec les bordures. Vous allez pouvoir activer plusieurs réglages les concernant :
color
: La couleur de la bordure ;radius
: Son arrondi ;style
: Le style de bordure (trait, tirets, pointillés) ;width
: Et l’épaisseur du trait.
Voici ces réglages dans le theme.json
:
Par défaut, rien n’est disponible dans l’éditeur, c’est comme si toutes les valeurs étaient à false
. Vous pouvez donc toutes les passer à true
pour tester.
Ajoutez un bloc « Groupe » par exemple et allez dans l’onglet des styles du bloc. En bas, vous devriez désormais voir les réglages de bordure :

On peut choisir la couleur, le style et l’épaisseur de bordure, ainsi que le rayon. Les icônes représentant des chaînons permettent de désolidariser les réglages pour chaque côté de votre groupe :

De cette manière, vous allez pouvoir définir des styles différents pour chaque côté.
Les couleurs
Passons maintenant aux couleurs. Dans Apparence > Éditeur > Styles (le FSE), vous allez pouvoir configurer les couleurs de votre palette (qu’on va très bientôt aborder) mais aussi les éléments auxquels on peut assigner une valeur par défaut.
Dans le theme.json
, ça se présente comme ceci :
Chaque ligne permet d’activer une option bien particulière :
link
: la couleur des liens sur tout le site ;text
: la couleur globale des textes ;background
: la couleur de fond du site ;caption
: la couleur des légendes sous les images et vidéos ;button
: la couleur des boutons principaux ;heading
: la couleur des titres, tous niveaux confondus.
Et voici à quoi ça ressemble dans l’interface lorsque vous activez toutes les options :

Ces couleurs seront appliquées globalement à tous les titres, textes, légendes, boutons… indépendamment qu’ils soient dans des blocs ou non.
Pour rappel, ce sont les atomes de l’atomic design, des éléments encore plus petits que nos blocs (les molécules).
Par exemple, la couleur que vous appliquerez à « Texte » sera appliquée à tous les textes du site, peu importe le bloc utilisé.
Bien entendu, on pourra surcharger ces réglages au cœur de nos blocs. Si vous souhaitez appliquer une autre couleur à votre liste par exemple, vous pourrez le faire dans l’éditeur de styles des blocs du FSE :

Nous configurerons ces couleurs par défaut un peu plus tard dans le theme.json
.
Même si on peut configurer ces valeurs depuis l’éditeur, ce sera plus simple de faire les réglages directement en JSON afin de les versionner avec notre thème sur Git .
Dans les prochains cours, on verra comment définir les couleurs et dégradés de notre palette. On verra également comment personnaliser les options de palette afin de proposer le minimum d’options possibles :

Par exemple, on pourra désactiver le choix d’une couleur personnalisée et les couleurs proposées par défaut dans WordPress, ou encore désactiver les dégradé…
Les espacements
Les espacements ont toute leur importance avec Gutenberg, et on va pouvoir les régler dans les moindres détails grâce aux options disponibles.
Ce sont en général les blocs structurels comme le groupe, la rangée et les colonnes qui vont tirer parti de ces réglages :
Voici à quoi sert chaque propriété :
blockGap
: L’espacement entre les blocs enfants ;customSpacingSize
: Donner la possibilité d’indiquer une valeur personnalisée ;defaultSpacingSize
: Utiliser les espacements natifs de WordPress ;margin
: Activer le réglage des marges externes ;padding
: Activer le réglage des marges internes ;units
: Indiquer les unités disponibles dans les options de l’éditeur.
Avec les réglages ci-dessus sur un bloc groupe, voilà ce qu’on obtient :

On voit qu’on peut modifier les marges internes horizontalement et verticalement. Le petit carré en haut à droite permet de changer les réglages et modifier par exemple uniquement la marge supérieure.
On peut également modifier l’espacement entre les blocs grâce à blockGap
. Ce dernier utilise la propriété CSS margin-block-start, qui prend en compte la direction d’écriture selon la langue.
Ce qui veut dire que ce réglage fonctionnera aussi bien à l’horizontale dans les rangées qu’à la verticale dans les colonnes.
De ce fait, on n’a pas besoin de définir des marges extérieures ! C’est pour ça que j’ai passé margin
à false
.
Si vous voulez éviter de donner trop de possibilités à vos utilisateurs, désactivez les marges personnalisées via customSpacingSize
. Sinon, ils pourront définir une valeur en dehors de celles prévues par notre thème :

Et comme on l’a vu en début de formation, le but de Gutenberg est d’éviter de donner trop d’options à l’inverse d’Elementor.
Dans la suite de la formation, on va justement voir comment définir nos espacements dans cette section du theme.json
.
La typographie
Les textes ont un rôle très important à jouer dans le web design moderne. C’est pour cela que Gutenberg nous propose beaucoup d’options autour de la typographie.
Mais comme d’habitude, on va jouer la retenue pour proposer uniquement les réglages intéressants :
Voici le rôle de chaque propriété :
customFontSize
: Définir une taille de texte personnalisée ;defaultFontSizes
: Utiliser les tailles fournies par WordPress ;dropCap
: Activer la lettrine en début de paragraphe ;fontStyle
: Pour passer tout le paragraphe en italique ;fontWeight
: Activer le choix de la graisse, au lieu de simplement gras ;letterSpacing
: Choisir l’espacement entre les lettres ;lineHeight
: Choisir la hauteur de ligne (interlignage) ;textAlign
: Aucun effet.textColumns
: Aucun effet.textDecoration
: Mettre le texte en souligné ou barré ;textTransform
: Modifier la casse du texte pour forcer la majuscule ;writingMode
: Passer en écriture verticale ;
Même si on active tout, on va se retrouver avec une interface épurée. Les options seront disponibles dans le menu 3 points en haut à droite de la section de réglages :

Cela permet de se concentrer sur les options dont on a réellement besoin. Si on active tout, on obtiendra ceci :

Ça en fait pas mal ! Mais du coup, libre à vous de désactiver certains menus à partir du theme.json
. Par exemple, il est très rare d’avoir besoin de la lettrine ou de l’orientation. Quant à la police et l’interlignage, on configurera ça en dur dans ce même fichier plus tard.
Je vous recommande également de désactiver la possibilité d’indiquer une taille de texte personnalisée, pour les mêmes raisons que les espacements, afin de respecter le design system.
Dans les prochains cours, je vous montrerai comment ajouter des polices d’écritures et configurer les typographies dans notre thème.
Les ombres
Vous allez également pouvoir définir des ombres sur vos blocs. Cette fonctionnalité est déjà activée par défaut.

WordPress propose quelques styles d’ombres par défaut, et on va bien entendu pouvoir les personnaliser dans les prochains cours.
Pour l’instant, il n’y a pas de valeur pour désactiver les ombres. Du coup, il faudra désactiver les réglages par défaut et déclarer une liste vide.
De cette manière, les réglages d’ombres ne seront plus proposés dans l’éditeur.
On verra comment configurer des ombres sur-mesure dans les prochains cours.
Les images de fond
Le bloc « Groupe » permet de définir une image de fond et de la positionner avec précision grâce à des réglages de taille, si vous activez les options suivantes dans la rubrique settings > background.
Des options supplémentaires apparaîtront alors dans l’onglet « Styles » de l’inspecteur du bloc :

Ainsi, vous donnez au bloc groupe les mêmes propriétés que le bloc « Bannière ».
La lightbox pour les images
WordPress intègre désormais une lightbox nativement, pour afficher vos images en plus grand lors du clic, sans changer de page.
Pour activer la lightbox lors du clic sur une image, il vous suffit de créer un lien et sélectionner « Agrandir au clic ».

Mais si ce fonctionnement ne vous convient pas, on va avoir accès à 2 réglages au niveau du bloc dans le theme.json
.
Il faudra impérativement appliquer ces réglages dans le bloc image, et pas globalement, c’est pour cela qu’on doit les placer dans settings > blocks > core/image > lightbox.
Le premier réglage enabled
, s’il est passé à true
, permet d’activer automatiquement l’agrandissement de l’image lorsque vous l’insérez.
Le second réglage, allowEditing
, permet de définir si vous souhaitez afficher le bouton « Agrandir au clic » ou non dans l’interface de Gutenberg.
Dans l’exemple plus haut, j’ai forcé l’agrandissement de toutes les images du site, et j’ai retiré le réglage de l’éditeur de blocs : l’utilisateur ne pourra donc pas désactiver l’agrandissement des images qu’il insère.
En général je préfère ne pas activer l’agrandissement par défaut, et laisser le rédacteur choisir lesquelles agrandir, ce qui donne plutôt :
À vous de voir quelle configuration adopter en fonction du projet et des besoins !
La position Sticky
Une propriété qui est très cool en CSS, c’est position: sticky
, qui permet de dire à un bloc de se fixer lors du défilement une fois qu’il atteint le haut de la page.
On s’en sert principalement pour coller un menu en haut de notre écran ou encore faire en sorte qu’un sommaire nous suive lors du scroll.
Il existe aujourd’hui un réglage pour cela, qui vous évitera d’ajouter du CSS sur-mesure :
Dans l’interface, l’option est disponible dans « Emplacement » et ressemble à ceci :

En choisissant le réglage « Épinglé », votre bloc deviendra sticky
. Essayez de scroller dans l’éditeur : le bloc reste collé en haut du navigateur.
À ce jour, il n’est pas possible de définir un décalage (offset) comme on peut le faire en CSS.
Le saviez-vous ?
Ce réglage sera uniquement appliqué aux blocs structurels comme le groupe, la rangé, la grille et l’empilement.
Les dimensions
Il existe également des options de dimensionnement qui seront disponibles sur plusieurs blocs :
Aujourd’hui, 3 valeurs sont disponibles :
aspectRatio
: Contraindre les images à un certain ratio ;defaultAspectRatios
: activer ou non les ratios de WordPress par défaut ;minHeight
: Activer ou non l’option de hauteur minimale d’un bloc.
Hauteur minimale pour les groupes
La hauteur minimale de bloc peut être utile si vous souhaitez faire une section (via un bloc groupe) qui prend par exemple 70% de la hauteur du navigateur. C’est souvent utilisé dans le cas du « Hero », cette première zone de la page qui présente le concept.

Grâce à ce champ, on va pouvoir choisir l’unité, et notamment les vh
ou Viewport Height (hauteur du navigateur).
Les proportions d’images
Dans le web moderne, on ne s’embête plus à recadrer les images sur Photoshop avant de les envoyer sur notre site : on va pouvoir définir un ratio d’image directement en CSS grâce aux propriétés aspect-ratio
et object-fit
.
Avec WordPress, on peut activer ou désactiver les options de ratio avec la propriété aspectRatio
du theme.json
.

Si vous appliquez une proportion à une image, vous la verrez s’adapter immédiatement :

Le ratio est essentiel lorsque vous voulez que les images aient toutes les mêmes proportions, dans une liste d’articles par exemple. Lorsque vous récupérez des photos sur un site comme Unsplash, elles n’auront pas toutes la même taille et le même format.
Sans ratio, on voit que les images du blog n’ont pas toutes la même hauteur, et les titres ne sont pas alignés verticalement. Ce n’est pas très élégant :

Et maintenant, si j’applique un ratio de 16:9
toutes les images auront la même hauteur :

Si vous désirez plus de contrôle sur les options, vous allez pouvoir retirer les ratios proposés nativement par WordPress au profit des vôtres.
Dans ce cas, appliquez ces réglages :
Pour appliquer un ratio de 4:3
, faites la division et vous obtiendrez 1.3333
.
Surcharger appearanceTools
Une autre solution serait de passer appearanceTools
à true
pour activer toutes les fonctionnalités, et ensuite de surcharger les réglages afin de désactiver ceux que vous ne voulez pas, si ça vous parait plus simple.
Dans cet exemple, je désactive simplement la possibilité d’épingler un groupe, mais toutes les autres options restent disponibles.
Activer une fonctionnalité uniquement sur certains blocs
Maintenant, si vous souhaitez plus de finesse dans les réglages, j’ai une bonne nouvelle pour vous.
Il existe une sous-section Settings > Blocks
qui va nous permettre de faire des configurations non plus globalement, mais au niveau d’un bloc.
Grâce à cette sous-section, vous allez pouvoir limiter les fonctionnalité vues ci-dessus par bloc.
Appliquer les couleurs de fond seulement aux groupes
Imaginons que vous souhaitiez activer la couleur de fond uniquement sur le bloc « Groupe ».
Pour cela, vous pouvez désactiver background
à partir de settings > color
, et l’activer dans settings > blocs > core/group > color
.
Cette fois, seul le groupe aura la possibilité de changer de couleur de fond. Les blocs paragraphe et titre par exemple ne proposeront plus cette option.
Réduire les sections du JSON dans VS Code
Vous allez avoir très vite de nombreuses lignes dans votre theme.json
. Sur certains thèmes, le fichier peut dépasser les 1000 lignes.
Heureusement, VS Code vous permet de réduire certaines sections pour une meilleure lisibilité du code.
Pour cela, positionnez le curseur à gauche de la ligne de la propriété que vous voulez réduire. Un chevron devrait apparaître, cliquez dessus pour réduire la zone. Cliquez à nouveau pour la faire réapparaître.

Liste de toutes les propriétés disponibles
Si vous souhaitez consulter la liste exhaustive de toutes les propriétés disponibles, et leurs valeurs, vous pouvez consulter la référence dans la documentation WordPress.
C’est intéressant de venir consulter cette liste à chaque nouvelle version de WordPress afin de voir s’il y a eu de nouveaux ajouts.
Avec tout cela, vous avez un contrôle parfait sur l’éditeur de blocs. D’ailleurs, Gutenberg est le seul éditeur qui propose une telle granularité dans ces réglages, contrairement à d’autres pages builders comme Elementor qui proposent beaucoup trop d’options par bloc.
Dans le prochain cours, on va commencer à configurer les valeurs de notre design system dans le theme.json
, notamment les valeurs de largeur du site. J’espère que vous êtes prêt, car on va passer un peu de temps sur ce satané fichier.
Mathieu Godard
Le 20 décembre 2024
Hello :o)
textAlign : Aucun effet.
textColumns : Aucun effet.
Aucun effet visible ? Aucun effet connu ? Aucun effet pour le moment ?
Maxime BJ
Le 20 décembre 2024
Je n’ai pas réussi à trouver ce que ça activait ou modifiait pour le moment. Donc mystère ! Si jamais tu trouves quelque chose, n’hésite pas à m’en faire part !
Mathieu Godard
Le 20 décembre 2024
Je n’ai pas trouvé non plus pour le moment 😉 Je reste en alerte 🙂
Mathieu Godard
Le 20 décembre 2024
« Dans le web moderne, on ne s’embête plus à recadrer les images sur Photoshop avant de les envoyer sur notre site »
Si dans la réalité c’est bien mieux pour notre clientèle, est-ce malgré tout préférable de le faire de notre côté pour des raisons de légèreté et de performance ? Ou le recadrage est réalisé en amont par WordPress pour être livré optimisé sur notre application cliente ?
Maxime BJ
Le 20 décembre 2024
Il faut les optimiser mais avec un outil dans WordPress comme Imagify par exemple ou TinyPNG, une fois l’image importée et les miniatures créées. Ces outils sont capables d’optimiser toutes les tailles d’images et de les convertir dans des formats plus modernes comme le Avif ou le WebP.
Mathieu Godard
Le 20 décembre 2024
OK pour le format mais pas pour les crop en revanche. J’imagine qu’il faut le faire dès l’import ?
Bon après, quand on voit les gains avec ce genre de plugins c’est déjà vraiment bien ! EWWW IO a l’air pas mal aussi. Encore merci pour ta réactivité, t’es au taquet !!!!!
Maxime BJ
Le 20 décembre 2024
Aujourd’hui on choisit le format d’image directement dans un bloc grâce au ration d’image. Derrière le capot, Gutenberg utilise aspect-ratio en CSS. Du coup pas besoin de les recadrer en amont.
Mathieu Godard
Le 20 décembre 2024
OK !!!! Merci !
Mathieu Godard
Le 20 décembre 2024
A ce stade, une question me taraude. Peut-être que j’ai raté l’info au fil des cours…
Lorsqu’on modifie ce fichier, je dois activer un autre thème, puis réactiver mon thème pour que l’affichage prenne en compte mes modifications (ou me déconnecter me reconnecter). N’y a-t-il pas une solution pour que les modifications soient réactives ? Est-ce qû au fait de travailler en local ?
Maxime BJ
Le 6 janvier 2025
Normalement tu devrais voir les modifications directement. Vérifie que tu es bien sur les fichiers du thème actuellement actif !