flexweg-embeds (must-use)
ajoute les blocs YouTube / Vimeo / Twitter / Spotify à l'éditeur de post. Chaque bloc est un nœud Tiptap atom qui round-trip à travers le markdown comme un marqueur , puis est swappé contre le vrai
flexweg-embeds ajoute les blocs YouTube / Vimeo / Twitter / Spotify à l'éditeur de post. Chaque bloc est un nœud Tiptap atom qui round-trip à travers le markdown comme un marqueur <div data-cms-embed="...">, puis est swappé contre le vrai HTML d'embed au moment de la publication.
Il est must-use parce que le désactiver silencieusement transformerait chaque embed de chaque post en un simple <div> au prochain regen — visuellement cassé sans fallback.
Ce qu'il fournit
| Provider | Block ID | Output |
|---|---|---|
| YouTube | flexweg-embeds/youtube |
<iframe src="https://www.youtube.com/embed/<id>"> |
| Vimeo | flexweg-embeds/vimeo |
<iframe src="https://player.vimeo.com/video/<id>"> |
| Twitter / X | flexweg-embeds/twitter |
<blockquote class="twitter-tweet">…</blockquote> + widgets.js |
| Spotify | flexweg-embeds/spotify |
<iframe src="https://open.spotify.com/embed/..."> |
Comment insérer
Via l'inserter
Tapez /youtube, /vimeo, /twitter, /x, /spotify dans l'inserter /.
Via paste d'URL
Collez l'URL dans un paragraphe vide. L'éditeur détecte le pattern et auto-convertit :
- YouTube :
https://youtu.be/...,https://www.youtube.com/watch?v=... - Vimeo :
https://vimeo.com/<id>,https://player.vimeo.com/video/<id> - Twitter :
https://twitter.com/<user>/status/<id>,https://x.com/<user>/status/<id> - Spotify :
https://open.spotify.com/track/...,/album/...,/playlist/...,/episode/...
CSS de baseline
Chaque provider a une CSS minimaliste (container responsive, aspect ratio) injectée via page.head.extra quand au moins un embed est détecté sur la page.
YouTube / Vimeo : aspect 16:9 fluide. Twitter : largeur max raisonnable + border. Spotify : aspect compact.
Scripts runtime
- Twitter :
<script async src="https://platform.twitter.com/widgets.js">injecté en body-end uniquement si au moins un tweet est détecté sur la page - YouTube, Vimeo, Spotify : pas de script — les iframes officielles font tout
Donc une page sans tweets n'a aucun poids JS supplémentaire.
Hook utilisé
Un seul filtre post.html.body qui remplace les marqueurs <div data-cms-embed="<provider>" data-id="<x>" data-url="<y>"> par le HTML embed correspondant.
Le filtre maintient aussi un Set in-memory des providers détectés sur la page courante (réinitialisé au début de chaque rendu). Les autres filtres page.head.extra et page.body.end du plugin lisent ce Set pour décider quoi injecter.
Sécurité
Les iframes pointent vers des domaines tiers (youtube.com, vimeo.com, etc.). En production :
- Cache navigateur fait son travail
- Pas de risque côté CMS (le contenu vit chez le provider)
- Risque de violation CSP si vous en avez une stricte — autorisez les domaines des providers
Pas de page de réglages
Pas de config utilisateur. Les embeds tournent selon les défauts.
Désactivation
Pas possible — must-use. Si vous voulez désactiver un provider spécifique (par exemple pas de Twitter pour des raisons politiques), forkez et retirez l'entrée du provider dans providers.ts.
Ajouter un provider
Le code de flexweg-embeds est structuré pour faciliter l'ajout de providers. Voir src/mu-plugins/flexweg-embeds/providers.ts.
Pour ajouter (par exemple TikTok) :
- Une fonction de parsing d'URL
- Une fonction
renderHtml(id) - Un preview React pour l'éditeur
- Optionnel : un
bodyScript
~30 lignes par provider. Compilez dist/, déployez l'admin mis à jour, et TikTok apparaît dans l'inserter.
Si vous le faites, contribuez en upstream — un PR sera apprécié.