 Hello, thanks for attending my talk about the WordPress Playground today or the famous five second install. My name's Dave Kellum. I'm a senior developer and team lead at Plank. I'm gonna tell you a little bit about myself first. Let's see, there we go. Just so we'll check, everyone can hear me fine. All right, so a little bit about me. I'm, like I said, senior developer, team lead at Plank. I've been making websites since the mid-90s, Go Geocities. I had a varied education. I've always been interested in computers, teaching and educating, design and typography. Fun fact, I had a tight face of mine used in Despicable Me 3. Let's see, my WordPress history. I think I discovered Blogger and then other CMSs like Moveable Type and experimenting with things like Drupal, Joomla and Moodle. And then I discovered WordPress. It was about 18 years ago and was like completely blown away by how easy it is to use, like how easy it was to upgrade and how easy it was to customize. I had one of the earliest plugins in the repository. It was called Flickr RSS. And that allowed you to display Flickr photos on your website. Also, despite being a teacher for years, this is my first time presenting at WordCamp. So obviously I'm a little bit nervous. Apologize for a bit of voice cracking and like sweatiness, but hopefully that'll all come down in a few minutes. I just wanted to mention like open source contributions. I used to do a lot more. I've contributed to Core before because I had that Flickr plugin. We've renewed our efforts. We're contributing and committed to the Five for the Future program, which is real cool. If you haven't seen it, check it out. It's basically you committing 5% of your time to open source projects and giving back to the community. For me, I have contributed to the Polyglots team doing some translations and I'm working on my first video for the training team. So like learnwordpress.org. Okay, so let's get started. Today's agenda, we'll have like an intro describing what WordPress playground is, how to customize it and how to use it locally. Then we'll look at some of its limitations and its various applications. And then finally like feel free to ask me like questions and I'll do my best to try and answer them. Okay, so a little bit of history and why I titled or subtitled this presentation the famous five second install. Just need to check something. Okay, so some background about why I subtitled this, the famous five minute install. If I was doing this in person, I'd ask people to like raise their hand and tell me if they knew about the famous five second install. So like WordPress sort of used to be known for its like ease of installation. You can sort of still see evidence of it in the project readme file. So like if you like unzip WordPress and see like the readme.html, it's like says famous five minute install in there. And like I don't know if anyone even like reads that readme anymore. And then I even noticed like with the WordPress 6.4 release yesterday I went to the download page and there's like a little blurb there that also mentions the famous five minute install. So like I think that made sense like 15 years ago like it was a lot harder to set up CMSs. We were live coding on servers, no source control. Like it was a big selling point. Just like a lot of other CMSs were really complex to set up. That's sort of become less relevant as things like WordPress oriented hosting providers have emerged and like local tool setups like you know, Vagrant, local WP, Laravel Valley, like lots of tools that just make it sort of easier to get spun up. But they're also still sort of very developer oriented. So it can be like difficult to get people spun up with like a local environment or somewhere to test things out for like training purposes. And so like introducing new people to the software can be a challenge. So I would like to introduce you to the famous five second install. So you just have to visit WordPress Playground and to see if I can use the call to action feature to pop that up for you. Don't know if that popped up a banner for people. So if you click on that, it should take you to playground.wordpress.net. And that should actually look something like this. So just a little video. So as you can see, you basically got a working version of WordPress in five seconds. And it's all like actually happening in your browser. So there's no server anywhere. And like the first time I saw this at WordCamp Europe this year, it sort of blew my mind. And like next we'll get into some of the details about like how this is actually working. So what is WordPress Playground? I will describe some of the history of the project and I'll also explore some of the technology behind it. So here's a quote from the project, read me. I won't read it all to you, but the gist of it is you've got sort of a controlled environment that you can play around in and not worry about like screwing anything up. And so like the most amazing part about all this, like I said, it's WordPress in your browser. And so like a little bit of history, the project started back like August last year, I think maybe earlier, like 2022, inspired by the PHP WASM project. We'll get to that, but it's, yeah. And there were experiments with people already getting Drupal running in the browser. So I think they used that as a basis to sort of build on and get WordPress running in the browser. There was the 1.0 release in April of the, sorry, not 1.0, 0.1 release in April of this year. And then I think there was the 0.2 just before WordCamp year up. And as of now, I think I just saw we're up to 0.3.1. One thing I found putting together as presentation, it was I couldn't really find any release notes on what had changed between them. And like when I tried reading the like not merge, the PR like the pull request, it was like something like 4,000 files changed. So I'm just sort of like, I really don't know what's going on. And one thing sort of about that release before WordCamp is it was pretty heavily promoted at WordCamp year up this year. There was like a number of demos and notably for participating on contributor day. So that allowed people on certain teams, like particularly like documentation team to basically get to work and start like working on documenting things like right away without having to get a local setup up and running. But when I'd gone to other contributor days before, like sometimes people would be spending the first like hour of the day like trying to get a local setup and running and like it's not necessarily a waste of time, but it's just like if you can take that hour back and it's just like it's an extra hour that someone can contribute back to the project, that's fantastic. And so it's also under very active development. There are a lot of ideas being proposed in GitHub issues. So like, I think it's just so new that like people are seeing all sorts of possibilities for it and we'll also get to some of those at the end of the presentation. All right. So let's look at how this works. So it's WordPress running in your browser, uses a relatively new technology called WebAssembly. And so WebAssembly is actually the fourth language to be introduced to the browser. The other ones, if you're not familiar, HTML, CSS, JavaScript. You don't actually need to write WebAssembly to use WordPress Playground. It's probably a little bit technical. It essentially ends up like you end up with compiled binaries. So like that's how PHP is sort of running in the browser. Someone took the time to compile PHP into WebAssembly so you could essentially use PHP, essentially treating your browser as the server. I mean, there's some weirdness going on like it sort of works for the most part. We'll talk about some of those limitations a bit later as well. One in particular is because it's not, like it's sort of a server, but not really a server, you can't do things like also have a MySQL server running. So instead, there uses a plugin called SQLite or SQLite. And so that basically sort of runs a version of SQL like in your browser that WordPress Playground can talk to. It should run fine in any modern browser. I gave a demo of this earlier in the year and it failed in Safari, but I think that was on an older computer. I think it's been in Safari for a while now though. And one of the really cool things about it being able to run in any modern browser is it also means it runs on phones and tablets. So if you like tried going and typing, Playground.wordpress.net into your phone or your tablet, it should spin up a version of WordPress right there. So that opens up a lot of opportunities for education and lockdown systems, so it's sort of really cool. And there's also two little icons up in the corner where you can, if you've played around and installed plugins and stuff and you've got a configuration you want or you wanna share it, you can then sort of export that and then import it back into the Playground at a later date. Which is great for demos and stuff like that. It can also be embedded via iFrames, which is really cool because you can essentially do a live working version of WordPress in the middle of a tutorial. So moving on, let's sort of talk about that customization that you can do. And so we'll look at a few different ways that you can customize the Playground using APIs. The first one's called the Query API. The second one is Blueprints. And there's a third one, which is a JavaScript API, but we're gonna skip over that today because there's more complexity to it. So starting off the Query API, it's the simplest way to make use of the Playground. If you're familiar with URL hacking, you just sort of like add a question mark to the end of the URL and start chaining parameters together. So you could do like, I have an example there, like slash theme equals frost and plugin equals co-blocks. And so that'll spin up a version of the Playground running the Frost theme with the co-blocks plugin already installed. And so you can use this to quickly test themes or plugins. You can also specify like which version of PHP it's using, which version of WordPress it's using. And you can also chain parameters together to install multiple plugins. So like, if you wanna install multiple plugins, you can't go like co-blocks slash advanced custom fields, or not slash comma, you actually have to do and plugin equals whatever and plugin equals whatever. So you can get a bit verbose, but it should work. You can see there's like a list there of the other parameters. One that's interesting is the mode and the seamless one, you wanna use that probably when you're embedding Playground in like tutorials or places, because then that takes sort of like that Chrome that you see like around the browser within a browser like away. So just sort of show you that example I've got listed there. So if you haven't tried that on your own in the browser, it's an example of using the query parameters to install the Frost theme. You can see like the URL parameters in the browser window there. And like, yeah. And then you can take it from there and try it with like different PHP versions, stuff like that. It's, I don't know, it's really cool. One thing though is like, if you change the query parameters, the browser will refresh and get those applied. One downside to all this is if like, you do refresh your browser and have made changes, you will lose them. So moving on to blueprints. This is also effectively a no code solution, but instead of query parameters, you're using JSON to define how you wanna customize things. The plus side is you can get into more complex interactions with steps where you can sort of tell it to do multiple things that's like a lot harder to do with the query API. But similarly to the query API, you can append those to the URL. But instead of like using the question mark, you compress your JSON all down into like one line. And then you put like the hash mark after the hashtag pound sign after the URL, paste the JSON in and then it should render all of that. Yeah, and then there's the JavaScript API. Documentation seems to be pretty good. I haven't even really played with that yet, but it's there if you want to explore it on your own. So you can also use the playground locally. And you can install like other versions of it on like servers to do things with. If we have time later, I might show you an example of that. So we'll take a look at an MPM package that's been created that allows you to spin up sites and also really cool extension for BS code. So the MPM package is called WPNOW. You can install it globally. Also thought about demoing this, but I have somehow broken my global MPM install. So like, you know, live demos and danger. But it's really cool because like once you install that, you can basically go into a folder for like a plugin or a theme, type WPNOW, and it'll basically spin up WordPress in your browser with that theme or plugin installed. So it'll be using like, I think, oh, I'll show you in a second, but I think it uses like a local host colon, you know, 888, something like that. And then it's also cool because it can be included in packages and projects. So I know there was a demo at WordCamp Europe or workshop. I know that used this. So he had that installed right in his like package JSON. So it allowed people participating in the workshop just to sort of get spun up with WordPress right away without say like having to create like a new local install, set it up, install a plugin, install his project. So it can just simplify like learning in workshops to like a huge degree. VS Code extension. This is actually was experimental. It's powered by WPNOW under the hood. So it's using that MPM package. Just search the VS Code extensions for WordPress Playground and it should come up. And basically it will install like a little, you know, WordPress icon in the sidebar. And it's sort of the same thing as describing that like if you have a plugin or a theme open in VS Code, you can just hit that icon. You'll be taken to your browser with that theme or plugin installed and activated. And you can just start kicking the tires. And like admittedly it's probably the main way I've used Playground so far. Like I haven't gotten into some of the like really cool new things, but it's been a great way for like testing out like various plugins particularly block based ones. Same thing we'll talk about the limitations later, but there's a whole host of plugins that it won't work for. There's sort of speculation that this really only works with something like 40 to 50% of the plugins in the directory right now. All right. So now we will move on to those applications and limitations. I think we should look at the limitations first just cause then we can sort of get into some of the fun stuff. So limitations on what you can do. Big one I've found for me in demos is it doesn't retain uploaded media well. Like it sort of does, if you open the zip file that you save, you'll see the media files there and you'll see the sort of unconnected entries in the media library. Like, you know, when you see like blank images there and the problem is is like the way web assembly works and like it just does weird pathing things that like it just doesn't retain that connection because it's using like random strings and stuff. That I don't know, that might get figured out eventually. So I'll just say like that's the limitation for now. So if you're doing like a demo, you definitely want to use images that exist on the internet somewhere. So like just sort of like plug in full images. The other thing I mentioned earlier is like it uses SQLite under the hood. So it can't connect to a database server. So like basically any plugin that requires access to a server like a caching plugin, media library plugins, anything like that you're not gonna have a great experience with. And like some of these things might go away as the project progresses because it's only at 0.3 right now. I don't think it'll be stable probably until like a 1.0 release. So, oh yeah, the other thing is you lose everything on browser refresh. There's sort of a couple other settings there. Like if you're in the playground and there's that little like warning sign PHP version, if you click that you can actually like change it to use browser storage. So you could probably keep playing with something locally and save the state but it wouldn't really be shareable the same way. And then like, I imagine like if you clear your browser cache it probably also goes away. There might have been another option there that I'm forgetting about. So let's move on to some of the potential applications. So like the obvious one is testing like testing themes and plugins and different versions of PHP and WordPress. Like makes it pretty easy so people can like beta test things for like say the core team or something and provide feedback. Like, you know, you're instantly gonna see if something's crashing and not working. For me, like why is sort of so mind blowing is the ability to use it as a teaching tool and like particularly like, I think I mentioned earlier like lockdown environments. So like, you know, say you're a school board that has like an array of Chromebooks that like, you know, those things are pretty limited. You often like don't have access to a file system. So that's a way that you could introduce students to WordPress say as a publishing tool and like bypass that lockdown education environment. From my experience in the training team people are also very excited about it because now instead of just sort of telling people, oh, you have to like spin up your local environment and do this and you know, do whatever. Instead they can just like attach a zip file to the tutorial and you just, you go there, you know, add the zip file and then you can work your way through the tutorial and like see what's going on. Next one, like plugin translations. That was something I just sort of discovered recently. It's very buried. Like if you go to the, I think it's translate.wordpress.org I don't know if it works for WordPress core but if you go into a plugin that needs translations up at the top, you'll see a little like, I think it's like a light, I think it's used to say playground now it says like live translate and you can go in there, click that and it'll actually spin up a version of playground with that plugin installed. And I think it also installs GlotPress. So you'll see everything that needs to be translated. I forget it's either in red or green and then the ones that are translated are in the opposite color. And then you can actually, I think, I forget how it works. I don't know if you submit right then and there or if it sort of tracks all the translations you've made and then you make the submission but it's sort of pretty cool because you don't have to like, again spin up your environment, install that plugin and then submit the translation separately. Just, you know, time saver. This next one was one that they mentioned at WordCamp as well. Sort of mind blowing that she even came up with this. It's like actually using WordPress Playground inside like the browser at an OS level. So like you can download this app now I think it was released a few weeks ago called Block Notes. So you can download that from the iOS app store and it actually uses like a live version of WordPress. You can use it as a note taking app, use all your blocks and then it actually stores that as HTML in iCloud. So you'll never really lose it even if you technically delete the app. I think it's, they're stored as raw HTML. You might lose some styling but it's still pretty cool. But there's some, probably some other opportunities there maybe like for like in like educational learning apps same thing like is that Chromebook situation. As I mentioned earlier, it makes it really easy to participate in contributor days at WordCamp. Yeah, you can just spin things up right away. One thing I sort of glossed over was that including like a Playground iFrame in your site. There's a few blocks out there already that allow you to install Playground sort of and there's one I just saw from Yoast which I'll see if I can pull up that it actually allows you to do like a short code, throw a whole blueprint in there and then like, you know, end the short code. And so you can just like have a demo running from a blueprint. And yeah, then there's some, a couple of cool new interfaces. Like I think if you go to Playground.wordpress.net slash WordPress.org, or slash Gutenberg.html, you get a webpage with like a text input box and you can actually go and enter a pull request from GitHub. So like a Gutenberg PR, grab the number, go in, put it in that box and then it actually will like pull that pull request into like your Playground install and you can sort of evaluate it right there. So like, there's some potential there for setting up your own Playgrounds. There's ways to ingest other plugins. I haven't quite got it working yet. But it's cool. Like I think everything has to be public though. So you couldn't use it to test private repositories. The zip files would have to exist somewhere. But like, could definitely be cool for like internal testing on projects when I haven't tested, you might even be able to embed a Playground iframe in a GitHub pull request. Yeah. So there, and this is what's like going on when you go to the GitHub issues is there's so many people just like excited about it and like just thinking, oh, well, there's, one thing they went and did was stuck a button on the plugins and they were like, they stuck a button on the plugins in the plugins directory that you could go and test the plugin live. And there was like a lot of pushback there because of those 50% of plugins that don't work like ones that access the server or if you do like a plugin that needs WooCommerce. Like WooCommerce is a big one that doesn't work well with it right now. So like, yeah, they put it there and all these developers are just like, yeah, everyone's gonna think my plugin's broken. This is not great. This was not like a decision made amongst the community. Please revert it. And they did, I imagine it'll become like opt-in eventually because like, right now you can go to the theme repository and demo your themes, being able to do the same thing with plugins is a good step forward. And yeah, I think I'll stop there for now. Get to the QA and then if there's not a lot of questions, I could potentially show a couple of those other demos. And I'm just going to advance to the thank you slide. Okay, let me close this. Okay, so I know it's QA. So let's see, Joshua as a teacher is excited to use it. Classroom rotation, yep. Yeah, especially if like kids like don't have their like, like own computer and they're just sort of like in the classroom and have to use like whatever setup you've been given by your IT department. Let's see, software developer, I just see it, Woo. I personally haven't seen any issues with Woo. I'm not like a big Woo commerce developer. I just, from reading a lot of the controversy around that button being added to the plugin directory, I just, there was a bunch of people mentioning Woo in particular. So I can always see if I can dig that up and get back to you, P now, different. Yeah, so flywheel, like local by flywheel or local WP, that's actually spinning up a full on like version of WordPress where like, you're essentially running a PHP server locally and a MySQL server locally and something else. And then it actually installs WordPress. And so like that's a real install. It won't go away. You can export it. That's the tool we use to develop most of our sites internally for clients. It's a great way. Like it works really fast. And especially if you're a developer and know what you're doing, like the main issue I see with Playground is it doesn't really persist. So like you couldn't really just start working on a client site the next day. And then like all those problems like I mentioned, like the media library and stuff like that. Let's see. Diving into more WooCommerce contributor days. It's a good question. Are there any other docs integrations or use cases that stood out to me? I don't know. Like I don't know if I'm as creative as some people. It just sort of seems like there's like so many different opportunities. And I think as this like web, as we sort of get a handle on this web assembly technology and figure out problems like making media library plugins work. I think that has a lot of potential. And like, even though I don't really use WooCommerce, a lot of people do. And if we could figure out how to like make sure all of those integrations are working fine, it'd be great. Sorry, I don't really know more about it. I just sort of came across it in passing. Actually, we've got a little bit of time. I'll try to end five minutes early just so everyone can get back to the closing speaker. Okay, let's just change, sharing, sharing, share screen. Let's go entire screen. Okay, let's, okay. Lots of tabs here. This is actually a pretty tame number for me. So this was one of the plugins I mentioned from Yoast. So it's pretty cool. You can basically any of the things from the blueprint, it might work with the query API as well. So you can just like embed a blueprint inside the short code. And so this is what I'm talking about when you can embed examples. You can also, there's an option so you can sort of collapse it down into a button and you get this sort of click to load. And then when I click it, you see it basically gets a version of WordPress with Yoast running in it already spun up. So that has a lot of potential. If you don't have a great environment for working with JSON, there was, I forget his name, but he was a speaker at WordCamp US and one of the main contributors to WordPress Playground. He created this, like his own version of Playground. So like at this URL up here, s-e-j-s dot e-s slash Playground. And so with this, it's really cool because you can go over to this JSON in the sidebar and I can go, okay, PHP version zero. And then in the window beside it, it will immediately refresh running 6.3 or on 8.0. And like it says WordPress 6.4 is available but I think they need to release a new version of the Playground because right now it's limited to the 6.4 release candidate. But I mean, it only came out yesterday. So, but it's just like, this is a way that you can, you know, play around with it and like not have to fiddle with JSON and then compressing it down into one line and all that, I will have these slides available to you. I mean, there's a couple other, like this was just the sort of that one demo I showed in my slide, same thing with the sort of, this is the whole like JSON on one line. And then the other things I encourage you to go and like actually look at the WordPress Playground repository, there's a lot of notes. There's like a vision and philosophy and roadmap. You can sort of see what people are thinking about and then go into like the issues and pull requests and see some of the ideas and stuff that people are having. And then the other one is the documentation for the Playground is really quite extensive already. So, start a Playground in five minutes, five seconds, silly people. Okay, with that, I will flip back over to my slides. So yeah, you can find me online, my own personal site that's got 20 years worth of blog posts that I barely ever update my WordPress profile and my LinkedIn and that QR code will take you to the LinkedIn. Cool. Well, thank you all for your time. Yeah, and if you have any more questions or want to get, you know, talk to me, just reach out pretty available online. I'm like Dave Callum everywhere else, you know, X, whatever it's called. Yeah, thank you.