Demo your Woo extension with WordPress Playground

Ján Mikláš Avatar
Ján Mikláš

•

,

Are you a Woo extension developer who wants to share a demo of your work with a single click? WordPress Playground is here for you. 

WordPress Playground is a platform that lets you run WordPress instantly on any device without a host. It’s your place to build, experiment, test, and grow.

Out-of-the-box, you’ll get a clean WordPress installation. But with a bit of work and Blueprints, you can spin up a custom WordPress installation, including installing plugins and running custom code. 

You can explore the WordPress Blueprints Gallery, test your Blueprints, or build them from scratch in the WordPress Playground Step Library (built by the Playground engineer Alex Kirk). 

Install WooCommerce

WooCommerce is compatible with WordPress Playground and is a great way to test your extension or share a demo. The first step for installation is easy, just head to Playground Builder and make sure the following code is populated in the virtual IDE:

{
  "landingPage": "/wp-admin/",
  "login": true,
  "plugins": [
    "woocommerce"
  ]
}

However, you’ll notice that you end up in the WooCommerce onboarding flow, which can use up extra time that you’d like to focus on your extension demo.

Here is a quick workaround to skip the WooCommerce onboarding setup wizard (Playground Builder). Kudos to Mujeebu Rahman for sharing this on WordPress Slack:

{
  "landingPage": "/wp-admin/",
  "login": true,
  "plugins": [
    "woocommerce"
  ],
  "steps": [
    {
      "step": "runPHP",
      "code": "<?php include 'wordpress/wp-load.php'; delete_transient( '_wc_activation_redirect' );"
    }
  ]
}

Now you can use the landingPage property to redirect to your extension without WooCommerce overriding it.

Install your extension

Installing extensions from WordPress.org is super simple – you can just include the plugin slug in the plugins property. 

{
  "landingPage": "/wp-admin/",
  "login": true,
  "plugins": [
    "woocommerce",
    "mailpoet"
  ]
}

But installing a ZIP file directly from GitHub is also super easy. 

For example, to install a specific version of MailPoet from GitHub (Playground Builder):

{
  "step": "installPlugin",
  "pluginData": {
    "resource": "url",
    "url": "https://github.com/mailpoet/mailpoet/releases/download/5.6.2/mailpoet.zip"
  }
}

And if you want to get more adventurous, head to https://github-proxy.com/, which makes it easy to use specific tags, releases, PRs, commits…and more!

Don’t have an extension yet? Learn how to build your first extension and then come back to test it in Playground!

4 responses to “Demo your Woo extension with WordPress Playground”

  1. Jeffrey Paul Avatar
    Jeffrey Paul

    Is there a good way for extensions on the Woo Marketplace to add a link to their Playground link for potential merchants to test out the extension before purchasing?

    Reply
    1. Pi Avatar
      Pi

      Hi Jeffrey, for a free extension it’s very straightforward, but I suspect you are asking about paid extensions where you are interested in keeping the contents of the repo private.

      In that case, I have done some personal testing and was able to cobble together a solution using Firebase hosting and cloud functions. You can host the repo privately in Firebase, and then create an endpoint using the Cloud Functions that only serves the plugin when the referrer is wordpress.playground.net.

      Here’s my playground hosting the Hello Dolly plugin from my private Cloudflare R2 bucket.

      There are probably better ways to do this, but in a pinch this works. You’re not the first to ask us about this, so I will take your feedback internally and see if there’s an official solution being explored.

      Reply
      1. Peter Avatar
        Peter

        Pi, thank you so much for your comment. We were already familiar with WordPress Playground, but your response is what truly pushed us to explore how we could safely create a live demo for both our free and premium plugin, Splendid Sales Booster for WooCommerce. Thanks to your insights, we rolled up our sleeves and made it happen, you were the spark.

        Your approach using Firebase and referrer checking was really inspiring. In the end, we took a slightly different path after identifying two major concerns:

        – Referrer spoofing.
        Unfortunately, referrers can be easily faked, so it’s not a reliable protection method for premium plugin distribution.

        – Export option in Playground.
        By default, WordPress Playground allows users to export the entire environment, which means the whole WordPress instance with the plugin code can be downloaded and run locally. That creates a significant risk of leaking the premium plugin’s code.

        Still, we really wanted to use Playground.
        It’s a fantastic tool for showing how a plugin works in a live environment.

        So, we built our own self-hosted version of the demo with several layers of protection:
        – We disabled the export/import functionality in the Playground codebase (thanks to selfhosted).
        – The premium plugin ZIP file is served dynamically via PHP, using a unique, one-time token. Even if someone inspects the blueprint.json file and finds the URL and token, it won’t work after the first use.

        You can try it live here:
        – Demo on our site, go to the: https://splendidplugins.com/ and click demo in menu.
        – Free version on WordPress.org: go to the https://wordpress.org/plugins/splendid-sales-booster/ and click Live Preview

        In the demo, we preloaded example products, set up several cross-sell configurations (which is our plugin’s main feature), and added a clear message for users to explain what they can test.

        For additional safety, visitors are logged in as a Shop Manager and cannot install other plugins.

        Thanks again for the inspiration. WordPress Playground is a truly impressive tool when used with the right precautions and a bit of creativity.

        Reply
  2. Alen Avatar
    Alen

    Hi, and thanks for this info.
    Regarding github-proxy.com – is this planned to be a permanent or just a temporary resource. Also, it would be nice if the Woo devs could come up with a few, WooCommerce specific blueprint examples.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *