L’éditeur de sites de WordPress offre une grande liberté en permettant de personnaliser le site tout entier : entête, pied de page, modèles, etc… exactement comme bon nous semble. On parle bien de Full Site Editing (FSE), ce n’est pas pour rien.
L’éditeur permet de créer des mises en pages complexes pour les pages et modèles, et pour cela fournit des blocs conteneurs variés qui vont couvrir la grande majorité des besoins en design.
En coulisses, ces blocs utilisent les outils de mise en page puissants que sont CSS Flexbox et CSS Grid. Pour comprendre ces blocs, il faut donc comprendre Flexbox et CSS Grid.
Dans cet article, on va étudier CSS Flexbox et comprendre comment il est utilisé dans l’éditeur de site.
Les blocs conteneurs
Dans l’éditeur de WordPress, les blocs sont rangés en plusieurs catégories : Texte, Media, Design, Widgets, Thème et Contenu embarqués. Les blocs qui nous intéressent sont ceux de la catégorie Design qui permettent de mettre en page notre contenu.
Tous ne sont pas des conteneurs (par exemple Séparateur). On va donc se concentrer sur les conteneurs courants que sont Groupe, Colonnes, Rangée, Empilement, et Grille.
Les blocs conteneurs ne servent à rien seul. Leur rôle est de mettre en page leurs enfants. Ils se contentent d’afficher leurs enfants, mais ils permettent de contrôler comment ces enfants sont affichés.
Au niveau du code HTML, les blocs conteneurs produisent de simples balises <div> englobant l’HTML de leurs enfants. Par exemple, placer un bloc Paragraphe et un bloc Citation dans un bloc Groupe produit sur le devant du site un HTML du type :
<div class="wp-block-group ...">
<p>...</p>
<blockquote class="wp-block-quote">
...
</blockquote>
</div>Chaque bloc conteneur permet de contrôler la manière dont les blocs enfants sont affichés. Ces différentes options reflètent celles proposées par les propriétés CSS Flexbox et CSS Grid. Pour bien comprendre les blocs conteneurs et leurs options, il faut donc comprendre CSS Flexbox et CSS Grid.
La propriété CSS display
Flexbox est un ensemble de propriétés CSS permettant de mettre en page automatiquement des éléments de façon souple, sans avoir à calculer des largeurs et des positionnements précis. Pour cela, on dispose de la valeur particulière flex pour la propriété display.
Pour rappel, la propriété CSS display permet de déterminer comment afficher un élément HTML et accepte les valeurs suivantes :
display: block;: Les éléments avecdisplay: block;sont des blocs. Il vont prendre toute la largeur disponible et vont s’empiler de haut en bas. C’est le flux normal d’un document HTML : les paragraphes (<p>) sont endisplay: block;, les<div>, les<section>, les<header>et autres conteneurs.display: inline;: les élémentsinlines’affichent de gauche à droite, au fil du texte. Les balises<a>,<em>,<span>,<strong>sontinline, car elles servent à spécifier la sémantique d’éléments textuels.display: inline-block;: c’est un élémentinline(qui suit le texte), mais qui peut être dimensionné comme un bloc et posséder des marges internes et externes, par exemple.display: none;: l’élément n’est pas affiché.display: flex;: l’élement place ses enfants de façon flexible, par défaut de gauche à droite, et adapte leur placement en fonction des autres propriétés de la famille flexbox:flex-direction,align-items, etjustify-content. Par défaut, un élément endisplay: flex;va prendre toute la largeur disponible (comme un élémentblock) et afficher ses enfants de gauche à droite (flex-direction: row;par défaut)display: grid;: l’élément place ses enfants dans une grille définie par ses autres propriétés CSS commegrid-template-rowetc…
Vous remarquerez que les valeurs flex et grid déterminent non pas comment le bloc conteneur s’affiche, mais comment il affiche ses enfants.
Flexbox
Pour bien comprendre les blocs conteneurs, voici une courte introduction à Flexbox. Attention, on ne verra pas toutes les possibilités de Flexbox, mais juste celles qui permettent de comprendre le fonctionnement des blocs conteneurs de l’éditeur de WordPress.
Considérons l’HTML suivant :
<div class="container">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
</div>Par défaut, les <div class="box"> vont occuper toute la largeur de l’écran et vont s’empiler. Pour plus de clarté, je leur ai ajouté un peu de marge verticale.
Flexbox permet de répartir les éléments sur deux axes : un axe principal (Main Axis) et un axe croisé (Cross Axis) qui est l’axe perpendiculaire.
La propriété CSS flex-direction permet de contrôler l’axe sur lequel aligner les éléments: row (horizontal de gauche à droite) ou column (vertical de haut en bas). On peut aussi utiliser row-reverse (horizontal de droite à gauche) et column-reverse (vertical de bas en haut).
Par défaut, l’axe principal est l’axe horizontal, et passer le conteneur en display: flex; permet d’aligner ses enfants de gauche à droite.
// css
.container {
display: flex;
flex-direction: row; /* Valeur par défaut */
}
La propriété justify-content
A partir de là, on dispose de plusieurs autres propriétés qui permettent de contrôler la disposition des éléments.
justify-content va permettre de répartir les éléments sur l’axe principal (horizontal) et accepte les valeurs suivantes : start, end, center, space-between, space-around, et space-evenly.
start, end et center vont permettre d’aligner les éléments au début du conteneur, à la fin du conteneur ou au centre.
space-between, space-around et space-evenly vont permettre de répartir les éléments en les éloignant au maximum (space-between), en les espaçant tous avec les mêmes marges autour (space-around) ou en homogénéisant les marges (space-evenly).
Les marges entre les éléments peuvent aussi être contrôlées grâce à la propriété gap.
Ainsi, on peut placer les éléments au centre, mais les espacer un peu entre eux.
.container {
justify-content: center;
gap: 1.5rem;
}
La propriété align-items
La propriété align-items permet de contrôler le positionnement des éléments sur l’axe croisé (verticalement par défaut) et accepte les valeurs stretch, start, center, et end le plus couramment.
Par défaut la propriété vaut stretch, ce qui indique que les éléments doivent être étirées verticalement pour occuper tout l’espace disponible dans le conteneur. Cet espace vertical disponible est déterminé par l’élément le plus grand.
Ainsi, donner une hauteur minimale différente à chaque bloc ne change rien dans notre cas si le conteneur est sur align-items: stretch;.
.container {
display: flex;
justify-content: space-evenly;
align-items: stretch; /* valeur par défaut */.
}
.box-1 {
min-height: 115px;
}
.box-2 {
min-height: 75px;
}
.box-3 {
min-height: 150px;
}
Par contre, avec les autres valeurs, les éléments respectent leurs hauteurs respectives et s’alignent de façon adaptée. align-items: start; permet d’aligner en début (haut) de conteneur, align-items: end permet d’aligner en fin de conteneur, et center au centre.
flex-grow
La propriété flex-grow est à placer sur un enfant et permet de contrôler l’espace qu’il va occuper. Elle permet d’assigner un coefficient à l’élément pour lui indiquer la proportion d’espace restant à occuper. Par défaut, la propriété vaut 0 et les enfants occupent l’espace suffisant pour leur contenu.
Par exemple, mettre flex-grow: 1; au premier élément et laisser les autres sur 0 va permettre au premier de s’étirer au maximum.
.box-1 {
flex-grow: 1;
}
En assignant différents coefficients on a le contrôle sur la proportion d’espace occupé par chaque élément.
.box-1 {
flex-grow: 1;
}
.box-2 {
flex-grow: 2;
}
.box-3 {
flex-grow: 3;
}
flex-basis et flex-wrap
La propriété flex-basis détermine la largeur de base d’un élément. Elle se place sur un enfant d’un conteneur en display: flex; et va permettre de lui réserver un espace minimal.
.box-1 {
flex-basis: 50%;
}
La propriété flex-wrap est à placer sur le conteneur en display: flex; et va simplement autoriser ou non le passage à la ligne des éléments en cas de manque de place.
En mettant flex-wrap: wrap; sur le conteneur, on peut donc éviter que les éléments ne soient déformés ou sortent de la vue.
.container {
display: flex;
justify-content: space-evenly;
flex-wrap: wrap;
}
.box-1 {
flex-basis: 25%;
}Note : sur la vidéo, il est noté 50% de flex-basis. La bonne valeur est bien 25%.
Ici, on réserve 25% de la place à la première boite, donc quand l’espace horizontal devient trop petit, les blocs 2 et 3 vont à la ligne automatiquement.
Les blocs Rangée et Empilement
Dans l’éditeur de site de WordPress, les blocs conteneurs Rangée et Empilement répliquent directement le comportement de Flexbox.
Le bloc Rangée produit simplement une balise HTML <div> avec les propriétés CSS display: flex;, et qui aligne ses enfants de gauche à droite (flex-direction: row;).
Le réglage de justification réplique le comportement de la propriété justify-content, et le réglage d’orientation permet de passer de flex-direction: row; à flex-direction: column;. D’ailleurs, cela passe le bloc de Rangée à Empilement.
Le réglage Autoriser le passage sur plusieurs lignes active ou non flex-wrap. Et le réglage d’espacement des blocs est géré via la propriété gap.
Tous les réglages du bloc correspondent donc à des valeurs pour les différentes propriétés de Flexbox.
Autres blocs
De la même façon, CSS Flexbox est utilisé pour la mise en page du bloc Colonnes.
Le réglages Nombre de colonnes va appliquer aux enfants des valeurs différentes pour flex-basis et va leur appliquer flex-grow: 1; pour les étirer au maximum, et le réglage Empiler sur mobile va simplement activer ou non flex-wrap.
Conclusion
En inspectant un peu le CSS utilisé pour les blocs, on peut voir que Flexbox est utilisé un peu partout.
Le bloc Galerie utilise Flexbox pour répartir les images. Le bloc Boutons aligne ses blocs Bouton à l’aide de Flexbox. Le bloc Navigation aligne ses éléments de menu à l’aide de Flexbox aussi, etc…
Flexbox est un outil de mise en page très puissant et dans cet article on n’a fait que survoler ses possibilités, l’objectif étant de comprendre le fonctionnement global dans le cadre de l’éditeur de site de WordPress.
Je vous recommande vivement d’explorer Flexbox plus en profondeur, car si vous le maîtrisez alors vous aussi pourrez créer des mises en page riches et responsives, quel que soit le contexte.
