The WP Minute brings you news about WordPress in under 5 minutes -- every week! Follow The WP Minute for the WordPress headlines before you get lost in the headlines. Hosted by Matt Medeiros, host of The Matt Report podcast.
Eric Karkovack (00:00)
Hi everyone, and welcome to the WP Minute. I'm Eric Karkovack.
Today's episode features a segment from my interview with developer and core contributor Elliott Richmond. Elliott stopped by to give us an inside look at WordPress Playground and to show us how to harness it for client training, prototyping, and more. Now you can catch the entire episode over on our WP Minute Plus channel. Visit the WPMinute.com for all the details.
Eric Karkovack (00:31)
I know like a lot of us has probably heard about about Playground. ⁓
But I suspect a lot of people don't actually know what it is. Could you explain a little bit about what Playground does? 'Cause think you've actually made some contributions to it, haven't you?
Elliott Richmond (00:47)
my only contribution is basically just talking to the developer, core developer, ⁓ development team at WordCamp. ⁓ I was actually contributing on the AI core team when I was there. ⁓ but yeah, Playground is basically an instance of WordPress that lives in your browser with ⁓ a bundle of plugins that you can add to it and a particular theme.
But that coupled with blueprints is a tool that can be used for prototyping sorry, prototyping a website very quickly. ⁓ And recently it just struck me that you can use it for training. So I do have a client that have they have multiple users that use the same website and we are basically using the block editor now. They've been using a site for maybe 15 years.
Eric Karkovack (01:40)
Okay.
Elliott Richmond (01:41)
And
it's a big leap into ⁓ it's a it's a big learning curve for them to learn how to edit their new site in the block editor. So coupling that content in a browser with playground and blueprints just makes for a brilliant sort of ⁓ training session for them, as well as a a reference point that they can come back to and re-refresh their memory on stuff or try something out or try a plug-in.
⁓ or try a new theme. It's it's it's really good for that kind of process.
Eric Karkovack (02:15)
Now so this lives in your browser and I I we had an episode ⁓ a few months back with the ⁓ team behind my.wordpress.net, which is also a local like install. But I was wondering how how do you share something that you've created in Playground? Does it have like a permanent URL? Or does is it something that once they they access wherever you're storing it, it it automatically just downloads to their browser then?
Elliott Richmond (02:45)
Well, this is where Blueprint comes into play. So it kind of Blueprint is basically a JavaScript ⁓ JSON object effectively that pulls in ⁓ various different methods. So you can pinpoint a theme, you can pinpoint content, you can pinpoint plugins, and then you apply that to the WordPress ⁓ the playground WordPress.net ⁓ as a parameter blueprint URL, and you host that somewhere, and then within your Blueprint, as long as you've got hosted
files whether they're ⁓ for a theme or for a plugin or even for content when that URL is fired up it reads that and then it reads where your your all your GitHub ⁓ or from GitHub all hosted files and then it just installs everything ready to go in the browser and it's yeah it's it's a live demo with real content but it only lives for that session. So it's ⁓ it's built with WebAssembly ⁓ so it's a it's a one session only.
It it it does stay persistent. You can save stuff to a database and you can export stuff if you make changes. And it's particularly powerful as well if you have a plugin or a theme that you want to ⁓ you link in and you want to make some changes or development changes and then test them in the browser, you can then deploy them back to your ⁓ GitHub as a PR and merge things in that way or approve that code. So it's really good for ⁓ especially with block themes and
sort of GitHub and version control became ⁓ decoupled with the new sort of site editor and ⁓ developing block themes. But Blueprint actually with Playground makes it really powerful to bring that back together so a a developer can version control their source code effectively.
Eric Karkovack (04:34)
Okay, so you can go in and actually like I can write a post and it will be there the next time because of the blueprint, essentially.
Elliott Richmond (04:41)
You you can save it persistently in the browser and then when it comes in, that'll save it as local ⁓ data, but then yeah, it won't it it it's only accessible to you really in your browser session. But if the blueprint references a GitHub plugin that you've developed and you make changes to, every time that blueprint ⁓ is loaded, it loads the latest version of that plugin. So for custom developments or plug themes or plugins that you've developed, it's really useful for that as well.
Eric Karkovack (04:52)
Gotcha, gotcha.
Elliott Richmond (05:11)
And it's it stays current with the ⁓ with the GitHub your your version control.
Eric Karkovack (05:12)
Okay.