Live demo of your WP Plugin with GH releases and WP Playground

I have been relying on Github actions to publish my plugins to the .org repositiory for some now. It feels magical – you publish a release and it builds, zips and uploads the plugin wherever it needs to go.

With WP Playground, you can take that process to another level – the moment you hit publish, new version of your plugin will be immediately available for testing right in browser, without installing and exposing existing sites. This means anybody can try out your plugin before downloading, without installing it with zero downsides, in seconds.

What is WordPress Playground?

Playground is a way to run an entire instance of WordPress in the browser, with no external backend. It is destroyed on reload, but perfect for trying out changes before installing on your site

Action to build plugin on release

I’m assuming you are using Github as a sane person. This Github action will run your plugin build process, zip it, and upload it as a release asset. Remember to change your zip file name.

name: Build and Upload Plugin ZIP
on:
  release:
    types: [published]

jobs:
  build-and-zip:
    runs-on: ubuntu-latest

    steps:
    - name: Checkout Repository
      uses: actions/checkout@v4

    - name: Set up Node.js
      uses: actions/setup-node@v3
      with:
        node-version: 20 # Use Node.js v20

    - name: Install Node.js Dependencies
      run: npm install

    - name: Set up PHP and Composer
      uses: shivammathur/setup-php@v2
      with:
        php-version: '8.2' # Adjust PHP version as needed
        extensions: mbstring, zip

    - name: Install Composer Dependencies (Production Only)
      run: composer install --no-dev --optimize-autoloader

    - name: Build Plugin
      run: npm run build

    - name: Create Plugin ZIP
      run: npm run plugin-zip

    - name: Upload Release Asset
      uses: actions/upload-release-asset@v1
      env:
        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
      with:
        upload_url: ${{ github.event.release.upload_url }}
        asset_path: ${{github.workspace}}/wp-personal-os.zip
        asset_name: wp-personal-os.zip
        asset_content_type: application/zip

You will also have to make sure your package.json has npm scripts:

    "scripts": {
        "build": "wp-scripts build",
        "plugin-zip": "wp-scripts plugin-zip",

Remember to give your Github actions write access:

Link to latest plugin zip

There is undocumented URL for the “release asset of the latest release” on Github:

https://github.com/USER/PROJECT/releases/latest/download/ASSET.zip

Replace user, project and asset accordingly

Create your first release

Create your first Github release for the action to run

Your Playground Blueprint

With this link, you can now create a playground blueprint that will install the plugin to a temporary WordPress site that runs in the browser. You can also add additional steps that will create sample data for the best demo experience. Here is the very basic blueprint:

{
  "steps": [
    {
      "step": "installPlugin",
      "pluginData": {
        "resource": "url",
        "url": "https://github.com/USER/PROJECT/releases/latest/download/ASSET.zip"
      }
    }
  ],
  "login": true
}

I highly recommend playground builder to work on these blueprints and debug them.

Once you have your blueprint, you can create a special link and drop it in the README of your plugin, like here

1. Link will load playground
2. It will install latest release of your plugin
3. redirect the user to the proper page so they can see what your plugin is all about

The post Live demo of your WP Plugin with GH releases and WP Playground appeared first on Artur Piszek.