Guide de démarrage rapide pour les développeurs

WordPress Playground a été créé comme un outil programmable. Vous trouverez ci-dessous quelques exemples de ce que vous pouvez faire avec. Chaque API discutée est décrite en détail dans la section APIs :

• Intégrer WordPress sur votre site
• Contrôler le site intégré
• Présenter un plugin ou thème du répertoire WordPress
• Présenter n'importe quel plugin ou thème
• Prévisualiser les pull requests de votre dépôt
  • Prévisualiser les branches ou PRs de WordPress Core et Gutenberg
• Construire un environnement de test de compatibilité
• Exécuter du code PHP dans le navigateur

Intégrer WordPress sur votre site

Playground peut être intégré sur votre site en utilisant la balise HTML <iframe> comme suit :

<iframe src="https://playground.wordpress.net/"></iframe>

Chaque visiteur obtiendra sa propre instance WordPress privée gratuitement. Vous pouvez ensuite la personnaliser en utilisant l'une des APIs de Playground.

Careful with the demo site

The site at https://playground.wordpress.net is there to support the community, but there are no guarantees it will continue to work if the traffic grows significantly.

If you need certain availability, you should host your own WordPress Playground.

Contrôler le site intégré

WordPress Playground fournit trois APIs que vous pouvez utiliser pour contrôler le site en iframe. Tous les exemples de cette section sont construits en utilisant l’une d'entre elles :

• Query API enable basic operations using only query parameters
• Blueprints API give you a great degree of control with a simple JSON file
• JavaScript API give you full control via a JavaScript client from an npm package

Apprenez-en plus sur chacune de ces APIs dans la section aperçu des APIs.

Présenter un plugin ou thème du répertoire WordPress

Vous pouvez installer des plugins et thèmes du répertoire WordPress avec seulement des paramètres d'URL. Cet iframe préinstalle les plugins coblocks et friends et le thème pendant.

This is called Query API and you can learn more about it here.

<iframe src="https://playground.wordpress.net/?plugin=coblocks"></iframe>

Présenter n'importe quel plugin ou thème

Et si votre extension ne figure pas dans le répertoire de WordPress ?

Vous pouvez toujours la présenter avec Playground en utilisant les JSON Blueprints. Par exemple, ce Blueprint téléchargerait et installerait une extension et un thème depuis votre site et importerait également un contenu de démarrage :

{
"steps": [
{
"step": "installPlugin",
"pluginData": {
"resource": "url",
"url": "https://your-site.com/your-plugin.zip"
}
},
{
"step": "installTheme",
"themeData": {
"resource": "url",
"url": "https://your-site.com/your-theme.zip"
}
},
{
"step": "importWxr",
"file": {
"resource": "url",
"url": "https://your-site.com/starter-content.wxr"
}
}
]
}

Consultez débuter avec les Blueprints pour en savoir plus.

Prévisualiser les pull requests de votre dépôt

Vous pouvez prévisualiser le code du dépôt de deux manières : directement avec git:directory, ou en pointant vers un .zip de votre pipeline CI. Voici l'approche git:directory utilisant les Blueprints :

{
"steps": [
{
"step": "installPlugin",
"pluginData": {
"resource": "git:directory",
"url": "https://github.com/my-user/my-repo",
"ref": "refs/pull/1/head",
"refType": "refname"
},
"options": {
"activate": true
},
"progress": {
"caption": "Installing plugin from my-user/my-repo PR #1"
}
}
]
}

Dans le code ci-dessus, un plugin sera installé à partir d'un dépôt situé à l'URL indiquée, et la référence pour trouver la branche est refType ; dans ce cas, il utilisera refname, mais il peut également utiliser branch, tag et commit.

astuce

Vous pouvez automatiser ce processus à l'aide de l'Action GitHub pour générer des liens de prévisualisation, ce qui permettra de le simplifier.

Charger un fichier .zip est une autre alternative pour prévisualiser votre projet. Consultez l'exemple en direct du visualiseur de PR Gutenberg.

Pour utiliser Playground comme visualiseur de PR, vous avez besoin :

• D'un pipeline CI qui empaquette votre plugin ou thème
• D'un accès public au fichier .zip généré

Ces archives zip ne sont pas différentes des extensions WordPress classiques, ce qui signifie que vous pouvez les installer dans Playground en utilisant l'API JSON Blueprints. Une fois que vous exposez un point de terminaison comme https://your-site.com/pull-request-1234.zip, le Blueprint suivant fera le reste :

{
"steps": [
{
"step": "installPlugin",
"pluginData": {
"resource": "url",
"url": "https://your-site.com/pull-request-1234.zip"
}
}
]
}

La démo officielle de Playground utilise cette technique pour prévisualiser les pull requests du dépôt Gutenberg :

{
"landingPage": "/wp-admin/plugins.php?test=42test",
"steps": [
{
"step": "login",
"username": "admin",
"password": "password"
},
{
"step": "mkdir",
"path": "/wordpress/pr"
},
{
"step": "writeFile",
"path": "/wordpress/pr/pr.zip",
"data": {
"resource": "url",
"url": "/plugin-proxy.php?org=WordPress&repo=gutenberg&workflow=Build%20Gutenberg%20Plugin%20Zip&artifact=gutenberg-plugin&pr=60819",
"caption": "Downloading Gutenberg PR 47739"
},
"progress": {
"weight": 2,
"caption": "Applying Gutenberg PR 47739"
}
},
{
"step": "unzip",
"zipPath": "/wordpress/pr/pr.zip",
"extractToPath": "/wordpress/pr"
},
{
"step": "installPlugin",
"pluginData": {
"resource": "vfs",
"path": "/wordpress/pr/gutenberg.zip"
}
}
]
}

Prévisualiser les branches ou PRs de WordPress Core et Gutenberg

Vous pouvez prévisualiser des pull requests spécifiques des dépôts WordPress Core et Gutenberg en utilisant les paramètres de l'API Query. Les branches Gutenberg ont également une alternative pour les prévisualiser avec le paramètre gutenberg-branch. Ceci est utile pour tester les derniers changements du trunk ou des branches de fonctionnalités spécifiques sans créer de PR.

• Prévisualiser un PR WordPress Core spécifique : https://playground.wordpress.net/?core-pr=9500
• Prévisualiser un PR Gutenberg spécifique : https://playground.wordpress.net/?gutenberg-pr=73010
• Prévisualiser la branche trunk de Gutenberg : https://playground.wordpress.net/?gutenberg-branch=trunk

Construire un environnement de test de compatibilité

Testez votre extension sur différentes versions de PHP et WordPress en les configurant dans Playground. Cela vous aide à vérifier la compatibilité avant la publication.

Avec l'API Query, vous ajouteriez simplement les paramètres de requête php et wp à l'URL :

<iframe src="https://playground.wordpress.net/?php=8.3&wp=6.1"></iframe>

Avec les Blueprints JSON, vous utiliseriez la propriété preferredVersions :

{
"preferredVersions": {
"php": "8.3",
"wp": "6.1"
}
}

Exécuter du code PHP dans le navigateur

L'API JavaScript fournit la méthode run() que vous pouvez utiliser pour exécuter du code PHP dans le navigateur :

<iframe id="wp"></iframe>
<script type="module">
const client = await startPlaygroundWeb({
iframe: document.getElementById('wp'),
remoteUrl: 'https://playground.wordpress.net/remote.html',
});
await client.isReady;
await client.run({
code: `<?php
require("/wordpress/wp-load.php");

update_option("blogname", "Playground is really cool!");
echo "Site title updated!";
`,
});
client.goTo('/');
</script>

Combinez cela avec un éditeur de code comme Monaco ou CodeMirror, et vous obtiendrez des extraits de code en direct comme dans cet article !