Lumaktaw patungo sa pangunahing content

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>

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 require_once '/wordpress/wp-load.php'; wp_insert_post(array('post_title' => 'Post title', 'post_content' => 'Post content', 'post_status' => 'publish', 'post_author' => 1)); ?>"
  }
]
}

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.

Sites API​

The Playground website at playground.wordpress.net exposes a window.playgroundSites object for managing the saved sites in the site manager — listing them, creating new ones, persisting temporary sites to OPFS or local disk, switching between them, and changing PHP version or networking.

await playgroundSites.createNewTemporarySite('demo', { phpVersion: '8.4' });
await playgroundSites.saveInBrowser('My demo site');
const client = playgroundSites.getClient();

Check the Sites API section for more info.

JavaScript API​

The @wp-playground/client package provides a JavaScript API you can use to fully control your Playground instance. Here's a simple 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>

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
  • Sites API lets scripts running on playground.wordpress.net manage saved sites
  • 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.