Les ombres sont un élément important d’un site. Elles permettent de créer de la profondeur et de hiérarchiser les éléments en fonction de leur importance. Le fichier theme.json nous permet de configurer plusieurs ombres, qu’on pourra ensuite utiliser sur divers blocs.
Sommaire du cours
Depuis WordPress 6.6, les ombres ont fait leur apparition dans l’interface de Gutenberg.
C’est un élément supplémentaire de notre design system que l’on va désormais pouvoir gérer depuis notre site.
On pourra ensuite les appliquer aux images, galeries, bannières, boutons… Mais à l’heure où j’écris ces lignes, il n’est pas encore possible de les appliquer aux groupes. Dommage !
Comme pour les autres éléments, on va pouvoir manipuler les ombres directement à partir du theme.json :
Dans ce cours, on va voir comment sont gérées les ombres natives de WordPress, comment les désactiver et comment déclarer les nôtres à la place.
Les ombres natives de WordPress
Par défaut, les ombres sont désactivées dans WordPress, il va donc falloir les activer nous-même en passant defaultPresets à true :
Dans Gutenberg, ajoutez un bouton ou une image par exemple, et regardez dans l’onglet des styles du bloc.
Dans la section « Bordure & ombre », on n’aura que les réglages de bordure et de rayon. Il faudra alors cliquer sur le menu 3 points en haut à droite afin d’activer le réglage d’ombre.
Il va apparaître juste après les réglages de rayon. Vous pouvez désormais sélectionner l’ombre à afficher :
Les ombres apparaissent dans une petite pop-up, vous n’avez plus qu’à choisir celle que vous voulez appliquer à votre bloc :
Voici le résultat avec quelques ombres prédéfinies appliquées aux images d’une galerie :
Maintenant, si on part du côté front pour voir le CSS généré, on trouvera ceci :
WordPress déclare chaque ombre sous forme de variable CSS dans le body. Les valeurs de ces ombres sont des réglages d’ombres portées box-shadow() classiques en CSS.
Déclarer des ombres sur mesure
Maintenant l’objectif va être de déclarer nos propres ombres en CSS afin d’être cohérent avec notre design system.
Pour cela, on va commencer par désactiver les ombres par défaut en passant defaultPresets à false, et on va ensuite déclarer nos ombres via la propriété presets.
Comme pour les couleurs sur mesure ou les tailles de textes, on va devoir déclarer chaque ombre à l’aide de 3 paramètres :
name: le nom de l’ombre qui apparaîtra dans l’interface ;slug: l’identifiant unique de l’ombre, qui sera utilisé en CSS ;shadow: le CSS de la propriétébox-shadow()de l’ombre portée.
Dans l’éditeur, ce sont désormais nos ombres portées personnalisées qui vous seront proposées :
On va aller voir en front à quoi ressemblent nos variables CSS :
Les ombres natives de WordPress sont toujours déclarées même si elles ne sont pas utilisées, mais ce n’est pas très grave.
Ce qui importe ici c’est que nos 3 nouvelles ombres ont bien été ajoutées, et la variable CSS porte bien notre slug à la fin : light, neat et huge.
Appliquer une ombre par défaut à un bloc
Pour terminer, on va voir comment appliquer automatiquement une ombre à un bloc, comme l’image par exemple, afin que votre utilisateur n’ait pas besoin de la sélectionner à chaque fois qu’il insère une nouvelle image dans l’éditeur.
Et pour cela on va aller du côté de styles dans le theme.json :
Pour appliquer l’ombre désirée, il faudra appliquer la variable CSS générée par WordPress. Dans cet exemple, j’applique l’ombre dont le slug est neat.
Désormais, lorsque vous ajouterez une image dans Gutenberg, elle aura directement une ombre appliquée :
Vous pourrez bien entendu la modifier ou la supprimer si elle ne vous convient pas.
On va étudier plus en détails cette section styles dans un cours dédié aux réglages des blocs par défaut très bientôt dans la formation.
Vous verrez qu’on va pouvoir appliquer tous les styles possibles par défaut pour chaque bloc ou élément, afin de nous faire gagner énormément de temps dans la création de notre site.
Vous savez désormais comment ajouter des ombres à l’éditeur de blocs de WordPress ! Elles seront utile pour donner de la profondeur à vos designs.
Dans le prochain cours, on va se concentrer sur les polices d’écriture et les typographies. Ainsi, on aura configuré les éléments essentiels de notre charte graphique.
0
Questions, réponses et commentaires