Subscribe
Share
Share
Embed
For long-form interviews, news, and commentary about the WordPress ecosystem. This is the companion show to The WP Minute, your favorite 5-minutes of WordPress news every week.
Eric Karkovack (00:00)
Hi everyone, and welcome to the WP Minute. I'm Eric Karkovack. Today's episode is all about playing around at work. No, we're not talking about your video game habits. We'll save that intervention for another time. Instead, we're talking with developer and WordPress Core contributor Elliott Richmond about using WordPress Playground for development, client training, and more. Elliott, welcome to the WP Minute.
Elliott Richmond (00:27)
Hi, thank you for having me. It's a pleasure to be here.
Eric Karkovack (00:30)
Yeah, I I I you you had written this really interesting blog post and we're gonna link to it in the show notes about ⁓ using playground for a client. But first I I I just wanted to ask you to tell our audience a little bit more about you a and what and what you do.
Elliott Richmond (00:46)
Yeah, sure. So my name's Elliott Richmond. I'm a longtime WordPress user and developer, self-talk developer. But to give you an idea, I have been using WordPress since its ⁓ inception. So before that, prior to that, I was using ⁓ Joomla and Drupal and very early on developing sort of websites for clients and recognizing that they needed something ⁓ that was more persistent than stuff that they could.
manage content themselves, which is why I then jumped into open source. And then stumbled across WordPress. And then long story short, my wife, I worked with my wife as a freelancer, well my wife now, Rachel, and as a freelancer. And then we ended up running an agency and we manage a handful of clients. And ⁓ yeah, and WordPress is my flavor of choice. So yeah, I also create content as well on YouTube as well as
running a local meetup. But yeah.
Eric Karkovack (01:48)
Okay, and I I
noticed like if if anyone looks at your avatar on LinkedIn and we'll p link to your profile, it is one of those avatars where you have to do a double take. We're not sure which way you're looking, which is really cool. Are you looking to the side or are you looking forward?
Elliott Richmond (01:59)
Yeah. Yeah.
It's actually two images that have been comped together. So it's a a a front facing image and then a side profile, which is basically been half the face and sort of comped in. So yeah, it is a bit of a double take. It I get loads of comments on that. So ⁓ well done for spotting it. Yeah.
Eric Karkovack (02:08)
Okay.
Okay.
It was like you cannot miss that. It it reminds
me of like those old posters we used to see in the nineties where you had like the 3D art posters where you had to find the little puzzle inside. But But a as we want to talk about Playground here, I know like a lot of us has probably heard about about Playground. ⁓
Elliott Richmond (02:30)
Yeah.
Eric Karkovack (02:40)
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 (02:51)
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 (03:44)
Okay.
Elliott Richmond (03:45)
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 (04:19)
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 (04:49)
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 (06:38)
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 (06:45)
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 (06:56)
Gotcha, gotcha.
Elliott Richmond (07:15)
And it's it stays current with the ⁓ with the GitHub your your version control.
Eric Karkovack (07:16)
Okay.
So so you I I r I read in your post that you kind of ⁓ got this idea at WordCamp Europe recently. how did that come about? I mean, w were you just w was there a presentation on the subject or were you just gathered around a table and and kind of just throwing ideas out there?
Elliott Richmond (07:42)
I did sit around the table, but the Philippe Sintra did give a keynote ⁓ presentation and that's when the penny dropped and he just demonstrated how he could fire up a ⁓ a WooCommerce store with 20 products and images that are referenced, then it just built the store. ⁓ it take takes a few minutes to load depending on how much content you've got there. ⁓ but that's when the penny finally dropped for me. I thought, ⁓ this is gonna be really useful for something that was coming up.
For me, the problem I had to solve in terms of a training session. So ⁓ yeah, when I saw that, it was like, Yeah, I've got to do this. This is a no-brainer. This this is just gonna be perfect and it's gonna work. And you know, it it alleviates that anxiety that clients get, you know, how do I do this? What I I'm scared to touch anything. It's like just just bend it, break it, do what you want because it it's not it's not gonna affect anything. So
Eric Karkovack (08:32)
Yes.
That's the beauty of an approach like that, absolutely. And it's something that honestly I is I I've used Playground a little bit, but I've never thought to do something like this. Like what challenges did you face in trying to get you know the the the data all together and and and kind of replicate the same environment that your client was going to be working in?
Elliott Richmond (08:48)
Mm.
Yeah, so the biggest challenge for me, I mean, it literally took me a couple of hours to set it up once I looked at the documentation. There are various things in the JSON object that you need to ⁓ you reference and then it it requires parameters. ⁓ so one of the challenges was to actually get the database. Now, if you imagine the existing site is maybe it's got a gigabyte in the database, trying to host that anywhere is gonna be a nightmare, ⁓ depending on how you you know approach it. So basically what I did was I just
Eric Karkovack (09:26)
Yeah.
Elliott Richmond (09:30)
stripped out a lot of the content and only gave them content just enough content skeleton content that they they could ⁓ use and will be useful for training so ⁓ yeah that was that was stripped out so i i got a one gig database down to about 50 megabytes i think it was which then allowed me to host that in github so if that data ever changes or we want to change it we can change it and just version control that data effectively ⁓ but yeah there's no reason why you can't host it
Eric Karkovack (09:47)
Okay.
Elliott Richmond (09:58)
Somewhere else. ⁓ it needs to be publicly accessible. but yeah, you can host it on your own site, on a on a storage site, whatever, just for resources. ⁓ but everything else was pretty pretty seamless, really. I mean, the the documentation's pretty well documented, it's up to date. there's not a lot in there that you can't do effectively. It's ⁓ yeah, it's it's just yeah, read the documentation. ⁓ anything.
You wanna install via GitHub, you can, but you can actually self-host that stuff as well. So but I think using GitHub is is a bit more powerful because you can do that version control. And anytime anybody comes back to that play playground blueprint setup, it's it's there ready to go and it will be the most up-to-date version of what they'll be used to in a production site, effectively.
Eric Karkovack (10:51)
So I've seen on their on their own repo for for Playground, they have some blueprint examples. i is that something that you you tried to use or was was there a tool that helps you create, or is it mainly plug it into AI and and see what comes out?
Elliott Richmond (11:07)
⁓ no, it was just using the documentation. And it the in the documentation there are sort of snippets of examples. So it was a question of just copying that out and and dumping it into my blueprint and then loading it. There was a lot of ⁓ reloading, ⁓ but literally just took a couple of hours. So initially what I did was I stripped the content right back to a couple of pages. So that really sort of would speed up the process of developing a blue blueprint effectively. ⁓ so yeah.
It was ⁓ I didn't I didn't you could strip away their examples, absolutely, because that is a really good way to start, you know, when you're dealing with open source, you go in, you dig into the code and you can you can see what's going on and and replicate things that way. So that that would be ⁓ the ideal way to do it, I guess, to sort of learn how to set it up. But I was literally looking at the documentation because there was only three criteria I needed, and that was can I install a theme or can I use my own theme? Can I use my own plugin and
Can I add my own content? So there's the XML import, which is really useful. ⁓ and then then there's just the plugin URL, which is a reference to the GitHub, and then the theme URL. And just by doing those three basic things, I think you're probably like 70% the way to get where you need to be. Again, if your images are hosted, you you need to have a ⁓ them hosted somewhere as well. So now
Re the reason it worked for my client is because everything in the database is referenced to their production URL anyway. So yeah, it's pulling in from data that already exists. So yeah, that wasn't such an issue. But there may be an instance where you need to host those somewhere as well, whether you put that in a git GitHub repo. There is something in the documentation that allows you to bundle up a zip file of your plugins and or WP content folder. So
Eric Karkovack (12:41)
Okay. So it's just pulling in from there.
Elliott Richmond (13:04)
Again, if you've got the hosting as a zip, you just reference it and it unpacks it all and loads it all up for you.
Eric Karkovack (13:09)
Okay, so that's pretty simple, considering it how complicated it sounds in abstract, that you could actually just have a zip file and it'll read that zip file and
Elliott Richmond (13:11)
Yeah, yeah.
Yeah. It yeah. It's ⁓ it's super simple. I thought it was gonna be a lot more complicated, but once you get into it, I was surprised, blown away how quickly I could get something up and running basically. So yeah.
Eric Karkovack (13:31)
This really seems like the future, doesn't it? I mean, because we we've already seen this used a little bit on the dot org ⁓ plugin repository. People can ⁓ ha run live demos of certain plugins, certain themes. It just seems like you know, 'cause w right now like I go through local installs for things to to build.
And that's fine, but when I comes time to share it with people, it can be kind of a pain to to, you know, set up a temporary access and then I have to turn the access on as and coordinate with the client. With Playground, it's just there, right? And and once you have that blueprint, they can access it whenever they want.
Elliott Richmond (14:12)
Yeah.
Yeah, absolutely. Yeah, I mean that was the the biggest barrier to getting these things out there quickly for clients, especially for training sessions, is like there might be a bit of a steep learning curve to say no, you you have to, you know, it's authenticated on URL so it doesn't get scanned by bots or whatever. ⁓ and for non sort of tech savvy people, it can be, you know, a bit of a barrier and obviously then they need
might need to reset a password if it's a user login that ⁓ they need to log in with and then you know again there's another barrier. But yeah with blueprint it's literally just load this and you're good to go. So the y even the authentication the the the the login is kind of like it just logs you in, it's there ready because there's there's no real sensitivity. You're not dealing with a a live database effectively. So yeah.
Eric Karkovack (15:04)
Yeah, that that's
that's that's awesome. I mean you really can speed up the process of of of configuring things and getting them out to people. I know you you also do some some plug in development and things like that, right? So I mean how do do you do f sense that you're going to expand what you're using playground for? Is i is it going to touch that maybe your development workflow a little more?
Elliott Richmond (15:28)
Yeah, I did a like a keynote for one of our local meetups about ⁓ the the anatomy of the block editor and the difference between site editor and block editor. and it was for users and developers. So at the end of the talk I then got into more technical stuff and then I started using Playground for Git commits or PRs and I just demonstrated how that would work. So that would that was an interesting point for developers.
So yeah, I th I think the future, ⁓ for me definitely is gonna be training ⁓ so that users know that or clients or prospective clients can either A, they can you can put this in your, you know, your proposal for pitching for for work. you can give them the look and feel. Maybe you've got some prototype stuff that you've already got that you can spin up really quickly, you can add that to the proposal and say, look, this is what your site could look like, get them to play with it. And then I think that's a real
powerful selling point to get your foot in the door. ⁓ for training, it's it's just a no-brainer. It just works really well. So and the other flip side of that for development, I can see it definitely being I I'll definitely start using more for PRs, especially with like theme work, because sometimes you want to you you you need to test something locally or you know just want to change something in the header and make it
alignment different but you don't want to affect the ⁓ the live site you can do it directly in playground mess around with it save it and then once it's saved to the database you can actually p commit a PR for that and then it's fixed and then you'll you know whatever your development workflow is or your deployment that will automatically update the website in production and you can demonstrate that with your client so they can see it before it gets deployed you say you know you can work to together on it on the screen
⁓ depending on what your workflow is. You could even get the client to do it, you know. It's kind of like that's a bit of a penny that's just dropped with me.
Eric Karkovack (17:37)
Yeah, I I can imagine too, like, you know, AI becoming like a ⁓ somebody's best friend with all this too, even if you're a little sketchy in JSON files like I am, because JSON files look really scary to me. I I could imagine having, you know, being able to tell AI, here's where my WP content folder is, you know, here here here's where I've got it hosted. Can you add this to a a blueprint?
and maybe feed it, you know, an existing one a as a an example. What advice would you have for someone who just wants to get started doing this?
Elliott Richmond (18:17)
⁓ for me it was ⁓ I I had a a real world ⁓ thing to do. I it the training session was booked in. So I just jumped in with with you know feet first and just hope for the best and just it just worked. So I would ⁓ my advice would be to just have a play around. Maybe just do a couple of things like can I add content? So export some content. You can actually, you don't even have to export content, you can actually generate pages, posts.
directly in the blueprint. So if you wanted to do it that way, you you absolutely could. But yeah, just dive in, but just keep it simple and you'll see how powerful it is and how easy it is to get set up. Because once that blueprint is hosted somewhere, it's there forever. And you can just adapt it, ⁓ make changes to it if you wanted to. So yeah, I would I would say and my also my recommendation is like, well do it for real. You know, try out with a client.
Maybe not a client that is a brand new client, just say you want to test this out and ⁓ get some feedback and see how you want to move forward with that relationship with that client, that would be ⁓ a way to do it. or even if you're just doing it internally with, you know, a couple of your own developers, give it a go. It's really quite easy to do, if I'm if I'm honest.
Eric Karkovack (19:36)
And h here's kind of a maybe a random question on it, but i how flexible is Playground with things like PHP versions, or does that just not matter here? Like I cause I could see a use case for I wanna upgrade to PHP eight point five but I wanna test it first. Is that something you can do in Playground or is that is that kind of like agnostic to the ⁓ the platform?
Elliott Richmond (20:02)
No,
you can absolutely do that. You can also change the WordPress version as well. So if you're if you've got a plugin that maybe you've not updated for a while, you maybe want to test it through various versions and and take that ⁓ incremental leap or or step to get it tested. ⁓ that might reveal some bugs in some versions so that you can you can address those as well. ⁓ it also has a really, really powerful ⁓ file browser. You can literally just drag and drop your
local plugins ⁓ themes directly into the browser and it will load them ⁓ on the fly. So that's a really useful sort of tool to use it as as well. If you maybe if you've got a plugin that you you you're not sure how it works, because a lot of the time with ⁓ especially with premium freemium sort of that that kind of scenario, you never really know what how the plugin's going to operate and what panels it's going to put in what ads it's going to put everywhere in the admin. So
That would be a really good use case as well to just test out a plugin that you you can maybe get from the repository, which you can reference from the repository actually. but yeah, if you download it, you can just drag it, drop, drop it in. So even for your own local testing, you you can do it that way. And I probably will start to use it more as well for my content because sometimes I just need a WordPress site up and running and I just need to throw this plugin rather than setting up a local.
⁓ inst instance and then setting up a database that's temporary that I'll probably never use again. I'll just shoot the content to demonstrate something. But with playground, you know, I think I'm probably going to start using it that way as well to demonstrate things.
Eric Karkovack (21:44)
Yeah, it's ⁓ it this seems like it's going to be pretty handy for developers t you know, i as we're getting into this thing. It it it's just kind of in the infancy now and I know it's like it's there but not a lot of people know about it. So I'm glad you wrote this post to kinda show what
is possible and once we start thinking of those use cases, you start realizing, my gosh, I should be using Playground like every day in my workflow. Why have I not thought of this before?
Elliott Richmond (22:13)
Yeah, yeah,
absolutely. I mean, I I think in the blog post I said or when I promoted it out, I said I I actually felt like I was late coming to the table with this because playground's been around for a while. ⁓ and blueprints have been around for a while, but I really didn't kind of ⁓ you know, bring the two together until I went to a WordCamp, you talk to people and then you realise or you see a keynote speech and then you realise, ⁓ and that's when kind of things start happening in your brain. You I can do it for this, or can I do it for that? And that's when
That element of intrigue gets ⁓ well for me particularly and I I just want to dive in and either if it's a it a development project, I want to dive in and see how it's it's been developed and rip it apart. But with playground, it was like, ⁓ I can do this, I can do that. my client can do this. And yeah, just jump in and and yeah, I I I thought genuinely I was late to the table, but clearly I'm not and and developers might not be doing it and thinking about it in this way. So
Eric Karkovack (23:09)
Ha ha.
Elliott Richmond (23:12)
If I've contributed to that, then great, you know, fine, dig into it. Let me know how you get on, you know. But yeah, it does work.
Eric Karkovack (23:17)
Yeah, I I think you've
you put your thought finger on something that a lot of people hadn't thought of before, including myself. So I thank you for for publishing it and sharing it with us, 'cause that's what the WordPress community is all about. We we learn and we share and and all of a sudden I I I have the feeling a lot of developers who listen to this show are going to be doing exactly what you're doing and probably reaching out to you for ⁓ for ⁓ some advice. ⁓ but where can folks get a hold of you online?
Elliott Richmond (23:26)
Thank you.
Awesome.
you can find me on X, ⁓ Elliott Richmond two L's two Ts in Elliott. you can find me on Blue Sky, you can find me through my website, Elliott Richmond.co.uk, and you can find me on YouTube, which is Elliott Richmond W P, ⁓ where I'll be probably putting some content together for playground and blueprints very soon.
Eric Karkovack (24:09)
Awesome. Yeah, we look forward to that. I the more we can learn about this I mean 'cause I I I seem to think like Matt Mullenwig really is plugging playground every chance he gets, so I think that's there's a and there's a good reason for it. So I thank you for coming on today and and sharing your story with us.
Elliott Richmond (24:26)
You're welcome.
Thank you for having me. It's a it's a great opportunity for me as well. So thank you.
Eric Karkovack (24:30)
Awesome. Well, thanks to you and and thanks to everyone who watched and listened today. visit us over at the WPMinute.com slash subscribe, grab our newsletter, become a member, join our Slack for free. you can talk about Playground or really anything else you're working on. We're happy to have have you along. ⁓ Thanks again, Elliott, and we will see you again next time.