# Blueprints de WordPress Playground : scénariser vos démos et recettes

> Écrire un blueprint JSON qui installe extensions, contenus et réglages dans WordPress Playground, puis le partager par une simple URL sans rien héberger.

- Auteur : Clément Hadrot
- Publié le : 2024-03-12
- Mis à jour le : 2024-03-12
- Catégorie : Outils & workflow
- URL : https://wpmoderne.dev.wordpress-developpement.fr/outils/blueprints-playground-scenariser-demos/

## L’essentiel

- Un blueprint est un fichier JSON auto-suffisant
- steps installe extensions, thèmes et contenus
- Le lien vers le blueprint suffit à reproduire la démo

« Vous pouvez tester l'extension directement dans le navigateur, sans rien installer » : la promesse de WordPress Playground a de quoi surprendre la première fois qu'on la voit tenue. Mais la démo brute — un WordPress vierge dans un onglet — reste limitée pour présenter un vrai cas d'usage. C'est là qu'interviennent les blueprints : des fichiers JSON qui décrivent, étape par étape, ce que Playground doit installer et configurer avant d'afficher le site.

Nous les utilisons pour préparer des démonstrations client reproductibles : au lieu d'expliquer par écrit « installez telle extension, activez tel thème, créez une page avec tel contenu », on envoie une URL. Le navigateur du destinataire fait le reste, en quelques secondes, sans compte ni serveur à provisionner.

## Structure minimale d'un blueprint

Un blueprint est un objet JSON avec, au minimum, une clé `steps` qui contient une liste d'étapes exécutées dans l'ordre. Voici la version la plus simple possible, qui installe une seule extension :

```
{
  "landingPage": "/wp-admin/",
  "preferredVersions": {
    "php": "8.2",
    "wp": "latest"
  },
  "steps": [
    {
      "step": "installPlugin",
      "pluginData": {
        "resource": "wordpress.org/plugins",
        "slug": "classic-editor"
      }
    }
  ]
}
```

Le champ `landingPage` définit l'URL affichée une fois l'environnement prêt, et `preferredVersions` fixe la version de PHP et de WordPress utilisée par l'instance éphémère.

## Enchaîner les étapes pour un scénario complet

Un blueprint utile combine plusieurs types d'étapes : installation d'extensions, activation d'un thème, création de contenu, exécution de commandes WP-CLI, et modification directe d'options. Voici un exemple plus complet, pensé pour démontrer un plugin de formulaire à un client :

```
{
  "steps": [
    { "step": "login", "username": "admin", "password": "password" },
    {
      "step": "installTheme",
      "themeData": { "resource": "wordpress.org/themes", "slug": "twentytwentyfour" }
    },
    {
      "step": "installPlugin",
      "pluginData": { "resource": "wordpress.org/plugins", "slug": "contact-form-7" }
    },
    {
      "step": "runWpCLICommand",
      "command": "wp post create --post_type=page --post_title='Contactez-nous' --post_status=publish"
    },
    {
      "step": "setSiteOptions",
      "options": { "blogname": "Démo Cabinet Dentaire Lumière" }
    }
  ]
}
```

> L'essentiel à retenir : Un blueprint est un fichier JSON auto-suffisant ; steps installe extensions, thèmes et contenus ; Le lien vers le blueprint suffit à reproduire la démo

Chaque étape porte un nom explicite (`installTheme`, `runWpCLICommand`, `setSiteOptions`) et Playground les exécute séquentiellement dans l'environnement WebAssembly, avant même d'afficher la première page à l'utilisateur.

## Partager le blueprint par URL

Deux méthodes principales permettent de diffuser un blueprint sans avoir à l'héberger sur un serveur dédié. La première consiste à encoder le JSON directement dans le fragment de l'URL de Playground :

```
https://playground.wordpress.net/#{"steps":[...]}
```

La seconde, plus lisible pour un blueprint volumineux, consiste à héberger le fichier JSON n'importe où (une Gist GitHub publique, par exemple) et à passer son URL en paramètre :

```
https://playground.wordpress.net/?blueprint-url=https://exemple.test/mon-blueprint.json
```

## Cas d'usage au-delà de la démo commerciale

- Reproduire un bug signalé par un client, avec exactement les mêmes extensions et la même version de PHP, pour un rapport plus précis ;
- Fournir un environnement de test jetable à un contributeur externe sans lui donner d'accès au serveur réel ;
- Documenter une recette technique (« comment configurer X avec Y ») sous une forme exécutable plutôt qu'un simple texte.

## Limites à garder en tête

Un blueprint ne remplace pas un environnement de test persistant : les données créées dans Playground disparaissent à la fermeture de l'onglet, sauf export manuel. Playground fonctionne aussi entièrement dans le navigateur via WebAssembly, ce qui exclut certaines extensions qui dépendent de bibliothèques PHP natives non compilées pour cet environnement, ou de connexions réseau sortantes non simulées.

> Avant d'envoyer un blueprint à un client, on le teste systématiquement dans une fenêtre de navigation privée : c'est le seul moyen de vérifier qu'il fonctionne sans dépendre d'un cache ou d'un cookie laissé par une session précédente.

## En résumé

Les blueprints transforment WordPress Playground d'un simple bac à sable en un vrai outil de scénarisation. Pour une agence qui présente régulièrement des configurations à des clients, ou qui documente des recettes techniques, l'investissement pour écrire un blueprint réutilisable se rentabilise dès la deuxième démonstration.