 All right. Hello, everyone. Welcome to the developer hours. This week we'll be talking about the WordPress Playgrounds. We have Adam, and I'm sorry, I should have got sure how to pronounce your last name before we started as Zelensky. Yeah, Adam Zelensky. Okay. So nice to meet you all. Yeah, that's great. So if you want to be on video, you can. And this will be recorded and put on WordPress TV. I do ask that everybody remain muted during the presentation. We will have a Q&A portion at the end. So I'll invite you to turn on your mics then. In the chat notes, I will be linking to a couple of projects, this specific project and its documentation. For now, Adam, can you just give us a bit of your background and your involvement with WP Playground? Absolutely. So WordPress Playground is a project I started last year in an attempt to be able to teach WordPress on a website. So every single course starts with a setup that takes maybe some hours, maybe some days if you're less familiar with WordPress. And I just wanted to be able to write a course. I couldn't do that. I needed a full WordPress with REST API, all that on a server. That would be insanely difficult to make it available for like give every single student a separate WordPress. So then I thought, what if you could do it in a browser? And it turns out that was possible and that evolved into WordPress Playground. I'm a software developer working with Automatic for the last five years, for the last two years with WordPress. I'm a WordPress core committer also. And WordPress Playground is kind of my dream of solving WordPress setup issue slash accessibility issue. Awesome. Thanks for that information, Adam. Before we begin the presentation, I have a few announcements. WordPress 6.3 is in development at this point. So I look forward to everybody hopping over to track or get up and taking a few tickets and getting involved in however you can. WorkCamp Europe is from June 8th through the 10th. WorkCamp US is August 24th through the 26th. That's a little bit earlier than I spent in previous years. So keep an eye out for tickets. And there's more local work counts being scheduled. I'll share the link to Central WordPress and these other things in the chatroom. So that's just a bed of house cleaning. And we can get over to the presentation of WordPress Playground now, Adam. I'll just turn it over to you. Awesome. Perfect. I'm going to share my screen now and start the presentation. So just a little bit of a setup. All right. So WordPress Playground. And I just to confirm, are my slides visible on the screen right now? Yes, I can see them fine. Perfect. So WordPress Playground. This WordPress is running in my browser and it uses only JavaScript. So there's no MySQL and there's no PHP and there's no server at all. In fact, this is just JavaScript. So it's called the WordPress Playground and I'm about to tell you what you can do with it, how does it work, and how to start using it pretty much today and build something with it right after this presentation. So the primary problem itself is that WordPress is difficult. And I don't even mean building a website with WordPress, but just starting your journey with WordPress. So if I'm a user and I want to start using WordPress, someone told me WordPress is really cool. You should check it out. I'm going to type WordPress in Google. And then I find out this installation page that tells me to install a lot of stuff that I'm not familiar with. I have no idea where to even start installing something like Apache or MySQL. So maybe I'm going to look into something else. Alternatively, I could pay a hosting company, but I don't want to do that just to check what WordPress is. And if I'm a developer, well, I want to learn WordPress, but every single course starts with a setup like this. So I have to go and install a bunch of stuff and set up a local environment and something like Next.js maybe has a live tutorial on the website. Or, yeah, so maybe I'll go and check that instead. Or if I'm in a product team and my friend, my colleague, sent me pull requests to test. Well, I don't have a local testing environment and I don't have a staging server, so I'm kind of stuck. I'm not sure how to proceed with this. Or if my company builds a WordPress plugin and I just want to be able to show it to my potential customers, well, I cannot build that easily. I have to use videos and screenshots because I cannot give everyone their own WordPress that would be pretty expensive. And if I give everyone the same WordPress and WordPress admin access, people will change that content. That's not something I want. So when it comes to WordPress, it is quite hard to install it as a new user. It's hard to start learning it, then test changes and then distribute code. So what's exactly easy about getting started with it? Like, this is a pretty exhaustive list of things I want to do as a newcomer. And there are some existing tools to make that easier, like there's local and WPNV. And they helped me with installation and testing, but I'm not going to embed a local on my online site, on my home page. Or I'm not going to be able to use it in my course as a live thing. And then I need to download things and I need to install them, which means I need a desktop device in the first place. What if I only have a phone? So WordPress Playground is a way of solving all these problems with a single click of a mouse. So installing WordPress, well, click and it's done. This right here is the actual demo on developer.wordpress.org. And all these links and notes are going to be shared in a Zoom chat, by the way. So I can go there, I just chose a theme, a few plugins, and it's already live. This is my own WordPress running in my own browser. It's an actual WordPress installation, right? It's not the same WordPress that everyone else is using. This is my own WordPress installation. If I want to learn how to code with WordPress, well, it can look like this. So this is an article that I have published on my blog. It uses part of WordPress Playground called PHP WebAssembly. I'll be talking about it later on. So this is an article teaching a new API in WordPress 6.0. It allows you to manipulate HTML. Anyway, there's a code snippet right in this article. And I can change it so I can run it. It's going to execute and then I can change part of it. So I can say hello, WordCamp. And if I run it, well, it's going to rerun right in my browser. I didn't have to install PHP. I didn't have to install any development environment. I just visited an article. I clicked it. It worked. Furthermore, if I'm only a prospective developer and I'm thinking about maybe switching careers and I'm learning programming right now, well, I can do it on a phone or on a tablet. I have a break right now. I'm on a train. I have some time. I don't have a full-on laptop, but I have a tablet. Well, sure, this thing works. I can use it on mobile devices. There's no need to install anything at all. And once I'm ready to develop with WordPress locally, I don't have to install the PHP server and my SQL and all of that. I can just go to my Visual Studio Code, install WordPress Playground Plugin, and it's going to give me a WordPress development environment. So I can start modifying WordPress if I want to, if I want to just write a simple plugin like... All right, I don't have that slide. If I want to just write a simple plugin, I can do that. I can develop themes. I only have to click a button, install the extension, and in the sidebar, I'm going to have a start WordPress server button that will do everything for me. So I can start it super easy. Then if I want to test code changes, click and it's done with WordPress Playground. Like this time, when we have a pull request, there is a link in here that goes to playground.wordpress.net, which is the official demo site. And let's take a look what happens when I click it. So this one adds a secret message to WP Admin. And if I go to that link, well, my pull request is already applied there. And I don't have a staging environment. I don't have a server. Well, let's test it on PHP 8. Oh, there's an error here. Well, good thing it was easy to test, right? I only clicked a button and use a different PHP version. So WordPress Playground can also do that. Finally, if I want to showcase my plugin in my home page, make it very easy for people to use, well, instead of using videos, I can just put WordPress in there. So this is a WooCommerce store. I can open a product. I can add it to my cart. I can view my cart, go to checkout like it's an actual WooCommerce store live in my browser. I don't have to, oh, and this is how it's implemented by the way, the live demo takes about 24 lines of code for the developers here. So this is not hard at all, right? WordPress Playground makes these things very accessible. So I'm going to tell you in details how to get started with building these apps. But first, let's take a look under the hood and see how exactly WordPress Playground works, like what makes WordPress usable inside JavaScript. So WordPress, I have a Polish word here. WordPress Playground consists of two parts. There is a PHP that's working in the browser and there's WordPress that's working without a server. So PHP working in the browser is enabled by a new technology known as WebAssembly. WebAssembly is just a way of building the software that we know from regular computers and desktops and servers into JavaScript or a format that JavaScript can understand. So in this particular example, PHP interpreter, like PHP, the programming language, that's also a program and that program is created in a C programming language. So this is how a simple C program looks like. This just prints hello world on my screen. So classically, if I wanted to use that on my desktop, I would need something called a compiler that would create a file and then I could execute that file. So maybe on Windows that file would be called hello.exe. Maybe on a Linux it would be hello.out, but I can run it and when I run it, it prints hello world on my screen. So it turns out if I want to do the same thing for WebAssembly to be able to run this in a browser, I can also do that. I just need a different compiler that can build it to WebAssembly and JavaScript. So that compiler is called mscripten and when I run it, I'll also get executable files, a WebAssembly file and a JavaScript file and then I can execute them anywhere I have JavaScript. So I can do it in Node.js, I can do it in a browser and it's going to print hello world all the same. So now I can take a regular program and make it into a JavaScript program. So back to PHP interpreter. This is a C program in itself and this means I can take a PHP source code and use mscripten to create a WebAssembly program out of it. So then I can take that and execute PHP code in a browser. So I know there's a lot of concepts here. There's a C programs, PHP programs, executing things like the most important takeaway is that I can take PHP, the programming language and I can put it in a browser and then I can run PHP code. Oh, and PHP has plenty of versions and WordPress Playground supports many of them. So this looks more like this, right? We have a set of files for every single PHP version. So switching versions, as we've just seen in the demo when I was testing that pull request, that's actually pretty boring technically because I only tell the browser to download a different WebAssembly file. Like it's just static files. So then we also have WordPress without a server, that was PHP and this one gets even more interesting. So normally when you want to run WordPress, you need to download WordPress, install it and then open it in your browser and start navigating. So downloading WordPress, that's a solved problem. You go to WordPress.org, you click download, you have a zip bundle and the browser can do the same. There is a fetch API, you can use it, you can download zip files, that's fine. However, installing WordPress is a bit more interesting. So classically to install WordPress, we need a MySQL server, right? Database server and then during the installation process, WordPress will ask us what's your database cause, username, password, all these details. Only problem is in the browser, we don't have MySQL. So how do we exactly install WordPress Playground? Well, WordPress needs to store its data somewhere and instead of MySQL, we use a database called SQLite. There is a SQL translation layer in between WordPress and SQLite and by the way, that's an official plugin. You can download it, use it in any WordPress project you have. But in WordPress Playground, we pre-install it and we use it so that WordPress thinks it talks to MySQL but the translation layer actually takes any database query, rewrites it in a different format since it's over to SQLite, gets the results and translates them back for WordPress. So WordPress thinks it has MySQL that it needs, it's a hard dependency, but actually we made it work with a different database. So that's the installation, but we still need to be able to open WordPress in a browser and navigate it. So to do that, we need to solve a problem. Classic WordPress works in this way. We have a web browser, we have a server somewhere in the Internet with PHP and WordPress. So our web browser tells it, I want the homepage of your site and the server renders it, sends it back, all that happens when we type the address in the browser, like mywebsite.com. In case of WordPress Playground, well, there is no server anywhere remotely. So we cannot ask that server through the Internet. So instead, we take that server and we put it inside the web browser. So web browser now has two functions. First, it is a device to browse WordPress, to navigate through the pages, log into admin create posts, but it also plays a vital second role and acts as a WordPress server. So the only remaining problem is how to force that browser to use that server when you type something into your browser address bar. And to do that, WordPress Playground uses something called Service Worker, which is a, well, kind of like traffic controller for your network traffic. So it stands between the web browser and the Internet, and it says, well, this part of the traffic goes to the Internet, but this other part, I want to handle it on my own. So what we do is we redirect every single web request that would normally go to the server back to the browser, to a WordPress server that runs on our device. So that's it. We have a downloaded WordPress. We've installed it with a SQLite as a database. And now we can also navigate it. So what to make out of all of it? Well, let's see how WordPress Playground can be used to build things. So there are four ways, or primary ways to use WordPress Playground. The first one is very simple. It requires no coding at all. And then there are progressively more powerful, but also more difficult APIs you can use. So let's take a look at the no code way. To use Playground without code, you can go to playground.wordpress.net and you immediately get your very own private WordPress instance. And by the way, everything you do there stays in your web browser. The data is not sent anywhere. It's not shared with any external service. So you can import your website there. You can try any risky changes, like switching a theme or updating homepage content or installing 20 different plugins if you want to. It's completely safe. And if you want to start over, you just refresh the page in your browser, you get completely new WordPress. So without a code, you can also do a couple of other things that I'm going to show you in just about a minute. You can build a theme or an entire site and you can save it. And once you save it, you can import the changes to your own website or you can host anywhere you want. You can try a plugin or 20 plugins or a theme. And you can also test your code. If you happen to be a plugin developer, you can test your plugin on multiple PHP and WordPress versions. Then the next way to use WordPress Playground is through something called a query API. And query API is a way to take WordPress Playground and embed it in your application using an iFrame. So this code snippet right here looks like the preview at the bottom. So we put an iFrame on our site, we point it to playground.wordpress.net and we add a little something to the address. In this case, we say theme equals pendant. And this tells WordPress Playground that we want to use the pendant theme from the theme WordPress theme directory. So it's going to download it for us and install it and activate it. And that entire process is automated. So there is more to it than just customizing themes. You can also challenge to pre-install a plugin or multiple plugins. You can challenge to visit a very specific page once it loads or to use a specific PHP or WordPress version. That's just by appending things to the URL. And in fact, the demo on developer.wordpress.org, the one that was on the very, very second slide on this presentation, the one where we were selecting themes and plugins, it is actually built on top of the query API. So whenever I select a theme and a set of plugins, all it does is it prepares this query string that says, oh, plugin coblox and plugin BBPress and theme skatepark. And it uses that to load WordPress Playground and inside that iframe, all this work happens. So these things are downloaded, installed, activated, and then I get to enjoy a site where all of it already works. So in short, like that demo, it is very simple, right? Like all the work happens inside WordPress Playground. The only thing that demo has to do is to come up with the correct address to load it. Another way to use WordPress Playground, the one that's quite a bit more powerful, is so-called blueprints. So blueprints are JSON files that describe all the steps necessary to set up a specific playground instance that I want to have. So with blueprints, you can do everything you can do with query API and more. So we can run PHP code during the setup. Like this blueprint on the screen right now is going to create a post in my WordPress. You can tell it to login. You can create any PHP or any other file you want. You can install plugins not just from WordPress plugin directory, but any plugins at all. And you can do even more than that. There are some use cases described in the documentation and, again, like one of the links on the chat will point to a resource page where that's mentioned. And you have a ton of control over a playground instance. And this API is also quite approachable. You don't have to understand JavaScript. You don't have to know how to code. If you know how to write code, this is perfect. It will help you run pre-configured site with PHP. But you don't have to know that. You can write JSON and declare what you need. And this API can also be tried out pretty quickly. So documentation has some life examples using blueprints that you can just click try out and it will run them. And then you can customize that code and see what happens. And the way to use blueprints, technically, you also don't need to install any node packages or you don't even need to create a HTML page or a JavaScript file. You can literally write a blueprint and then paste it in the URL bar. I will show that in a couple of minutes. So with blueprints, excuse me, with blueprints, one cool thing was built with blueprints. So this on the screen right now, this is called Translations Playground. And it is a website and if you go to it, it will download translation files for WordPress. It will install Glotpress plugin. It will install a plugin of your choice. It will activate it all and set it all up in just the correct way. And then it will allow you to start translating WordPress right in your browser. So we don't need any setup at all. You can just visit a link and it's all there. And once you're done, there is a button to propose these translations for official WordPress translations. I'm not sure that's a proper name. And this even has integration with chat GPT. So you can literally use chat GPT to translate WordPress in your browser with no setup at all. So this was built using WordPress Playground by Alex Kirk. And there's a URL and it will be also mentioned again in the resources section. So finally, the last way to use WordPress Playground is JavaScript API. And this is available through an NPM package. So we have to have a developer and environment and you have to install it or reference it through a package URL. And this one has the highest barrier of entry, but it also gives you the most control. So this on the slide right now, we start Playground connection. We give it an iframe. It loads in there, create a file. We run that file. We can issue a request to WordPress. We can do anything at all. We won't like download anything from any URL. We can install like 50 different plugins and some of them are private. And we can put like 10 themes in there and we can put like a tile layout of 10 Playgrounds each with a different version of WordPress and PHP if you want to install it, if you want to test your things like very efficiently. All these things can be done with the JavaScript API. The downside is that you have to know JavaScript and install it and then like probably read a little bit more carefully through that documentation. So it is an excellent way to use it. And in fact, like Blueprints API and Query API are both built with that. But there are also other APIs that you can use to make it simple. Like in fact, the Translations Playground that I showed like Blueprints are so powerful that this app was built with Blueprints. So this is the last slide that I'm going to show but I also have a short video to share of what you can do specifically with less code or sometimes no code at all. So where is my mouse cursor though? Oh, right, there we go. So with WordPress Playground, you can create... This is WP Admin. It's a Playground that we've all just seen. So we can install plugins in there. And one way to do it is, you know, like if you want to install a Gutenberg plugin and a Query Lock theme plugin and a Skatepark theme, we can literally download them and go to plugins in WP Admin, add new and start. So first thing we're going to see there's a little error and that's because as I mentioned, WordPress Playground is private. It doesn't send any data anywhere. So it cannot communicate with plugin directory. Like that's one downside of this. So we want to be able to see it at least from directory, but we can upload them. And I'm just going to click on this upload button and upload zip files. In there. So... There's one. And we're going to install it and activate that. And we're going to go through this process with the Adder plugin and with a theme. And it is a little bit painful and it is a little bit tedious to do this every single time. So we're about to find out what other way there is to do that. And we've already seen it today. So... Here goes a theme. We install. We activate it. And it turns out like... This WordPress already has these things once we did it. So here's a skatepark theme. And in WordPress Admin, we can see there's a Gutenberg position in the menu. We can go there. Yeah, there's the Gutenberg editor demo. So that took a little bit of time. We could do it, which is great, but here's a more automated way. So instead of uploading everything manually, I'm going to start over. So I refresh the page. I have a completely new playground. So right now, in the URL, I'm going to use the query API. So I'm going to say theme equals skatepark and plug in. Did I just drop out? Yes, I was just about to start chatting about something completely different, but you're good. All right, let me... Let me share my screen again. Sorry about that. So once again, I need to rewind this a little bit. Sorry about that. So I'm going to install plugins in an automated way right now. And to do that, I'm going to type theme equals skatepark and plug in equals Gutenberg and plug in equals skatepark theme. And when I press enter, that's all I need to do to tell playground, hey, handle that for me. I don't want to download things, upload them, activate, just do it. Figure this out. And that's exactly what's happening here. This is the exact same website as we've set up manually. Only took like 10, 10 slides. And these plugins are here. Gutenberg demo is active. And I can just start doing whatever I wanted to do. To do with this playground instance. So this is probably one of the most easiest way to start building things with playground. Now let's build a theme inside WordPress playground. So we still have our plugins. There's a Gutenberg create block theme and skatepark. So I go to site editor, and I'm going to inside editor, start customizing the site for a little bit. So I'll change the background. I'll make it blow. Let's make it blow. And I'll make a bunch of other changes. And to save you 10 minutes, I sped it up. So maybe different fonts, line heights, all this. So now I'm done. And I can go in options to create book theme. And in the site bar, if I scroll a little bit, there's an export button that I can press and download this entire theme that I just built as a zip file. So this has all the files needed to import that theme in a new WordPress. So if you go to playground WordPress.net, again, this is the new instance, fresh one. We go to appearance themes. We only have one theme right now, but I'm going to upload that file that we just downloaded. And when I do that and I install it and I activate that theme, well, we have all our customizations in place. So I just built an entire theme in Playground. I started by forking an existing theme, made a bunch of changes, downloaded it. And now it's good to go. And any WordPress out there can install it and use it. So that didn't require any setup at all. So this site is a bit empty. And I'm going to import some content to it. And WordPress allows you to export your content and import it. So I'll go to tools and import. And I prepared a file earlier on that and can now upload in the importer. So going to select it is an XML file. It has a testing content for themes. And I'll also have to select the author for all the posts. So once I submit it, first thing we're going to see is a bunch of errors. And that is because these files are remote, right? So WordPress Playgrounds will not go to the Internet and will not download the media files. That's a thing that may be there one day. But other than that, all my content is in place. So I can go through pages. They have a bunch of content. I can just make themes with different layouts and headings and all that. So let's go a step further and build that entire site in Playground. So this is the documentation site for WordPress Playground. Let's recreate that in our new theme using our colors and fonts and global styles. So I'm going to copy that content, find a pattern that seems the most useful. So this is a two column pattern. And I'll just space this content here and do a bunch of other ranking. So again, let's speed it up. I'll put a video here, like some colors, adjust the money. And after a couple of minutes, I'm going to have a website that has that documentation homepage in it. So WordPress Playground, there's a description, there's a video with our buttons. So that looks pretty good. Oh, and notice this is a preview in a new tab. So I want to save it because I wouldn't like to lose it. When I refresh WordPress Playground page, that will be lost. So let's save all of that. So there's a little button in here that I can click. And this is an export button. What it does is it downloads the entire site. I have in WordPress Playground. By entire site, I mean, well, let's open this. So all WordPress core files are in that zip. Did I just stop that video? I might have. Oh, no, it's playing. It's just a very long pause. So I can unzip that file. And all WordPress core files are going to be in there. And that's unsettling movie long. Well, something's wrong with my quick turn. That's me. Oh, they can call issues. All right. Oh, no, oh, no, oh, no. I'm sorry for that. Please give me a second. Well, all right. I'm not going to be able to finish that video. So it seems a little less for that, but I'll use, I'll paint the picture with, with my words, hopefully. So if I take this file and I unzip it, it's going to have the entire WordPress website. All WordPress core files like WP content and WP includes and WP admin in it. There will be all plugins that I installed in there, all themes and even the entire database as a sequel, light file is included inside. This means I can take this zip file and I can host that website on any web host out there and it will work. And I can also take what I just built and I can transplant parts of it to my running site somewhere else. And then once I want, let's say I want to share that with someone, well, I can go to Slack and I can drop that file in there and another person can take my WordPress Playground zip with my site that I just built, open a Playground themselves and they can just import it in there. There's another button in WordPress Playground UI right, right next to the one I used to download this, it's for importing and it accepts this exact type of files. So I can go to WordPress Playground, I can build a site, I can download it, it has everything in it. I can share it with other people and then I can also pause working on it, resume later, re-import it to some more changes, this kind of workflow. So one last thing that I had on a video that I'm going to stop right now was testing Playground with specific PHP and WordPress versions and I already gave a glimpse of that before on the slides. So if I wanted to try my new site with WordPress, let's say 5.9 and PHP 5.6, I could do that by importing it, setting the correct version and then I would see, oh, it looks right on 6.2 and 6.1 WordPress versions, but then on 6.0 that I also really wanted to support, well, there's a visual glitch and maybe on 5.9 it cannot be imported at all, like there's an error. So that's a very useful thing to learn from your own testing. You don't want to build something and then have people tell you there was an error in it. So once you do all that and you want to build yet another site, you can do that by simply refreshing the browser tab. So one last thing I'm going to share visually is the documentation page. And again, like the chat has a link or will have a link. I'll make that a little bigger. So this is WordPress.githubio slash WordPress Playground. And in here, I can click right now that the demo I showed before, I can get started. And in this section, there are all the APIs that we discussed, query API, there's some blueprints, JavaScript APIs. They all have reference here. They all have examples, there are tutorials. You can start using WordPress Playground in five minutes and it covers trying out blogs, themes, plugins, saving your site, all these things. And there are even if I go to get started with blueprints and I go to paste blueprint fragment. Well, the way to use blueprints, as I said, you can just paste them in URL. Like I write some JSON and then I go to playgroundwordpress.net slash I put this little hash sign here. And then I just paste what I wrote, right? No development environment required at all. So one cool thing about blueprints 2 is that a bunch of them have live examples in the docs. So if I click try it out, it will start WordPress Playground instance with this. So right now I can only click it and play with it and see like WordPress 5.9. This is the same version. So right now I can only try this example. In the nearest future, this will be interactive. So we'll be able to also play with it right here. And that's all I wanted to share during this presentation. I think we can open it up for questions. All right. Thank you, Adam. That's really great. So I'm already thinking of ideas. I want to use it myself. But yes, I do want to open up the question and answer portion of this session to everyone. I don't know that we have the Q&A enabled on this meeting, but you can ask directly in the chat or you can, you know, turn off your mic and just ask us any questions you want. Is it possible to export and import Playground files to GitHub? Sure. So there isn't a button that will do that for you, but you can absolutely download your entire site or export parts of it. And then you can put these files on GitHub yourself. What would be, like, what are you thinking of? Like what's your case? Because that sounds interesting. Everything in code. I'm using WordPress Engine, Patent Manager, and I just made some patents. Those are written to my theme, and I just want to make a little commit and push. Oh, gotcha. So let me see if I understood you correctly. So you're working with patterns, and you would like to modify a pattern and then just push your changes to GitHub. Is that right? That's right, exactly. Given that WordPress Engine, Patent Manager plug-in automatically writes patents to the theme. So that's taken care of. Where is that? Where's the code? All right. So I don't know much about WP Engine, Patent Manager, but it writes that to a theme. If that's a local file, like a PHP file, then one of the things I showed on the presentation was the Visual Studio Code extension for WordPress Playground. So this is not in the browser, but if you have Visual Studio Code and you run WordPress Playground there, like it will set up an entire WordPress for you, you'll be able to work with your patterns, preview them, all that, and then commit these local files. If you are looking for in a browser workflow, then I guess you would have to, at the moment you would probably have to download the entire site and work your way from there. But that is an interesting use case. So one of the things we want to do in the future with WordPress Playground is have an entire development environment in one way or another. So there would be a code editor, there would be a terminal emulator, you would be able to use WPCLI, and perhaps there would be even Git integration, right? So then your workflow would look like this. You would go to a website, you would do your magic, and then right there you would have everything you need to project to Git. So it's not so integrated today, but it will be possible in the future. Okay, that's a fantastic answer. And another example very similar would be using the Create Block Theme plugin, where you overwrite with your customizations. You've done some customizations as you showed during your presentation in the site editor, and I just want to get that in code. So I use the Create Block Theme plugin to get that code overwrite using the overwrite option of that plugin. And it does the same thing. It writes to the code. If I did that while I was in the Playground, where would the code go? So Playground, if you use Playground in the browser, it doesn't have access to your local disk yet. That's a feature that's coming. So that will be really cool. But for now, all the files live in memory. So like there's actually like a huge JavaScript object that pretends to be a file system, and there are directories in it and entries that represent files. So whenever you write a file, whenever you update a PHP file in there, it actually updates an entry in that object. And the export function, the way it works is it tells PHP to zip your entire WordPress directory using that file system, that JavaScript object, and then it downloads it. So the files live in JavaScript at the moment in the browser version. If you use the VS Code version, they leave on your disk, and these are your regular files. All right. That's good. We have a question in the chat from Kaiser. Is every WordPress instance we are building in Playground, does it run inside of Docker? Oh, there's no Docker involved at all. That's the magic of WebAssembly. So WebAssembly is this new technology that allows you to run regular programs that you only could run on desktop computers before. It allows you to run them inside JavaScript. So everywhere you have JavaScript, like browsers, Node.js, Visual Studio Code, you can run in this instance PHP. So PHP runs directly in the web browser. I know it seems like magic, but it's actually true. You get that statement right. PHP runs in the browser. PHP runs inside JavaScript. So WordPress Playground runs WordPress, PHP software through JavaScript thanks to WebAssembly. So there's no Docker involved at all. It's just your browser job. And that's why the minute you close your browser tab, your WordPress is wiped and you can start from a clean slate. And that's also how it works on a mobile device. You cannot install Docker on an iPhone or on an Android tablet. But about Android tablet, I'm not sure. Maybe you could jailbreak it and work something out. But point is Playground allows you to just open, go through a link, and that's it. The entire WordPress works there. No prerequisites, no dockers, no Apache servers, no package managers. It just works. Did I answer your question? I hope so. From Kaiser, let us know if you need it. Okay. Yeah, he said yes. All right, so next question from chat. I believe you've maybe already kind of answered this. Will uploaded media also be stored temporarily? Yes, there is no server behind all that. So it's not stored anywhere else. It's not in a cloud. It's not on someone else's computer. In fact, you could argue it's not stored at all. It's just in a memory of your computer. So WordPress Playground has this upcoming feature, that will allow you to use it in a persistent mode, sort of. So like you'll be able to open a special window and it will save everything to local storage in your browser and then you'll refresh it. And this is the very same WordPress that you just left will show up again. Right now it works only as long as you keep your browser tab open. So yeah, it is temporary at the moment or fmrl. All right. Yeah, we'll get some more questions coming in. Are we able to use WP Playground offline somehow or create our own playground. Yeah, absolutely. Yeah, so one of the. All right. So, once I load WordPress in a browser tab. I have the entire PHP runtime downloaded. I have all WordPress PDFs downloaded and I can turn off my internet. And I can go through WP admin. And maybe sometimes I'll see a missing CSS file because the study assets are on a server, but entire application, like the logic. It lives in my browser tab. So, in fact, there was a cloud first hackathon earlier this year where I and me and Daniel backcuber we had a project. Called in browser WordPress development environment. So what we did there was we use stack blitz. And in stack blitz we managed to run WordPress playground because you can run JavaScript there. And then we opened that on an Android phone. We turned off the internet access and we created a tiny, tiny plugin and we could edit the plugin files offline on a phone and then we could go in WP admin, like activate the plugin and our change was there. So yeah, you can absolutely use it online through a browser. Once you load it, eventually it will be a PWA. So you'll be able to open it even like even loaded without internet access provided you loaded it at least once in the past and the visual studio code extension that doesn't talk to the internet at all. It leaves completely on your local computer. So if you download it, you can turn off Wi-Fi and it will just cause the WordPress development environment on your machine. Oh, great. We'll get a great question here from Kaiser again. If a custom plugin tries to create custom tables in the database will playground allow that or we start with say, okay, yeah. It will allow that. Yeah, go ahead. All right. I mean, like, I thought Justin, you wanted to add something to that like I want to expand on it so. Oh, go ahead. The playground will allow that we've been actually running WooCommerce on it, which creates a bunch of custom tables. And it also has more complex SQL queries than vanilla WordPress. Like, it does something called select from dual, which is not available in a in a SQL light. It does complex joins and all these things actually worked. So, I really like this question because the need to support custom tables and complex queries, it actually drove forward the SQLite integration plugin for WordPress. So this is a separate project living in its own repo. We can install it in any WordPress. And as I was adding features to playground, and I was running into roadbox related to database databases. I kept contributing to that SQLite integration plugin. So a bunch of features were actually developed to be able to run more things in WordPress playground. So this includes custom tables, custom SQL queries. I don't, you cannot run procedures yet. Maybe one day, but you can do a whole lot of interesting things, even though this is SQLite and has fundamentally different set of features than core, than core my SQL. All right, great. Yeah, we still got more questions. Oh, we can keep up with all of them. So, Eduardo asked, are there ways to tie this to our development process like using WP playground within the, that process. He listed an example for, for example, creating demos for pool requests. Absolutely. So I'm going to share my screen for just a second. If I can very quickly find an example of a pool request previewer. Oh, I think I'll be able to. But on a very high level. All right, I'm not going to be able to find it now to but so it's summer in the documentation like more fleshed out example but very quickly to answer that. Yes, you can do that. So the blueprints API that I showed earlier. It allows you to install any WordPress plugin or theme and you can use any URL to do that. So the trick to previewing pool request is that if you have a GitHub repo, and you have a word plus plug plugin or theme there. Well, you probably have some unique tests for that, hopefully. And if you have them, then you may have a continuous integration like CI pipeline there so it will build your plugin run the tests and show a green checkmark. This PR is good. So I built a Gutenberg plugin previewer for with WordPress playground. And here's how it works. It installs a Gutenberg plugin from a special URL and that URL is my custom endpoint that downloads the build file from GitHub CI right so we run tests we build a plugin and then this plugin is exposed to an endpoint. And this endpoint is used by a blueprint. All the blueprint says is, well install a plugin. Here's a URL. That's it playground download that it that URL happens to have the version of a plugin from this specific floor request, and it just works. Right. And again, like there's more about that in the in the doxy that was too fast to quickly. All right, thank you. Okay, we have at least three more questions and we just got just a few minutes left. But let's try to get the get through these from Victor. Can a playground instance be run on something like stack blitz stack blitz. Yes, it can. And a couple of different ways actually so on a stack blitz. One thing you can do is you can use the iframe, and you can embed playground from a playground that work is net. Well, that's not technically running on stack with right we're just sourcing it from somewhere else. So what else you can do is you can run the actual Web Assembly version of playground the full thing inside stack with So to do that, you would have to import an npm package and call this function like pp node pp dot. I think it starts or load one of these and it's all right that that's too much into it. The point is, you can run the node version of playground on stack blitz using their Node.js and I expected that to be very slow but it is actually decently usable. I had some technical problems with running it on stack blitz that are related to stack blitz. As in, sometimes the UI froze. That wasn't a playground like processing thing like I could move around in depth tools and that's very detailed but I had some trouble. Troubles but playgrounds actually work there. So you're welcome to play with it and one of the links in the resources section is a free in browser development environments. I encourage you to check it out. There's a video and some demos of what we build with stack blitz during the cloud fest hackathon. One of these things is exactly playground running in there as a development environment for WordPress. All right, great. All right, over to Roy's question. Let me see. He asked that you please address computer memory requirements for the four different ways to use playground. Sure. They're almost exactly the same in that you always need to load playground. The only difference is that in one way you'll click things and in the other two. All right, so there's no code thing where just use it and there are three different APIs. So all APIs actually do the same things as you would do by clicking manually. Right. You can just automate that preconfigure it make it much, much, much more convenient. So it's only runs a snippet of a JavaScript code internally. If you use the NPM package for JavaScript API. So the last API that I showed, well, it will require you to run some kind of build pipeline, right, like NPM run build or Webpack or ES build or what have you. So this will surely impose some additional memory requirements, but that's not specifically playground itself. That's just the development process. And how much memory does it require also to answer that. It depends how you measure it. I picked some benchmarking and one instance of workplace playground I think took about like 250 megabytes. So I don't quote me on that but that's vaguely what I recollect. Great. All right, let's get you over to David's question. That as I would it be possible to use the browser database index database to persist the WordPress content between a page refresh or example. Yeah, it was, I don't recommend that though. I'm going to post a link to the issue that I just happened to have handy where there are some explorations for persisting file system changes so index DB works but is super super slow. That's the problem with it there are ways to handle that with a local storage or even better origin private file system. I would really like to get there. But for now, this is the, this is an exploratory feature that that will come together index DB, not recommended. We have one last question. And I think we all know the answer to this I am right in thinking the issues and enhancements and enhancements suggestions can be made through GitHub and PRs from contributors, or those welcome. I think everybody's welcome to contribute right. Oh, yeah, like everyone is super welcome and I will totally appreciate it and I'm super happy to brainstorm anything, chat, explain things like even meet for a black chapter or a zoom call even like, I really want you to contribute. So that that question makes me very happy. And if there's anything I can do to help you succeed in playground, let me know. There's a good first issue label in the repo. I'm not sure if there are any issues right now with that label so I could probably do a little bit better on triage, but anything that you find either confusing or a feature that you would like to see but isn't there like even if it's a no bug report, or a code change or a code change or a code change that you would like to make but you don't know how everything is super welcome, and I'm there to help you. Alright, that's great. I did leave the link to the GitHub repo and the chat for anybody who wants to, you know, check it out get involved. But for now, I'm going to, we're going to end this session want to be respectful of everyone's time. And I also want to thank Adam for joining us and the whole presentation and answering everyone's questions. If I want to thank you so much for having me and for for coming here in that such great numbers it's very hard for me to be here with you so thank you. If you want to see Adam again, he will be doing the same presentation at tomorrow in a meet and a separate developer hours meet up. I'm linking in the chat. Realistically, I would like for you to share that with your friends who are like Europe or the Asia Pacific regions. It will be at an earlier time zone. So we're trying to get most of the world covered. So please, you know, share that link on your socials and you and let your friends know who may be on the other side of the world. For now, thank you everyone for joining. Thanks Adam for doing this. You'll have a good day.