APIs overview
WordPress Playground exposes a few APIs that you can use to interact with the Playground:
Query API
Basic operations can be done by adjusting the URL, for example here's how you can preinstall a coblocks plugin:
https://playground.wordpress.net/?plugin=coblocks
Or a theme:
https://playground.wordpress.net/?theme=pendant
This is called Query API and you can learn more about it here.
Once you have a URL that you like, you can embed it in your website using an iframe:<iframe style="width: 800px; height: 500px;" src="https://playground.wordpress.net/?plugin=coblocks"></iframe>
Blueprints
If you need more control over your Playground, you can use JSON Blueprints. For example, here's how to create a post and install a plugin:
{
"steps": [
{ "step": "login" },
{
"step": "installPlugin",
"pluginZipFile": {
"resource": "wordpress.org/plugins",
"slug": "friends"
}
},
{
"step": "runPHP",
"code": `<?php
include 'wordpress/wp-load.php';
wp_insert_post(array(
'post_title' => 'Post title',
'post_content' => 'Post content',
'post_status' => 'publish',
'post_author' => 1
));
`
}
]
}
Learn more about JSON Blueprints.
JavaScript API
The @wp-playground/client
package provides a JavaScript API you can use to fully control your Playground instance. Here's a very example of what you can do:
<iframe
id="wp"
style="width: 100%; height: 300px; border: 1px solid #000;"
></iframe>
<script type="module">
// Use unpkg for convenience
import { startPlaygroundWeb } from 'https://playground.wordpress.net/client/index.js';
const client = await startPlaygroundWeb({
iframe: document.getElementById('wp'),
remoteUrl: `https://playground.wordpress.net/remote.html`,
});
// Let's wait until Playground is fully loaded
await client.isReady();
</script>
Learn more about the JavaScript API.