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.
Sommaire du cours
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é.
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 :
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.
Résultat dans l’éditeur
Depuis l’éditeur, insérez un bloc « Groupe » par exemple et indiquez des marges ou l’espacement des blocs :
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
.
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()
.
Partie premium
Cette partie du cours est réservée aux détenteurs de l’offre premium.
Envie de nous rejoindre ?
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 :
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.
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 :
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 :
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 :
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.
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.
Partie premium
Cette partie du cours est réservée aux détenteurs de l’offre premium.
Envie de nous rejoindre ?
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