Playground Demo Site
Every pull request gets a comment with a WordPress Playground link. It opens a throwaway WordPress in the browser — no install, no database, nothing to clean up — running the plugin as built from that PR, with a demo site seeded on top of it.
Use it to review a change without building a site for it.
What is on it
| Home page | Every feature in the plugin, grouped, with a link to a demo page, its admin screen, or its docs. |
| Demo pages | The blocks and shortcodes, set up the way an editor would set them up. A Cards page compares the Card block with a stretched link, including hover, active and focus transitions. |
| Content | Post types and taxonomies from a yoko.yml, a nested event, a post with two categories and a primary term, and one post behind each of the two content gates. |
| Settings | Soft gating on, scheduled unpublishing enabled, ACF installed, seven taxonomies on Post for the consolidated panel. |
| Login | admin / password, already signed in. A subscriber account, member / member12345, for the role-based gate. |
An administrator sees every gated post in full, so being signed in is not a test of a gate. Use a private window.
Playground has no outside network and cannot send email. Soft gate links are not delivered, remote services (Typesense, Google Maps) do not answer, and commercial plugins — Beaver Builder, FacetWP, Gravity Forms — cannot be installed. The home page says so next to each affected feature.
Running it locally
npm run playground # build, then serve on http://127.0.0.1:9400
npm run playground -- --skip-build # skip the asset build
npm run playground -- --port 9500
npm run playground -- --write-only # just write .playground/blueprint.json
This runs @wp-playground/cli
with your working copy mounted as the plugin. The blueprint is the same one CI
uploads, so a local run is a real test of what a reviewer will open.
Adding a feature to it
One entry in scripts/playground/catalog.mjs — the home page, the demo pages and
the links between them are generated from that list. This is required for every
user-visible change, on the same terms as the documentation: see
.claude/skills/playground/SKILL.md for the field shapes and the local testing
checklist.
How it is built
| File | Job |
|---|---|
scripts/playground/catalog.mjs | The features, and the block markup for each demo |
scripts/playground/content.mjs | Catalog → home page and demo pages |
scripts/playground/blueprint.mjs | The blueprint, and the post fixtures |
scripts/playground/seed.php | Runs inside Playground and creates it all |
scripts/playground/demo-cards.php | An mu-plugin: the card hover transitions the plugin deliberately does not ship, and stand-in images |
scripts/playground/demo-layout.php | An mu-plugin: widens the content column, since the stock theme's 645px squeezes the block demos |
scripts/playground/yoko.yml | The demo site's post types and taxonomies |
scripts/playground-demo.mjs | The local runner |
scripts/playground-preview.mjs | CI: build, zip, upload to R2, print the link |
The GitHub Action is .github/workflows/playground-preview.yml. It runs on every
PR, uploads the zip and the blueprint to R2, and updates a single comment on the
PR rather than adding a new one per push.