Skip to main content

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.