I build a system for flexible WordPress Playground blueprints using Cloudflare Worker to help me spin up demo WooCommerce stores.
See the code: bacoords/woocommerce-worker
Transcript (lightly edited)
My Love for WordPress Playground
I’m a big fan of WordPress Playground. If you haven’t used it, it’s a one-click version of WordPress that loads in your browser. It’s good for what I call “throwaway” WordPresses: I want to try something, throw it away, not worry about it, not make a big local environment. It’s great for that.
I think a lot of the promise of Playground is still being explored by the community. People are still figuring out what it’s going to be most useful for and what the killer features are.
Testing New WordPress Releases
Whenever there’s a new WordPress release coming, the core team posts a WordPress Playground link where you can click and easily open the beta version. Playground also has a nice way of switching between WordPress versions. It lets you find out if a feature was in this version or that one or try out a new thing in the block editor. It’s a handy way to quickly beta test things. It’s not a robust testing environment. It’s just a good, low-effort way to get hands-on with WordPress.
Experimenting with WooCommerce
I’ve been spending a lot of time working inside WooCommerce, including testing out the new release coming up soon. I thought it would be great if I could just load up a demo store quickly.
Playground has this great concept of Blueprints where you write a JSON file that says, I want this plugin, this theme, this content. Then you load WordPress Playground with these blueprints ready to go.
In this instance, I used a blueprint to install WooCommerce and set some basic site options, for example to skip the onboarding and import sample content from the WooCommerce repo.
Using a Cloudflare Worker
Ultimately, I want an easy configuration in the URL, so I used a Cloudflare worker, which I’d never done before. (Technically, I still haven’t because I asked Cursor to write it for me.)
If you’ve never used Cloudflare workers, it’s a piece of JavaScript that Cloudflare hosts for you, and it runs every time you hit that URL. This JSON comes off my Cloudflare worker. I can pass different URL parameters, and it returns different JSONs. If I want the 9.7 release, it updates the URL, which gets that plugin code.
Dynamic Blueprints with URL Parameters
It’s cool because I can have one spot to return my blueprint, but use query parameters to make changes to it. I could add one that says demo content equals false, and it’ll return it without that step. Instead of making separate JSON files for each thing, I can create a system for myself with simple URLs and change them later. The worker is a simple JavaScript file. It has a template for the JSON I want it to return. It checks a request, looks for a URL parameter, swaps out text, and returns a JSON response. Now I can hit this URL, pass different parameters, and get it to return this JSON without dealing with files.
The Setup and Future Potential
It seems a lot of setup, but it’s nice because I didn’t write anything. I just use that URL whenever I want to load this version of Playground. I think we’re going to see a lot of cool stuff with Playground blueprints, where people build versions of WordPress Playground preloaded with plugins, themes, content. People will find more creative ways to load those blueprints. There are cool tools out there to build them. Cloudflare Workers is one where we can avoid making a bunch of JSON files and hosting them everywhere. You can make one dynamic JSON file that you change by tweaking the URL, the way WordPress core does with their Playground instance. Let me know if you have questions or think there’s a cool use case for this or a better way to do it. I think there’s a lot of potential with blueprints in WordPress Playground, and we’re going to see more cool stuff coming from it in the future.
Leave a Reply