Le support align d’un bloc personnalisé : gérer large et pleine largeur

Deux valeurs, ni plus ni moins : wide et full. C’est tout ce que couvre le support align d’un bloc dans block.json, pensé pour permettre à un bloc de sortir de sa colonne de contenu habituelle, sans jamais proposer de largeur intermédiaire arbitraire. Comprendre ce que ces deux valeurs déclenchent réellement évite bien des essais infructueux au moment d’aligner un bloc personnalisé sur les conventions du cœur.

Le problème à résoudre

Un bloc « Bandeau chiffres clés », conçu pour afficher trois indicateurs côte à côte, doit pouvoir s’étendre au-delà de la colonne de texte principale pour rester lisible sur grand écran, sans pour autant toujours occuper la largeur complète de la fenêtre. Sans déclaration explicite du support align, le bloc reste cantonné à la largeur de contenu par défaut, quelle que soit la mise en page souhaitée par le rédacteur.

Déclarer le support dans block.json

{
	"apiVersion": 3,
	"name": "mon-agence/bandeau-chiffres-cles",
	"supports": {
		"align": [ "wide", "full" ]
	}
}

Restreindre le tableau à une seule valeur ("align": ["wide"], par exemple) empêche le rédacteur de choisir l’autre option, ce qui a du sens pour un bloc dont la pleine largeur casserait la mise en page (une grille de trois éléments dont l’espacement dépend d’une largeur maximale). Déclarer "align": true autorise en revanche toutes les valeurs disponibles, y compris left et right, généralement peu pertinentes pour un bloc de type bandeau.

Ce que cette déclaration change réellement dans le rendu

Une fois le support déclaré, WordPress ajoute automatiquement une classe (alignwide ou alignfull) sur la balise racine du bloc dès que le rédacteur choisit l’un de ces alignements dans la barre d’outils, à condition que le bloc utilise correctement useBlockProps() côté edit.js et l’équivalent useBlockProps.save() côté save() pour un bloc statique. Pour un bloc dynamique, la classe doit être conservée manuellement lors de la construction du balisage dans render.php, via get_block_wrapper_attributes(), qui reprend automatiquement la classe d’alignement calculée.

<?php
$wrapper_attributes = get_block_wrapper_attributes();
?>
<div <?php echo $wrapper_attributes; ?>>
	<!-- contenu du bandeau -->
</div>

La largeur réelle vient du thème, pas du bloc

Le bloc lui-même ne définit aucune largeur en pixels ou en pourcentage : il se contente d’ajouter une classe. La correspondance entre cette classe et une largeur effective dépend des variables déclarées dans theme.json, en particulier settings.layout.wideSize pour alignwide et de la largeur totale de la zone de contenu pour alignfull. Sans ces réglages correctement définis côté thème, un bloc peut afficher la classe alignwide sans qu’aucun changement visuel ne soit perceptible.

• Vérifier que theme.json déclare bien settings.layout.contentSize et settings.layout.wideSize.
• Tester le rendu du bloc dans un thème par blocs et dans un thème classique : le second peut nécessiter des styles CSS additionnels pour ces classes.
• Ne jamais fixer une largeur en dur dans le CSS du bloc lui-même pour ces deux alignements, sous peine d’entrer en conflit avec les variables du thème.

Variantes de cette recette

Restreindre l’alignement à un contexte précis

Il est possible de retirer dynamiquement le support d’alignement selon le contexte d’insertion (à l’intérieur d’une colonne étroite, par exemple) via le filtre JavaScript blocks.registerBlockType, en modifiant la propriété supports.align avant l’enregistrement effectif du bloc, pour les cas où la déclaration statique dans block.json ne suffit pas à couvrir toutes les situations d’usage.

Forcer un alignement par défaut

La propriété attributes.align, avec une valeur default définie (par exemple "default": "wide"), permet qu’un bloc nouvellement inséré adopte directement l’alignement le plus courant sur le site, sans obliger le rédacteur à le sélectionner manuellement à chaque insertion.

En résumé

Le support align ne propose que deux options au-delà de la largeur de contenu par défaut, et son effet visuel dépend entièrement des variables de largeur déclarées dans theme.json. Bien articulé avec useBlockProps ou get_block_wrapper_attributes(), ce support aligne naturellement un bloc personnalisé sur les conventions déjà connues des rédacteurs pour tous les blocs natifs.