Flexweg CMS

Bloc HTML personnalisé

Le bloc HTML personnalisé vous permet de coller du HTML arbitraire dans un post ou une page. Le HTML est rendu tel quel à la publication — pas de sanitisation par défaut, pas de transformation. C'est

Le bloc HTML personnalisé vous permet de coller du HTML arbitraire dans un post ou une page. Le HTML est rendu tel quel à la publication — pas de sanitisation par défaut, pas de transformation. C'est une porte de sortie pour utilisateurs avancés.

Le bloc est fourni par le must-use flexweg-blocks (toujours actif).

Quand l'utiliser

  • Embeds tiers non fournis par les providers d'embed intégrés (ex. Instagram, TikTok, CodePen, JSFiddle)
  • Widgets personnalisés — boutons de checkout Stripe, embed inline Calendly, formulaires d'inscription Mailchimp
  • Override de la mise en page par défaut pour un post spécifique (ex. insertion d'un diagramme personnalisé, citation pull-quote façon magazine)
  • Microdata / Schema.org que le thème n'émet pas par défaut
  • iframes vers d'autres sites que vous voulez embarquer

Pour les patterns HTML courants (vidéos, tweets, mises en page multi-colonnes), utilisez les blocs dédiés à la place — ils sont plus faciles à éditer et plus accessibles.

Insertion

/custom html dans l'inserter, ou /html. Le bloc s'insère vide.

Édition

Cliquez le bloc — l'onglet Bloc de la sidebar droite s'ouvre avec un éditeur CodeMirror (coloration syntaxique, numéros de ligne). Tapez ou collez votre HTML.

Round-trip markdown

Le bloc émet dans le markdown un marqueur :

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

L'attribut data-attrs est l'objet { html: "<votre html>" } encodé en base64. À la publication, le hook post.html.body du plugin remplace le marqueur par le html brut, sans transformation.

Sécurité

Aucune sanitisation par défaut. Le HTML que vous tapez se retrouve dans la page publique tel quel. Conséquences :

  • Vous pouvez insérer des <script> qui s'exécuteront sur la page publique. Soyez certain de leur provenance.
  • Vous pouvez casser la mise en page de la page si votre HTML n'est pas équilibré (balises non fermées, etc.). Testez la page publiée avant de la partager.
  • Vous pouvez injecter du HTML qui ne fonctionne pas bien avec la CSS du thème actif.

Si vous voulez forcer la sanitisation pour un usage moins risqué (un éditeur qui ne fait pas confiance à un auteur), modifiez le bloc pour passer son contenu par DOMPurify avant rendu — c'est ~5 lignes de code dans flexweg-blocks.

Limitations

  • L'aperçu en édition n'exécute pas les scripts (par sécurité — vous ne voyez le rendu réel qu'après publication)
  • CodeMirror n'a pas de validation HTML — un <div> non fermé n'est signalé qu'à la publication
  • Pour les embeds tiers complexes (Instagram, TikTok), pensez à wrapper votre HTML dans un container responsive