Ajouter un peu d’air entre une image et le paragraphe qui suit, sans toucher aux marges globales du thème ni bricoler du CSS personnalisé pour ce seul endroit : voilà exactement ce que fait le bloc Espaceur. Concrètement invisible, il ne contient ni texte ni image, seulement une hauteur définie que l’on ajuste soit en la glissant à la souris, soit en saisissant une valeur précise dans la barre latérale des réglages.
Fonctionnement dans WordPress
Sa hauteur est stockée dans un attribut exprimé en pixels ou en unité relative, et traduite en CSS via une propriété height appliquée à un simple élément div. Contrairement à une marge posée sur un bloc voisin, l’Espaceur reste un bloc à part entière, visible et déplaçable dans la liste des blocs, ce qui le rend plus simple à repérer et à ajuster qu’une marge cachée dans les réglages avancés d’un autre bloc.
Exemple
<!-- wp:spacer {"height":"60px"} -->
<div style="height:60px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->Pièges fréquents
- Abuser du bloc Espaceur à la place d’une marge ou d’un espacement cohérent défini dans les styles globaux rend la mise en page difficile à maintenir : chaque ajustement de rythme vertical doit alors se faire bloc par bloc.
- Sur mobile, une hauteur fixe en pixels peut sembler démesurée une fois la page rétrécie ; une unité relative ou une valeur différente par point de rupture donne un résultat plus cohérent.
- Un Espaceur de hauteur nulle ou très faible reste dans le contenu et peut fausser des vérifications d’accessibilité automatiques si son attribut
aria-hiddenn’est pas généré correctement.