WordPress 7.1 · core/group
<!-- wp:group {"style":{"spacing":{"padding":
{"top":"100px","bottom":"100px"}
}}} -->Une seule valeur. Elle vaut 100 pixels à 1440, et elle vaut toujours 100 pixels à 390.
BLOCKS
Édition gratuite disponible
MevvBlocks
De l’en-tête au pied de page, dans l’éditeur de blocs.
L’éditeur de blocs de WordPress est rapide et natif, mais il ne peut pas donner à une même mesure une valeur distincte pour l’ordinateur, la tablette et le mobile — vérifié à nouveau sur WordPress 7.1, et c’est la raison technique la plus fréquente d’installer un constructeur de pages. MevvBlocks comble cet écart, puis va plus loin : cent un blocs, des modèles de thème de l’en-tête au pied de page, une grille d’articles et un constructeur de boucles, un moteur de formulaires, des popups, des transformations et des masques, du code personnalisé pour tout le site, un seul écran pour la palette du site, le WebP et l’AVIF pour vos images, une mise en cache au niveau du bloc, un audit d’accessibilité qui vous dit la vérité au lieu de la masquer, et un écran Core Web Vitals alimenté par vos propres visiteurs. Le canevas n’est plus une approximation non plus : l’éditeur demande au serveur le CSS que la page imprimera, si bien que ce que vous disposez est ce qui part en production. Vingt de ces blocs sont destinés à WooCommerce, et aucun ne redessine WooCommerce : ils appellent ses propres modèles, pour que votre thème et vos extensions continuent de fonctionner.
L’écart
Un bloc natif ne peut retenir qu’un seul nombre.
Quand vous donnez une marge intérieure à une section dans l’éditeur de blocs, cette valeur est un nombre unique. Le même nombre est imprimé sur un écran de 1440 pixels et sur un téléphone de 390. L’espacement qui paraît juste sur un ordinateur coupe la page en deux sur un téléphone, et les réponses habituelles sont du CSS écrit à la main ou un constructeur de pages. Voici la troisième réponse : le même réglage, avec une valeur tablette et une valeur mobile à côté.
MevvBlocks · mevvsoft/container
<!-- wp:mevvsoft/container {"ayarlar":{
"padding": {"top":"100","unit":"px"},
"padding_tablet": {"top":"64", "unit":"px"},
"padding_mobile": {"top":"40", "unit":"px"}
}} -->Le même réglage, trois valeurs. Rien d’autre ne change dans le bloc.
Ce que le serveur imprime
.e-con-1a2b { --padding-top:100px }
@media (max-width:1024px) { .e-con-1a2b { --padding-top:64px } }
@media (max-width:767px) { .e-con-1a2b { --padding-top:40px } }Le HTML enregistré ne peut porter la valeur que d’une seule taille d’écran ; le CSS est donc produit au moment de la requête — ce qui explique aussi pourquoi ces valeurs continuent de s’imprimer lorsqu’une licence expire.
- Ordinateur 100 px
- Tablette · ≤1024 64 px
- Mobile · ≤767 40 px
Le fait que les blocs natifs ne peuvent pas faire varier une valeur selon la taille d’écran a été vérifié sur WordPress 7.1 lui-même, et non repris de la documentation : core/group prend en charge la marge intérieure, l’arrière-plan, la hauteur minimale, les bordures et la disposition flex ou grid — chacune comme une valeur unique. Les limites d’écran ci-dessus sont celles de l’extension, et les media queries sont celles qu’elle écrit réellement.
Fonctionnalités
Cela commence par le téléphone. Cela ne s’arrête pas là.
Un site a besoin de plus que de l’espacement : un formulaire de contact, un en-tête et un pied de page qu’il peut encore modifier, une palette qu’il peut encore changer. Que vous partiez d’une page vide ou que vous arriviez d’un constructeur de pages, dans les deux cas chacun de ces éléments existe parce que quelque chose cassait sans lui.
Chaque mesure, par taille d’écran
Une marge intérieure, une taille de police, un nombre de colonnes peut porter une valeur distincte pour l’ordinateur, la tablette et le mobile. Le cœur de WordPress ne le peut pas — cela a été mesuré sur la 7.1, pas supposé. Le même panneau sort aussi un élément du flux avec un positionnement absolu ou fixe, et ses décalages comme son z-index sont eux aussi propres à chaque appareil.
Cent un blocs
Mise en page, texte et médias ; menu, recherche, grille d’articles et constructeur de boucle ; logo du site, titre de page, fil d’Ariane, informations d’article et encadré auteur pour les modèles de thème ; vidéo, galerie, tableau, FAQ, chronologie et code ; flip box, appel à l’action, titre animé, avant/après, points chauds, panneau hors-canevas et boutons de contact — plus vingt pour WooCommerce, de la galerie produit au panier et à la page de paiement. Soixante-dix-huit sans WooCommerce.
Ce que vous voyez dans l’éditeur est ce que la page imprime
Le canevas ne montre plus une approximation : marge intérieure, espacement, direction, alignement, arrière-plan, rayon, ombre, transformation et position apparaissent avec les valeurs que le front-end utilisera. Un seul moteur de styles produit ce CSS et l’éditeur le récupère auprès du serveur — écrire un second moteur en JavaScript nous aurait donné deux copies qui divergent. Mesuré : l’ancien canevas différait de la page sur 24 propriétés de mise en page ; c’est désormais zéro sur 64.
Core Web Vitals, mesurés chez vos vrais visiteurs
Le LCP, le CLS et l’INP sont mesurés dans les navigateurs des personnes qui visitent votre site, et ce que l’écran affiche est le 75e centile sur une fenêtre de 28 jours — des données de terrain, celles que regarde la Search Console, pas un test en laboratoire. En dessous de cent échantillons, aucun chiffre n’est affiché, car un centile calculé sur une poignée de mesures n’est que du bruit. Aucune adresse IP, aucun cookie, aucun identifiant n’est collecté, et les données ne quittent jamais votre propre serveur.
L’IA avec votre propre clé
Rédiger, réécrire, raccourcir, traduire et générer le texte alternatif des images. 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 et le quota reste le vôtre. Le résultat arrive sous forme de suggestion, il n’est pas écrit d’emblée dans le bloc.
Des notes que vos visiteurs ne voient jamais
Épinglez une note à n’importe quel bloc pour votre équipe, marquez-la comme résolue, supprimez-la. Elle vit dans l’éditeur et il n’existe pas un seul hook front-end qui pourrait l’imprimer.
Plus rapide, et mesuré
La sortie des blocs est mise en cache et les images sont converties en WebP ou AVIF à côté des originaux — les originaux ne sont jamais touchés. Mesuré : temps de rendu des blocs en baisse de 33 à 72 %, poids des images en baisse de 39 à 78 %. Les images sont servies via un élément <code><picture></code> pour que tout le monde reçoive le même HTML ; décider par visiteur sur le serveur, c’est précisément ce qui empoisonne un cache de page. Vous pouvez aussi servir une image différente sur les téléphones — pas une copie plus petite de la même, une autre prise de vue — et c’est toujours le navigateur qui choisit.
Un moteur de formulaires, pas une dépendance
Seize types de champs, une validation sur le serveur, un pot de miel avalé en silence, et un écran où les envois sont conservés. Le formulaire fonctionne sans JavaScript, car c’est la seule partie de la page qui fait réellement quelque chose.
Des modèles de thème avec conditions
En-tête, pied de page, vue unique, archive, recherche et 404 — construits dans l’éditeur WordPress que vous utilisez déjà, pas dans un second que nous devrions maintenir au pas avec le cœur de WordPress.
Des pop-ups qui survivent à la bascule
Ouverture au chargement, à une profondeur de défilement, à l’intention de sortie, sur un clic ou après une période d’inactivité. La fréquence est comptée dans le navigateur du visiteur lui-même, si bien que personne n’a besoin d’être identifié sur le serveur.
Un seul écran pour la palette du site
Couleurs et typographie au même endroit, sous leurs noms de variables d’origine — pour que les pages construites avant la bascule reprennent la nouvelle palette au lieu de perdre leurs références.
Un audit d’accessibilité, pas une surcouche
Aucun widget n’est boulonné sur la page pour prétendre que le site est accessible. L’outil signale ce que chaque bloc a oublié — texte alternatif manquant, ordre des titres rompu, contraste faible — pendant que vous êtes encore en train de modifier.
Carrousel, onglets et accordéon sans bibliothèque
Le défilement est un scroll-snap natif et l’accordéon est un élément details. Si le script ne se charge jamais, rien n’est masqué : un contenu masqué est un contenu inaccessible.
Rendu sur le serveur, jamais lié à la licence
Le HTML enregistré ne peut porter la valeur que d’une seule taille d’écran ; le CSS est donc produit au moment de la requête. Il n’y a pas une seule vérification de licence sur ce chemin — une licence expirée n’éteint jamais une page publiée.
Comment ça marche
L’éditeur ordinaire, avec les commandes d’un constructeur.
Pas de second canevas, pas d’application séparée. Vous sélectionnez un bloc et le panneau de droite vous donne ce qu’un constructeur de pages offrirait — pour l’ordinateur, la tablette et le mobile séparément.
Sélectionnez un bloc, le panneau est juste là
Type de disposition, direction, hauteur minimale, largeur du contenu, alignement, espacement. Des blocs ordinaires dans l’éditeur ordinaire — rien de nouveau à apprendre, et votre contenu reste du balisage de blocs standard dans post_content.
Transformations, masques et notes d’équipe sur chaque bloc
Rotation, échelle, inclinaison, symétrie et masque — chacun avec des valeurs distinctes pour l’ordinateur, la tablette et le mobile. Et une note épinglée au bloc pour votre équipe : elle vit dans l’éditeur et n’est jamais imprimée sur la page.
Et cela fonctionne vraiment sur la page
Une flip box sur une vraie page : la face avant, la face arrière et un bouton qui fonctionne aussi au clavier — l’enregistrement ci-dessous est une vraie page, pas une maquette. Le bloc est rendu sur le serveur, si bien qu’une licence expirée ne l’éteint jamais.
Et il vous dit ensuite ce que vos visiteurs ont réellement vécu
LCP, CLS et INP mesurés dans les navigateurs de visiteurs réels, présentés au 75e centile sur 28 jours — des données de terrain, celles que regarde la Search Console, pas un test en laboratoire. L’écran ci-dessous provient d’une installation réelle : remarquez la cellule qui refuse d’afficher un nombre, parce que quatorze échantillons ne font pas un centile.
Images : WebP et AVIF, sans toucher aux originaux
Un seul écran. Un fichier qui ne rétrécit pas n’est pas conservé. Et si une autre extension fait vraiment ce travail, MevvBlocks se retire de lui-même et explique pourquoi — la question n’est pas « est-elle installée » mais « peut-elle réellement s’exécuter ».
Nous l’utilisons pour notre propre boutique
mevvshop.com est une vraie boutique WooCommerce et ses pages sont construites avec ces blocs — en-tête, pied de page, fiches produit et tout le reste. Chaque chiffre de cette page y a été mesuré, ou sur notre installation de démonstration, et non estimé.
Mesuré
Des chiffres que nous avons comptés, pas des chiffres que nous avons arrondis.
Chaque chiffre ci-dessous peut être compté dans le code source de l’extension. Là où un nombre sonnerait comme une promesse de performance, il n’est pas avancé : le poids d’une page dépend du thème, de l’hébergement et du cache, et nous n’avons pas mesuré le vôtre.
- 101
- blocs — 78 sans WooCommerce installé
- 3.217
- vérifications dans la suite de tests, toutes réussies
- 16
- types de champs de formulaire, plus un champ fichier dans Pro
- 6
- types de modèles : en-tête, pied de page, contenu unique, archive, recherche, 404
- 5
- déclencheurs de popup : chargement, défilement, sortie, clic, inactivité
- 48
- icônes fournies, dessinées dans une même boîte de 24 pixels
- 29.828
- octets de HTML figé que les blocs menu, boîte image, icônes sociales et copyright ont rendus de nouveau modifiables sur notre propre boutique
- 0
- différences de mise en page entre le canevas de l’éditeur et la page publiée, sur 64 propriétés comparées
- 0
- vérifications de licence sur le chemin de rendu — imposées par un test
Comptés dans le code source de l’extension le 1er septembre 2026. Pour donner l’échelle, et rien de plus : les éditions gratuite et Pro pèsent 1,5 Mo et 46 Ko de PHP, de JS et de CSS, tandis qu’Elementor, Ultimate Addons et Header Footer Elementor occupaient ensemble 178 Mo sur le disque de l’installation que nous avons mesurée le 31 août. C’est une différence de surface, pas une affirmation sur la vitesse — et une bonne part vient simplement des fonctionnalités que nous n’avons pas. Ce qui parvient au visiteur est un autre nombre, plus petit : 20 Ko de CSS et 5 Ko de JavaScript sur une page.
Tarifs
Tous les prix sont TTC.
Une licence expirée n’éteint jamais une page. Les valeurs écrites par le panneau d’édition Pro continuent d’être imprimées par l’édition gratuite, et le formulaire continue de recevoir des envois. Ce qui se ferme, c’est le panneau d’édition, pas l’apparence du site.
1 USD = 49,5932 ₺ (İşbank)
Pour commencer
De l’en-tête au pied de page, dans l’éditeur de blocs.
Installez l’édition gratuite : les blocs, les formulaires, les modèles de thème, les popups et dix-neuf sections et pages prêtes à l’emploi y sont déjà. Pro ajoute le panneau qui permet de modifier les valeurs ordinateur, tablette et mobile. Ce que vous perdez, c’est le panneau, pas l’apparence du site : si la licence expire, ces valeurs continuent de s’imprimer.
Informations produit
- Type de produit
- Pack de blocs pour WordPress
- Ce que c’est
- Un constructeur de pages dans l’éditeur de blocs
- Blocs
- 101, ou 78 sans WooCommerce
- Édition gratuite
- Blocs, formulaires, modèles de thème, pop-ups, styles globaux, optimisation des images, cache des blocs, code personnalisé, audit d’accessibilité
- Pro
- Panneau ordinateur/tablette/mobile, CSS personnalisé par bloc, logique conditionnelle de formulaire et champ fichier
- Ce que le visiteur télécharge
- 20 Ko de CSS + 5 Ko de JS sur une page — mesuré sur la page d’accueil de wp-demo, le 1er septembre 2026
- Taille du code source
- Free 1,5 Mo + Pro 46 Ko de PHP, JS et CSS, le 1er septembre 2026
- Prérequis
- WordPress 6.0+, PHP 8.1+