wp·reactor

Prêt à démarrer avec Wp Reactor App ?

Un conseiller vous rappelle sous 24h, sans engagement.

Être rappeléVoir les tarifs

Prêt à démarrer avec Wp Reactor App ?

Un conseiller vous rappelle sous 24h, sans engagement.

Être rappeléVoir les tarifs

Des blocs Gutenberg générés, pas écrits à la main

Un schéma produit le bloc WordPress, le renderer React et le typage TypeScript.

Lire la docVoir le dépôt
blocks/schemas/spec-list.json
{
  "slug": "spec-list",
  "attributes": {
    "heading": { "ui": "TextInput", "label": "Titre" },
    "columns": { "ui": "Select", "default": "two" }
  }
}

Des blocs Gutenberg générés, pas écrits à la main

Un schéma produit le bloc WordPress, le renderer React et le typage TypeScript.

Lire la docVoir le dépôt

Du schéma au bloc rendu

Une seule étape est manuelle : le renderer.

  1. 01Schéma

    Tu décris le bloc

    Un JSON déclare les attributs et leur contrôle éditeur.

    {
  "slug": "spec-list",
  "attributes": {
    "heading": { "ui": "TextInput", "label": "Titre" },
    "columns": { "ui": "Select", "default": "two" }
  }
}
  2. 02Génération

    La commande écrit les sept fichiers

    Le registre et l'import éditeur sont câblés au passage.

    $ pnpm gen:block apps/webapp/src/blocks/schemas/spec-list.json
  3. 03Renderer

    Tu écris le rendu

    Sans extrait de code, pour vérifier la colonne seule.

Workflow sans étape

Repeater vide : la liste ne doit pas être rendue.

L'éditeur affiche le vrai front

Le bloc est rendu par un iframe qui charge la route /preview.

Éditeur Gutenberg

iframe → /preview

<HeroBlock attributes={…} />

[ Éditer ]

même fichier — apps/webapp/src/blocks/ui/HeroBlock.tsx

Site public

<HeroBlock attributes={…} />

Aucun markup dupliqué
C'est le composant React du site, pas une copie.
Fourni, pas à câbler
Thème parent et plugin headless portent le pont.

Aperçu sans points d'appui

Repeater vide : la liste ne doit pas être rendue.

Éditeur Gutenberg

iframe → /preview

<HeroBlock attributes={…} />

[ Éditer ]

Site public

<HeroBlock attributes={…} />

Les contrôles disponibles dans un schéma

Chaque valeur de ui produit un contrôle Gutenberg et un type TypeScript.

TextInput
Texte court. Type TS : string.
Select
Variante. Type TS : union littérale.
Toggle
Vrai/faux. Type TS : boolean.
ArrayRepeater
Items répétables. Type TS : Array.

Les contrôles disponibles dans un schéma

Chaque valeur de ui produit un contrôle Gutenberg et un type TypeScript.

TextInput
Texte court. Type TS : string.
Select
Variante. Type TS : union littérale.
Toggle
Vrai/faux. Type TS : boolean.
ArrayRepeater
Items répétables. Type TS : Array.

Spec list sans entrée

Repeater vide : la liste ne doit pas être rendue.