Thème : Widgets | Niveau : intermédiaire
Objectifs pédagogiques
- Utiliser le bloc natif HTML personnalisé pour insérer du code sur mesure
- Savoir où placer le CSS associé, sans le dupliquer
- Connaître une alternative plus robuste pour la plupart des cas
Comme vu dans l’astuce “Différence entre widgets et blocs dans les thèmes FSE” (FSE : Full Site Editing, édition complète du site), ce qui aurait autrefois été un widget de code personnalisé est aujourd’hui un bloc, qui s’insère de la même façon dans un article, une page ou un modèle.
Le bloc HTML personnalisé
Le bloc HTML personnalisé (core/html) permet d’écrire du code brut, pour intégrer une mise en page spécifique ou un extrait de code fourni par un tiers, sans passer par les blocs natifs de l’éditeur.
Insertion
Ajoutez un bloc et recherchez “HTML personnalisé” dans la bibliothèque de blocs.
Aperçu avant publication
Deux boutons apparaissent en haut du bloc : HTML (le code tel que saisi) et Aperçu (le rendu tel qu’il apparaîtra sur le site). Basculez sur Aperçu avant de publier pour vérifier le résultat.
Qui peut utiliser ce bloc
Le bloc HTML personnalisé n’est pleinement utilisable que par les rôles disposant de la capacité unfiltered_html (l’Administrateur, sur une installation WordPress simple). Un Auteur ou un Contributeur verra son code échappé, affiché comme texte plutôt qu’interprété.
Où placer le CSS associé
Deux approches sont possibles, avec un résultat très différent dans le temps.
CSS en ligne dans le bloc (à éviter)
Écrire une balise <style> directement dans le bloc HTML fonctionne, mais se duplique si le même bloc est copié plusieurs fois sur le site. Une modification doit alors être répétée à chaque endroit.
CSS additionnel global (à privilégier)
Depuis l’éditeur de site, Apparence → Éditeur → Styles propose un éditeur de CSS additionnel (accessible via l’icône de code dans le panneau Styles). C’est l’équivalent, pour un thème FSE, du champ “CSS additionnel” que l’on trouvait dans le Personnaliseur des thèmes classiques. Une règle écrite ici s’applique à tout le site, une seule fois.
Une alternative souvent plus robuste
Pour la plupart des mises en forme (encadré, bouton, mise en avant), il n’est pas nécessaire de tout recoder en HTML brut. Un bloc natif (Groupe, Pile) associé à une classe CSS personnalisée offre un résultat comparable, en restant modifiable visuellement dans l’éditeur :
- Construisez la mise en page avec des blocs natifs (Groupe, Paragraphe, Bouton).
- Dans l’onglet Avancé du panneau de réglages, renseignez une classe dans Classes CSS additionnelles.
- Stylez cette classe dans le CSS additionnel global, comme vu plus haut.
Cette approche réserve le bloc HTML personnalisé aux cas qu’aucun bloc natif ne couvre (un script tiers, une structure très spécifique).
Instructions étape par étape
1. Choisir l’approche
Un bloc natif avec classe personnalisée pour une mise en forme simple ; un bloc HTML personnalisé pour un besoin que les blocs natifs ne couvrent pas.
2. Écrire le code ou construire les blocs
Selon le choix précédent.
3. Ajouter le CSS dans le CSS additionnel global
Jamais dans une balise <style> répétée à chaque bloc.
4. Vérifier le rendu
Utilisez le bouton Aperçu du bloc HTML, ou l’aperçu de page, avant de publier.
Tableau récapitulatif
| Besoin | Solution recommandée |
|---|---|
| Mise en forme simple (encadré, bouton) | Bloc natif + classe CSS additionnelle |
| Code tiers ou structure très spécifique | Bloc HTML personnalisé |
| CSS associé | Toujours dans le CSS additionnel global (Apparence → Éditeur → Styles) |
Ce qu’il faut retenir
- Le bloc HTML personnalisé remplace l’ancien widget de code, avec un bouton Aperçu pour vérifier le rendu.
- Il n’est pleinement disponible qu’aux rôles ayant la capacité
unfiltered_html. - Le CSS associé doit toujours être placé dans le CSS additionnel global, jamais répété dans chaque bloc.
- Pour une mise en forme simple, un bloc natif avec une classe CSS personnalisée reste souvent préférable à du HTML brut.