Oui Blocks — Documentation

Fonctionnalités

Oui Blocks est un constructeur de pages visuel pour Joomla 5 et 6. Vous composez des pages avec des sections, des lignes, des colonnes et des éléments, vous les mettez en forme avec un système de design partagé, et vous les affichez avec les fonctions habituelles de Joomla : un élément de menu, un module ou un article. Oui Blocks ne remplace jamais Joomla et ne réécrit pas vos pages.

Installation

Installez pkg_blocks_<version>.zip depuis Système → Installer → Extensions. Le paquet contient le composant, les plugins d'éléments (Blocks - Core, Blocks - Custom), le plugin de contenu, le plugin de champ personnalisé « Mise en page Blocks », les plugins de scénarios (Blocks Scénario - Étapes de base et Système - Scénarios Oui Blocks) et le module mod_blocks. Ils sont activés à la première installation. Joomla 5 ou 6 et PHP 8.1 ou plus récent sont requis.

Tout se trouve dans Composants → Blocks : Tableau de bord, Mises en page, Types de blocs, Système de design, Interface dynamique, Jeux de filtres, Scénarios et Substitutions. Les Modèles et les Révisions s'ouvrent là où on s'en sert : les boutons du tableau de bord, Modèles dans la barre d'outils des mises en page (et la fenêtre Modèles du constructeur), et le lien Révisions sous chaque mise en page de la liste (ses versions enregistrées, avec Restaurer).

Comment les pages arrivent sur le site

Une mise en page est une page que vous construisez. Elle s'affiche de quatre façons, toutes standard dans Joomla :

Pour une page moderne en pleine largeur, donnez à son élément de menu un style de template en disposition fluide (Cassiopeia : Avancé → Disposition → Fluide) et masquez-y les modules latéraux.

Le constructeur

Chaque mise en page a un seul écran : ouvrez-la depuis Composants → Blocks → Mises en page (son titre) et vous arrivez sur son premier onglet, Constructeur. Détails porte tous ses réglages : titre, alias, contexte et description ; le mode d'affichage (Page, Modale ou Panneau latéral, avec les options du mode choisi) ; et, dans la colonne de droite, la publication (statut, accès, langue, début et fin de publication et, avec les brouillons, l'état du brouillon), avec les informations de création et de modification dessous. D'autres extensions peuvent ajouter leurs onglets après Détails (une extension SEO, par exemple). Permissions vient en dernier (administrateurs). Enregistrer, dans la barre d'outils, enregistre les deux, le constructeur et les réglages, en une fois et sans quitter la page (Ctrl/Cmd+S fait de même) ; Enregistrer & Fermer enregistre puis ferme, Fermer quitte (et libère la mise en page pour les autres). Si quelqu'un d'autre l'a enregistrée entre-temps, rien n'est écrit et vous êtes invité à recharger. Documentation, tout à droite, ouvre ce guide dans un nouvel onglet. Les anciens liens vers le constructeur ouvrent aussi cet écran.

Dans l'onglet Constructeur :

• Bibliothèque (à gauche) : sections, lignes prédéfinies (12, 6+6, 4+4+4…) et tous les types d'éléments. Cliquez pour ajouter après la sélection, ou glissez sur le canevas.
• Navigateur (en bas à gauche) : tout l'arbre. Cliquez pour sélectionner (Maj+clic : une plage, Ctrl/Cmd+clic : ajouter ou retirer un élément), glissez pour réorganiser : déposez sur le haut ou le bas d'une entrée pour placer avant ou après, au milieu d'une section ou d'une colonne pour placer dedans. Il s'utilise entièrement au clavier (voir Clavier, sélection multiple et presse-papiers).
• Canevas (au centre) : le canevas en direct par défaut, votre vraie page telle que le site l'affiche, modifiée sur place (voir section 7) ; ou Structure, la page en boîtes. Les deux gardent la sélection synchronisée avec le navigateur et les propriétés.
• La barre du haut ne garde que l'essentiel : Comparer et valider, Canevas en direct / Structure (avec l'article d'aperçu), Enregistrer (sa flèche donne les autres façons d'enregistrer), Aperçu (enregistre puis ouvre la page du site dans un nouvel onglet ; une mise en page modale ou en panneau latéral s'ouvre dans son cadre) et Aide (?) : la documentation, la palette de commandes (Ctrl/Cmd+K) et les raccourcis clavier (?). La Bibliothèque de gabarits et les Modèles s'ouvrent en haut du panneau des blocs, à gauche. Sous le canevas : les tailles d'écran (bureau, tablette, mobile, les autres tailles du site et une largeur en pixels ; les styles s'appliquent à la taille affichée) et le zoom. Annuler / Rétablir restent au clavier (Ctrl/Cmd+Z, Maj+Ctrl/Cmd+Z) et dans la palette.

Les panneaux latéraux

Le côté droit montre un panneau à la fois ; la colonne de boutons tout à droite (le rail) les ouvre, et un clic sur le panneau ouvert replie le côté pour laisser la place au canevas. Le constructeur retient votre choix. Sous 1200 px de large, le panneau passe par-dessus le canevas : Échap le ferme.

• Propriétés (par défaut) : les onglets Contenu, Style et Avancé de la sélection. Choisir un élément sur le canevas ou dans le navigateur ramène ce panneau.
• Mise en page : le mode d'affichage (un bouton mène à l'onglet Détails), le CSS de la mise en page et les variantes utilisées quand la mise en page est réutilisée ailleurs.
• Historique : chaque version enregistrée ; choisissez-en une pour la charger dans l'éditeur (voir section 11).
• Import / Export : exporter la mise en page en fichier, importer un export ou une page SP Page Builder, ouvrir la Bibliothèque de gabarits, Enregistrer comme gabarit…, les Modèles et, dans l'administration, Gérer les modèles.
• Scénarios (administration) : les scénarios qui ouvrent cette mise en page ou s'exécutent sur les pages qui l'affichent, chacun lié à son formulaire, et Nouveau scénario : un titre, s'il ouvre cette mise en page ou s'exécute sur les pages qui l'affichent (les éléments de menu qui pointent vers elle), Quand (chargement, délai, défilement, intention de sortie…) et Le publier tout de suite. Il est créé dépublié sauf si vous cochez cette case (et pouvez publier) ; ouvrez-le pour ajouter des conditions ou d'autres actions. Demande la permission Créer.
• Audit et Performance : voir Audit et données structurées et Performance ; chacun s'exécute à l'ouverture de son panneau.

Sections, lignes et colonnes

Une page est un arbre :

• Section : une bande de la page. Elle peut tout contenir sauf des colonnes. Dans son onglet Contenu :
• Balise HTML : section, header, footer, main, aside, article ou div.
• Largeur du contenu : pleine largeur, centré (conteneur) ou pleine largeur avec marges. L'arrière-plan reste toujours bord à bord.
• Image d'arrière-plan, vidéo d'arrière-plan (un fichier .mp4 ou .webm hébergé, muet et en boucle, masqué pour les visiteurs qui préfèrent réduire les animations), couleur de superposition (par ex. rgba(0,0,0,.4)), position et taille de l'image. Les champs image et vidéo affichent une miniature à côté du chemin ; Choisir… ouvre le gestionnaire de médias de Joomla dans une fenêtre (images, ou vidéos seulement), prévisualise le fichier cliqué avec son chemin et ses dimensions, et Insérer écrit son chemin (images/demo/hero.jpg). Effacer vide le champ ; chacun s'annule en une fois. Vous pouvez toujours saisir un chemin ou une URL.
• Ligne : une ligne de grille Bootstrap. Elle ne contient que des colonnes.
• Colonne : une largeur de 1 à 12 (sur 12). Elle contient tout sauf des colonnes — y compris d'autres lignes, donc les grilles s'imbriquent.

Éléments

Les éléments de base sont Titre, Texte (texte enrichi, les plugins de contenu s'y appliquent), Image, Bouton (styles primaire, secondaire, contour, clair, contour clair, sombre, lien ; tailles petite/grande), Espace, Séparateur, Vidéo (intégration YouTube ou Vimeo respectueuse de la vie privée, ou fichier .mp4/.webm hébergé avec image d'aperçu), Position de module, Mise en page réutilisable et Champ personnalisé (un champ personnalisé d'article, voir la section 8).

Les champs média — l'image de l'élément Image, le fichier et l'image d'aperçu de la Vidéo, et tout champ d'élément déclaré comme média — ont la même miniature, Choisir… et Effacer que les arrière-plans de section. Choisir… n'apparaît que pour les utilisateurs autorisés à utiliser le gestionnaire de médias (Médias : accès à l'interface d'administration dans l'administration ; Créer ou accès à l'interface d'administration sur le site) ; les autres saisissent le chemin et voient quand même l'aperçu.

Les liens acceptent les URL complètes, les chemins du site (/contact, images/x.jpg, index.php?…), mailto:/tel: et les ancres de la page (#tarifs). Les liens dangereux (javascript:…) sont refusés.

Mise en forme : classes et Système de design

Composants → Blocks → Système de design contient le système de design du site. Tout est vérifié sur le serveur à l'enregistrement et compilé en une seule feuille de style : le même design donne toujours le même CSS.

L'écran est organisé en onglets, les réglages à gauche et leur rendu à droite, mis à jour pendant la saisie : Couleurs et modes (jetons de couleur oui-ds, vos jetons, les modes | chaque couleur dans chaque mode), Typographie (polices, styles typographiques | un aperçu de chacun), Espacements et tailles (tailles, espacements, arrondis, ombres | l'échelle dessinée à la taille), Tailles d'écran, Classes, Contraste (le tableau de contraste et ce que demande le WCAG) et Import et export. L'onglet ouvert est mémorisé ; Enregistrer enregistre tous les onglets à la fois.

• Tailles d'écran : les styles bureau s'appliquent partout ; tablette (jusqu'à 991 px) et mobile (jusqu'à 767 px) peuvent les modifier. Changez ces largeurs, ajoutez un écran large (« à partir de » une largeur, par ex. 1400 px) et vos propres tailles (par ex. « Petit téléphone », jusqu'à 400 px). Les boutons d'écran et les largeurs d'aperçu du constructeur suivent cette liste. Une taille supprimée garde ses valeurs sur les éléments ; elles s'appliquent de nouveau si vous la rajoutez.
• Vos jetons : vos propres variables, par ex. une palette (gray-900, brand-500) ou des tailles fluides (clamp(1.5rem, 4vw, 2.75rem)), utilisées sous la forme var(--oui-nom).
• Jetons oui-ds : couleurs, polices, tailles, espacements, arrondis et ombres (--oui-primary, --oui-space-4…), partagés par toutes les extensions Oui. Un jeton peut renvoyer à un autre jeton du même type (--oui-text = var(--oui-gray-900)) : changez la palette une fois, tous les jetons qui y renvoient suivent. Un jeton qui renvoie à lui-même est refusé.
• Modes de couleur : Sombre et Contraste élevé changent certains jetons. Un mode s'applique dans tout élément portant data-oui-mode="dark" (ou "contrast"), ou à tout le site quand Suivre le réglage système du visiteur est coché (prefers-color-scheme / prefers-contrast) ; data-oui-mode="light" garde une partie en clair. Le tableau de contraste vérifie le texte sur le fond dans chaque mode (le niveau AA du WCAG demande 4,5:1).

• Styles typographiques : des styles de texte nommés (police, taille, graisse, interligne, espacement des lettres, casse, par taille d'écran). Ajoutez-en un à un élément comme une classe.
• Classes : des styles réutilisables (.bx-card, .bx-hero…) pour chaque taille d'écran et pour les états Survol, Focus, Focus clavier (:focus-visible), Appuyé (:active) et Désactivé. Une classe peut être basée sur d'autres classes ou styles typographiques : leurs styles s'appliquent d'abord, dans l'ordre, et les siens l'emportent (.bx-hero-title basée sur title). Une classe basée sur elle-même, même par d'autres, est refusée. Chaque classe indique où elle est utilisée (« Utilisée par N éléments dans M mises en page ») et prévient avant de renommer ou supprimer une classe utilisée.
• Exporter le design / Importer un design : tout le design (tailles d'écran, jetons, modes, styles typographiques, classes) dans un fichier JSON. Un import remplace ce qui est à l'écran ; rien ne change sur le site avant l'enregistrement.

Les valeurs acceptent longueurs, couleurs, mots-clés, var(), calc(), clamp(), min() et max() ; tout le reste (url(), expression(), commentaires…) est refusé, et signalé en rouge pendant la saisie.

Dans l'onglet Style du constructeur :

• Ajoutez des classes (et des styles typographiques) au nœud sélectionné ; chaque pastille indique combien de nœuds de la page l'utilisent.
• Avec la permission Système de design, cliquez sur une pastille pour modifier la classe directement. Un bandeau rappelle que le changement s'applique partout où la classe est utilisée ; il est enregistré avec la mise en page.
• Ou donnez au nœud ses propres styles pour la taille d'écran affichée (les boutons au-dessus du canevas, ou une largeur saisie en px), ou pour un état. Les jetons sont proposés pendant la saisie.
• D'où vient une valeur : sous chaque propriété, « Défini pour Tablette », « Hérité de Bureau » ou « Vient de la classe .card », avec la valeur du jeton le cas échéant. Un champ vide affiche la valeur qu'il hérite. Réinitialiser retire la valeur ; Utiliser sur toutes les tailles d'écran en fait la valeur bureau et retire celles des autres tailles.
• Valeur fluide (clamp) sous les champs d'espacement et de taille de police : min, idéale (vw) et max donnent clamp(1rem, 4vw, 2rem).
• Vérification du contraste : quand les couleurs du texte et du fond sont connues par le design (styles propres, classes, parents, jetons et ce vers quoi ils renvoient), l'onglet Style affiche le rapport WCAG dans chaque mode de couleur et le canevas signale tout ce qui est sous 4,5:1.

Effets

L'onglet Avancé d'un nœud contient un groupe Effets. Les effets sont produits par Oui Blocks sur ses propres conteneurs (attributs data et un petit script et une feuille de style, com_blocks.effects, chargés seulement sur les pages qui utilisent un effet). Les nœuds avec effets portent un badge Effets (icône baguette) dans le canevas, et l'aperçu en direct les exécute. Le mouvement — parallaxe, apparition, curseur, défilement fluide — est désactivé pour les visiteurs qui demandent à leur système de réduire les animations.

Sections

• Collant : reste en haut de l'écran, à la distance choisie. Dans une mise en page de page, il utilise le « sticky » CSS ; un en-tête affiché dans une position de module (mod_blocks, en-tête de l'interface dynamique) est maintenu par le script, avec un emplacement réservé pour que la page ne saute pas. Après Style « défilé » après pixels, il reçoit la classe is-oui-scrolled (par défaut un fond plein et une ombre ; stylez-la avec vos classes de design). Masquer en descendant le fait disparaître en descendant et revenir en remontant (jamais quand le focus clavier est dedans).
• Défilement fluide vers les ancres de la page : les liens #ancre défilent en douceur et s'arrêtent sous l'en-tête collant (plus le décalage supplémentaire).
• Couleurs de la page quand visible : tant que cette section est sous l'en-tête, le <body> reçoit oui-scroll-dark ou oui-scroll-light et --oui-scroll-color prend le jeton de couleur choisi — par exemple un en-tête clair sur les sections sombres : body.oui-scroll-dark .mon-entete { color: #fff }.
• Effet de curseur : un point ou un anneau suit la souris sur la section et grossit sur les liens, avec un libellé facultatif (« Voir »). Souris sur ordinateur uniquement ; le vrai curseur reste affiché sauf si vous cochez Masquer le vrai curseur (déconseillé).

Sections et éléments

• Vitesse de parallaxe de -1 à 1 (0 = aucune) : une section déplace son image ou sa vidéo de fond, un élément se déplace lui-même, un peu moins vite (ou plus vite, en négatif) que la page. Désactivée sur téléphone.
• Apparition au défilement : fondu, glissement vers le haut/bas/gauche/droite ou zoom à l'entrée à l'écran, avec délai et durée en millisecondes, une fois ou à chaque fois.

Éléments

• Texte de l'infobulle (haut, bas, gauche ou droite ; retournée du côté opposé au bord de l'écran) : affichée au survol et au focus clavier, fermée par Échap, lue par les lecteurs d'écran (l'élément ou son propre lien en est le déclencheur).
• Bouton Copier : un bouton Copier sous l'élément copie son texte ou une valeur donnée (un code promo…) et affiche Copié.

Sections, colonnes et éléments

• Lier tout le bloc à : tout le bloc devient cliquable (URL complète, chemin du site, #ancre, ou #oui-layout-N pour ouvrir une mise en page en fenêtre modale — les mêmes règles que les liens de bouton). Les liens et boutons à l'intérieur fonctionnent toujours. Ouvrir dans un nouvel onglet ajoute rel="noopener noreferrer" et l'annonce aux lecteurs d'écran ; le lien prend le nom du titre du bloc sauf si vous lui donnez un texte.

Aperçu en direct

Le constructeur s'ouvre sur le Canevas en direct : la page non enregistrée sur votre vrai site, dans son template, rendue par le même code que la page publiée, avec les vrais points de rupture en tablette et mobile. Il se met à jour un instant après chaque changement. Structure montre la page en boîtes ; le constructeur retient votre choix dans ce navigateur.

Sur le canevas en direct :

• Cliquez sur un élément pour le sélectionner (Maj+clic, Ctrl/Cmd+clic pour en sélectionner plusieurs). La sélection est encadrée, avec une petite barre : la poignée ⠿ pour le glisser (une ligne verte montre où il ira ; seuls les emplacements permis par la structure sont proposés), monter/descendre, ✎ modifier sur la page, dupliquer et supprimer. Au survol, un + sous l'élément ajoute quelque chose juste après.
• Double-cliquez (ou Entrée, ou F2 dans le navigateur) pour modifier les textes sur place : titres, libellés de boutons et texte riche (avec la barre Gras, Italique, Lien, listes ; Alt+F10 l'atteint ; le texte collé est nettoyé, et le texte est filtré à l'enregistrement comme dans l'onglet Contenu). Entrée termine un titre ou un libellé, Échap termine toute modification et ramène le clavier au navigateur. Une image ouvre un petit panneau : Sélectionner… ouvre le gestionnaire de médias, et son texte alternatif s'y modifie.
• Les champs liés à des données dynamiques et les parties verrouillées ne se modifient pas sur place. Les autres éléments se sélectionnent sur le canevas et se modifient dans le panneau des propriétés, le canevas montrant le résultat.
• Un élément vide affiche un emplacement en pointillés avec son nom, pour pouvoir le sélectionner et le remplir.

Aperçu en tant que : voyez la page comme vous-même ou comme un membre de n'importe quel groupe (Invité, Enregistré…), pour que les parties réservées s'affichent ou se masquent comme pour ces visiteurs.

Si l'aperçu reste vide avec un avertissement, votre site interdit l'affichage en cadre : autorisez X-Frame-Options SAMEORIGIN et Content-Security-Policy frame-ancestors 'self'.

Clavier, sélection multiple et presse-papiers

Tout le constructeur s'utilise au clavier. Le navigateur est un arbre : Tab l'atteint, ↑/↓ déplacent et sélectionnent, Début/Fin, → déplie une branche ou va à son premier enfant, ← la replie ou va au parent, taper le début d'un nom y saute ; Maj+↑/↓ sélectionnent une plage, Ctrl/Cmd+Espace ajoute ou retire un élément, Ctrl/Cmd+↑/↓ déplacent seulement le focus. Entrée va aux réglages de l'élément, F2 le modifie sur le canevas en direct. Après chaque action le focus revient sur l'élément, et un lecteur d'écran annonce ce qui s'est passé (« Titre déplacé dans Section 2, position 1 »).

L'onglet Style a aussi Copier les styles, Coller les styles et Coller pour cet écran seulement (seulement les styles de la taille d'écran ou de l'état survol modifié). Les éléments collés reçoivent de nouvelles clés ; tout ce qui est collé est vérifié (types d'éléments inconnus, colonne hors d'une rangée, styles invalides sont écartés), et les verrous ne sont gardés que pour ceux qui peuvent en poser.

Données dynamiques et mises en page d'articles

Un champ d'élément peut prendre sa valeur dans l'article avec lequel la mise en page s'affiche. Dans l'onglet Contenu, Données dynamiques liste chaque champ avec une source : titre, texte d'introduction ou complet, date, auteur, catégorie, lien, image d'introduction ou de l'article, ou n'importe quel champ personnalisé d'article. Sans article, l'élément garde sa propre valeur. Le texte complet et l'image de l'article restent masqués aux visiteurs qui n'ont pas le droit de lire l'article.

Pour associer une mise en page à des articles :

1. Contenu → Champs → Nouveau, type Mise en page Blocks.
2. Dans un article, choisissez une mise en page dans ce champ.

Joomla l'affiche là où l'option Affichage automatique du champ l'indique. Pour afficher la mise en page à la place du corps de l'article, utilisez la disposition d'article alternative facultative de extras/article-layout.

Placer des champs personnalisés

La catégorie Champs de l'article de la bibliothèque liste chaque champ personnalisé d'article publié comme un élément à part (nommé d'après le champ, avec une icône selon son type), plus un Champ personnalisé générique. Déposez-le là où la valeur doit apparaître et stylez-le comme tout élément. Tous les types de champ fonctionnent, y compris média, listes, calendrier, sous-formulaire, utilisateur et types tiers. Réglages :

• Champ : quel champ personnalisé (groupés par groupe de champs).
• Libellé : comme réglé dans le champ (l'affichage de Joomla : son option « Afficher le libellé », ses classes, préfixe et suffixe), au-dessus, en ligne ou masqué ; Balise du libellé choisit span, strong, div, p ou h2–h6.
• Valeur : rendue par Joomla (la mise en page du type de champ, par ex. une image pour un média, les libellés des options d'une liste) ou la valeur brute enregistrée, pour les champs texte.
• Texte si le champ n'a pas de valeur : affiché au lieu de rien (facultatif).

Un champ ne s'affiche qu'aux visiteurs autorisés à le voir (niveau d'accès du champ et de son groupe), seulement quand la mise en page est affichée avec un article (le champ Mise en page Blocks, la disposition d'article alternative ou {blocks} dans un article) et seulement pour les articles des catégories du champ.

Aperçu avec l'article : dans l'Aperçu en direct, choisissez un article (recherche par titre) pour voir la mise en page avec ses vraies valeurs. Par défaut, l'article le plus récent ayant des valeurs de champs est utilisé ; votre choix est mémorisé pour cette mise en page dans votre navigateur.

Boucles et conditions

Plugins « Oui Blocks - Sources de contenu » et « Oui Blocks - Conditions d'affichage » (groupe blockssource, installés et activés avec le paquet).

Boucles

Une Boucle (catégorie Dynamic de la bibliothèque) répète ce que vous y placez pour chaque élément d'une source :

Sélectionnez la boucle et, dans son onglet Contenu, choisissez la Source, le Nombre d'éléments (100 au plus), combien Sauter, les Colonnes (1 à 6 ; moins sur tablette et mobile), le texte affiché Quand il n'y a rien à afficher et la Pagination : liens de pages, ou un bouton Voir plus (un vrai lien vers la page suivante : sans JavaScript il l'ouvre ; avec, les éléments suivants s'ajoutent, le focus passe au premier nouveau et un lecteur d'écran annonce combien sont arrivés). Filtrer et trier regroupe les réglages propres à la source : pour les articles, ID de catégories (avec ou sans sous-catégories), ID de mots-clés, ID d'auteurs, mise en vedette, langue, une période ou les N derniers jours, l'exclusion de l'article de la page, et l'ordre.

Placez des éléments dans la boucle puis liez-les à l'élément courant : dans les Données dynamiques de chaque élément, le groupe Élément de boucle › Articles liste ses valeurs (titre, texte d'introduction, lien, images, dates, champs personnalisés…) et celles de sa catégorie et de son auteur (Catégorie › Titre…).

Boucles imbriquées. Une boucle dans une boucle répète une relation de l'élément extérieur : les mots-clés ou les articles liés (un mot-clé en commun) d'un article, les sous-catégories ou les articles d'une catégorie, les articles d'un mot-clé (20 éléments au plus par élément extérieur, sans pagination ; deux niveaux au plus). Sur une mise en page d'article, une boucle peut aussi lister une relation de l'article de la page (De l'article de la page › Articles liés).

Ce que voient les visiteurs. Chaque requête, comptes et pages compris, applique les règles de Joomla pour le visiteur : publié (les étapes de workflow publient par le même état), dans sa période de publication, niveau d'accès de l'article, de sa catégorie et de chaque catégorie parente, et sur un site multilingue la langue courante ou Toutes. Aperçu en tant que dans le constructeur montre exactement ce que ce groupe obtiendrait. L'aperçu en direct affiche de vrais éléments.

Cache. Une boucle est mise en cache par niveaux d'accès, langue et template comme le reste de la mise en page, séparément par élément de menu (et par URL si elle est paginée). Une copie en cache peut montrer un article programmé avec au plus la durée du cache de retard, comme les caches de Joomla.

Conditions d'affichage

Toute section, ligne, colonne, élément ou boucle peut avoir des Conditions d'affichage (onglet Avancé). Il s'affiche quand toutes les conditions d'au moins un groupe sont remplies : + Et ajoute une condition au groupe, + Ou ajoute un groupe. Les conditions sont vérifiées sur le serveur avant l'envoi de la page : une partie masquée n'est jamais dans la page. Le canevas marque ces éléments d'un badge Conditionnel.

L'appareil du visiteur n'est pas une condition serveur (un user agent n'est pas fiable et les pages sont en cache) : utilisez la Visibilité par appareil de l'élément, qui le masque en CSS. Une condition d'un plugin désactivé masque son élément plutôt que de le montrer à tous.

Mises en page réutilisables et propriétés de composant

L'élément Mise en page réutilisable affiche une autre mise en page dans celle-ci. Modifiez-la une fois dans son propre constructeur (« Modifier cette mise en page ») et toutes les pages qui l'utilisent changent. Détacher la remplace par une copie modifiable.

Propriétés de composant : dans la mise en page réutilisée, ouvrez l'onglet Contenu d'un élément → Propriétés de composant et nommez un champ (par ex. titre). Chaque endroit qui réutilise la mise en page liste alors cette propriété et peut lui donner sa propre valeur ; vide, c'est la valeur de la mise en page qui s'applique.

Variantes : une mise en page réutilisée peut proposer des variantes, des ensembles nommés de remplacements de classes. Sans élément sélectionné dans son constructeur, Variantes (en réutilisation) → Ajouter une variante, nommez-la (par ex. dark) et choisissez les classes à remplacer (card → card-dark ; vide retire la classe). Chaque endroit qui réutilise la mise en page choisit une Variante dans ses propriétés de composant ; « Telle que conçue » garde les classes telles quelles.

Qui voit quoi : accès, verrous, aperçu en tant que

• Accès (onglet Avancé) : tout nœud peut être limité à un niveau d'accès Joomla. Les parties réservées ne sont jamais envoyées aux visiteurs qui n'ont pas ce niveau ; une section réservée masque tout ce qu'elle contient.
• Verrous (pour les utilisateurs ayant la permission de gérer les verrous) : limitent la modification d'un nœud à certains groupes. Un enregistrement qui modifie, déplace ou supprime un nœud verrouillé est refusé avec son chemin.
• Aperçu en tant que dans l'aperçu en direct (voir section 7).

Historique, export et import

Les trois sont dans les panneaux latéraux du constructeur : Historique et Import / Export.

• Historique : chaque enregistrement garde une version. Chargez-en une dans l'éditeur (une étape d'annulation) ; rien ne change sur le site avant l'enregistrement.
• Exporter : télécharge la mise en page en JSON, avec les classes de design qu'elle utilise.
• Importer : ajoute une mise en page exportée en fin de page (nouvelles clés, une étape d'annulation) et les classes de design absentes du site. Accepte aussi un export de page SP Page Builder ou un fichier de mise en page YOOtheme Pro, convertis comme une migration (voir Migrer depuis d'autres constructeurs), avec une note pour tout ce qui est perdu.

Bibliothèque de gabarits

Bibliothèque (dans le menu Plus du constructeur et son panneau Import / Export) ouvre toutes les sections et pages prêtes à l'emploi de votre site :

• le pack de démarrage Oui Blocks (plugin Blocks templates - Pack de démarrage) : bannières, fonctionnalités, tarifs, témoignages, FAQ, appels à l'action, un pied de page… et les six pages de démonstration ;
• les packs d'autres plugins blockstemplates ;
• Ce site : les gabarits enregistrés depuis vos pages et les packs importés en ZIP ;
• Modèles : les modèles du constructeur, en lecture seule (la fenêtre Modèles les gère toujours).

Recherchez par titre, catégorie, mot-clé ou pack, ou filtrez par type (page, section, bloc), catégorie, mot-clé et pack. Choisissez un gabarit pour le voir en grand, voir ce qu'il utilise et l'Aperçu en direct (le gabarit seul, rendu par votre site avec votre design). Puis :

• Insérer à la fin, ou Insérer après la sélection (après la section de premier niveau qui contient l'élément sélectionné) ;
• Remplacer la page… : demande confirmation dans la fenêtre ; Annuler rétablit la page.

Chaque insertion est une seule étape d'annulation et reçoit de nouvelles clés. Comme pour un import, les classes de design du gabarit absentes de votre site sont ajoutées au Système de design à l'enregistrement (avec la permission Système de design) ; une classe que votre site a déjà avec d'autres styles garde votre version, et une note la signale. Rien ne change sur le site avant l'enregistrement de la mise en page.

Un gabarit qui a besoin d'un élément absent de votre site (un plugin non installé ou désactivé, par ex. Oui Forms pour « Formulaire de contact »), ou d'un Oui Blocks plus récent, est affiché avec la raison et ne peut pas être inséré.

Enregistrer comme gabarit… (en bas de la fenêtre) enregistre la section ou l'élément sélectionné, ou la page entière, dans Ce site, avec un titre, une catégorie, des mots-clés et une vignette facultative (PNG, JPEG ou WebP, 512 Ko au plus). Vos gabarits s'y modifient (titre, catégorie, mots-clés, vignette) et s'y suppriment. Enregistrer demande Créer sur Oui Blocks, modifier Modifier (ou Modifier les siens), supprimer Supprimer.

Exporter en ZIP télécharge un pack du site (manifest.json, templates/*.json, thumbs/*) ; Importer un pack (ZIP)… en ajoute un à la bibliothèque. Un import n'accepte que des fichiers JSON et PNG/JPEG/WebP dans ces dossiers (32 Mo au plus) ; chaque gabarit est vérifié comme un enregistrement de mise en page. Réimporter un pack remplace ses gabarits de même identifiant. Un nom de pack déjà utilisé par un plugin est refusé.

Interface dynamique : en-tête, pied de page et panneaux

Composants → Blocks → Interface dynamique définit les zones autour de vos pages : en-tête, pied de page et panneaux latéraux escamotables. Chaque zone affiche une position de module ou un modèle.

Dans l’onglet Assignation, choisissez où l'enregistrement s'applique : sur toutes les pages, aucune page, seulement les éléments de menu choisis, ou toutes sauf eux. Quand plusieurs enregistrements correspondent à une page, le premier de la liste l'emporte (réordonnez-les dans la liste).

Pour afficher une zone, publiez un module Blocks dans une position du template avec Source : Interface dynamique et la zone (en-tête, pied de page, panneau gauche ou droit). Le cache des modules Joomla reste sûr : il varie selon les niveaux d'accès du visiteur, la langue, le template et l'enregistrement retenu.

Jeux de filtres

Un jeu de filtres affiche une liste d'articles que les visiteurs affinent avec des filtres — catégorie, tag, auteur, champ personnalisé, date ou en vedette. Les résultats se mettent à jour à chaque choix (ou au clic sur Rechercher), et seuls les articles que le visiteur peut lire sont listés ou comptés : publiés, dans leurs dates de publication, dans ses niveaux d'accès et sa langue, dans une catégorie qu'il peut voir.

Trois étapes.

1. Créer les filtres. Composants → Oui Blocks → Jeux de filtres → Nouveau :

• Source d'articles : les articles à parcourir — certaines catégories (avec ou sans leurs sous-catégories), certains tags, ou tous les articles.
• Filtres : ajoutez, glissez pour ordonner et supprimez les filtres proposés aux visiteurs. Chacun a un libellé, un type (catégorie, tag, auteur, champ personnalisé — choisissez un champ liste, radio ou cases à cocher —, date ou en vedette), un affichage (liste déroulante, sélection multiple, cases à cocher, boutons radio ; un filtre de date est toujours une période Du/Au), le texte de son choix « tous », des classes CSS et une valeur par défaut choisie à la première visite (un identifiant, 1/0 pour en vedette, une valeur de champ ; plusieurs séparées par des virgules).
• Résultats : filtres au-dessus des résultats, en barre latérale ou sur une ligne ; mise à jour en direct (Utiliser AJAX ; Non : le formulaire recharge la page et l'adresse filtrée peut être partagée) ; nombre d'articles à côté de chaque choix ; affichage des filtres sans choix ; résultats par page.

Chaque champ a une description ; le panneau en haut de l'écran rappelle les trois étapes.

2. Le placer sur le site, de deux façons :

• un élément de menu : Menus → Ajouter un élément de menu → Oui Blocks → Jeu de filtres, puis choisissez le jeu de filtres. La page affiche les filtres et les résultats. Aperçu sur le site (écran d'édition, colonne de droite) ouvre la même page sans élément de menu ;
• l'élément Jeu de filtres (catégorie Joomla de la bibliothèque) dans n'importe quelle mise en page : choisissez le jeu de filtres et l'emplacement des résultats — sous les filtres (la liste intégrée) ou une Boucle sur cette page (étape 3).

3. Styliser les résultats. La liste intégrée affiche des cartes simples (image, titre, introduction, date, catégorie). Pour concevoir les vôtres :

1. dans une mise en page, ajoutez l'élément Jeu de filtres avec Résultats : une Boucle sur « Résultats d'un jeu de filtres » sur cette page ;
2. ajoutez une Boucle (catégorie Dynamique, voir Boucles et conditions) avec la source Résultats d'un jeu de filtres et le même jeu de filtres ;
3. concevez une carte dans la Boucle avec les champs dynamiques (item.title, item.image_intro, item.url, item.field.12…), puis réglez ses colonnes, son texte vide et sa pagination.

Quand un visiteur change un filtre, la page demande au site la page filtrée et remplace la Boucle sur place (la barre d'adresse suit, le résultat peut donc être partagé) ; sans mise à jour en direct, la page se recharge. Les Boucles sur Résultats d'un jeu de filtres sont mises en cache par adresse.

Pour modifier plutôt le balisage intégré, surchargez les layouts dans votre template : templates/<template>/html/layouts/com_blocks/advancedfilter/default.php (conteneur), filters.php (le formulaire) et items.php (les résultats). Gardez les noms de champs filter[<id du filtre>].

Éléments des autres extensions Oui

Installer ces paquets Oui ajoute leurs éléments à la bibliothèque du constructeur (activez leur plugin Blocks - … s'il ne l'est pas) :

Chacun n'affiche que les éléments publiés que le visiteur a le droit de voir, et ne charge ses scripts et styles que sur les pages qui l'utilisent.

Oui Widgets

Le plugin Blocks - Oui Widgets (installé et activé avec le paquet) ajoute dix-sept éléments dans la catégorie Oui Widgets de la bibliothèque. Ils se mettent en forme avec vos classes comme tout élément ; chacun charge sa petite feuille de style et son script uniquement sur les pages qui l'affichent, et les templates peuvent substituer sa mise en page dans templates/<template>/html/layouts/blocks/widgets/<nom>.php. Toutes les animations s'arrêtent pour les visiteurs qui demandent moins d'animations à leur système, et tout fonctionne au clavier.

Listes. Diapositives, témoignages, images, panneaux, marqueurs et compteurs sont des listes : + Ajouter ajoute une ligne, chaque ligne a ses boutons monter, descendre et supprimer.

Menus. Le méga menu et le menu animé lisent un menu Joomla (Menus → votre menu) comme le module Menu : éléments publiés que le visiteur peut voir (Aperçu en tant que compris), éléments masqués des menus exclus, titres et séparateurs en texte simple, page courante signalée (aria-current). Les sous-menus s'ouvrent avec leur propre bouton (clavier : Entrée, Échap referme) ; sous 992 px le menu se replie derrière un bouton Menu.

Carrousels. Boutons, points, flèches du clavier, Début et Fin, balayage. Le défilement automatique est désactivé par défaut ; activé, il affiche un bouton d'arrêt, se met en pause quand le pointeur ou le focus est dedans et ne tourne jamais avec la réduction des animations. Les lecteurs d'écran n'annoncent les changements que lorsque la rotation est arrêtée.

Carte et vie privée. Leaflet est fourni avec le plugin : rien n'est chargé depuis un CDN et aucune clé d'API n'est nécessaire. Avec Demander avant de charger la carte (activé par défaut), le visiteur voit d'abord une note et un bouton Afficher la carte : aucune requête ne part vers OpenStreetMap avant ce clic, et le choix est mémorisé dans ce navigateur. Si votre site envoie une Content-Security-Policy, autorisez les tuiles avec img-src https://tile.openstreetmap.org (Système → Plugins → En-têtes HTTP).

Instagram. Collez un jeton longue durée de l'API Instagram dans Système → Plugins → Blocks - Oui Widgets. Il est enregistré chiffré avec la clé secrète du site, utilisé uniquement par le serveur et jamais écrit dans les pages. Les publications sont récupérées avec un délai de 5 secondes et mises en cache (1, 6 ou 24 heures ; un appel en échec est retenté après 5 minutes) ; sans jeton ni publication, l'élément n'affiche rien sur le site et une indication dans le constructeur. Les images viennent des serveurs d'Instagram : autorisez img-src https://*.cdninstagram.com si vous utilisez une Content-Security-Policy. Les jetons expirent après 60 jours s'ils ne sont pas renouvelés.

Vidéo au défilement. Le défilement demande une vidéo avec des images clés fréquentes, par exemple ffmpeg -i in.mp4 -an -g 4 -bf 0 -crf 28 -movflags +faststart out.mp4. Avec la réduction des animations, c'est une vidéo normale avec ses commandes et les cartes sont listées dessous.

Produit 360°. Placez les photos dans un dossier d'images/ (nommées pour se trier dans l'ordre, par exemple frame-01.jpg … frame-36.jpg) et indiquez ce dossier. Glisser, les flèches du clavier ou les boutons font tourner le produit.

Musique de fond. Ne démarre jamais seule : le visiteur appuie sur le bouton (les navigateurs bloquent de toute façon le son qui démarre tout seul).

Liste de prix. Une ligne par article. La Catégorie d'une ligne commence un nouveau groupe avec ce titre ; laissez-la vide pour garder la ligne dans le groupe du dessus (une carte se saisit donc de haut en bas : « Entrées : 3 lignes, Plats : 3 lignes »). Les prix saisis comme des nombres (12, 9.50, 9,50, 1 200) sont mis en forme dans la Devise choisie (EUR par défaut) selon la langue du site, ou selon le Format des nombres indiqué (fr-FR donne 12,50 €, en-GB donne €12.50) ; tout autre texte (Sur demande, Offert) s'affiche tel quel. Avec Centimes sur Automatique, tous les prix ont des centimes dès qu'un prix en a, pour que la colonne s'aligne. Un Ancien prix est barré et annoncé « Ancien prix » aux lecteurs d'écran ; l'Unité suit le prix (/h, /kg, par personne). Styles : Liste avec points de conduite (l'allure d'une carte de restaurant, sur 1 à 4 colonnes), Cartes (l'image facultative en haut) et Tableau compact (un tableau par catégorie, la catégorie en légende). Les Notes s'affichent sous la liste (TVA, allergènes). Les couleurs suivent la couleur du texte : cela fonctionne sur des sections sombres. Les formats locaux demandent l'extension PHP intl (présente chez la plupart des hébergeurs) ; sans elle, les prix s'affichent 12.50 EUR. Données structurées pour les moteurs de recherche (désactivé par défaut) ajoute du JSON-LD schema.org dans l'élément, comme les éléments de données structurées : une Carte de restaurant (Menu → MenuSection → MenuItem avec son Offer) ou des Services ou produits (un OfferCatalog d'Offers) ; un prix saisi en texte donne un article sans prix.

Mobile. Chaque widget tient sur un écran de 390 px : les carrousels montrent une diapositive, le défilement horizontal devient une rangée à balayer, le méga menu se replie.

La page de démonstration extras/demo/demo-widgets.json les montre tous (voir Pages de démonstration).

Pages de démonstration

extras/demo contient six pages modernes (landing SaaS, agence, café, événement, lancement de produit et un index) avec images et vidéos d'arrière-plan, ainsi que demo-widgets.json, une page qui montre chaque élément Oui Widgets. Voir son README pour les importer.

Pages utilisant les autres extensions Oui

extras/demo/suite contient quatre autres pages construites avec les éléments des autres extensions Oui, et un index. Un installateur crée du contenu d'exemple dans chaque extension (formulaires, sondages, tableaux de bord, modèles 3D, images DAM, produits, albums), puis les pages :

php extras/demo/suite/install.php /chemin/vers/joomla --template-style=13

Une page est ignorée quand une extension dont elle a besoin n'est pas installée. Voir extras/demo/suite/README.md.

Mises en page en fenêtre modale et en panneau latéral

Le Mode d'affichage d'une mise en page (écran de la mise en page, onglet Détails) est l'un de :

• Page (par défaut) : affichée là où elle est placée — élément de menu, module, article ;
• Modale : une fenêtre au-dessus de la page (ci-dessous) ;
• Panneau latéral : un panneau pleine hauteur qui glisse depuis le bord Début (gauche) ou Fin (droite) — un menu, un panier, des filtres, un formulaire de contact. Il prend la Largeur donnée (par défaut 24rem, jamais plus large que l'écran), un Fond assombri facultatif, un bouton de fermeture, Échap et un clic à l'extérieur pour fermer ; le focus reste dans le panneau tant qu'il est ouvert (même sans fond) et revient au lien ensuite. Il s'ouvre comme une modale : un lien vers #oui-layout-12, data-oui-layout="12", l'action Ouvrir une mise en page (modale ou panneau latéral) d'un scénario, ou openLayout().

Toute mise en page peut s'ouvrir dans une fenêtre au lieu d'être posée dans une page : inscription à la newsletter, offre membres, vidéo. Ouvrez la mise en page (Composants → Blocks → Mises en page, cliquez sur son titre) et, dans l'onglet Détails, réglez le Mode d'affichage sur Modale, puis choisissez :

• la Taille (petite, moyenne, grande, très grande, plein écran) ou une Largeur comme 32rem ;
• la Position : centre, haut, un coin bas ou un panneau latéral (début/fin suivent le sens de la page) ;
• le Fond assombri (assombrit la page et la rend inactive), le Bouton de fermeture, Fermer par un clic à l'extérieur ;
• le Nom accessible, annoncé par les lecteurs d'écran (par défaut : le titre de la mise en page).

La liste des mises en page signale ces mises en page par un badge Modale ou Panneau latéral, et l'Aperçu du constructeur les montre dans leur cadre de fenêtre.

Pour en ouvrir une. Faites pointer un bouton (ou un texte) vers #oui-layout-12, où 12 est l'ID de la mise en page ; tout élément portant data-oui-layout="12" fonctionne aussi. Les pages qui contiennent un tel lien chargent d'elles-mêmes le petit script des fenêtres. Échap, le bouton de fermeture ou un clic à l'extérieur la ferment, et le focus revient sur le lien. Sur téléphone, la fenêtre prend la largeur de l'écran. Les scénarios peuvent aussi ouvrir des mises en page.

Le contenu est chargé à la première ouverture, avec les droits du visiteur : une mise en page (ou une partie) qu'il n'a pas le droit de voir n'arrive jamais dans le navigateur. Un formulaire à l'intérieur fonctionne comme dans une page.

Pour les développeurs, sur toute page qui charge l'asset web com_blocks.modal :

const dialog = await window.OuiBlocks.openLayout(12, { size: 'lg', position: 'side-end' });
await window.OuiBlocks.openLayout(12, { display: 'sidebar', side: 'start' }); // en panneau latéral, quel que soit son mode
window.OuiBlocks.closeLayout(12);   // ou closeLayout() pour celle qui est ouverte
document.addEventListener('ouiblocks:modal-close', (e) => console.log(e.detail.id, e.detail.reason));

Personnalisez l'apparence avec les propriétés --oui-modal-* (--oui-modal-bg, --oui-modal-radius, --oui-modal-backdrop…) sur .oui-modal.

Scénarios

Un scénario réagit à ce que fait un visiteur par des actions sur la page. Composants → Blocks → Scénarios, puis Nouveau :

• Quand (l'un de) : un ou plusieurs déclencheurs. Le premier qui se produit lance le scénario : chargement de la page, temps passé, défilement, intention de sortie (le pointeur part vers les onglets ; sur téléphone, en option, un défilement rapide vers le haut), nombre de visites, pages vues pendant la visite, inactivité, clic sur un élément, élément visible, événement personnalisé.
• Seulement si (toutes) : conditions facultatives, toutes requises : appareil (selon la largeur d'écran), connecté ou invité, groupes d'utilisateurs, langue, adresse de la page, paramètre d'adresse (utm_source…), provenance, jours et heures, nouveau visiteur ou visiteur fidèle, valeur enregistrée (cookie ou stockage du navigateur). Connecté, groupes et langue sont vérifiés sur le serveur : le navigateur ne reçoit jamais un scénario qu'il ne peut pas exécuter.
• Alors : des actions, dans l'ordre : ouvrir une mise en page en fenêtre modale (voir ci-dessus ; taille et position peuvent être remplacées), la fermer, afficher ou masquer un élément, ajouter ou retirer une classe CSS sur la page, enregistrer une valeur, émettre un événement (qui peut lancer un autre scénario), aller à une page du site, envoyer un événement dataLayer pour Google Tag Manager.

Chaque étape affiche ses réglages dès que vous choisissez son type. Dans Fréquence et pages, choisissez combien de fois un visiteur le voit (à chaque page vue, une fois par visite, une fois par visiteur, jusqu'à N fois, ou de nouveau après N jours) et sur quelles pages il s'exécute (la même règle d'éléments de menu que l'Interface dynamique). La colonne de droite porte le statut, le niveau d'accès et la langue ; Publication, les dates de début et de fin.

Un scénario s'exécute au plus une fois par page vue, et une seule fenêtre modale s'affiche à la fois : la suivante attend que le visiteur ferme la première. Avec plusieurs scénarios sur une page, leur ordre dans la liste est leur priorité. Visites et fréquences sont comptées dans le navigateur du visiteur (une visite est une session du navigateur ; effacer les données repart de zéro), et seulement sur les pages où un scénario s'exécute.

Les pages sans scénario concerné ne chargent rien. Le plugin Système - Scénarios Oui Blocks doit être activé (il l'est après l'installation du paquet).

Tester. Connecté au site en administrateur (Blocks : gérer), ajoutez ?oui_scenarios_debug=1 à l'adresse d'une page : la console du navigateur affiche un tableau de chaque décision (armé, ignoré par la fréquence ou une condition, exécuté, et les scénarios écartés sur le serveur avec la raison). Dans la console, OuiBlocks.scenarios.reset() oublie les visites et exécutions gardées dans ce navigateur.

Exemples : intention de sortie → ouvrir la fenêtre newsletter, une fois par visiteur ; 3ᵉ visite, visiteur fidèle → ouvrir une fenêtre « bon retour » et ajouter la classe is-returning, une fois par visite ; défilement à 60 % sur la page tarifs, ordinateur ou tablette → ouvrir la fenêtre tarifs, jusqu'à 2 fois.

Modifier sur la page

Connecté sur le site, toute personne qui peut modifier une mise en page dans le constructeur (Modifier, ou Modifier les siens pour les mises en page qu'elle a créées) voit un bouton Modifier la page en bas à droite des pages qui affichent cette mise en page : élément de menu, module mod_blocks, {blocks} dans un article ou champ « Mise en page Blocks ». Les visiteurs et les autres utilisateurs ne reçoivent rien de plus : ni bouton, ni script, ni marqueur.

Une fois activé, chaque élément de la mise en page est souligné au survol et au focus clavier :

• Titres et libellés de boutons : cliquez et tapez. Le lien d'un bouton se modifie avec Entrée ou Ctrl/Cmd+K (ou le bouton lien de la petite barre d'outils).
• Texte : cliquez et tapez. La petite barre d'outils propose gras, italique, lien et listes (Alt+F10 l'atteint au clavier). Le texte collé ne garde qu'une mise en forme simple, et le texte passe par les filtres de texte de Joomla de vos groupes à l'enregistrement, comme dans le constructeur.
• Images : cliquez (ou Entrée) pour changer le chemin ou l'URL et le texte alternatif.
• Les espaces et séparateurs ne se modifient pas. Tout autre élément propose Modifier dans le constructeur, qui ouvre le constructeur de la mise en page (sur le site) dans un nouvel onglet.
• Une partie verrouillée (voir Qui voit quoi) est soulignée en gris et ne peut pas changer ; un champ qui affiche des données d'article (données dynamiques) non plus.

Quand la même mise en page apparaît deux fois sur la page, les deux copies changent pendant la saisie. Enregistrer (ou Ctrl/Cmd+S) enregistre les modifications comme une nouvelle version avec une entrée d'historique (« Quick edit »), exactement comme le constructeur ; Annuler les modifications remet tout en place. Quitter la page ou arrêter la modification avec des changements non enregistrés demande confirmation. Si quelqu'un a enregistré la mise en page après le chargement de la page, l'enregistrement est refusé : copiez votre texte, rechargez et recommencez.

Pendant la modification, les textes affichent leur contenu enregistré ; les plugins de contenu (par ex. {loadmodule}) s'appliquent de nouveau après un rechargement.

Ouvrir le constructeur

En mode modification, la barre propose aussi Ouvrir le constructeur : le même constructeur que dans l'administration (bibliothèque, navigateur, la même barre et les mêmes panneaux latéraux sauf Scénarios, gérés dans l'administration), en plein écran sur le site, avec seulement Enregistrer, Fermer et Documentation au-dessus (les réglages de la mise en page restent dans les onglets de l'administration), pour la mise en page de la page (une courte liste si la page en affiche plusieurs). Aucun accès à l'administration n'est nécessaire : le constructeur fonctionne avec votre connexion au site et les mêmes droits : Modifier / Modifier les siens sur la mise en page, Design pour changer les classes de design, Créer pour enregistrer des modèles, et les verrous s'appliquent. Fermer vous ramène à la page, rechargée avec vos modifications. Images et vidéos s'indiquent par un chemin ou une URL, comme dans le constructeur de l'administration.

Le constructeur est conçu pour un écran d'ordinateur ; sur un téléphone il l'indique, et Modifier la page reste disponible.

Publication, validation et traductions

Avec les Brouillons activés (Options → Publication ; activés sur une nouvelle installation, désactivés sur un site mis à jour depuis une version antérieure), une mise en page a deux versions : la version publiée, que voient les visiteurs, et un brouillon, sur lequel travaillent les rédacteurs. Enregistrer dans le constructeur, sur la page (modification rapide), dans la vue de traduction ou restaurer une révision écrit le brouillon ; rien ne change sur le site tant qu'il n'est pas publié. Les mises en page existantes ne demandent rien : après la mise à jour elles sont « publiées, sans brouillon ».

Options → Publication :

La barre de publication

Le constructeur affiche au-dessus du canevas une barre avec l'état du brouillon (Publiée, sans brouillon, Brouillon, En validation, Approuvé, Refusé, et la date programmée) et ce que vous pouvez faire :

• Publier : le brouillon devient la version publiée (les modifications non enregistrées le sont d'abord). Chaque publication est conservée comme version publiée numérotée et non modifiable ; la première garde aussi ce qui était publié avant.
• Soumettre à validation : pour les rédacteurs qui ne peuvent pas publier, ou quand l'approbation est requise.
• Programmer… : choisissez une date et une heure ; la tâche planifiée Oui Blocks – Publier les brouillons programmés (Système → Tâches planifiées, créée à l'installation, toutes les 5 minutes) le publie alors. Enregistrer à nouveau le brouillon annule la programmation.
• Lien d'aperçu : un lien en lecture seule vers le brouillon, sans compte, valable jusqu'à son expiration ou jusqu'à ce que le brouillon change. À envoyer à un client ou à un relecteur.
• Comparer et valider : ouvre la page de validation.
• Abandonner le brouillon : deux clics ; la version publiée reste.

Sur la page, Enregistrer de la modification rapide écrit le brouillon (« Enregistré dans le brouillon ») ; les utilisateurs qui peuvent publier ont aussi Enregistrer et publier.

Validation

Comparer et valider (aussi dans la barre d'outils de la mise en page et depuis le badge du brouillon dans la liste des mises en page) montre :

• les modifications élément par élément (ajouté, supprimé, modifié, déplacé) et si le CSS a changé ;
• la version publiée et le brouillon côte à côte ;
• les actions : soumettre, approuver, refuser (avec un motif), publier avec une note de version, programmer, annuler une programmation, lien d'aperçu, abandonner ;
• l'historique de validation (commentaires et chaque étape, par version du brouillon) et la liste des versions publiées.

Qui fait quoi : les rédacteurs (Modifier, ou Modifier ses propres éléments) enregistrent des brouillons, les soumettent, commentent et abandonnent ; les utilisateurs ayant Modifier l'état approuvent, refusent, publient et programment. Les relecteurs reçoivent un message privé Joomla (envoyé par e-mail selon leurs options de messagerie) quand un brouillon est soumis ; l'auteur quand il est approuvé ou refusé. La liste des mises en page a un filtre Publication et indique aux relecteurs combien de brouillons les attendent.

La règle : un brouillon refusé n'est jamais publié ; avec Approbation requise, seul un brouillon approuvé dans sa version actuelle l'est. Tout enregistrement après une approbation remet le brouillon à l'état « brouillon ». Une publication programmée vérifie les mêmes règles au moment de s'exécuter, au nom de l'utilisateur qui l'a programmée.

Oui Blocks gère ces étapes lui-même plutôt qu'avec les Workflows de Joomla : dans Joomla un workflow change l'état de publication de l'élément lui-même, alors qu'ici la mise en page reste publiée pendant qu'une nouvelle version est validée.

Traductions

Sur un site multilingue (plugin Filtre de langue avec les associations activées), les mises en page s'associent comme les articles. La liste des mises en page affiche les langues de chacune (un clic ouvre sa traduction) et celles qui manquent.

• Dupliquer et associer (dans la vue de traduction, un lien par langue manquante) : copie la mise en page — arbre, classes de design, CSS, réglages d'affichage — dans cette langue, non publiée, et l'associe.
• Traductions (barre d'outils de la mise en page) : les textes de la mise en page en regard des textes du même élément dans la langue source. Les textes encore identiques à la source sont marqués Non traduit ; les champs liés aux données d'article ne sont pas listés. L'enregistrement écrit le brouillon (publiez-le, puis publiez la mise en page elle-même).
• Les éléments de menu, modules, {blocks} et mises en page réutilisables choisissent d'eux-mêmes la mise en page associée de la langue de la page ; à défaut, l'option Traduction manquante décide.

Substitutions de template

Composants → Blocks → Substitutions liste les fichiers de substitution de chaque template du site (templates enfants compris) dans templates/<template>/html/ : vues de composants, modules, layouts et plugins. Chaque fichier est marqué Mise en page alternative (utilisée seulement là où vous la choisissez) ou Remplace l'original (un fichier au nom de l'original, utilisé partout), et les fichiers créés ici affichent Oui Blocks : mise en page Blocks ou Oui Blocks : copie (lu dans leur commentaire d'en-tête).

Nouvelle substitution est une page en deux colonnes. À gauche : 1. Template du site, puis 2. Ce qu'il faut substituer, une liste avec recherche groupée avec d'abord Articles (com_content) — Article seul, Catégorie en blog, Catégorie en liste, Articles en vedette, Articles archivés, Liste de toutes les catégories, Formulaire d'article, chacun suivi de ses parties (blog_item.php…) — puis les autres composants, modules, layouts et plugins. À droite : 3. Le nouveau fichier, 4. Utilisation, et un Résumé qui suit vos choix : le fichier qui sera créé (templates/<template>/html/…), où le choisir ensuite, et les avertissements (le fichier existe déjà, remplacement de l'original). Le nouveau fichier :

• Affiche une mise en page Oui Blocks (recommandé) : un petit fichier PHP qui affiche la mise en page choisie. Sur une page d'article, l'article fournit les données dynamiques de la mise en page (section 8) ; sur les autres vues et dans les modules, la mise en page montre son propre contenu pour l'instant. Si la mise en page est dépubliée, hors de ses dates, hors des niveaux d'accès ou de la langue du visiteur, ou si Oui Blocks n'est pas installé, l'affichage original revient, et les visiteurs qui ne peuvent pas lire l'article voient la page normale.
• Copie de l'original : le fichier du cœur, à modifier, comme Templates → Créer des substitutions. Une copie alternative garde ses sous-mises en page (le blog_item.php d'un blog de catégorie devient <nom>_item.php).

Par défaut le fichier est une mise en page alternative (blocks-<alias de la mise en page>.php, ou le nom donné). Le message après la création dit où la choisir : Options → Mise en page d'un article ou d'une catégorie, option Mise en page d'un élément de menu, ou Paramètres avancés → Mise en page d'un module. Remplacer l'original écrit à la place un fichier au nom de l'original (par ex. default.php), ce qui change toutes les pages qui l'utilisent avec ce template ; ce n'est jamais fait sans que vous le choisissiez, et c'est le seul choix pour les layouts et les fichiers de plugins.

Cliquer sur un fichier l'ouvre dans l'éditeur de code de Joomla. Enregistrer vérifie d'abord la syntaxe PHP (sans l'exécuter) et refuse un fichier avec une erreur, en indiquant la ligne ; ce que vous avez tapé reste dans l'éditeur. Chaque enregistrement, restauration et suppression garde la version précédente en sauvegarde (dans la table des révisions d'Oui Blocks, pas dans le dossier web), restaurable depuis l'éditeur ; les substitutions supprimées sont listées sous Substitutions supprimées avec Restaurer. Quand le fichier a un original, l'éditeur montre les différences.

Seuls les fichiers .php du dossier html d'un template du site peuvent être écrits (pas de .., pas de liens symboliques). Les substitutions sont du code exécuté sur chaque page : les créer, modifier, restaurer et supprimer demande Configurer/Admin (core.admin) sur Oui Blocks et Modifier (core.edit) sur Templates. Les autres utilisateurs qui ont accès à Oui Blocks voient la liste en lecture seule, sans le contenu des fichiers. Chaque écriture vérifie le jeton du formulaire et est enregistrée dans le journal des actions utilisateurs.

Cela remplace extras/article-layout : au lieu de copier son fichier à la main, créez une substitution « mise en page Blocks » de com_content/article/default.php. Cet extra reste utile pour choisir la mise en page article par article avec un champ « Mise en page Blocks ».

Audit et données structurées

Le panneau Audit

Le panneau Audit du constructeur (rail à droite) vérifie la mise en page en cours, enregistrée ou non, et liste ce qu'il faut corriger. Il s'exécute sur votre site uniquement : rien n'est envoyé à un service et il ne modifie jamais la page. Choisissez un problème pour sélectionner sa partie de la mise en page dans le canevas et le navigateur ; Lancer l'audit vérifie à nouveau après vos modifications. Chaque problème est une Erreur (un vrai obstacle : à corriger), un Avertissement (très probablement un problème) ou une Remarque (à regarder).

Ce qu'il vérifie, sur la page telle que les visiteurs la reçoivent :

Le constructeur de l'administration ne voit pas les substitutions de template des mises en page d'éléments ni les modules du site affichés par un élément Position de module ; le constructeur sur le site les voit.

Bloquer la publication

Options → Audit → Bloquer la publication en cas d'erreurs d'audit (désactivé par défaut) : une mise en page avec des erreurs d'audit ne peut pas être publiée (formulaire ou liste), et l'enregistrement d'une mise en page publiée (constructeur, modification sur la page, restauration d'une révision) est refusé quand il ajoute des erreurs ; celles qu'elle avait déjà ne la bloquent pas. Avertissements et remarques ne bloquent jamais. Donnez la permission Publier malgré les erreurs d'audit aux groupes qui peuvent publier quand même (les Super Utilisateurs l'ont).

Éléments de données structurées

La catégorie Données structurées de la bibliothèque (plugin Blocks Schema - Données structurées) ajoute du JSON-LD schema.org à la page, dans le rendu de l'élément lui-même (jamais dans l'en-tête) :

Les dates s'écrivent 2027-03-12 09:30, les durées PT30M. L'audit signale toute propriété requise manquante. Chaque élément passe par une mise en page que votre template peut substituer (templates/<template>/html/layouts/blocks/schema/<nom>.php). Les plugins schema.org de Joomla 5 ajoutent leurs données dans l'en-tête de la page : utilisez l'un ou l'autre pour un même type.

Performance

Oui Blocks garde les pages légères sans intervention de votre part ; les options sont dans Composants → Blocks → Options → Sortie et Médias.

CSS par page. Une page ne reçoit que les règles des classes de design qu'elle utilise (lues dans ce que la mise en page a affiché, texte riche compris), les styles de ses propres nœuds et son CSS personnalisé — jamais tout le Système de design. Les jetons (--oui-*) et les modes de couleur sont toujours inclus. Le CSS est écrit une fois dans un fichier statique, media/com_blocks/cache/css/<empreinte>.css, lié comme toute feuille de style : le navigateur le met en cache, le nom change quand le CSS change, et aucun style en ligne n'est à autoriser dans une Content Security Policy. Les fichiers inutilisés depuis 30 jours sont supprimés. Choisissez Livraison du CSS : En ligne si le site ne peut pas écrire dans le dossier media (Blocks passe de lui-même en ligne quand un fichier ne peut pas être écrit).

Vous utilisez des classes de design (bx-…) dans du HTML que Blocks n'affiche pas (substitution de template, autre extension) ? Désactivez Seulement les classes de design utilisées.

CSS critique (activé par défaut). Sur la première mise en page d'une page, les règles de sa première section (Sections critiques, 1 à 5) sont mises en ligne dans l'en-tête pour que le haut de page s'affiche aussitôt ; le reste est un lien de feuille de style normal placé juste après ces sections, que le navigateur n'attend que pour ce qui suit, et préchargé depuis l'en-tête. Ni astuce onload ni script en ligne : cela fonctionne avec une CSP stricte. La partie en ligne porte le nonce de Joomla quand Système - En-têtes HTTP en ajoute un ; avec une CSP stricte sans nonce, désactivez CSS critique (tout vient alors du fichier statique).

Images adaptatives. Les images choisies dans images/ sont servies en plusieurs largeurs (480, 768, 1200, 1600, 2400 px, jamais plus que l'original ni que Largeur maximale des images) et en WebP, plus AVIF quand la bibliothèque GD de PHP sait l'écrire (option AVIF). Elles sont créées sur le site avec la bibliothèque d'images de Joomla la première fois qu'une page affiche l'image, un peu à la fois (une page n'attend jamais plus d'environ 1,5 s, et ce qui n'est pas prêt n'est simplement pas proposé), et stockées dans media/com_blocks/cache/img. L'original reste la solution de repli ; une image modifiée reçoit de nouvelles versions. L'élément Image affiche un <picture> avec srcset/sizes (d'après la largeur de sa colonne), toujours width/height (données média de Joomla, taille de l'élément ou fichier), decoding="async", et se charge en différé — sauf dans la première section de la page, jamais différée, dont la première image est chargée en priorité (fetchpriority="high"). Les images de fond des sections utilisent aussi une version WebP/AVIF, plus petite sur téléphone, et l'affiche d'une vidéo de fond est la version WebP.

Deux nouveaux réglages de l'élément Image : Image décorative (texte alternatif vide, pour les images qui n'apportent rien ; ignoré quand l'image est un lien) et Point focal (la partie qui reste visible quand l'image est recadrée, par exemple avec une largeur et une hauteur).

Les vidéos YouTube ou Vimeo affichent un bouton de lecture (et votre image d'affiche) et ne chargent rien depuis le site vidéo avant que le visiteur appuie dessus ; le lecteur démarre alors à sa place.

Panneau Performance. Le panneau Performance du constructeur (rail à droite) mesure le brouillon non enregistré tel que le site vous le livrerait : CSS de Blocks (gzip, et sa partie critique), scripts chargés par les éléments, éléments du DOM, poids de chaque image telle que servie (et si elle a largeur/hauteur et des déclinaisons) et ressources distantes, chacun face à un budget (alerte / limite).

Les pages de démonstration de référence n'envoient aucune règle de classe inutilisée, aucune ressource distante et environ 2,5 à 2,9 Ko de CSS Blocks (gzip).

API REST et webhooks

Oui Blocks a une API REST (services web Joomla) et des webhooks : d'autres systèmes peuvent lire et modifier les mises en page et être prévenus quand quelque chose change. Les deux suivent les permissions Joomla : l'API ne fait jamais plus que ce que le même utilisateur pourrait faire dans l'administration.

Activation

1. Le paquet installe et active Services web - Oui Blocks (plg_webservices_blocks).
2. L'utilisateur de l'API a besoin de Connexion API (Système → Configuration globale → Permissions, core.login.api), d'un jeton d'API Joomla (Utilisateurs → modifier l'utilisateur → Jeton d'API Joomla ; le plugin Utilisateur - Jeton d'API Joomla décide quels groupes peuvent en avoir un) et de Accès à l'interface d'administration sur Oui Blocks (core.manage).
3. Envoyez le jeton à chaque requête : X-Joomla-Token: <jeton> (ou Authorization: Bearer <jeton>).

curl -H "X-Joomla-Token: $TOKEN" https://example.com/api/index.php/v1/blocks/layouts

Points d'accès

Tous sous /api/index.php/v1/blocks/. Les réponses sont des documents JSON:API (data, meta, links, erreurs en errors[{status, title}]).

Chaque écriture passe par les mêmes contrôles que le constructeur : permissions de l'enregistrement, verrouillage d'édition (check-out), verrous (un nœud verrouillé que l'utilisateur ne peut pas modifier reste tel quel, sinon l'enregistrement est refusé avec son chemin), limites de taille (2 000 nœuds, 12 niveaux, 2 Mo de structure, 256 Ko de CSS — refusé, jamais tronqué), filtres de texte riche et d'URL, une révision et le nettoyage du cache. Les étapes des scénarios sont vérifiées par le formulaire des scénarios et leurs plugins.

Versions : ETag et If-Match

Chaque mise en page (et le design) a une version, renvoyée dans l'en-tête ETag. Renvoyez-la dans If-Match quand vous la modifiez. Si quelqu'un a enregistré entre-temps, vous recevez 412 Precondition Failed : relisez puis refaites votre modification. Sans If-Match, l'écriture est refusée avec 428.

curl -si -H "X-Joomla-Token: $TOKEN" .../layouts/12/structure | grep -i etag      # ETag: "7"
curl -X PUT -H "X-Joomla-Token: $TOKEN" -H 'If-Match: "7"' -H 'Content-Type: application/json' \
  -d '{"structure":{"schema":2,"root":[{"type":"oui/heading","settings":{"text":"Bonjour"}}]}}' \
  .../layouts/12/structure

Autres statuts : 400 requête invalide (attribut inconnu, pas du JSON), 403 non autorisé, 404 introuvable ou non visible pour vous, 409 en cours de modification ou verrouillé, 413 trop volumineux, 422 invalide (trop de nœuds, erreurs de formulaire).

Webhooks

Composants → Blocks → Webhooks (Super utilisateurs / core.admin) : ajoutez un point de terminaison avec son URL et les évènements voulus : mise en page enregistrée (brouillon compris, avec "draft": true dans ses données), publiée (brouillon publié compris), supprimée, révision restaurée, système de design enregistré, scénario enregistré. Chaque point de terminaison reçoit un secret de signature (affiché dans son formulaire, stocké chiffré ; Nouveau secret à l'enregistrement le remplace).

Les envois sont mis en file d'attente et partent par une tâche planifiée : créez-en une dans Système → Tâches planifiées → Nouveau → Oui Blocks - Envoyer les webhooks, chaque minute (l'écran Webhooks prévient tant qu'il n'y en a pas). Un envoi en échec est réessayé après 1, 2, 4… minutes (6 heures au plus) et marqué mort après 8 tentatives ; le Journal des envois montre le statut, le code HTTP et l'erreur de chaque envoi, avec Réessayer pour les envois morts. Le journal garde un mois.

Ce que reçoit un point de terminaison — jamais de contenu, seulement ce qui a changé et où le lire avec votre propre jeton d'API :

{"id":"0f61310e-…","event":"layout.saved","created":"2026-09-29T06:11:34+00:00",
 "data":{"type":"layouts","id":12,"version":8},
 "links":{"self":"https://example.com/api/index.php/v1/blocks/layouts/12"}}

En-têtes : X-Oui-Blocks-Event, X-Oui-Blocks-Delivery (le même identifiant à chaque nouvelle tentative : dédoublonnez dessus), X-Oui-Blocks-Timestamp et X-Oui-Blocks-Signature: sha256=<hex>, où l'hexadécimal est le HMAC-SHA256 de horodatage + "." + corps brut avec le secret du point de terminaison. Vérifiez-le en temps constant et refusez un horodatage éloigné de plus de 5 minutes :

$body = file_get_contents('php://input');
$ts   = $_SERVER['HTTP_X_OUI_BLOCKS_TIMESTAMP'] ?? '';
$ok   = ctype_digit($ts) && abs(time() - (int) $ts) <= 300
     && hash_equals('sha256=' . hash_hmac('sha256', $ts . '.' . $body, $secret), $_SERVER['HTTP_X_OUI_BLOCKS_SIGNATURE'] ?? '');

tests/live/webhook-receiver.php est un récepteur complet pour démarrer.

Sécurité. Les points de terminaison doivent être en https et ne pointer que vers des adresses publiques : bouclage, privées, link-local (métadonnées cloud comprises), NAT opérateur et plages réservées sont refusées, à l'enregistrement puis à chaque envoi. La connexion va à l'adresse vérifiée, les redirections ne sont pas suivies et les requêtes expirent après 10 secondes. Pour un récepteur sur votre propre réseau, ajoutez son nom d'hôte, son IP ou sa plage dans Options → Webhooks → Hôtes internes autorisés (il peut alors aussi utiliser http).

Migrer depuis d'autres constructeurs

Composants → Blocks → Migrations importe les pages construites avec SP Page Builder ou YOOtheme Pro sous forme de nouvelles mises en page non publiées. L'autre constructeur est seulement lu : rien n'y est modifié ni supprimé, vous pouvez comparer les deux versions.

1. Constructeurs de ce site liste chaque constructeur connu d'un plugin de migration : installé ou non, et combien de pages il contient. Les pages SP Page Builder viennent de ses tables ; les pages YOOtheme sont les articles construits avec son constructeur et les templates du constructeur de ses styles de template. Les pages Quix et Gridbox sont détectées et comptées mais pas encore converties (leurs formats de stockage ne sont pas documentés ; un convertisseur suivra une fois validé sur de vrais exports).
2. Cochez des pages et lancez une Simulation. Rien n'est écrit ; pour chaque page :
3. Couverture : la part des éléments d'origine (lignes, colonnes, add-ons / éléments) convertis, entièrement ou avec une perte signalée. Le reste devient un substitut.
4. Ce qui est perdu, par type d'élément : lettrine, visionneuse, icône de bouton, onglets affichés en panneaux dépliables…
5. Médias : trouvés sous images/, à copier (les fichiers ailleurs sur le site sont copiés dans images/oui-imported/<constructeur>/, sans jamais écraser), manquants (le chemin est gardé : déposez le fichier) ou externes (gardés en lien).
6. Design : les couleurs égales à l'un de vos jetons de design deviennent ce jeton (var(--oui-primary)…), les polices sont listées (chargez-les dans votre template), et les espacements, couleurs et arrière-plans des sections, lignes et colonnes deviennent des classes réutilisables (sppagebuilder-1a2b3c, partagées par les styles identiques ; il faut la permission Système de design, sinon ils restent sur les éléments).
7. Importer la sélection : une page après l'autre, avec une barre de progression et un lien pour ouvrir chaque nouvelle mise en page dans le constructeur. Chaque page est importée dans une transaction de base de données : en cas d'échec, rien n'est créé (ni mise en page, ni classe, ni fichier copié).
8. Imports liste ce qui a été importé. Annuler l'import supprime la mise en page, ses révisions, les classes créées par l'import (sauf si une autre mise en page les utilise) et les fichiers copiés. L'annulation est refusée dès que vous avez modifié la mise en page, pour ne rien perdre de votre travail : supprimez-la vous-même si vous n'en voulez plus.

Importer un fichier exporté accepte un export de page SP Page Builder ou un fichier de mise en page YOOtheme (.json, 5 Mo au plus), par exemple d'un autre site ; ses médias sont recherchés sur ce site.

Substituts

Le contenu sans équivalent Oui Blocks (un compte à rebours, un tableau de prix d'un autre constructeur, du HTML brut avec scripts ou iframes, un module choisi par identifiant, un élément YOOtheme alimenté par plusieurs articles…) est gardé comme élément Non converti : les visiteurs ne voient rien ; dans le constructeur il indique ce qu'il était et pourquoi, et ses réglages contiennent les données d'origine pour le reconstruire à la main. Supprimez-le ensuite.

Ce qui est converti

Le bouton Importer du constructeur (section 11) utilise les mêmes convertisseurs pour un fichier, ajouté à la mise en page ouverte : les styles restent sur les éléments et aucun fichier n'est copié.

Dépannage

L'aperçu en direct reste vide

Votre site interdit d'être affiché dans un cadre : autorisez X-Frame-Options SAMEORIGIN et Content-Security-Policy frame-ancestors 'self'.

Un élément d'une autre extension Oui n'apparaît pas

Activez son plugin « Blocks - … » dans Système → Plugins (il l'est à la première installation du paquet).

Un scénario ne se déclenche pas

Connecté en administrateur, ajoutez ?oui_scenarios_debug=1 à l'adresse : la console explique chaque décision. OuiBlocks.scenarios.reset() efface les visites comptées.

Un enregistrement est refusé

Un élément verrouillé a été modifié, ou la mise en page a changé depuis son ouverture : rechargez, puis refaites la modification.

Mise à jour et désinstallation

Avant une mise à jour, sauvegardez les fichiers et la base de données et lisez le journal des modifications. Les mises à jour conservent vos mises en page, classes, scénarios et réglages ; une mise à jour ne réactive pas un plugin que vous avez désactivé. La désinstallation du paquet retire le composant, ses plugins et le module.