Bloc colonnes
Le bloc Colonnes crée une mise en page multi-colonnes à l'intérieur d'un post ou d'une page. Chaque colonne peut contenir n'importe quel autre bloc — paragraphes, images, listes, même des blocs de
Le bloc Colonnes crée une mise en page multi-colonnes à l'intérieur d'un post ou d'une page. Chaque colonne peut contenir n'importe quel autre bloc — paragraphes, images, listes, même des blocs de thème imbriqués.
Fourni par le must-use flexweg-blocks.
Insertion
/columns dans l'inserter. Le bloc s'insère avec deux colonnes de largeur égale par défaut. Chaque colonne commence avec un paragraphe vide.
Édition
Chaque colonne est un container de bloc normal — cliquez à l'intérieur et utilisez n'importe quel workflow d'inserter / typing / paste. Le contenu d'une colonne est indépendant des autres.
L'inspecteur du bloc colonnes (sidebar droite, onglet Bloc) permet :
- Nombre de colonnes (2-6) — ajouter des colonnes insère de nouvelles colonnes vides à droite ; en supprimer fusionne leur contenu dans la précédente
- Largeur par colonne — glisser le séparateur dans l'aperçu de l'éditeur pour redimensionner, ou entrer les largeurs en pourcentages dans l'inspecteur
- Empiler sur mobile — toggle pour que les colonnes s'empilent verticalement en-dessous d'un breakpoint (par défaut : oui, breakpoint à 768px)
- Gap — espacement entre les colonnes (par défaut : 1.5rem)
Round-trip markdown
Le bloc émet dans le markdown un marqueur :
<div data-cms-block="flexweg-blocks/columns" data-attrs="<base64>">
<div data-cms-col><!-- markdown col 1 --></div>
<div data-cms-col><!-- markdown col 2 --></div>
</div>
Le markdown de chaque colonne est conservé tel quel dans son <div data-cms-col>. À la publication, le hook post.html.body du plugin re-parse le markdown de chaque colonne (via marked + DOMPurify) et émet la structure HTML finale (typiquement un wrapper grid Tailwind).
CSS
Le CSS des colonnes est injecté via le hook page.head.extra quand au moins un bloc colonnes est détecté sur la page. Baseline minimaliste : grid responsive avec gap configurable et stacking mobile via media query.
Imbrication
Les colonnes peuvent contenir n'importe quel bloc — y compris d'autres colonnes. Mais évitez d'imbriquer plus d'un niveau : ça devient illisible sur mobile et complique le markdown source.
Limitations
- Pas de drag-and-drop pour réordonner les colonnes (utilisez le bouton Déplacer de la barre de bloc, ou éditez les attributs dans l'inspecteur)
- Le séparateur de glisser est purement visuel — les largeurs réelles vivent dans l'attribut
data-attrs - Si vous changez de thème, les colonnes restent fonctionnelles (le plugin est must-use, donc toujours actif)