Aller au contenu principal

APIs overview

WordPress Playground 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>
info

Check the Query API section for more info.

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",
      "pluginData": {
        "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)); ?>"
    }
  ]
}

info

Blueprints play a significant role in WordPress Playground, so they have their own dedicated documentation hub. Learn more about JSON Blueprints at the Blueprints Docs Hub.

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>
info

Check the JavaScript API section for more info.

Playground APIs Concepts​

WordPress Playground in the browser is all about links and iframes. Regardless of which API you choose, you will use it in one of the following ways:

You can customize WordPress Playground by modifying the https://playground.wordpress.net/ link. You can, for example, create a post, request a specific plugin, or run any PHP code.

To prepare such a link, use either the Query API (easy) or the JSON Blueprints API (medium).

Once it's ready, simply post it on your site. It makes a great "Try it yourself" button in a tutorial, for example.

Embed in an <iframe>​

WordPress Playground can be embedded in your app using an <iframe>:

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

To customize that Playground instance, you can:

The JavaScript API gives you the most control, but it is also the least convenient option as it requires loading the Playground Client library.

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.

Browser APIs​

The following Playground APIs are available in the browser:

  • 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

In Node.js​

The following Playground APIs are available in Node.js:

These APIs are very similar to their web counterparts, but, unsurprisingly, they are not based or links or iframes.