Aller au contenu principal

Structures des Blocs HTML/JS Autorisés

Ce guide répertorie l'ensemble des intégrations applicatives, scripts tiers et blocs personnalisés officiellement autorisés dans l'éditeur WordPress.

Pour des raisons de sécurité, de performance et de conformité RGPD, un filtre automatique s'exécute sur l'application Next.js : toute balise <script> injectée ne correspondant pas aux formats décrits ci-dessous sera supprimée de la page, empêchant toute exécution JavaScript non contrôlée.

1. Blocs HTML / CSS Standards (Sans JavaScript)​

Le système autorise l'affichage de n'importe quelle structure HTML et stylisation CSS (styles en ligne ou balises <style>), à condition qu'aucun attribut exécutable lié au DOM (onload, onerror, onclick, etc.) ou script JS ne soit présent.

Format attendu dans WordPress :​

<div class="mon-bloc-alerte" style="background: #fffbeb; border: 1px solid #fef3c7; padding: 1.25rem; border-radius: 8px; margin: 1.5rem auto;">
  <h4 style="margin: 0 0 0.4rem 0; color: #b45309; font-size: 1.1rem;">💡 Point de vigilance</h4>
  <p style="margin: 0; color: #78350f; font-size: 0.95rem; line-height: 1.5;">
    Ce bloc utilise uniquement du HTML structurel et du CSS en ligne. Il s'affichera normalement sur le site.
  </p>
</div>

Rendu visuel :​

💡 Point de vigilance

Ce bloc utilise uniquement du HTML structurel et du CSS en ligne. Il s'affichera normalement sur le site.

2. Graphiques Interactifs (Chart.js)​

Le parser Next.js extrait automatiquement ces graphiques pour les soumettre au gestionnaire de consentement des cookies tiers tout en isolant les configurations afin de permettre l'affichage de multiples graphiques différents sur un même article.

Règles strictes de configuration :​

  1. L'enveloppe HTML principale du canvas doit posséder la classe exacte chart-container.
  2. Le script d'appel au CDN Chart.js (cdn.jsdelivr.net/npm/chart.js) doit être obligatoirement présent juste après la div.
  3. L'attribut id du <canvas> ainsi que le nom de l'ensemble des variables et fonctions JavaScript (data..., config..., ctx...) doivent être strictement uniques à chaque graphique pour éviter que les instances ne s'écrasent entre elles.

Format attendu dans WordPress :​

<div class="chart-container" style="position: relative; width: 100%; max-width: 600px; margin: 2rem auto;">
  <canvas id="monGraphiqueUniqueChart"></canvas>
</div>

<!-- Script CDN obligatoire (nettoyé automatiquement par le parser) -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script>
  // Attention à utiliser des noms de variables uniques par graphique
  const dataUniqueId = {
    labels: ['Janvier', 'Février', 'Mars'],
    datasets: [{
      label: 'Données illustratives (%)',
      data: [12, 19, 3],
      backgroundColor: ['#c8102e', '#374151', '#9ca3af']
    }]
  };

  const configUniqueId = {
    type: 'bar',
    data: dataUniqueId,
    options: { responsive: true }
  };

  const ctxUniqueId = document.getElementById('monGraphiqueUniqueChart').getContext('2d');
  new Chart(ctxUniqueId, configUniqueId);
</script>

Rendu visuel :​

Rendu visuel

3. Cartes Géographiques (Leaflet)​

Le système intercepte et isole les blocs cartographiques Leaflet pour injecter son système de placeholder dynamique géré par le bandeau de cookies.

Règles de configuration :​

  1. L'enveloppe parente de la carte doit impérativement posséder la classe exacte custom-leaflet-wrapper.
  2. L'identifiant du conteneur de la carte (<div id="...">) doit être unique sur la page pour éviter les conflits d'instances.
  3. Le script d'initialisation de la carte doit obligatoirement contenir le mot-clé ag-map (dans le nom de la variable, l'identifiant, ou un commentaire) pour franchir la barrière de sécurité de la fonction de purge Next.js.
  4. Attention au timing de rendu : L'initialisation de la carte doit être encapsulée dans une fonction auto-exécutable ((function(){ ... })()) pour garantir son isolement dans le scope global lors de l'injection dynamique par Next.js.

Format attendu dans WordPress :​

<div class="custom-leaflet-wrapper" style="background: #ffffff; padding: 1rem; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.08);">
  
  <!-- ID unique pour la carte -->
  <div id="ag-map-paris-instance" style="width: 100%; height: 400px; border-radius: 8px;"></div>

  <!-- Assets Leaflet natifs -->
  <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
  <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>

  <script>
    (function () {
      var mapId = "ag-map-paris-instance"; // Le mot clé 'ag-map' valide le script en amont
      var map = L.map(mapId).setView([48.8566, 2.3522], 13);

      L.tileLayer("https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png", {
        attribution: "&copy; OpenStreetMap"
      }).addTo(map);
    })();
  </script>
</div>

Rendu visuel :​

PlaceholderCarte
Rendu visuelRendu visuel

4. Intégrations de Réseaux Sociaux (Embeds)​

Toutes les intégrations de plateformes externes listées ci-dessous sont interceptées, leurs scripts bloqués par défaut, et remplacées par un composant sécurisé (EmbedWrapper) lié aux préférences de cookies de l'utilisateur.

A. YouTube​

  • Format attendu : Utiliser le bloc d'intégration natif de WordPress. Le parser cible automatiquement la classe parente .is-provider-youtube et extrait l'URL de l'iframe (youtube.com/embed/...).

B. Instagram​

  • Format attendu : Coller simplement l'URL absolue de la publication (ex: https://www.instagram.com/p/...) sur une ligne dédiée ou à l'intérieur d'un paragraphe standard.

C. Twitter / X​

Le parser accepte deux formats :

  • Format Intégration Native : Le bloc d'intégration WordPress générant la classe .wp-block-embed-twitter.
  • Format Code HTML d'intégration : Le bloc HTML fourni par Twitter utilisant une balise <blockquote class="twitter-tweet"> contenant un lien hypertexte pointant vers twitter.com/....

D. Facebook​

Le parser accepte trois formats :

  • Format Iframe brute : Une balise <iframe> dont l'attribut src contient la chaîne facebook.com/plugins/.
  • Format SDK Classique : Un conteneur HTML configuré avec la classe fb-post et l'attribut contenant le lien data-href="...".
  • Script SDK associé : Si le script d'initialisation de Facebook est présent, son attribut src doit impérativement cibler le domaine officiel facebook.net.

5. Suggestions de Lectures Internes (Read Also)​

Le système intercepte les paragraphes de recommandation d'articles internes portant la classe insert-page. Le parser Next.js extrait le lien (href) ainsi que le texte brut, puis injecte le composant applicatif ReadAlso qui applique le style de la charte graphique et gère la navigation fluide (Single Page Application via slugAction).

Règles de configuration :​

  1. Le bloc dans WordPress doit être un Paragraphe classique contenant un lien hypertexte.

    Rendu visuel

  2. Ce paragraphe doit impérativement posséder la classe CSS additionnelle exacte insert-page.

    Rendu visuel

  3. Le texte du lien doit correspondre uniquement au titre de l'article ciblé (le composant Next.js ajoute automatiquement le préfixe visuel "Lire aussi :" et le logo).

Rendu visuel

Format attendu dans WordPress (Gutenberg) :​

Le contributeur crée un bloc Paragraphe, insère son lien interne, puis ajoute insert-page dans le champ "Classes CSS additionnelles" du bloc (panneau latéral droit, onglet "Avancé").

Le code HTML généré en arrière-plan par WordPress ressemble à ceci :

<p class="insert-page">
  <a href="https://votre-domaine-wordpress.fr/politique/titre-de-l-article">
    Félix Atchadé « On ne sort pas de la Françafrique on en change le langage »
  </a>
</p>

Rendu visuel généré par Next.js :​

Le composant nettoie le paragraphe brut pour générer un bloc stylisé incluant :

  • Le label Lire aussi : en gras.
  • Le logo SVG Avant-Garde officiel en rouge/gris adaptatif.
  • Le titre de l'article passé dynamiquement via la propriété {children}.

Rendu visuel

⚠️ Rappel de sécurité absolu : Tout script JavaScript non explicitement répertorié dans ce document (par exemple : tags publicitaires externes, scripts de tracking d'audience non validés, widgets tiers intrusifs, pixels invisibles) sera systématiquement détecté et effacé du code source par Next.js avant le rendu. La structure HTML globale sera affichée, mais l'exécution de tout code JavaScript non autorisé est impossible.