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

> Deux valeurs, wide et full, suffisent à faire sortir un bloc de sa colonne de contenu, à condition que le thème définisse les bonnes variables de largeur.

- Auteur : WordPress Développement
- Publié le : 2024-02-19
- Mis à jour le : 2024-02-19
- Catégorie : Blocs Gutenberg
- URL : https://www.wpmoderne.fr/blocs/support-align-bloc-personnalise-large-pleine-largeur/

## L’essentiel

- align accepte wide et full, pas de valeurs intermédiaires
- Le rendu dépend des variables de largeur définies par le thème
- useBlockProps applique seul la classe nécessaire côté éditeur

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.

> L'essentiel à retenir : align accepte wide et full, pas de valeurs intermédiaires ; Le rendu dépend des variables de largeur définies par le thème ; useBlockProps applique seul la classe nécessaire côté éditeur

## 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.