Playground for Plugin Developers

The WordPress Playground is an innovative tool that allows plugin developers to build, test and showcase their plugins directly in a browser environment.

This guide will show you how to use WordPress Playground to improve your plugin development workflow, create live demos to showcase your plugin, and simplify your plugin testing and review.

Launching a Playground instance with a plugin​

Plugin in the WordPress themes directory​

With WordPress Playground, you can quickly launch a WordPress installation with almost any plugin available in the WordPress Plugins Directory installed and activated. All you need to do is to add the plugin query parameter to the Playground URL and use the slug of the plugin from the WordPress directory as a value. For example: https://playground.wordpress.net/?plugin=create-block-theme

You can also load any plugin from the WordPress plugins directory by setting the installPlugin step of a Blueprint passed to the Playground instance.

{
    "landingPage": "/wp-admin/plugins.php",
    "login": true,
    "steps": [
        {
            "step": "installPlugin",
            "pluginData": {
                "resource": "wordpress.org/plugins",
                "slug": "gutenberg"
            }
        }
    ]
}

   Run Blueprint   

Blueprints can be passed to a Playground instance in several ways.

Plugin in a GitHub repository​

A plugin stored in a GitHub repository can also be loaded in a Playground instance via Blueprints.

With the pluginData property of the installPlugin blueprint step, you can define a url resource that points to the location of the .zip file containing the plugin you want to load in the Playground instance.

To avoid CORS issues, the Playground project provides a GitHub proxy that allows you to generate a .zip from a repository (or even a folder inside a repo) containing your plugin.

For example, the following blueprint.json installs a plugin from a GitHub repository leveraging the https://github-proxy.com tool:

{
    "landingPage": "/wp-admin/admin.php?page=add-media-from-third-party-service",
    "login": true,
    "steps": [
        {
            "step": "installPlugin",
            "pluginData": {
                "resource": "url",
                "url": "https://github-proxy.com/proxy/?repo=wptrainingteam/devblog-dataviews-plugin"
            }
        }
    ]
}

   Run Blueprint   

Plugin from code in a file or gist in GitHub​

By combining the writeFile and activatePlugin steps you can also launch a WP Playground instance with a plugin built on the fly from code stored on a gist or a file in GitHub:

{
    "landingPage": "/wp-admin/plugins.php",
    "login": true,
    "steps": [
        {
            "step": "login"
        },
        {
            "step": "writeFile",
            "path": "/wordpress/wp-content/plugins/cpt-books.php",
            "data": {
                "resource": "url",
                "url": "https://raw.githubusercontent.com/WordPress/blueprints/trunk/blueprints/custom-post/books.php"
            }
        },
        {
            "step": "activatePlugin",
            "pluginPath": "cpt-books.php"
        }
    ]
}

   Run Blueprint   

Setting up a demo for your plugin with Blueprints​

When providing a link to a WordPress Playground instance with some plugins activated, you may also want to customize the initial setup for that Playground instance using those plugins. With Playground's Blueprints you can load/activate plugins and configure the Playground instance.

Through properties and steps in the Blueprint, you can configure the Playground instance's initial setup, providing your plugins with the content and configuration needed for showcasing your plugin's compelling features and functionality.

plugins​

If your plugin has dependencies on other plugins you can use the plugins shorthand to install yours along with any other needed plugins.

{
    "landingPage": "/wp-admin/plugins.php",
    "plugins": ["gutenberg", "sql-buddy", "create-block-theme"],
    "login": true
}

   Run Blueprint   

landingPage