Formation « Créer un site WordPress avec le Full Site Editing »

Theme.json : configurer les espacements

Lecture : 7 minutes • 0

Un design réussi est un design aéré, et pour cela on va déclarer des espacements dans le theme.json. Ils seront ensuite proposés dans l’éditeur et on sera contraint aux seules valeurs que l’on a définies, afin de garantir l’harmonie et le respect de la maquette.

Toujours dans notre quête d’interpréter notre design system, nous allons continuer la saisie des informations de notre fichier theme.json afin cette fois de définir les espacements.

Ils seront notamment utiles pour créer de l’espace entre chacun de nos blocs, mais aussi pour ajouter des marges internes à nos sections.

Dans ce cours, on va se concentrer sur la section settings > spacing de notre fichier JSON préféré.

JSON
theme.json

Les espacements dans un web design sont, au même titre que les polices et les couleurs, une composante essentielle de notre design system.

Définir les espacements

Pour définir les espacements que l’on va proposer dans l’éditeur, on va utiliser la propriété spacingSizes dans notre JSON :

JSON
theme.json

Tout d’abord, assurez-vous de passer defaultSpacingSizes à false afin de retirer les espacements par défaut de WordPress. Sinon ils vont venir se cumuler aux nôtres.

Ensuite, dans spacingSizes, vous devrez définir pour chaque valeur :

  • name : Le nom affiché dans l’interface ;
  • slug : un identifiant unique pour chaque espacement ;
  • size : la taille sous forme de valeur en CSS.

Comme pour les couleurs, gardez la même nomenclature entre tous vos projets, afin que vos compositions puissent s’adapter à chaque site.

Par exemple : xs, s, m, l, xl, xxl… C’est un nommage court, simple et facile à retenir.

À éviter

Ne changez pas les slugs après avoir commencé à créer des pages, sinon vos blocs vont perdre leurs marges et espacements.

Résultat dans l’éditeur

Depuis l’éditeur, insérez un bloc « Groupe » par exemple et indiquez des marges ou l’espacement des blocs :

À gauche, les réglages d'espacements sont représentés par une glissière cranté et à droite, par un champ de type select.
Les options d’espacement de Gutenberg

Si vous avez indiqué 7 valeurs ou moins, vous aurez comme interface une glissière crantée de type range. C’est vraiment un élément d’interface très pratique.

Mais si vous avez défini plus de 7 valeurs, vous aurez un menu déroulant de type select.

Conseil

Essayez de vous limiter à 7 valeurs d’espacement maximum pour fournir à vos clients la meilleure expérience possible.

Désynchroniser les réglages de marge

Par défaut, WordPress vous propose des réglages de marges groupés : haut/bas et gauche/droite, qui est le cas d’usage le plus commun.

Si vous avez besoin de modifier uniquement un côté, vous pouvez cliquer sur l’icône carrée à droite de l’interface :

De là, vous pourrez choisir un côté en particulier, ou tous les afficher de manière indépendante. Pratique pour les cas spéciaux.

Espacements dynamiques avec CSS clamp, min et max

Comme il est possible de mettre n’importe quelle valeur CSS valide dans la propriété spacingSizes de notre JSON, rien ne nous empêche d’utiliser des fonctions CSS modernes comme clamp(), min() ou encore max().

verrouillé Partie premium

Cette partie du cours est réservée aux détenteurs de l’offre premium.
Envie de nous rejoindre ?

Choisir une formule

Définir une échelle d’espacements

À la place de définir chaque valeur d’espacement manuellement à l’aide de spacingSizes, vous allez pouvoir plutôt créer une échelle automatique.

Pour cela, utilisez la propriété spacingScale à la place de spacingSizes. Voici les paramètres que vous devrez définir dans ce cas :

JSON
theme.json

Avec cette configuration on aura :

  • steps : 5 tailles différentes ;
  • increment : toutes espacées de 1rem ;
  • mediumStep : dont la valeur de base est 2rem ;
  • operator : chaque incrément sera additionné (on peut sinon multiplier) ;
  • unit : l’unité CSS utilisée est le rem.

En utilisant * pour operator, vous allez pouvoir faire des intervalles qui grandissent proportionnellement.

Mais en général, les designers auront déjà défini les tailles dans leurs designs sur Figma, alors ce sera probablement plus judicieux de les reporter à la main plutôt que de créer une échelle.

Attention

Pour chaque projet, choisissez spacingSizes ou spacingScale mais ne mettez jamais les deux en même temps, au risque de créer des conflits.

Les réglages d’espacement

On va continuer avec les réglages d’espacement. On les a d’ailleurs déjà abordés dans le cours sur les fonctionnalités de l’éditeur.

Le but est de définir les réglages qui seront disponibles dans l’éditeur de blocs :

Les options de réglages de marges dans Gutenberg. On voit des réglettes crantées permettant de choisir une valeur parmi celles proposées.
Les réglages de marge de Gutenberg

Voici mes recommandations au sujet des marges :

  • Activez l’espacement des blocs, car ce sera un élément essentiel pour réaliser vos designs : l’espacement entre chaque bloc peut varier d’une section à une autre ;
  • Activez les marges internes, car on en aura besoin à l’intérieur de nos sections, avec le bloc groupe ;
  • Désactivez les marges externes : avec l’espacement des blocs, celles-ci ne nous seront normalement pas utiles, à part si vous avez des cas exceptionnels.

Pour cela, appliquez ces réglages :

JSON
theme.json

Pour rappel, voici à quoi correspondent chaque propriété :

  • blockGap : Activer le réglage d’espacement entre les blocs enfants ;
  • customSpacingSize : Donner la possibilité d’indiquer une valeur personnalisée ;
  • defaultSpacingSizes : 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.

Je vous recommande également de désactiver les valeurs d’espacement personnalisées. De cette manière, on sera obligé de choisir parmi les valeurs définies et on ne pourra plus activer la personnalisation de la valeur :

Le réglage d'une marge personnalisée dans Gutenberg, avec un champ libre et le choix de l'unité.
Le réglage de marges personnalisées

Enfin, ne gardez que les unités dont vous aurez besoin. Par exemple px, % et rem. Si vous avez un doute sur la différence entre em et rem, par ici.

Conseil

Comme on l’a vu dans le cours sur la mise en forme avec Gutenberg, groupez des éléments ensemble pour leur appliquer un espacement différent du reste de la page.

Supprimer les marges entre les sections

Dans le cours sur la mise en forme avancée avec Gutenberg, on a vu comment supprimer l’espace entre chaque section à partir de l’éditeur de styles.

verrouillé Partie premium

Cette partie du cours est réservée aux détenteurs de l’offre premium.
Envie de nous rejoindre ?

Choisir une formule


Notre thème commence à prendre forme grâce à l’interprétation des couleurs et des espacements dans le theme.json.

Dans le prochain cours, on va se concentrer sur les polices d’écritures et les typographies. Ainsi, on aura configuré les éléments essentiels de notre charte graphique.

0

Questions, réponses et commentaires

Laisser un commentaire