Méthode 08 · UnblockWP — page builder Gutenberg-natif

WPF/LAB ● VERSION 2026.06 ★ MÉTHODE BONUS · UnblockWP ↻ DÉMO WEBINAR
PAGE BUILDER GUTENBERG-NATIF LICENCE · LIFETIME fr_FR
FILE · methode-08-unblock.md · BONUS · 7+1 · v2026.06

Un seul bloc UnblockWP .
Un design illimité .

✦ Ce paragraphe vient d'être réécrit en direct par Claude Code, connecté à l'éditeur via le MCP UnblockWP — sans toucher au clavier de WordPress. Le bloc wp:unblock/element transforme Gutenberg en véritable page builder : un unique bloc, des variables CSS centralisées, une édition 100 % native. La méthode bonus (+1) du benchmark, en démo live...

HYPOTHÈSE · Un page builder Gutenberg-natif peut atteindre le design Direction B sans quitter l'éditeur WordPress. H1
VARIABLES · 1 bloc universel · 28 variables CSS · sélecteurs réutilisables · 0 shortcode propriétaire VAR
OUTPUT · Cette page · démo éditable live · article UnblockWP à venir sur WPFormation. OUT
1
bloc Gutenberg unique
28
variables CSS centralisées
8
méthodes comparées (7+1)
0
shortcode propriétaire
// 01.intro · pourquoi un bloc unique

Gutenberg + UnblockWP :
le bloc qui fait tout.

Là où les autres méthodes empilent des dizaines de blocs ou collent du HTML brut, UnblockWP expose un seul bloc capable de devenir n'importe quel élément. Le design Direction B reste 100 % éditable dans l'éditeur WordPress, sans builder propriétaire ni abonnement.

PULL · 01

« Le test ultime : reconstruire à l'identique le design des 7 méthodes, mais avec UnblockWP. Verdict en direct au webinar. »

— Fabrice · WPFormation
NOTE 1 — UnblockWP fera l'objet d'un article complet sur WPFormation. Cette page sert de démonstration : on l'édite, on montre la mécanique du bloc, on liste avantages et inconvénients.
FIG.01 · LE BLOC wp:unblock/element ÉDITABLE · GUTENBERG
// markup
<!-- wp:unblock/element {
"tagName":"section",
"attrs":{"class":"hero",
"style":"background:var(--b-ink)"},
"content":"…"
} /-->
★ CE QU'ON MONTRE EN LIVE
Éditer un titre
5/5
Changer une couleur
5/5
Dupliquer une section
4/5
Annuler (Ctrl+Z)
5/5
// 02.piliers

4 piliers d'évaluation.

Les mêmes 4 dimensions que pour les 7 méthodes — pour situer honnêtement UnblockWP.

PILIER · 01 01/04

Éditabilité native

La page reste-t-elle modifiable depuis l'éditeur Gutenberg, sans toucher au code ?

WEIGHT · 25%
PILIER · 02 02/04

Qualité du design

Le rendu tient-il à hauteur d'un site pro ? Typo, hiérarchie, rigueur visuelle.

WEIGHT · 25%
PILIER · 03 03/04

Indépendance

Combien de plugins payants / services tiers la méthode impose-t-elle ?

WEIGHT · 25%
PILIER · 04 04/04

Reproductibilité

La méthode est-elle scriptable, transmissible, répétable ?

WEIGHT · 25%
// 03.benchmark · 7 méthodes + 1 bonus · scoring 0—5

les 7 méthodes,
scorées + 1 bonus .

MÉTHODE ÉDIT. DESIGN INDÉP. REPRO. TOTAL
01
Gutenberg natif
Builder par défaut
Pur Gutenberg, 0 plugin tiers, 0 CSS.
« Maximum éditable, minimum visuel. »
5
2
5
4
4.0 / 5
02
Gutenberg + CSS
La méthode WPFormation
Gutenberg natif + CSS page-level.
« Structure native, finition CSS par page. »
5
5
4
5
4.75 / 5
03
HTML monobloc
Custom HTML
Un seul bloc Custom HTML.
« Beau mais inéditable. »
1
5
5
2
3.25 / 5
04
HTML multi-blocs
Custom HTML × 10
Dix blocs HTML, un par section.
« Éditable section par section. »
3
5
5
3
4.0 / 5
05
Spectra Pro
Builder tiers
Blocs Spectra + configuration UI.
« Rapide, dépend d'un plugin payant. »
4
4
2
4
3.5 / 5
06
Gutenberg pur + CSS
core/html style
Blocs natifs + CSS dans un bloc core/html.
« Aboutie et simple à reprendre. »
5
5
5
5
5.0 / 5
07
Blocs PHP custom ★
★ LA RETENUE
Plugin de blocs PHP WP 7.0 autoRegister.
« Design verrouillé, édition non-destructive. »
5
5
5
5
5.0 / 5
08
UnblockWP
+1 BONUS · PAGE BUILDER
Un seul bloc wp:unblock/element. Cette page.
« Page builder Gutenberg-natif — exploré en bonus, hors classement. »
5
5
4
4
+1 bonus
↳ M·08 UnblockWP = bonus hors classement (page builder, autre catégorie) SOURCE · LAB-WPF-2026 ↗
// 04.équipe · 3 contributeurs

qui a fait tourner les tests.

01 · HUMAN ★ HUM

Fabrice

Formateur WordPress · WPFormation

Fondateur de WPFormation (2006). Pilote le benchmark des 7+1 méthodes × Claude Code.

CONTRIB.
7+1
RÔLE
lead
02 · HUMAN ★ HUM

Alexandra

Stagiaire · WPFormation

Stagiaire WordPress. Son projet de fin de formation a inspiré le benchmark.

CONTRIB.
7+1
RÔLE
stagiaire
03 · AGENT ★ AI

Claude Code

Agent de développement

Reconstruit cette page bonus en UnblockWP, pousse le design Direction B plus loin.

CONTRIB.
7+1
RÔLE
agent
// 05.verdict · méthode bonus

un bloc, tout le design.

UnblockWP rejoue le design Direction B des 7 méthodes — en restant éditable dans Gutenberg. Avantages, limites et démo en direct au webinar.

// 06 · stress-test

On l'a poussé à fond .

Le même test que sur notre install jetable : charge, dynamique, sécurité, performance. Quatre axes, quatre verdicts — où UnblockWP tient, où il plie.

AXE · A FONCTIONNEL

Dynamique

LOOPS · CONDITIONS · FORMS
94
  • Query Loop end-to-end
  • Conditions JSONLogic OK
  • Forms : honeypot + token + rate-limit
AXE · B ROBUSTE

Robustesse

CHARGE · SÉCURITÉ
90
  • 10 000 blocs sans crash
  • Aucun 500, erreurs gérées
  • Sanitization capability-gated
AXE · C NUANCÉ

Autonomie

THÈME · PLUGIN · MAJ
68
  • Indépendant du thème
  • Lock-in = le plugin
  • MAJ propriétaire licenciée
AXE · D SOBRE

Performance

CSS · JS · CACHE
88
  • Tree-shaking du CSS
  • Seuil 50 Ko inline→externe
  • JS front constant 24 Ko
10 000
blocs · 0 crash
24
Ko de JS, point
50
Ko seuil inline→externe
4
axes poussés à la rupture
// preuves vivantes

Cette section est une démo live .

Pas une capture : rendu en direct par le moteur d'UnblockWP — Query Loop sur les articles réels du site, conditions JSONLogic, bindings Twig.

LIVE · QUERY LOOP — ARTICLES RÉELS

> get_posts({'post_type':'post','posts_per_page':4}) résolu côté serveur

post

Nouvel Article YOAST

Apprendre WordPress simplement, c’est souvent jongler entre grammaire, créativité,...

Condition JSONLogic — version publique (anonyme). Connecté, ce bloc se remplace automatiquement.
Binding Twig — page servie par Site de Test WPFormation, dernière modification le juin 3, 2026.
// le jugement

Ce qui impressionne. Les réserves .

CE QUI IMPRESSIONNE
  • Robuste — 10 000 blocs, scaling quasi-linéaire, zéro crash.
  • Dynamique réel — loops, conditions, bindings, forms en live.
  • CSS propre — tree-shaking, inline < 50 Ko, externe cacheable.
  • Code sain — GPL-3.0, sanitization dédiée, désinstallation propre.
LES VRAIES RÉSERVES
  • Sanitization gated — admin & editor (mono-site) bypassent.
  • Lock-in plugin — désactivé, la page se vide.
  • MAJ propriétaire — serveur externe + licence active.
  • /settings REPLACE — un POST écrase tout le dictionnaire.
// making-of · édité en direct via MCP

Cette section n'a pas été tapée à la main dans l'éditeur : elle a été ajoutée en direct par Claude Code connecté au serveur MCP d'UnblockWP. Claude Code dialogue avec le site via le WordPress MCP Adapter (HTTP), qui expose les abilities unblock/* du plugin — get-context pour lire l'arbre de blocs, insert-blocks / update-content / create-styles pour le modifier.

Le pont complet : Claude Code → MCP Adapter → abilities UnblockWP → éditeur Gutenberg. Chaque appel agit sur la session de l'onglet ouvert, et les modifications apparaissent en direct, sous nos yeux, dans l'éditeur — aperçu live, annulation (Ctrl+Z) disponible, et rien n'est écrit en base tant qu'on n'a pas cliqué « Mettre à jour ». Ce que vous lisez ici a justement été inséré ainsi : l'IA pilote le page builder en temps réel.

Édition en direct via MCP : éditeur WordPress à gauche, Claude Code à droite ⤢ Cliquez pour agrandir — capture réelle : éditeur WordPress (gauche) + Claude Code (droite), piloté via MCP

Retour en haut