Exploring WP Playground Blueprints


WordPress Playground blueprints are becoming more popular than I had anticipated while learning and sharing my experience in the Smashing Magazine article, where I only briefly mentioned blueprints.

In a recent WordCamp Europe 2024, Matt Mullenweg discussed, among other things, the latest innovations in WP Playground and it’s potential to the future the WordPress.

More details about what a WordPress Blueprint is and how it works can be found in in this WordPress Development Blog article. In this Make WordPress Blog post, Automattic contributor Birgit Pauli-Haak talks about the community blueprint Gallery and calls on the WordPress community to use these blueprints, contribute, and help the project grow.

Often, when I start testing or learning the latest WordPress features, I begin by setting up a fresh WordPress site with Local in my local development environment. However, with easy-to-use blueprints, a temporary site with dummy data and desired plugins can be set up in just a few seconds.

In this learning note post, I decided to explore using WP Playground blueprints to quickly test new WP features and integrate them into my daily workflow, including creating and improving my block theme development endeavors.

How to use blueprints

It appears that using blueprints to spin off a new temporary website with Playground has never been easier. Here is how the Playground blueprints documentation describes it:

The easiest way to start using Blueprints is to paste one into the URL “fragment” on WordPress Playground website, e.g. https://playground.wordpress.net/#{"preferredVersions....

An alternative way to spin off a WordPress site is to paste the entire blueprint at the site URL.

Load Blueprint from a URL

When your Blueprint gets too wieldy, you can load it via the ?blueprint-url query parameter in the URL, like this:
https://playground.wordpress.net/?blueprint-url=https://raw.githubusercontent.com/adamziel/blueprints/trunk/blueprints/latest-gutenberg/blueprint.json

In the following YouTube video, Automattic contributor Ann McCarthy discusses how WP Playground can be used for learning, testing, and as a teaching tool.

For example, in this YouTube video, Brian Coords walks his audience through how easy it is to do anything with WordPress using Playground, including beta testing the next major release.

Use Case Example

This use case learning example was inspired by Nick Diego’s recent article about synced pattern overrides and the accompanying WordPress Playground demo site he created for readers.. After visiting the GitHub repository of the demo site, I thought to create a similar blueprint JSON file to spin off a temporary WordPress site for my own workflow.

While preparing the following sandbox-site-blueprint.json file, I also took a sneak peek into Justin Tadlock’s GitHub repository for ideas for improvement. Justin has been my idol for block theme development inspirations.

{
	"$schema": "https://playground.wordpress.net/blueprint-schema.json",
	"meta": {
		"title": "site content",
		"description": "Blueprint for quickly spinning a site with some dummy content",
		"author": "tinjure20",
		"categories": ["themes", "content"]
	},
    "preferredVersions": {
		"php": "8.3",
		"wp": "latest"
	},
	"features": {
		"networking": true
	},
	"steps": [
        {
			"step": "login"
		},
        {
			"step": "setSiteOptions",
			"options": {
				"blogname": "My Sandbox Site"
			}
		},
		{
			"step": "installPlugin",
			"pluginZipFile": {
				"resource": "wordpress.org/plugins",
				"slug": "gutenberg"
			}
		},
		{
			"step": "installPlugin",
			"pluginZipFile": {
				"resource": "wordpress.org/plugins",
				"slug": "create-block-theme"
			},
			"progress": {
				"weight": 2
			}
		},
		{
			"step": "runPHP",
			"code": "<?php require '/wordpress/wp-load.php'; $wpdb->query('delete from wp_posts');"
		},
        {
			"step": "installTheme",
			"themeZipFile": {
				"resource": "wordpress.org/themes",
				"slug": "twentytwentyfour"
			},
			"options": {
				"activate": true
			}
		},
		{
			"step": "importWxr",
			"file": {
				"resource": "url",
				"url": "https://raw.githubusercontent.com/tinjure20/blueprint-library/main/sandbox-site/sandbox-site-content%20.xml"
			}
		},
        {
			"step": "importWxr",
			"file": {
				"resource": "url",
				"url": "https://raw.githubusercontent.com/Automattic/theme-tools/master/gutenberg-test-data/gutenberg-test-data.xml"
			}
		}
	]
}

In his GitHub repository, Justin cleverly uses the following steps to load his custom block theme and media upload folder. I plan to use a similar approach in my blueprint library to upload my custom theme as well as dummy data.

{
			"step": "installTheme",
			"themeZipFile": {
				"resource": "url",
				"url": "https://raw.githubusercontent.com/....zip"
			},
			"options": {
				"activate": true
			}
}

Please note that this project is still a work in progress and may be updated regularly.

Related Resource Links

,