Utiliser les Blueprints

Vous pouvez utiliser les Blueprints de l’une des façons suivantes :

• En les passant comme fragment d’URL au Playground.
• En les chargeant depuis une URL avec le paramètre blueprint-url.
• En utilisant des paquets Blueprint (fichiers ZIP ou répertoires).
• En utilisant l’API JavaScript.

Fragment d’URL

La façon la plus simple de commencer à utiliser les Blueprints est d’en coller un dans le « fragment » d’URL du site WordPress Playground, par exemple https://playground.wordpress.net/#{"preferredVersions....

Par exemple, pour créer un Playground avec des versions spécifiques de WordPress et de PHP, vous utiliseriez le Blueprint suivant :

{
	"$schema": "https://playground.wordpress.net/blueprint-schema.json",
	"preferredVersions": {
		"php": "8.3",
		"wp": "6.5"
	}
}

Vous iriez ensuite à https://playground.wordpress.net/#{"preferredVersions":{"php":"8.3","wp":"6.5"}}.

astuce

En JavaScript, vous pouvez obtenir une version compacte de n’importe quel JSON de Blueprint avec JSON.stringify et JSON.parse. Exemple :

const blueprintJson = `{
	"$schema": "https://playground.wordpress.net/blueprint-schema.json",
	"preferredVersions": {
		"php": "8.3",
		"wp": "6.5"
	}
}`;
const minifiedBlueprintJson = JSON.stringify(JSON.parse(blueprintJson)); // {"preferredVersions":{"php":"8.3","wp":"6.5"}}
const encodedBlueprint = encodeURIComponent(minifiedBlueprintJson);
const playgroundUrl = `https://playground.wordpress.net/#${encodedBlueprint}`;

Vous n’aurez pas besoin de coller de liens pour suivre. Nous utiliserons des exemples de code avec un bouton « Essayer » qui exécutera automatiquement les exemples pour vous :

Fragments de Blueprint encodés

Lorsque vous créez des liens Playground depuis JavaScript ou des outils d’automatisation, encodez le JSON minifié une seule fois avec encodeURIComponent() et ajoutez-le après # :

const blueprint = {
	$schema: 'https://playground.wordpress.net/blueprint-schema.json',
	preferredVersions: {
		php: '8.3',
		wp: '6.5',
	},
};
const playgroundUrl = `https://playground.wordpress.net/#${encodeURIComponent(JSON.stringify(blueprint))}`;

Playground prend également en charge les Blueprints encodés en Base64. Base64 est utile lorsqu’une plateforme modifie les fragments JSON ou lorsque vous voulez un lien compact et facile à copier. Par exemple, voici le Blueprint ci-dessus au format Base64 : eyIkc2NoZW1hIjogImh0dHBzOi8vcGxheWdyb3VuZC53b3JkcHJlc3MubmV0L2JsdWVwcmludC1zY2hlbWEuanNvbiIsInByZWZlcnJlZFZlcnNpb25zIjogeyJwaHAiOiAiNy40Iiwid3AiOiAiNi41In19.

Pour l’exécuter, allez sur https://playground.wordpress.net/#eyIkc2NoZW1hIjogImh0dHBzOi8vcGxheWdyb3VuZC53b3JkcHJlc3MubmV0L2JsdWVwcmludC1zY2hlbWEuanNvbiIsInByZWZlcnJlZFZlcnNpb25zIjogeyJwaHAiOiAiNy40Iiwid3AiOiAiNi41In19

astuce

En JavaScript, vous pouvez convertir n’importe quel JSON de Blueprint au format Base64 avec la fonction globale btoa().

Exemple :

const blueprintJson = `{
	"$schema": "https://playground.wordpress.net/blueprint-schema.json",
	"preferredVersions": {
		"php": "8.3",
		"wp": "6.5"
	}
}`;
const minifiedBlueprintJson = btoa(blueprintJson); // eyIkc2NoZW1hIjogImh0dHBzOi8vcGxheWdyb3VuZC53b3JkcHJlc3MubmV0L2JsdWVwcmludC1zY2hlbWEuanNvbiIsInByZWZlcnJlZFZlcnNpb25zIjogeyJwaHAiOiAiNy40Iiwid3AiOiAiNi41In19

Charger un Blueprint depuis une URL

Lorsque votre Blueprint devient trop difficile à gérer, vous pouvez le charger avec le paramètre de requête ?blueprint-url dans l’URL, comme ceci :

https://playground.wordpress.net/?blueprint-url=https://raw.githubusercontent.com/adamziel/blueprints/trunk/blueprints/latest-gutenberg/blueprint.json

Notez que le Blueprint doit être accessible publiquement et servi avec le bon en-tête Access-Control-Allow-Origin :

Access-Control-Allow-Origin: *

Paquets Blueprint

Le paramètre ?blueprint-url prend désormais aussi en charge les paquets Blueprint au format ZIP. Un paquet Blueprint est un fichier ZIP qui contient un fichier blueprint.json à la racine, ainsi que toutes les ressources supplémentaires référencées par le Blueprint.

Par exemple, vous pouvez charger un paquet Blueprint comme ceci :

https://playground.wordpress.net/?blueprint-url=https://example.com/my-blueprint-bundle.zip

Lorsque vous utilisez un paquet Blueprint, vous pouvez référencer les ressources incluses avec le type de ressource bundled :

{
	"landingPage": "/my-file.txt",
	"steps": [
		{
			"step": "writeFile",
			"path": "/wordpress/my-file.txt",
			"data": {
				"resource": "bundled",
				"path": "/bundled-text-file.txt"
			}
		}
	]
}

Pour en savoir plus sur les paquets Blueprint, consultez la documentation Paquets Blueprint.

API JavaScript

Vous pouvez aussi utiliser les Blueprints avec l’API JavaScript grâce à la fonction startPlaygroundWeb() du paquet @wp-playground/client. Voici un petit exemple autonome que vous pouvez exécuter sur JSFiddle ou CodePen :

<iframe id="wp-playground" style="width: 1200px; height: 800px"></iframe>
<script type="module">
	import { startPlaygroundWeb } from 'https://playground.wordpress.net/client/index.js';

	const client = await startPlaygroundWeb({
		iframe: document.getElementById('wp-playground'),
		remoteUrl: `https://playground.wordpress.net/remote.html`,
		blueprint: {
			landingPage: '/wp-admin/',
			preferredVersions: {
				php: '8.3',
				wp: 'latest',
			},
			steps: [
				{
					step: 'login',
					username: 'admin',
					password: 'password',
				},
				{
					step: 'installPlugin',
					pluginData: {
						resource: 'wordpress.org/plugins',
						slug: 'friends',
					},
				},
			],
		},
	});

	const response = await client.run({
		// wp-load.php is only required if you want to interact with WordPress.
		code: '<?php require_once "/wordpress/wp-load.php"; $posts = get_posts(); echo "Post Title: " . $posts[0]->post_title;',
	});
	console.log(response.text);
</script>