MevvBlocks — Documentation Mevvsoft

Installation

MevvBlocks exige WordPress 6.0 ou plus récent et PHP 8.1 ou plus récent. Il n’y a aucune autre dépendance : pas de bibliothèque externe, pas de police servie depuis le serveur d’un tiers, pas d’étape de build.

Téléversez l’extension et activez-la.
Ouvrez une page dans l’éditeur de blocs et ajoutez le bloc Conteneur.
Placez-y les blocs que vous voulez. Vous les trouverez dans la catégorie Design.
Gérez le reste depuis le menu MevvBlocks dans la barre latérale d’administration.

WooCommerce est facultatif. L’installer ajoute deux blocs.
MevvBridge est facultatif. Si vous venez d’Elementor, c’est MevvBlocks qui rend ces pages de nouveau modifiables.
MevvLegal est facultatif. S’il est présent, le bloc carte lui confie son intégration afin que la carte ne soit pas chargée avant le consentement du visiteur.

Pro est une extension distincte installée à côté de la version gratuite, et elle déclare l’extension gratuite comme une exigence stricte. Votre clé de licence se saisit sur l’écran Lisans. En l’absence de Pro, MevvBlocks n’adresse aucune requête à nos serveurs.

Un style par taille d’écran — l’écart que cela comble

Les blocs natifs acceptent une valeur de marge intérieure, une hauteur minimale, un nombre de colonnes. Cette valeur s’applique sur tous les écrans. Si une section a besoin de 100 pixels de marge sur ordinateur et de 40 sur mobile, le cœur ne sait pas l’exprimer — et c’est précisément cet écart qui est la raison technique la plus courante d’installer un constructeur de pages.

MevvBlocks enregistre trois valeurs au lieu d’une — ordinateur, tablette, mobile. Les seuils sont fixes :

Ordinateur: Aucune media query — la valeur de base.
Tablet: S’applique à 1024 pixels et en dessous.
Mobile: S’applique à 767 pixels et en dessous.

Les deux mêmes nombres sont utilisés partout ailleurs dans l’extension — le seuil du menu hamburger, les nombres de colonnes de la grille. Un champ libre en pixels n’a délibérément pas été proposé : quelqu’un qui choisirait 900 obtiendrait le hamburger à 900 alors que sa marge intérieure changerait encore à 1024, et deux systèmes de points de rupture donnent des mises en page en désaccord avec elles-mêmes.

Les valeurs vivent dans les attributs propres au bloc, à l’intérieur de post_content — pas dans une table dédiée ni dans les metas d’article. Le CSS est produit sur le serveur, au moment de la requête, et imprimé sous forme d’un petit bloc de style à côté de l’élément auquel il appartient.

Pourquoi ne pas enregistrer le CSS avec la page ? Parce que du HTML enregistré ne peut porter qu’un seul point de rupture. C’est le rendu à la requête qui rend trois valeurs possibles — et c’est pourquoi une licence expirée ne peut jamais éteindre une page publiée : il n’y a pas une seule vérification de licence sur ce chemin.

L’aperçu de l’éditeur — ce qu’il montre, et ce qu’il ne peut toujours pas

Cette page disait autrefois que l’aperçu était une approximation. Pour la mise en page, ce n’est plus le cas. Le canevas demande désormais au serveur le même CSS que la page imprimera, et l’applique aux mêmes classes d’enveloppe que le front-end.

Ce qui est exact dans le canevas aujourd’hui : la mise en page du conteneur (direction, colonnes, espacement, alignement), la marge intérieure, la marge extérieure, l’arrière-plan, la bordure, le rayon, l’ombre, la hauteur minimale, la typographie, les transformations, les masques et le positionnement — les valeurs tablette et mobile s’appliquant au redimensionnement, car le canevas est une iframe et les media queries y fonctionnent.

Pourquoi le CSS vient du serveur au lieu d’être reconstruit en JavaScript : il n’y a qu’un seul moteur de styles, et une seconde copie finirait par diverger de la première. Le jour où quelqu’un ajouterait un réglage à l’un en oubliant l’autre, l’éditeur serait faux tout en prétendant être exact — pire que l’ancienne approximation honnête.

Ce qui n’est toujours pas exact : les règles qui visent le balisage à l’intérieur d’un bloc. Dans le canevas, un bloc dessine ses propres poignées d’édition, si bien qu’un sélecteur écrit pour la structure du front-end n’a rien à cibler. Combler cela signifie rendre le balisage d’édition identique au balisage publié pour chacun des cent dix blocs ; c’est un vrai travail et il n’est pas fait.

Mesuré, pas affirmé : la même section a été rendue deux fois sous la même feuille de style — une fois telle que le front-end l’imprime, une fois telle que le canevas la construit — et seize propriétés de mise en page ont été comparées sur chaque élément. L’ancien canevas différait sur vingt-quatre d’entre elles. C’est désormais zéro sur soixante-quatre. L’outil qui le mesure est dans le code source de l’extension (tools/onizleme-esitlik.js), et il a d’abord été pointé sur l’ancien balisage pour prouver qu’il n’était pas aveugle.

Les blocs

Cent dix blocs, ou quatre-vingt-sept sans WooCommerce. Tous sont dans l’édition gratuite sauf les trois marqués Pro ci-dessous ; aucun autre bloc n’est réservé à Pro. Ils vivent dans la catégorie Design de l’insérateur, et les clés de réglage que chacun enregistre sont listées dans docs/BLOK-AYARLARI.md à l’intérieur de l’extension — un fichier généré, il ne peut donc pas s’écarter du code.

Les groupes ci-dessous sont les mêmes cinq que l’extension utilise pour ses propres pages de démonstration.

Texte et action: Conteneur, Titre, Texte, Bouton, Séparateur, Espaceur, Ancre, Image, Code court, Citation, Liste de contrôle, Code, Appel à l’action, Icône, Boîte d’icône, Liste d’icônes, Titre animé, Alerte, Bascule, Onglets imbriqués avec panneaux d’onglet, Onglets, Accordéon, FAQ, Étapes
Données et tarifs: Compteur, Barre de progression, Barre de données, Diagramme circulaire, Boîte de nombre, Tableau de tarifs, Liste de prix, Témoignage, Notation par étoiles, Carrousel de témoignages, Membre d’équipe, Compte à rebours, Badge, Bande de logos, Sélecteur de contenu et Panneau de sélecteur (Pro)
Portfolio et carte: Chronologie, Tableau, Comparaison, Table des matières, Carte, Grille de contenu, Plan du site, Portfolio (Pro)
Médias et formulaires: Vidéo, Audio, Liste de lecture, Galerie, Avant / Après, Boîte retournable, Bannière, Point chaud, Infobulle, Flux social, Icônes sociales, Partage social, Slider, Diapositives, Texte sur un tracé, Panneau latéral, Boutons de contact, Barre d’annonce, Progression de lecture, Temps de lecture, Retour en haut, Formulaire, Formulaire de connexion, Formulaire d’inscription, Infolettre, Formulaire de recherche, Menu de navigation, Lottie (Pro)
Design et mouvement: Animation SVG, Boîte d’image, Copyright, et les huit styles de bloc décrits ci-dessous. Le mouvement n’est pas un bloc : un panneau d’animation d’entrée, de position collante et de parallaxe est ajouté à chaque bloc MevvBlocks.
Modèles de site et de thème: Logo du site, Titre du site, Slogan du site, Titre de la page, Fil d’Ariane, Informations de l’article, Boîte d’auteur, Commentaires, Précédent / Suivant, Titre d’archive, Description d’archive
WooCommerce (23): Produits, Catégories de produits, Images du produit, Titre du produit, Prix du produit, Note du produit, Description courte, Description du produit, Méta du produit, Informations complémentaires, Onglets du produit, Ajouter au panier, État du stock, Produits similaires, Ventes incitatives, Ventes croisées, Mini-panier, Panier, Commande, Mon compte, Suivi de commande, Tri des produits, Nombre de résultats — ajoutés seulement quand WooCommerce est actif

Une note sur les plus récemment ajoutés, car chacun porte une décision visible sur la page :

Bascule: Un <details> natif qui accepte n’importe quels blocs à l’intérieur et peut être imbriqué dans une autre bascule. Réglages : baslik (le texte du résumé) et acik (ouvert au chargement). Aucun id n’est nécessaire, donc deux bascules sur la même page ne peuvent pas entrer en collision.
Onglets imbriqués et Panneau d’onglet: Un groupe d’onglets dont les panneaux sont des blocs internes ordinaires, un panneau peut donc contenir n’importe quoi — y compris un autre groupe d’onglets. Réglages du groupe : yon (horizontal ou vertical) et acik (l’onglet ouvert au chargement) ; chaque panneau a un baslik. La barre d’onglets porte le motif d’onglets ARIA avec les flèches, Origine et Fin, et les ids sont rendus uniques par groupe pour que l’imbrication soit sûre. Seuls les panneaux enfants directs appartiennent à un groupe. Une barre verticale devient horizontale sur un écran étroit.
Diagramme circulaire: Circulaire ou en anneau (tur), lignes écrites sous la forme « étiquette | valeur | couleur facultative » dans satirlar, plus un baslik. Le cercle est dessiné avec stroke-dasharray et porte role="img" ; les mêmes valeurs sont imprimées en dessous sous forme de liste de texte avec leurs pourcentages, car un diagramme que personne ne peut lire est une décoration. Il ne s’anime pas.
Liste de lecture: Audio ou vidéo (tur), avec un baslik et un répéteur de pistes : dosya, baslik, sure, poster et altyazi (une piste WebVTT). Chaque piste est imprimée comme un lien ordinaire, la liste est donc utilisable avant qu’aucun script ne s’exécute ; avec le script, choisir une piste remplace la source sur place.
Flux social: Des publications que vous choisissez à la main, disposées en sutun colonnes. Chaque élément a adres, metin, tarih et gorsel. Il n’y a aucun adaptateur d’API, aucun jeton et aucune requête vers un réseau — c’est une liste de liens, et l’extension le dit plutôt que de laisser croire à un flux en direct.
Infobulle: metin est le mot dans votre phrase, ipucu l’explication, konum le côté vers lequel elle s’ouvre. C’est un vrai bouton avec role="tooltip" sur la bulle : le survol et le focus sont gérés en CSS, le toucher en script, et Échap la ferme. La bulle est masquée avec visibility plutôt que retirée, ainsi la relation de description reste dans l’arbre d’accessibilité.
Animation SVG: dosya est le SVG, durgun une image fixe, alt le texte alternatif et genislik la largeur. Le fichier est rendu dans un <img>, délibérément : ainsi un script à l’intérieur d’un SVG ne peut pas atteindre votre page. Un <picture> substitue l’image fixe quand le visiteur a demandé un mouvement réduit.
Alerte, Titre animé, Chronologie, Tableau, Boîte retournable: L’alerte peut recevoir un bouton de fermeture (kapatilabilir) et déplace le focus vers l’élément suivant à la fermeture ; son type et son titre sont modifiables. Le titre animé choisit sa balise (baslik_etiketi, h1–h6, p, div ou span) et peut taper ses mots (etki) — le premier mot est toujours imprimé, et les deux effets s’arrêtent sous mouvement réduit. La chronologie accepte une disposition horizontale (yon) qui revient à la verticale sur un écran étroit sans changer l’ordre de lecture. Les cellules d’en-tête du tableau portent scope="col" et une cellule vide imprime un tiret avec un libellé pour lecteur d’écran. La boîte retournable se retourne au toucher, avec Entrée et Espace, et Échap la remet en place.
Sélecteur de contenu (Pro): Une barre d’onglets — typiquement mensuel et annuel — au-dessus de Panneaux de sélecteur qui contiennent n’importe quels blocs. Réglages : etiket (le nom accessible de la barre), rozet (un badge, par exemple une économie) et acik ; chaque panneau a un baslik.
Portfolio (Pro): gonderi_turu, taksonomi, terimler, adet, sutun, suzgec (afficher le filtre) et arsiv_bag (lien vers l’archive). Les cartes sont rendues sur le serveur et le filtre ne fait que les masquer et les afficher dans le navigateur, aucune requête ne quitte donc la page. Il n’y a ni modale ni pagination.
Lottie (Pro): adres, alt, baslik, durgun (une image fixe), onay et onay_metni. LottieFiles est un service extérieur, le bloc suit donc le même chemin de consentement que la carte et la vidéo : il montre l’image fixe jusqu’à ce que le visiteur accepte, et sous mouvement réduit il ne joue jamais. La bibliothèque du lecteur n’est toujours pas fournie.

Rien ici n’est caché quand JavaScript ne se charge pas. Les onglets montrent chaque panneau, la bascule et l’accordéon sont des éléments details natifs, le slider défile, la liste de lecture est une liste de liens, et les flèches sont imprimées masquées jusqu’à ce que le script puisse les piloter — montrer un bouton qui ne fait rien, c’est montrer une interface cassée. Un contenu caché est un contenu inaccessible. Les boutons et les liens d’action ont une taille de cible minimale de 44 pixels.

Styles de bloc

Huit styles sont enregistrés via le register_block_style de WordPress lui-même, ils apparaissent donc dans le panneau Styles que l’éditeur affiche déjà pour un bloc sélectionné. Il n’y a aucun nouveau contrôle à apprendre, et le choix est stocké comme une classe is-style-… dans votre balisage plutôt que comme un réglage dans une table à nous.

Superposition en dégradé: Conteneur, Image, Boîte d’image, Bannière, Slider
Niveaux de gris, couleur au survol: Image, Boîte d’image, Membre d’équipe, Bande de logos, Galerie
Flou jusqu’au survol: Image, Boîte d’image, Bannière
Masque circulaire / Masque arrondi: Image, Boîte d’image, Membre d’équipe — et, pour le masque arrondi, Bannière et Galerie
Élévation au survol: Conteneur, Boîte d’icône, Boîte d’image, Tableau de tarifs, Membre d’équipe, Témoignage, Appel à l’action, Bannière
Zoom de l’image au survol: Image, Boîte d’image, Bannière, Galerie
Inclinaison au survol: Boîte d’icône, Boîte d’image, Bannière, Boîte de nombre

Toute transformation au survol est désactivée quand le système du visiteur demande un mouvement réduit. Appliquer un style exige que l’enveloppe du bloc porte la classe, c’est pourquoi la couche de rendu retire désormais l’attribut className du cœur du balisage intérieur et l’imprime sur l’enveloppe à la place ; les pages converties avec MevvBridge n’ont jamais porté cet attribut, elles ne sont donc pas concernées.

Le bloc d’infolettre

Un champ d’adresse, un champ de nom facultatif (ad_alani), une case à cocher de consentement et un bouton d’envoi. Les textes sont les vôtres : baslik, metin, dugme_metni, onay_metni et basari_metni.

C’est un POST simple signé avec un HMAC, pas avec un nonce. Un nonce est lié à la session et à douze heures ; derrière un cache de page entière, un nonce expiré tue le formulaire en silence. La signature est la même que celle du moteur de formulaires.
Un champ pot de miel est avalé en silence. Afficher une erreur apprendrait au bot suivant à éviter le piège.
Une limite de fréquence s’applique par adresse.
La règle de consentement est lue dans le contenu même du bloc, jamais dans le formulaire envoyé — la lire dans un champ caché mettrait le réglage entre les mains du visiteur.
Les adresses sont stockées avec vos autres envois de formulaire, sous une clé bulten:. Il n’y a aucune liste à nous ni aucune requête vers un tiers.

Pour remettre une adresse confirmée à ce que vous utilisez déjà, accrochez-vous à l’action :

add_action( 'mevvblocks_newsletter_subscribe', function ( $eposta, $ad, $blok_kimligi ) {
    // $eposta       : l’adresse confirmée
    // $ad           : le nom, ou une chaîne vide quand le champ est désactivé
    // $blok_kimligi : de quel bloc d’infolettre elle provient
}, 10, 3 );

L’action se déclenche après que l’adresse a été validée et stockée, un échec dans votre gestionnaire ne peut donc pas perdre l’inscription.

Texte dynamique et champs personnalisés

Les blocs Titre, Texte, Bouton et Image peuvent prendre leur valeur dans l’article plutôt que dans ce que vous avez tapé. Le panneau s’appelle Dynamique, et les sources sont une liste fixe : titre de l’article, extrait, auteur, date, première catégorie, étiquettes, nombre de commentaires, titre d’archive, terme de recherche, nom et slogan du site, l’année en cours, le prix WooCommerce, l’UGS et le stock — et un champ personnalisé par clé.

Avec Advanced Custom Fields actif, le champ est lu via get_field(), vous obtenez donc la valeur formatée plutôt que la valeur brute. Sans ACF, cela retombe sur les métadonnées simples de l’article, et rien ne casse dans un cas comme dans l’autre.
Les clés commençant par un tiret bas sont refusées. Ce sont les champs internes de WordPress ; les imprimer divulguerait ce que la page n’a jamais voulu montrer.
Il n’y a aucun champ « exécuter cette expression ». Cela remettrait l’exécution de code à quiconque peut modifier une page.

Pendant que vous modifiez un modèle de carte de boucle, il n’y a pas de contexte d’article, une liaison dynamique montre donc sa valeur de repli statique au lieu d’une valeur. C’est le modèle, pas la page.

Grille de contenu et constructeur de boucle

Le bloc Grille de contenu interroge les articles, pages ou produits et les met en page. La pagination repose sur de simples liens, elle fonctionne donc avec JavaScript désactivé.

Le tri est une liste fixe — date, date de modification, titre, ordre de menu, aléatoire — parce que la valeur atteint la base de données.
Les titres de cartes vont de h2 à h6. h1 n’est pas proposé : une grille de cartes sur une page qui a déjà un h1 romprait l’ordre des titres.
Un lien par carte. Faire de l’image, du titre et du « lire la suite » autant de liens revient à faire annoncer trois fois la même cible par un lecteur d’écran.
La grille met en cache les identifiants d’articles trouvés, jamais le HTML rendu, et le cache est invalidé dès qu’un article est enregistré — « j’ai publié un article et il n’apparaît pas » ne peut donc pas arriver.

Le constructeur de boucle vous laisse dessiner la carte vous-même au lieu d’utiliser celle intégrée. Vous créez un modèle de type Carte de boucle, vous le construisez avec des blocs ordinaires et des liaisons dynamiques, puis vous le choisissez dans les réglages de la grille.

Pendant que vous modifiez un modèle de carte, il n’y a pas de contexte d’article : les liaisons dynamiques affichent donc leurs valeurs de repli statiques. Et si le modèle est vide, supprimé, laissé en brouillon ou qu’il se référence lui-même, la grille revient à la carte intégrée plutôt que de n’imprimer rien. L’imbrication des boucles est plafonnée à deux niveaux.

Le moteur de formulaires

Seize types de champs, avec validation côté serveur. Le formulaire est la seule partie d’une page qui fait réellement quelque chose : il fonctionne donc sans JavaScript — un envoi POST ordinaire reçoit la même validation et les mêmes messages qu’un envoi piloté par script.

Types de champs: Texte, E-mail, Téléphone, Adresse (URL), Nombre, Date, Heure, Masqué, Texte long, Menu déroulant, Liste à choix multiple, Choix unique, Cases à cocher multiples, Case à cocher, Texte du consentement (KVKK) et Sous-titre. Pro ajoute un champ d’envoi de fichier.
Où vont les envois: À la fois dans une table dédiée et par e-mail. L’enregistrement est écrit d’abord et le message envoyé ensuite, car la remise d’un e-mail échoue bien plus souvent qu’une écriture en base.
Les consulter: MevvBlocks → Envois de formulaire. Pro y ajoute un export CSV.
E-mail de notification: L’expéditeur est votre site, jamais le visiteur. Utiliser l’adresse du visiteur comme expéditeur est de loin la raison la plus fréquente pour laquelle un e-mail de formulaire n’arrive jamais — SPF et DMARC le rejettent. Son adresse devient le Reply-To à la place.

Le spam est traité par trois couches et aucun CAPTCHA : une signature qui ne dépend pas d’une session, un temps de remplissage minimal et un champ pot de miel. Un envoi qui remplit le pot de miel est accepté en silence puis jeté — afficher une erreur dirait au robot qu’il a été repéré, et la tentative suivante éviterait ce champ.

Pourquoi une signature plutôt qu’un nonce WordPress ? Un nonce est lié à une session et à une fenêtre de douze heures. Sur un site mis en cache, le même HTML est servi pendant des heures ou des jours, le nonce qu’il contient a expiré depuis longtemps, et le formulaire cesse silencieusement de fonctionner. C’est la panne de terrain la plus courante des extensions de formulaires. La signature utilisée ici est valable sept jours et ne dépend pas de qui navigue.

L’adresse IP d’un envoi n’est jamais conservée sous forme lisible — seulement une empreinte, salée avec la clé de votre propre site, afin que les enregistrements de deux sites différents ne puissent pas être rapprochés.

Le stockage des envois n’est pas lié à la licence. S’il l’était, le jour où un paiement expire serait le jour où le client commencerait à perdre des données.

Modèles de thème

Sept types de modèles, construits dans l’éditeur WordPress que vous utilisez déjà — En-tête, Pied de page, Contenu individuel, Archive, Résultats de recherche, Introuvable (404) et Carte de boucle. Un second éditeur serait une chose de plus à maintenir au rythme du cœur de WordPress.

Le type et les conditions se trouvent dans une boîte de barre latérale ordinaire, pas dans un panneau React — une boîte classique s’enregistre aussi avec JavaScript désactivé, et elle ne casse pas quand l’API de l’éditeur change.

Conditions: Tout le site, la page d’accueil, un type de publication, une catégorie ou un contenu unique. Laissez-les vides pour tout le site.
Quand plusieurs correspondent: La condition la plus étroite l’emporte.
Conditions mal formées: Rejetées à l’enregistrement et stockées vides, plutôt que conservées comme du texte invalide qui empêcherait silencieusement le modèle d’apparaître.

Les modèles d’en-tête et de pied de page ne sont placés que sur Astra et GeneratePress. Si votre thème n’a pas de recette, ils ne sont pas imprimés du tout et l’écran le dit — accrocher un en-tête à un thème que nous ne pouvons pas soulever, c’est deux en-têtes garantis. Les modèles de vue unique, d’archive, de recherche et de 404 fonctionnent avec n’importe quel thème, car ils remplacent la boucle et laissent en place l’en-tête et le pied de page du thème.

Un modèle Carte de boucle ne se place jamais nulle part de lui-même. C’est un bloc de grille qui le choisit.

Bibliothèque de compositions et préréglages de blocs

Soixante-seize motifs prêts à l’emploi : soixante-quatre sections et douze pages complètes. Ils sont enregistrés comme des motifs WordPress ordinaires : vous les insérez donc comme vous le savez déjà — le bouton +, l’onglet Motifs, puis la catégorie MevvBlocks sections ou MevvBlocks pages. Les sections couvrent les familles héros, fonctionnalité, témoignage, FAQ, tarifs, appel à l’action, contact, à propos, bandeau avant pied de page et statistiques ; les pages ajoutent trois variantes de page d’accueil, une page FAQ, une page de campagne, une page récit et une page de remerciement.

Aucune fenêtre modale spécifique n’a été écrite pour cela. L’insertion native offre déjà l’aperçu, la recherche, la navigation au clavier et la traduction, et ce qu’elle insère est du balisage de blocs ordinaire — rien qui vous enferme.

Neuf d’entre eux exigent WooCommerce : huit sections produit et catégorie, plus une page d’accueil de boutique. Ils vivent dans leur propre fichier et ne sont enregistrés que tant que WooCommerce est actif, si bien qu’un site sans boutique ne se voit jamais proposer un motif qui insérerait un bloc qu’il ne sait pas dessiner. Les produits qu’ils contiennent proviennent d’une requête — nouveautés, mis en avant, en promotion, meilleures ventes — et non d’un identifiant de catégorie inscrit dans le motif, car le même identifiant tombe sur une catégorie vide ou tout simplement fausse dans une autre boutique.

Les compositions sont livrées sans images. Aller chercher des images ailleurs pose une question de droit d’auteur, une question de confidentialité, et cela lie l’apparence de votre page au fait que le serveur d’un tiers reste en ligne. Les blocs image sont en place avec leur texte alternatif rempli ; choisissez les vôtres.

Les préréglages de blocs enregistrent les réglages d’apparence d’un bloc sous un nom et les appliquent à un autre bloc du même type. Le contenu n’est délibérément pas enregistré — texte, liens, images et éléments de liste sont retirés, si bien qu’appliquer un préréglage n’écrase jamais ce que vous avez écrit.

Les compositions ne sont pas du tout enregistrées côté public. Générer leur balisage à chaque affichage de page a été mesuré à 109 Ko et 3,59 ms — payé pour rien, puisque personne n’insère une composition en lisant.

Pop-ups

Construites dans l’éditeur de blocs comme tout le reste ; les déclencheurs, les conditions et la fréquence se trouvent dans la colonne latérale du même écran. Gérées sous MevvBlocks → Fenêtres surgissantes.

Déclencheurs: Au chargement de la page avec un délai, à un pourcentage de défilement, à l’intention de sortie, sur un clic correspondant à un sélecteur CSS, ou après une durée d’activité. Le compteur d’activité s’arrête tant que l’onglet est en arrière-plan.
Conditions: Tout le site, la page d’accueil, des pages précises, un type de publication ou une catégorie ; connectés, déconnectés ou tout le monde ; et par appareil.
Fréquence: À chaque fois, une fois par session, ou une fois tous les N jours.
Apparence: Position, largeur, affichage ou non du titre, fermeture au clic à l’extérieur, et animation d’ouverture.

Le compteur « ne plus afficher » est conservé dans le navigateur du visiteur, pas sur le serveur. Le compter côté serveur reviendrait à créer une identité durable pour chaque visiteur, juste pour éviter de lui montrer une boîte deux fois.

Le ciblage par appareil est décidé par le navigateur, pas en reniflant l’agent utilisateur. Un agent utilisateur ne distingue pas de façon fiable une tablette d’un téléphone, et derrière un cache de page entière il servirait à tout le monde l’appareil du premier visiteur. Si aucun déclencheur n’est sélectionné, la pop-up retombe sur le chargement de la page ; si aucun appareil n’est sélectionné, sur les trois — une pop-up qui n’apparaît jamais en silence est pire qu’une pop-up qui apparaît trop souvent.

La palette du site

Un seul écran pour les couleurs et la typographie, accessible à la fois depuis le menu MevvBlocks et depuis Apparence, parce que c’est là que les gens le cherchent. Chaque entrée affiche son propre nom de variable, et les blocs renvoient à ces noms plutôt qu’à des valeurs littérales.

C’est précisément ce qui permet à une page construite avant la bascule de reprendre une nouvelle palette au lieu de perdre ses références — les noms de variables restent ceux que vos pages utilisent déjà.

Il n’y a pas de suppression. Un jeu de couleurs ou de typographie peut rester vide, mais le supprimer laisserait chaque bloc qui y renvoyait pointer vers le vide. Vider est réversible ; supprimer une référence ne l’est pas.

L’audit d’accessibilité

MevvBlocks → Accessibilité analyse vos pages, articles et modèles publiés et signale ce que chaque bloc a laissé de côté : une image sans texte alternatif, un titre vide, un bouton sans nom ou sans destination, un ordre de titres cassé, un contraste trop faible.

Le même audit est disponible sous forme de panneau latéral pendant que vous modifiez encore, là où une anomalie coûte le moins cher à corriger.

Ce n’est délibérément pas une surcouche. Les couches qui boulonnent un « menu d’accessibilité » sur une page ne corrigent rien : une image sans texte alternatif n’en a toujours pas, et un texte peu contrasté reste illisible. Porter l’affirmation « ce site est accessible » sans que ce soit vrai est une position pire que de ne rien affirmer — des sites utilisant des surcouches ont été poursuivis pour exactement cela. Cet outil mesure et vous le dit ; la correction vous revient.

Le contraste n’est signalé que lorsque les deux couleurs sont réellement connues. Deviner une couleur héritée produirait des avertissements sur lesquels vous ne pouvez pas agir.

Vitesse — cache des éléments et images

Deux choses distinctes, toutes deux dans l’édition gratuite.

Cache des éléments. La sortie des blocs est stockée au lieu d’être reconstruite à chaque requête. Mesuré : temps de rendu des blocs en baisse de 33 à 72 %. Il utilise un cache d’objets persistant (Redis, Memcached) quand il en existe un, et des transients sinon.

Un bloc dont la sortie varie selon le visiteur, la requête ou le moment n’est jamais stocké : formulaires, connexion, inscription, mini-panier, grille de produits, recherche, panier, paiement, mon compte, code court. Le code court est sur cette liste parce que nous ne savons pas ce qu’il contient — nous avons figé un jeton WPForms sur un site en production, une fois, et la règle est appliquée depuis lors dans le code source.

Optimisation des images. Une copie WebP (et éventuellement AVIF) de chaque image téléversée est écrite à côté de l’original ; l’original n’est jamais touché. Mesuré : 39 à 78 % plus léger. Un fichier qui ne rétrécit pas n’est pas conservé — les petits PNG à aplats grossissent généralement en WebP.

Les images sont servies dans un élément <picture> : l’adresse de chaque format figure dans le HTML et le navigateur choisit. Décider sur le serveur à partir de l’en-tête Accept a été délibérément écarté — quand la même adresse varie selon le visiteur, chaque cache du chemin peut remettre le mauvais fichier à la mauvaise personne.

Si une autre extension fait réellement ce travail (LiteSpeed, ShortPixel, Imagify, Smush, EWWW, Optimole, Converter for Media), MevvBlocks s’efface de lui-même et dit pourquoi. La question n’est pas « est-elle installée » mais « peut-elle vraiment fonctionner » : LiteSpeed avec l’optimisation d’images activée mais sans clé cloud ne fait strictement rien.

Core Web Vitals — mesurés chez vos visiteurs

Les Core Web Vitals sont par définition des données de terrain : mesurées dans les navigateurs de vrais visiteurs, rapportées comme le 75e centile sur une fenêtre de 28 jours. Un test Lighthouse est autre chose — une machine, un réseau, un moment. Savoir lequel est lequel, c’est ce qui tranche la confusion « PageSpeed dit 98, la Search Console dit rouge ».

L’écran Web Vitals affiche trois chiffres par classe d’appareil :

LCP: Le temps que met le contenu principal à apparaître. Bon, c’est 2,5 secondes ou moins.
CLS: De combien la page bouge pendant qu’elle se stabilise. Bon, c’est 0,1 ou moins.
INP: Le temps que met la page à répondre à un appui ou à un clic. Bon, c’est 200 ms ou moins.

Le script de mesure fait environ un kilo-octet et ne charge aucune bibliothèque — c’est le PerformanceObserver du navigateur qui fait le travail. L’échantillonnage est réglé par défaut sur 10 % des visites et c’est le navigateur qui décide, pas le serveur : si le serveur décidait, la même URL produirait deux documents HTML différents et un cache de page entière servirait à tout le monde celui qu’il a vu en premier.

Aucune donnée personnelle n’est collectée : pas d’IP, pas de cookie, pas d’identifiant. Trois valeurs, une classe d’appareil et le chemin de la page, stockés sur votre propre serveur sous forme de comptes par intervalles. Rien n’est envoyé où que ce soit.

En dessous de cent échantillons, l’écran n’affiche aucun chiffre — il indique plutôt combien il en a. Un centile calculé sur une douzaine de mesures n’est que du bruit, et un chiffre faux est pire qu’aucun chiffre, car quelqu’un agira dessus. Le centile est lu dans un histogramme : il est donc approché à la largeur d’intervalle près, et l’écran le dit.

Transformations et masques

N’importe quel bloc peut être translaté, mis à l’échelle, pivoté (Z et 3D X/Y), incliné et retourné — chacun avec des valeurs distinctes pour l’ordinateur, la tablette et le mobile. Une transformation de survol distincte et une durée de transition peuvent être définies.

Les masques peuvent être un cercle, un triangle, un hexagone, un blob, une fleur, une forme dessinée à main levée ou votre propre image, avec des réglages de taille, de position et de répétition.

Les formes sont intégrées au CSS, elles ne sont pas livrées comme des fichiers SVG séparés. Un mauvais chemin de fichier fait disparaître un masque en silence et personne ne voit le 404 ; derrière un CDN, l’adresse du dossier de l’extension peut en outre changer.

Code personnalisé pour tout le site

Le HTML, le CSS et le JavaScript peuvent être placés dans le head, au début du body ou à la fin : balises de vérification, extraits de mesure, petites corrections de style. La position, la priorité et une condition de session sont configurables.

Il n’exécute pas de PHP. Mettre un exécuteur PHP dans un constructeur de pages transformerait la permission d’un designer en permission d’exécuter du code sur le serveur.

La capacité requise est unfiltered_html : quelqu’un qui ne peut pas mettre un script brut dans un article ne peut pas non plus en mettre un à l’échelle du site. Avec MevvLegal installé, les scripts de suivi placés ici sont eux aussi retenus jusqu’au consentement aux cookies.

Blocs WooCommerce

Vingt-trois blocs : titre du produit, images, prix, ajouter au panier, évaluation, stock, méta, description courte, description, onglets de données, informations complémentaires, produits associés, ventes incitatives, ventes croisées, panier, paiement, mon compte, suivi de commande, tri et nombre de résultats — plus produits, catégories de produits et un mini-panier.

Aucun d’eux ne redessine WooCommerce. Tous appellent ses propres fonctions de gabarit et ses codes courts. Votre thème modifie ces gabarits et vos extensions s’y greffent — livraison, paiement en plusieurs fois, alertes de stock, guides des tailles. Dessiner notre propre balisage ferait tomber tout cela en silence.

Panier, paiement, mon compte et suivi de commande sont propres au visiteur : la mise en cache de page entière est désactivée et ils ne sont jamais mis en cache au niveau de l’élément. Si WooCommerce n’est pas actif, ces blocs ne sont enregistrés ni sur le serveur ni dans l’éditeur.

Notes d’éditeur

Vous pouvez épingler une note à n’importe quel bloc : qui l’a écrite, quand, et si elle est résolue.

Les notes ne sont JAMAIS imprimées sur la page. Il n’existe pas un seul hook front-end dans ce fichier et un test le garantit. Les notes sont une conversation interne ; qu’un visiteur les voie serait pire qu’une mise en page cassée.

Une note est liée à l’identité du bloc. Dupliquer un bloc donne à la copie une NOUVELLE identité : elle n’hérite donc pas de la note — et, avantage secondaire, elle obtient sa propre portée CSS.

Les notes vivent dans les données propres à l’article : supprimez l’article et les notes partent avec lui, sans laisser de lignes orphelines.

L’IA dans l’éditeur — avec votre propre clé

Rédiger, réécrire, raccourcir, générer le texte alternatif des images et traduire. Anthropic et OpenAI sont pris en charge.

Vous saisissez VOTRE PROPRE clé d’API et la requête part de votre site DIRECTEMENT vers le fournisseur. Votre texte ne nous parvient jamais ; le quota et la facture restent les vôtres. Nous n’avons pas construit notre propre service cloud : votre texte transiterait alors par nos serveurs et la responsabilité des données deviendrait la nôtre.

La clé n’atteint jamais le navigateur — la requête est faite depuis le serveur. Elle n’est renvoyée par aucun point d’entrée non plus ; même le formulaire de réglages ne réaffiche pas la valeur.

Nous NE chiffrons PAS la clé, et nous le disons franchement : sous WordPress, la clé de chiffrement doit se trouver sur le même serveur, donc un attaquant ayant accès à la base obtient les deux. La qualifier de « chiffrée » promettrait une protection qui n’existe pas.

Le résultat n’est pas écrit d’emblée dans le bloc ; il arrive sous forme de suggestion et vous l’appliquez. C’est là notre véritable défense contre une phrase enfouie dans votre contenu qui serait lue comme une instruction — un humain valide.

Lire le theme.json du thème

Un thème de blocs déclare déjà sa palette et sa typographie dans theme.json. MevvBlocks peut lire ce fichier et s’en servir pour remplir les emplacements vides de sa propre palette de site, si bien que les couleurs que vous choisissez dans un bloc sont les couleurs que le thème utilise déjà, et non un second jeu concurrent.

Le pont est à sens unique et le reste. Rien n’est jamais réécrit dans theme.json. Une extension qui modifie le fichier propre du thème vous laisse un fichier que la mise à jour du thème écrasera — et aucun moyen de dire lequel des deux avait raison. Elle ne remplit d’ailleurs que les emplacements que vous avez laissés vides : une couleur que vous avez posée à la main n’est jamais remplacée.

C’est désactivé jusqu’à ce que vous l’activiez, parce qu’un site qui a déjà une palette ne veut pas la voir discrètement repointée vers celle du thème.

Le méga-panneau

Un sous-menu peut s’ouvrir en panneau pleine largeur sur quatre colonnes au maximum au lieu d’un menu déroulant étroit. Ce n’est pas un nouveau bloc — c’est un réglage du bloc de navigation que vous utilisez déjà, donc le menu garde son balisage, son comportement au clavier et sa mise en page mobile.

Activez le panneau sur un élément de menu qui n’a pas de sous-menu et le contrôle d’accessibilité le dit. Un panneau vide n’est pas un petit défaut cosmétique : c’est une commande qui s’annonce à un lecteur d’écran et ne contient ensuite rien.

Un premier jet de page, à partir d’une phrase

Décrivez la page que vous voulez et le modèle choisit des sections dans la bibliothèque de compositions de l’extension. Il n’écrit jamais de balisage : il renvoie une liste de clés de section, et MevvBlocks rend ces sections lui-même. Ce qui arrive sur la page, ce sont donc des blocs ordinaires que vous pouvez modifier, pas du HTML généré à nettoyer.

Une clé de section que le modèle invente n’existe pas dans la bibliothèque, elle est donc écartée — et l’écran vous dit qu’elle a été écartée au lieu de produire discrètement une page plus courte.
La page est toujours créée en brouillon. Il n’existe aucun chemin de code qui la publie.
Elle utilise la même clé que celle que vous avez saisie pour les outils d’IA de l’éditeur : votre propre clé Anthropic ou OpenAI, stockée sur votre site, la requête allant directement de votre serveur au fournisseur.

Free et Pro

L’édition gratuite est le produit entier : cent sept des cent dix blocs, les huit styles de bloc, les modèles de thème, la grille et le constructeur de boucles, le moteur de formulaires avec son magasin d’envois, le formulaire d’infolettre, le texte dynamique y compris les champs ACF, le menu, la recherche, les pop-ups, la bibliothèque de compositions, les préréglages de blocs, la palette globale, l’optimisation des images, la mise en cache des blocs, le code personnalisé pour tout le site, les notes de l’éditeur, l’écran Core Web Vitals et l’audit d’accessibilité.

Pro ajoute des capacités d’édition, pas de rendu :

Points de rupture — les onglets ordinateur / tablette / mobile, avec la hauteur minimale, la largeur du contenu, la largeur et les quatre valeurs de marge intérieure par point de rupture.
CSS personnalisé par bloc, où le jeton selector désigne ce bloc lui-même.
Options de formulaire — champs conditionnels, réponse automatique à l’expéditeur, webhook et champ de téléversement de fichier.
Export CSV des envois de formulaire.
Trois blocs — le sélecteur de contenu avec ses panneaux, le portfolio avec un filtre par taxonomie, et l’intégration Lottie. Leur rendu ne vérifie jamais la licence non plus : une page qui les porte déjà continue de les imprimer.

Les panneaux de points de rupture et de CSS personnalisé apparaissent aujourd’hui sur les blocs principaux — Conteneur, Titre, Texte, Bouton, Séparateur, Image, Témoignage, Icône, Encadré d’icône, Liste d’icônes, Code court, Formulaire, Produits et Catégories de produits. Plusieurs réglages par point de rupture sont gratuits partout où ils existent : le nombre de colonnes de la grille sur tablette et mobile, le seuil du menu hamburger, la position mobile de l’encadré d’image et le choix d’appareil de la position collante.

Quand une licence expire ou est absente :

Votre site a exactement la même apparence. Chaque valeur tablette et mobile enregistrée continue d’être imprimée, et chaque règle CSS personnalisée par bloc aussi. Ce n’est pas une promesse, c’est une règle d’architecture : aucun fichier du chemin de rendu ne s’interroge sur la licence, et un test le vérifie à chaque version.
Les formulaires continuent d’être envoyés, d’être enregistrés et d’expédier des e-mails.
Les pop-ups existantes continuent de s’afficher.
Ce que vous perdez, ce sont les panneaux Pro dans l’éditeur — et rien d’autre.

Si nos serveurs sont injoignables, une licence active continue de fonctionner pendant sept jours. Une installation qui ne s’est jamais vérifiée avec succès n’obtient aucun délai de grâce : bloquer notre adresse n’est pas un moyen d’obtenir Pro.

Quand quelque chose ne fonctionne pas

« La session du formulaire a expiré. »: La copie en cache de cette page a plus de sept jours, ou les clés de sécurité de votre site ont été renouvelées. Videz le cache de page.
Le formulaire n’envoie pas d’e-mail: Vérifiez d’abord la liste des envois — l’enregistrement est écrit avant l’e-mail : s’il est là, le formulaire a fonctionné et c’est la remise qui a échoué. Vérifiez ensuite l’adresse du destinataire et la configuration de messagerie de votre site.
La page est correcte dans l’éditeur et fausse sur le front-end: L’aperçu de l’éditeur est approximatif par conception ; voir plus haut. Le front-end fait foi. Si un bloc porte des valeurs tablette ou mobile, l’éditeur affiche un avis en ce sens.
Un bloc se dit invalide quand j’essaie de le modifier: Historiquement, cela arrivait aux blocs enregistrés sur le serveur mais absents du script de l’éditeur — ils s’imprimaient parfaitement et n’échouaient qu’à l’ouverture pour édition. Un test protège désormais contre cela ; si vous le voyez encore, signalez le nom du bloc.
Le compte à rebours affiche la mauvaise heure: Le balisage porte un instant cible absolu, jamais « X secondes restantes » : une page mise en cache ne peut donc pas le figer. Le bloc se corrige sur l’horloge du serveur ; si cette requête est bloquée, il retombe sur l’horloge du visiteur plutôt que d’échouer.
Le modèle d’en-tête ou de pied de page ne s’affiche pas: Votre thème n’a pas de recette. Seuls Astra et GeneratePress peuvent être soulevés ; l’écran vous prévient. Les autres types de modèles fonctionnent avec n’importe quel thème.
Deux en-têtes sont apparus: MevvBlocks et MevvBridge en produisent chacun un. MevvBlocks prend la place en premier, délibérément — laissez l’en-tête à l’un des deux.
Les conteneurs sont plus larges ou plus étroits que défini: Une règle du thème l’emporte par la spécificité. Astra en particulier habille fortement ses descendants. Cela a été corrigé pour les cas mesurés en augmentant la spécificité plutôt qu’en utilisant !important ; si vous en rencontrez un nouveau, dites-nous quel thème.
Un article publié n’apparaît pas dans une grille: Il le devrait pourtant. La grille ne met en cache que les identifiants d’articles et tout article enregistré l’invalide. Si cela persiste, vérifiez que le type de publication et le tri sont bien ceux que vous attendez.

Mises à jour

Les mises à jour passent par WordPress lui-même. L’extension demande à notre boutique s’il existe une version plus récente et remet la réponse au flux de mise à jour propre à WordPress : une nouvelle version apparaît donc sur l’écran des extensions avec un bouton Mettre à jour ordinaire, au lieu d’attendre que quelqu’un télécharge un zip à la main. Dans l’édition gratuite, cette requête ne porte que le nom du paquet et la version installée — aucune adresse de site, aucune adresse e-mail, aucune clé de licence et aucun inventaire d’extensions. Comme rien n’y permet de vous identifier, la confiance repose sur la signature : la réponse est signée avec notre clé Ed25519, et une réponse non signée, mal signée, rejouée depuis un horodatage ancien ou pointant le téléchargement vers un autre hôte que le nôtre est écartée sans toucher au site.

Limites

L’aperçu de l’éditeur est exact pour la mise en page, pas pour tout. Le canevas produit le même CSS que le site public : espacements, arrière-plan, bordures, typographie, transformations et position correspondent. Ce qui diffère encore, c’est toute règle écrite pour le balisage à l’intérieur d’un bloc, car le canevas y dessine ses propres outils d’édition.
Les modèles d’en-tête et de pied de page ne fonctionnent que sur Astra et GeneratePress. Tout autre thème n’obtient rien, plus un avertissement — le silence, ce serait deux en-têtes.
La carte est une intégration OpenStreetMap. Un marqueur, pas d’image de marqueur personnalisée, pas de style de carte, pas d’itinéraires. Pas de clé d’API, pas de compte de facturation, et aucune clé dans le code source de votre page.
Le portfolio n’a ni modale ni pagination. Des cartes, un filtre et un lien vers l’archive — c’est tout le bloc.
Le flux social n’a pas d’adaptateur d’API. C’est une liste de liens que vous choisissez à la main ; rien n’est récupéré depuis un réseau, et aucun jeton n’est stocké.
Il n’y a aucune animation liée au défilement ni aucune règle qui empêche deux effets d’entrer en collision. Les effets d’entrée, de parallaxe et de survol existent, et tous sont silencieux sous mouvement réduit.
Le diagramme circulaire ne s’anime pas, et il n’est pas interactif : les valeurs sont imprimées en liste à côté plutôt qu’affichées au survol.
Aucune surcouche d’accessibilité. Mesure et signalement, uniquement.
Aucun CAPTCHA.
Pas de recherche en direct. Une requête par frappe est une dépendance et une surface de limitation de débit.
Le compte à rebours utilise le fuseau horaire du site, pas celui du visiteur. Une campagne se termine au même instant partout dans le monde.
Le menu propose deux points de rupture, pas une valeur libre en pixels, et n’a ni mode fly-out ni mode hors-canevas — un panneau coulissant avec gestion du focus, c’est précisément à quoi sert le bloc pop-up.
Les cartes de grille ne peuvent pas être des h1, et l’imbrication des boucles s’arrête à deux niveaux.
Le jeu d’icônes compte 94 icônes au trait, toutes dessinées dans une même boîte de 24 pixels. Il n’y a pas de police d’icônes ni de moyen d’ajouter les vôtres au sélecteur ; un SVG à vous entre par le bloc Image ou Animation SVG.
Le contenu dynamique provient d’une liste fixe de sources. Il n’existe pas de champ « exécute cette expression » : cela donnerait l’exécution de code à quiconque peut modifier une page.
Les jeux globaux de couleurs et de typographie ne peuvent pas être supprimés, seulement vidés.
Les cartes produit sont dessinées par WooCommerce, pas par nous : votre thème et les hooks tiers continuent donc de fonctionner.
L’interface est livrée en onze langues. Turc, anglais, espagnol, allemand, français, portugais, italien, néerlandais, japonais, russe et polonais, plus des variantes régionales comme es_MX et pt_PT. Toute autre langue retombe sur l’anglais.
La fenêtre Web Vitals se réinitialise tous les 28 jours ; elle ne glisse pas. Une fenêtre glissante exigerait des intervalles quotidiens et vingt-huit fois plus de stockage. L’écran indique quand la fenêtre en cours a commencé.
La désinstallation ne supprime ni la table des envois ni les réglages. Le contenu de vos blocs reste lisible dans tous les cas — c’est du balisage standard dans post_content.

Aucune bibliothèque JavaScript ou CSS tierce n’est chargée, nulle part. Ni pour le carrousel, ni pour l’accordéon, ni pour le mouvement, ni pour la carte. Chacune aurait coûté entre quarante et cent kilo-octets sur chaque page qui l’utilise.

Cent pixels sur ordinateur, quarante sur mobile — dans l’éditeur de blocs.