flexweg-blocks (must-use)

livre les primitives de mise en page et de code pour l'éditeur de post — le bloc Colonnes et le bloc HTML personnalisé. Il est must-use parce que le désactiver silencieusement strip ces blocs des

flexweg-blocks livre les primitives de mise en page et de code pour l'éditeur de post — le bloc Colonnes et le bloc HTML personnalisé. Il est must-use parce que le désactiver silencieusement strip ces blocs des posts existants au prochain rendu.

Ce qu'il fournit

Bloc Colonnes

2-6 colonnes côte à côte, avec contrôle de largeur par colonne et empilement automatique sur mobile.

  • Catégorie de l'inserter : Layout
  • Largeurs par colonne : égales par défaut ; les admins peuvent redimensionner les colonnes en draguant les poignées entre elles.
  • Breakpoint mobile : les colonnes s'empilent verticalement en dessous de 768px de largeur.
  • Imbrication : chaque colonne accepte n'importe quel autre bloc (paragraphes, titres, images, même un autre bloc Colonnes — bien que l'imbrication profonde soit déconseillée pour la clarté).

Voir Bloc colonnes pour l'usage côté utilisateur.

Bloc HTML personnalisé

HTML arbitraire dans un post, rendu tel quel au moment de la publication.

  • Catégorie de l'inserter : Layout (ou Advanced)
  • Pas de sanitisation par défaut — le HTML est rendu brut
  • Use case principal : embeds tiers (Instagram, TikTok), widgets de tiers (Stripe checkout, Calendly), microdata, override de layout

Voir Bloc HTML personnalisé.

Hook utilisé

Le plugin enregistre un seul filtre post.html.body qui remplace les marqueurs <div data-cms-block="flexweg-blocks/columns" ...> et <div data-cms-block="flexweg-blocks/custom-html" ...> par le HTML rendu.

Le filtre tourne avec priorité 10 (par défaut). Pour qu'un autre plugin transforme le HTML après cleanup des marqueurs colonnes, donnez-lui une priorité plus haute (ex. 50).

CSS de baseline

Le plugin injecte aussi une baseline CSS minimale via page.head.extra :

CSS
.cms-cols {
  display: grid;
  gap: var(--cms-cols-gap, 1.5rem);
  grid-template-columns: repeat(var(--cms-cols-count, 2), minmax(0, 1fr));
}

@media (max-width: 768px) {
  .cms-cols { grid-template-columns: 1fr; }
}

L'injection est conditionnelle — uniquement quand au moins un bloc colonnes est détecté sur la page. Donc pas de poids CSS pour les pages sans colonnes.

Pas de page de réglages

Le plugin ne stocke pas de config utilisateur — les colonnes sont entièrement configurables par bloc dans l'inspecteur.

Désactivation

Pas possible — c'est must-use. Si vous voulez vraiment retirer les colonnes / HTML personnalisé de l'éditeur, forkez et retirez de src/mu-plugins/index.ts.

Round-trip markdown

Les blocs colonnes émettent ce markdown :

HTML
<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>

Les blocs HTML personnalisé :

HTML
<div data-cms-block="flexweg-blocks/custom-html" data-attrs="<base64>"></div>

Les deux round-trip proprement à travers l'éditeur → markdown → rendu HTML.