 Just a reminder that this session is being recorded and will be uploaded to WordPress TV and also to YouTube. This developer hour session is part of a series that we're running. I think we've had six or seven now, I've lost count. And in this session, we're very pleased to welcome Adam, who is going to be talking about WordPress Playground. Adam is one of the developers of WordPress Playground, so we're very honored to have him talk to us about it. As I said a little earlier, as people were still joining, please do turn on your video if you wish. It would be great to see you and make it feel more like it's a conversation, but do please remain muted during the presentation. There'll be an opportunity for questions a bit later on. I'm just gonna put a couple of links up for you. If you're new to WordPress Playground, here is the announcement post, which I think was authored by Adam, wasn't it? Yeah, yes, it was, and hello everyone, pay-to-ate there. And here is the project repo. If you wanna get involved in post issues and PRs, I'm sure it's an open source project, so everyone's welcome to contribute. This, I don't know, maybe we shouldn't just post a lot of links, maybe we should post them as you do your talk. Adam, if you just ask me to post a link and I will, and I'll do it, that might be a little bit more interactive. Let's do that. Yeah, as I said, there'll be a Q&A at the end, so put your questions in the chat or raise your hand. And we'll get around to you and Adam will be pleased to answer your questions. Just gonna run through a few announcements. WordPress 6.2 was released at the end of March and WordPress 6.3 is currently in development. You can get involved as well and contribute to WordPress 6.3, so there's a link if you want to dig into that. WordCamp's are coming back after the pandemic and WordCamp Europe is only a couple of weeks away now, so there's a link to that. I'm not sure if this ticket's still available. I didn't have it checked, but I'm going to be there. Adam, are you gonna be there? Yes, I'm going to be there. There will be a WordPress Playground Table at Contributor Day and WordPress Playground Session and WP Connect on Saturday. Yeah, I'm doing a workshop on migrating a plugin to Blocks as well at WordCamp. WordCamp US is a bit earlier this year than in previous years. It's gonna be the 24th to the 26th of August, so there's a link for that. And then, as I said, WordCamp's are coming back and if you're looking for a look, if you can't make one of the flagship ones and you're looking for a local one, just hop over to central.wordcamp.org and find a WordCamp near you. Okay, so let me officially introduce Adam. He works for Automatic, he's one of the core developers of WordPress Playground. Do you wanna just tell us a little bit about yourself, Adam, before we get started on the presentation? Yeah, absolutely. So as Michael said, I work at Automatic. I'm a WordPress core committer. I live in Poland, Wroclaw and last year I had this problem with WordPress where I wanted to start teaching people more things about how to get started, how to build blogs, how to interact with Gutenberg and turns out that was very hard to do because every tutorial I could come up with would have to start with a long setup section and then I thought long and hard, well, is there anything to be done so that a new prospective developer could just open a link, start a course and just start learning there without any set of steps at all and turns out the answer was yes and that's what WordPress Playground and I'm about to introduce it to all of you. Okay, amazing, thank you. Let me hand over to you, take it away, Adam. Awesome, so I'm going to show my screen and show you the presentation I prepared. Ta-ta-ta-ta, ta-ta-ta, all right. So WordPress Playground, this is WordPress Playground and it's a complete WordPress instance running exclusively in my browser. There is no server with PHP, there's no server with a database, there's no server at all. There's just my browser and the JavaScript and in the next hour, I'm going to tell you why this is any interesting, how it works internally and how exactly can you use it, can you start using it today? So first things first, why is WordPress Playground interesting? And that is because WordPress is very difficult and I don't even mean creating websites in WordPress, I mean starting your journey with WordPress. So if I'm a new user and someone told me WordPress is cool, you should check it out. Well, I'm going to Google how to install WordPress and I'm going to find out the installation doesn't actually take five minutes because I need to perform all these steps full of three letter acronyms that I'm not familiar with and I'm not going to know what to do with PHP and FTP and all that. So perhaps I'm going to try something else. The only alternative I have for figuring this out is finding a company that already did it, a hosting company and giving it my credit card and maybe I don't want to do that just to get acquainted with WordPress. Or if I'm a prospective developer and I want to learn WordPress, well, then every tutorial starts with something like this. This is actually what I wrote for Gutenberg data. There's a lengthy setup. I need to know how to set up my PHP and Node.js and NPM and all this. It's not very approachable for a new person. So perhaps I'm going to try a framework that has these online interactive things that I can just get started with. Or if I'm a part of a product team and my friend sent me a pull request, well, I don't have a local development environment and I don't have a staging. So what exactly am I supposed to do with it? I'm unable to test it without either of these. Or if I'm a product company and I'm building a plugin for WordPress, well, I would really like to show people how my plugin works. But at the moment, I kind of have to do videos and screenshots because it's not possible for me to easily show a live demo to my customers. And so this actually, I think there's a, just a second, I'm going to exit that. All right, sorry. Now it's just like, so I cannot show a live demo because everyone would have to get their own WordPress instance and people would start changing things in WP Army and I don't want that. And I'm not going to give a separate WordPress to every single person because that would cost a lot of money. So no live demos, very few plugins have that. So in WordPress, it's difficult to install it. It's difficult to get started with learning how to code, how to use it. It's difficult to test changes. My colleagues from the team are sending me and it's difficult to distribute and demo my code. So there are some solutions that improve the situation like there's local and there's WPNF and maybe they are going to make the installation easier on my local machine. Maybe they are going to help with testing but I'm not going to embed local or WPNF on my homepage. I'm not going to be able to use it on my phone, right? I need a desktop device. I need to install something or I need someone else who already did that and can send me a link. So WordPress Playground solves all these problems with a single click. And the way it works is that if I want to install WordPress and I have WordPress Playground somewhere in the internet, I have a link to that. Well, I can just click a button and there's WordPress. And it just works in my browser tab. I only had to visit this page. Furthermore, I can customize it so I can select a theme, a bunch of plugins and I can just click a button and they are already being downloaded and installed for me. And I don't have anything locally and there's no server handling this for me. This is all happening in my browser tab. So installation is very, very simple. I just visit a website. Then if I want to learn how to code with WordPress Playground, I can just visit a course and I can start learning. So this is an interactive code snippet and I published a blog post with some of these about a new API for modifying HTML which was merged in WordPress 6.2. By the way, like it's beautiful, you should check it out. But this is a blog post that I published that teaches you that API. So you'll notice here's a code example and I can run it and it runs in my browser. Furthermore, I can customize it. I can change something here. So I'll make it say, hello, WordCamp. And if I run it again, well, the output changes. So the entire PHP with this API loaded is running in my browser tab and I didn't have to set up anything. I didn't have to download anything. I just visited a link and that's it. So I just want to take a minute to appreciate how great that is because if I only have a mobile device, I'm not a developer yet. I have a different career. I have a break, all right? I have a 30 minutes to spare. I'm not going to take out a laptop from a backpack. Maybe I don't even have a laptop but I probably have a phone or a tablet and I can use this to start learning immediately and I can learn on the train and I can learn in a plane. And I would really like at one point in time for the entire WordPress documentation to actually become interactive, right? So you wouldn't have to even look for external resources. It would be learnable by default. You would maybe even have a tried button and start building button and start contributing and all that. They would all just give you an immediate experience. So all nine code snippets are nice but what if I want to build something more? Like if I actually am ready for a local development environment. Well, with WordPress Playground, I can go to my VS code and there's a plugin. And if I install that plugin and I start WordPress Server, well, I can start writing WordPress plugins and themes immediately, right? It's just a click of a button. Install a plugin, start a server and it works in my browser. I don't need Docker. I don't need PHP. I don't need my SQL. It's just VS code and the extension. That's everything I need. And I'm ready for building WordPress plugins. So this is a huge improvement over what we used to have with downloading a list of dependencies and installing and using terminal, right? Right now it's a button. It's a single click, click and that's it. And if I want to test a change from a colleague, from developer colleague who send it over to me with WordPress Playground, this is as simple as just click, click and that's it. So this is our PR that we've seen before and only this time there is a link to try it. So this pull request just adds a secret message in WP Admin and there's a preview link at the bottom of it. So let's click that link and see what happens. It opens WordPress Playground with my pull request already loaded and there's my secret message. But let's see if this works on PHP 8. So I just select different PHP version and there's an error. Cool. I'm glad it was so easy to test and I'm glad to have tested that because I could have learned in production from disappointed users. So one thing about WordPress Playground is that it allows you to easily switch PHP and WordPress versions, which is excellent for compatibility testing. I could test my plugin on WordPress 6.1 and 6.0 and PHP 7.4 and 8.2 and do it with just a click. So if I'm a product company and I want to do a live demo with WordPress Playground, I can put that demo right on my homepage. So this is a store that I briefly showed before and this time we don't have a video with an actual WooCommerce store right here. I can open a product, I can add a tray card, I can go to checkout, I can do anything I want here. This is an actual store working in my browser. Any other person who comes there will be able to use it like their own instance. And by the way, this is how it's implemented. It only took like 24 lines of code to create a demo and most of it is JSON. So this is very, very, very accessible for using. There is no complex setup even to build these demos. So let's take a look how all of that seemingly magic thing works internally. So there are two parts to WordPress Playground. There is a PHP working in the browser and there is WordPress working without a server. Excuse me for a second. So let's take a look at PHP in the browser. This is possible thanks to a new technology called WebAssembly. And WebAssembly allows you to run regular software that we know from desktops and servers in the browser just in JavaScript. So let's talk about C programs and PHP for a second. So turns out PHP, the programming language, if I want to run PHP code, I have to use PHP interpreter and that interpreter is in itself a program written in a C programming language. So the thing about C programs is that this is a very simple C program that's going to print hello world on my screen. The thing about C programs is that I can run them, I can compile them and I can run them on my computer. So typically the process works like this. I give a program to a compiler, I get an executable file and that could be hello.out or hello.exe on Windows or any number of other extensions. The point is I can execute it and when I do it, I see hello world on my screen. So with web assembly, we can do exactly the same thing but for the web. So I use a different compiler called mscripten and it gives me executable files only this time. It's not exe, it's hello.wazm and hello.js. So I get two files and then I can execute them and I can do it anywhere I have JavaScript. So I can execute them in node or in my browser or in a VS code extension or anywhere else. So PHP interpreter is a C program, which means I can take the source code of the PHP programming language and I can compile it to executable files and then I can execute them in the browser, which means I can run PHP code. Like there's a lot of concepts here, everything's linked like programs, compilers, execution. The point is I can take PHP, the programming language, do a bunch of transformations and now I can run PHP inside JavaScript which actually looks more like this because PHP has more than one version and every version has its own separate set of executable files, which means the demo I showed before. You remember the little version switcher where I was choosing PHP 8. It's actually pretty boring how that works internally. It only tells the browser, hey, download this other PHP file. Don't use PHP underscore seven underscore four. Use PHP underscore eight underscore zero. So this is PHP. Now let's take a look at how WordPress works. So to run WordPress, I normally need to download WordPress, install it and navigate through it. So downloading is a solved problem. We have WordPress.org. There's a download button there. I can download WordPress zip and inside a browser tab in a JavaScript application in WordPress Playground, the exact same thing happens. There's a fetch API in the browser. It's used, WordPress gets downloaded. That's it. But where it gets interesting is when we talk about the installation. So normally to install WordPress, I need to run the installation wizard and it will ask me for my MySQL database credentials. So it will ask what's the host, what's the username and password. And that's all cool, but in the browser we don't have MySQL. So what do we do in WordPress Playground? Well, we still use a database, but we use a database called SQLite. And this one we can run in a browser tab for a technical detail that's just a file. SQLite database is just a file. And then we run something called SQL translator. So there is an official WordPress plugin that you can install in any of your WordPress projects and it will allow you to use WordPress with a SQLite database. Technically the way it works is that WordPress actually thinks it talks to MySQL, it uses MySQL queries that are not always compatible with SQLite and the translation layer takes them, it rewrites them to SQLite, runs them in SQLite, takes the response from SQLite, translates that back to WordPress and passes it through the WordPress code. So WordPress thinks it has the database it needs. We use SQLite, everything works beautifully and this is actually quite, quite, quite reliable. So more than 99% of WordPress core unit tests work on that. And the remaining part is mostly specific to MySQL and not even relevant in this context. And that's installing WordPress. So now we also need to open WordPress in our browser window and start navigating through it. So how can we do that? With classic WordPress, our web browser goes through the internet, through the servers and we're remote and on that server we have PHP, we have WordPress and our browser says, hey, give me a home page. And the server says, sure, I'm going to take your request, tell PHP about it. PHP is going to produce the home page for me and I'll give it back to you. And this is all cool, but in WordPress Playground, well, we don't have a server. So what do we do? Well, we don't have a server remotely, but how WordPress Playground works is that it takes that server and it puts it inside your web browser. So now your web browser is a device that has two functions. One is browsing the internet and the WordPress website but the second function is now, it actually runs the WordPress website. The server works inside your browser. So there's one little detail that doesn't add up here and that is to use websites, we click on links, we submit forms and all of that traffic, it has to go somewhere, right? Like browser has a URL in there, it will send network traffic. So we cannot send that network traffic anywhere which is why we use something called a service worker and service worker is a JavaScript feature that allows you to handle some of that network traffic on your own. So in our case, anytime there's a request going to WordPress somewhere, we just say, oh, no, no, no, no, no, no, no, like we'll take it over from here and service worker passes it back to the browser, to the WordPress instance running in there, takes the response, puts it back in a part that you can see renders WordPress website and that's the entire magic. So we downloaded WordPress, we installed WordPress and now we can navigate through it. So we have a running WordPress. So let's see how exactly you can use that. What is it good for? So there are four ways of using WordPress Playground. First one doesn't require you to write any code at all. Then there are simple APIs, more complex APIs and like the most complex API. So let's take a look at no code. That's super simple, just go to this link right here. And by the way, there's a resource page where all these three links are posted and it will be available in the chat. So to use WordPress Playground with no code, you just go to this link and it opens WordPress. It runs in your browser. So at this point you can even turn off internet. It is still going to work. And what you can do with it is you can build a theme or an entire site, you can save it, you can restore it later. You can try out any plugin you want. You can try out 50 plugins and it's not going to break any website that you have. And if you want to start over, you just refresh that page and it's going to give a brand new Playground instance. All the data that you put in there, it is private. It stays in your browser. It is not sent over to any external service. So you can do anything you want and you can then just crop it, start over or save your progress, restore it, host your site that you download anywhere. All of these things are possible. And then you can test your code on multiple versions of 4% PHP. Then there's a query API and this is the simplest way of integrating WordPress Playground with an actual application. So the way it works is that you embed Playground using an iframe on any web page and you give it a special something in the URL. So this iframe, it shows how it is depicted on the preview at the bottom of this slide. So it embeds Playground.wordpress.net but then it says themes equal pendent and that tells Playground to grab that theme from the WordPress theme directory and install it on that WordPress before allowing you to interact with it. So theme is one thing but you can also tell it to use a specific PHP version or WordPress version or a specific plugin or go to a specific URL and there's a ton more of these. They are all listed in the official documentation and the link will be available in a chat. And let's take a look at what you can build with it. So this is the demo that we've seen earlier. It's leaves on developer.wordpress.org slash Playground and we've selected a theme. We've selected a bunch of plugins. So the way it technically works is that nothing special happens on developer.wordpress.org slash Playground. The only thing it does is it creates this query URL. So it makes it, it writes plugin co-blocks, plugin BBPress, like anything you select. It just appends it to a string and then it takes that string and puts it in iframe source. And all the hard work happens inside WordPress Playground. So this was very, very, very easy to prepare. Now another API you can use in WordPress Playground is called Blueprints and Blueprints are JSON files where you list all the steps necessary to set up a WordPress Playground instance. So you can run any PHP code in there. In this instance, we are inserting a new post and you can log in as an admin and you can write files and install plugins and themes and not only plugins and themes from the WordPress directory, any plugins and themes. You can install your plugin or you can apply a PR in this. Actually, there's a, oh, I'll be talking about that in a minute. So for now, let's stay here. So Blueprints give you a whole lot of control. It's a very approachable API. You don't even need to write any JavaScript. You don't need a code editor. You can just write some JSON and then that JSON, you can paste it in the URL which is explained in the documentation and Playground will just use it. So you don't even have to download any MPM package, right? You just declare what is it that you want exactly, put it in the URL, that's it, right? You can try it right after this presentation even. And what's building with Blueprints is this very cool translations Playground. So translating WordPress used to require installing WordPress, downloading some translation files and maybe installing a plugin and maybe configuring that plugin like a bunch of steps if you wanted to see things in context. Well, in here, you go to a website and there's a link at the bottom and also like in the resources page. And then on that website, there's a Playground instance and there's a Blueprint and that Blueprint downloads translations files for you. It installs Glotpress local. It installs any plugin you want. So in here, we have France plugin and activates this feature where you can translate things in context. And also another cool thing about it is that you can even integrate chat GPT with it if you have open API or open AI API T. So this was built with Blueprints and it took, I think, I checked that yesterday, the most recent version, I think it's 100 lines of JSON to build that. So how cool is that? And finally, you have a JavaScript API and this is the most powerful of all, but also there's the highest barrier of N3. So this is available via an NPM package and you can import it and use all the functions to start Playground, connect to it, like run files, dispatch requests to WordPress, run PHP code, do anything you want in there. There's a ton of helpers. You can also use any Blueprints with that that you want, but you need a code editor for that and you need to use that NPM package. So you probably also need to spend a little bit more time with the documentation. So this one gives you an absolute, full, complete control over Playground, but it also requires a little bit more effort to get started with. So, all right, yeah, I'll show that in a second. So for now, let's summarize the slides and WordPress Playground is WordPress in your browser. It is ready with a single Greek. There are APIs you can use to customize it and it's official WordPress project. It is free and it is open source. So the links live at www.least-wordpress-playgrounds and if you look up WordPress Playground like in GitHub, Google, Twitter, like you'll find a lot more stuff, but I'm going to show you also something else. So with WordPress Playground, there's a whole lot of things that you can do. So let's take a look at specifics. In here, like this is Playground site and in that Playground site, I can build a theme. So we'll get there, but for now, let's take a look at how we can install plugins there. So we want to have a Gutenberg plugin and a create block theme plugin. And we are also going to install this Kate Park theme. And the first way to do it is to, well, just do it from WP Admin, upload them. So I'm going to go to plugins, add new and the first thing I see is there's an error. And the reason for that is, as I told you before, WordPress Playground doesn't send any data at all to any external sites. Well, unfortunately, that includes WordPress plugin directory. So I won't be able to see any plugins in my WP Admin, but I can still upload them and I can still use the query API. So I'm going to upload them in here. Just to go through the process. So I have the Gutenberg plugin and I just do it as regularly uploaded, activated. It's there. And I'm going to do the exact same thing for create block plugin and upload it, install, activate. And you can already see that's a little bit mundane, but let's complete that so we can take a look at better option and actually feel some relief. So I'm going to also do it for the Kate Park theme. So yeah, all right, I have all these things in there. I can activate my theme. And if I go to homepage, I'll see, sure, this is the Kate Park theme. And if I go to WP Admin, I'll see, sure, there is Gutenberg in here and I can go to Gutenberg demo and it all works. So that worked fine, but it also took a little bit, right? It wasn't that pleasant of a process. So let's take a look at automation. So the query API that I showed you earlier, it is the perfect use case for this. So I'll refresh this, get a brand new WordPress and let's install some plugins in an automated way. So in here, I'll just type theme equals Kate Park. And then I'll say, I'm present plugin equals Gutenberg. And then I'll say I'm present plugin again, which is fine. And I'll say create block theme and just presenter. And now playground does all the work for me. So it downloads Gutenberg and create block theme and the Kate Park theme activates all them. So this is the exact same result as I got before, like all these plugins are here. The theme is there, I can go to Gutenberg demo, fine. So that was a little bit of a trick to make the setup more pleasant. So what of it? Now let's take a look at the actual application of this and build a theme in the site WordPress playground. So with all my plugins in place, I can now go to the site editor. And in that site editor, well, let's customize that Kate Park theme a little bit and make it our own. Let's make our own theme based on that. So I'm going to customize the background and maybe make it low. And I'll make a bunch of other changes that I just put up here for you to save a bunch of minutes. But I'm updating fonts, line heights, all that. So this is my version of Kate Park theme. So I can now go to options and create block theme since I have the plugin. And if I scroll that sidebar a little bit, there's export button, I press it and downloads my customized theme. So that file I can use to install the theme on any WordPress instance. So let's try it in another playground, shall we? So I open a new tab which gives me a brand new WordPress from scratch and I can add a theme, upload it and use the exact zip file that we just exported. So if I install that and activate my theme and now I go to homepage, well, there it is. All right, so I just build an entire theme without ever installing WordPress doing any setup at all. I just put something in the URL and started working, started doing things. So this saves a whole lot of work on getting everything to work. But let's not end there. My website is pretty empty, let's import some content on it. And WordPress allows you to export your site content and then also import it. So I'm going to go to tools, import and I have a file that I prepared earlier that I'm going to put in that importer. So I'll select it, it's an XML file. I'm going to add things that are for testing things. So I need to choose the outer for all posts. And the first thing I'm going to see after pressing submit is there's a bunch of failures. And that's fine. These media files are remotely so WordPress program cannot download them. Well maybe one day there will be a feature for that but it's cool, cool. All the content is in here even if there are no media files. So I have a lot of new pages, I can browse them, check how quotes look like, headers, all these things. And I could even import my entire site in here. Let's build an entire site and not stop at a theme and some content. So this is WordPress Playground Documentation. Let's try to rebuild this as closely as possible within the confines of our new themes. So we'll use those colors and fonts but we'll use this content. So I'll find a pattern to match what I need as closely as possible. And this is a two-column pattern and I'll paste my content here. And again, I'm going to speed all of this up just to save us some time. So I put all the content here and then maybe I put a video and then maybe I remove everything I don't need in there like the view menus and all that and update site title. So that's a bunch of work but once I'm finished, this is my site and well, I would hate to lose it when I refer to the page. And by the way, this is a preview in new tab which also works in Playground. So this is very cool but I don't want to lose my work so I can now go to my Playground site where I started and I press this little download button and it downloads the entire site as a zip file to my computer and by entire site, I mean, if I go there to my downloads folder and I unzip it, well, everything that I need to host that site is in there. So all WordPress core files are here and all plugins are here and my theme and there's even an entire database in a SQLite file. So this is my complete site. Nothing is missing from here. I can take this archive and I can host it somewhere. Well, what else I can do? I can send it over to someone and they will be able to import it in Playground. So let's try that. There's this little import button, I pressed it, I use my file, I import and there's my site exactly how I left it. So I can save my work, I can restore my work, I can host it somewhere else and then finally I can test if it continues to work on other PHP and WordPress versions. So let's use WordPress 6.0 here and this is a brand new WordPress 6.0. So I'm going to import the theme that I built earlier. So let's select it, let's upload it. Well, we install, we activate and we check. So it works on WordPress 6.0, which is really cool but I have a bad feeling about this. So let's also make sure all the WordPress 5.9 since we have reasons to support it in this case. So let's go to admin and appearance and themes and once I try to do that same thing in WordPress 5.9, I'm going to learn, well, this theme is not compatible with WordPress 5.9. So I was able to find all of that without doing a ton of setup and dockers and configs. I just did a bunch of clicks and it all worked right there in my browser. So that's the video and this is WordPress Playground documentation that I was snatching it earlier. So it has some videos and cool examples but everything I just showed and demo is here and also for some of these APIs, like the Blueprint API, well, there are, sorry about that, there are also much better, there are also interactive code examples. So here's a Blueprint and I can just click to try it out now and it's going to create a WordPress with this PHP version, with this WordPress version and I'm going to be already logged in as an admin. So when I'm not streaming, it's actually loads much faster but that was still pretty fast. Here's WordPress 5.9 and all these other examples, you can use them, you can try them right here. They are not editable yet but they are going to be. So that's WordPress Playground, that's what I wanted to show you and we can open this up for questions now. Amazing, thank you very much, Adam. It looks so impressive. Yes, let's have your questions, either raise your hand or post your questions in the chat and we'll get around to you. So while people are getting their questions together in the chat, I've got a question. Does when you close the tab, so it stores the data in the SQLite database, does that persist across instances? So if you close the tab with your browser and you reopen it. Yeah, so at the moment, it's like once you close your tab, that entire database is wiped out, it lives in that browser tab. However, what you can do is, while you have that tab open, you can edit a page and you can click preview in new tab and it's going to open a new browser tab with that same WordPress. So you can have as many tabs as you want, referencing your original WordPress site in your first tab is just don't close that tab because once you close it, it all will be gone and there is a feature plan for WordPress Playgrounds to have this mode, like persistent mode, that will store all your site in local storage or like one of the other storage mechanisms and it will allow you to actually refresh the page and see the exact same site. So technically like it will import it and we import like details. Point is right now, you close that tab, you lose it in the future, you'll have the option to retain it. But for now, you need to save it, press the button, export it. You need to save it or export it in the way that you showed just at the end of the demo there. Yeah. But that exports, I saw in the database folder, you had a SQLite database, but WordPress, if you want to transfer that to say a live WordPress site, having developed it in WordPress Playground, WordPress will import a SQLite database. So there are a few ways to go about it. If you just want to host what you build and don't actually transfer it anywhere, like just take the exact thing you build and host it, it will just work. You don't have to do anything transferring it into my SQL, you can use that exact database. If, however, you would like to take parts of it and put it on your live website that uses my SQL, well, there's a bunch of techniques you can use. So one of them would be, well, you can export SQL dump and import it in there, like that's pretty advanced. A lot of things to take care of a lot could go wrong. So what else you could do? Well, depends on which part of it you want to import. Maybe you can use WordPress exporters and just grab your content. Maybe you want to export just the theme and use that. Maybe you don't need the entire site. So depending on the use case, you can export parts of it, you can use the entire thing or you can instead of importing it to an existing site, you can just host this as an existing site. There are many ways to go about it. Okay, thank you. Oh, actually what I showed there in the meantime with importing the XML file, that was an example of moving just the content between WordPress sites. So that file was exported from another site earlier on. And then I grabbed just that content bit and put it in WordPress Playground. So the same thing can be done from WordPress Playground to a live site. Cool, yes, of course, you could just export the content and then, yeah. Okay, we've got any questions from the floor? Please post your questions in the chat. Oh, here's a question. Does it support WordPress CLI, WPCLI? That's a very good question. So WordPress Playground is many different things. So there was the Playground in the browser that I was focusing on today, but there's also the VS Code extension that I briefly mentioned. So turns out, as of yesterday, there is also a CLI tool for Terminal. It is called WP Now. It is built on top of WordPress Playground. And in it, you can use WPCLI. Sorry, what was it called? WP. It is WP Now, WP-Now. So it is the NPM package. I'll put that in the chat, WP-Now. Actually, maybe I can pull a link to an announcement post. There was one released yesterday. So you can use this to run WPCLI on your local computer, but there is also a support for the web version upcoming. So we'll be able to use WPCLI exactly on the website. There's a terminal. There will be a terminal window. And there was a CloudFox hackathon earlier this year. When me and Daniel Bacuber, we were leading a project aimed to create an in-browser WordPress development environment. So that was an MVP we had to gather in two and a half days. And what it did is we had a code editor in the browser. It had a terminal that you could use. And then we opened that on a phone. We turned off the internet. We built a WordPress plugin on that phone. We activated it in WP Admin. Mind you, with internet turned off and started using it and it all worked beautifully. So that is very much possible. There is no official support for WPCLI in the browser. It is locally, but there will be. Awesome. So you'll actually have a terminal in the browser. Yeah. Wow. OK. So any other questions? Anybody have any questions for Adam? Halmar is just commenting with a great opportunity. Thank you. I have the resource for WP now. So I'm going to put it in the chat right now. Thank you. Awesome. Great. So the instance of WordPress that spins up is, is it always in English? Can you set the language? Right now, you can set the language in the Admin. Yeah. So in fact, I'm going to share one more thing. And I briefly mentioned that during the presentation. So let's see. So this is the translations playground. And as you may notice, it says DE in here. So this means it's downloading German translation files, applying them in WordPress. Like, and it also like installs the translations plugin and all that. But the point is, this is in German. So there are no, like, controls you can use by default to, you know, like, just type something in the playground.wordpress.net to get it. But this is an application built using WordPress Playground. And it has German translations. And it's not that difficult to build. There is some effort you have to put in a crafting a blueprint. It's not that much. So it is supported. It is, there is no like UI control for it. There is no a single button, but you can absolutely do it. But the Admin pages would still be in English. Oh, this is Admin, right? Oh, sorry. Yes, you're right. Yeah. Sorry about that. You had a window over the, yeah. How did you identify this need? How did you come up with this idea for creating this cool technology? Thank you. I was writing a tutorial. And I spent a couple of days on writing a setup section and figuring out, like, all the different ways it can go wrong and how to make it simple. And then I thought, wow, like, this is complex. Like, you need to know what a terminal is. You need to have a bunch of software. Like, you need to have NPM and nodes and, and Git and be able to use these things. And I felt like, I don't want to do that. Like, I don't want to expect people to spend an entire day worth of work before they can take their first step. So I thought, well, you can teach JavaScript online on sites. There are plenty of live demos. But with WordPress, it gets more difficult because you have REST API and you need to use that. So you would need to work with somewhere in the cloud. But people would start updating things in WP Admin, putting their own content in there. Like, that could go very wrong very quickly and it would be a massive, massive security risk. So I thought, like, what if all that REST API, like the entire WordPress, like, everything, it could run in your browser. So you wouldn't need a cloud instance. Like, no one would have to spin that for you. It will just all be there. Like, it would be very yours. And only you would have access to it. It would be able to modify it. So that happened, right? Like, we just saw it on the presentation. And I demoed a blog post on my blog where you can play with WP HTML tag processor, shifting WordPress 6.2. So the next step for that is actually finding a way to make a ton of code examples, interactive insight, WordPress documentation, like the official one. So maybe that exact tag processor tutorial could be a part of it. And maybe every other place that teaches you how to, oh, how to build a plugin programmatically or how to use this hook or how to display something in WP admin, right? Like instead of videos and screenshots, like things that goes very, goes stale very easily, something changes in the software. Now I need to record a new video. Like that is very hard to maintain. Maybe all these things could be automated. Oh, and I'll share a cool vision part of WordPress Playground with you. So imagine the actual WordPress code base. Like there are comments in there next to functions. So these comments could contain examples. And these examples could then automatically become interactive in WordPress.org dogs. But furthermore, they could be testable. So every time I make a change to WordPress, if I break the documentation, something will flash red. So the documentation could always be up to date and it could always be interactive. And yeah, there's a lot more. Like I could keep talking and talking about that, but that's kind of my dream here. So it was basically your idea originally. So as well as one of the core developers of this, it's your instigation. Yeah, like I spent the last like eight months working on this and it's picking up more traction lately. And I very much welcome all the eager contributors. Like if there's any feature that you're missing, you can help build it. If there's anything that's confusing about it, even filing an issue, like it goes a very long way, all the feedback is super useful. So please, please, please come over, join the Meta Playground Slack channel, WordPress.org Slack, like file any issue in the repo that you see fit. And I'm also very happy to help you just get started with WordPress Playground. So if there's a pull request you would like to make, but you are not sure where to start, ping me somewhere on GitHub on Slack. I would love to help you. So the Slack channel is meta-playground, yes? Yes, yes. I'm just putting that in the chat as well. And I've just posted a link to the project repo. So if anybody wants to contribute in any way, raise issues, you know, if in usage or testing, you find an issue, create an issue there, or if you want to contribute, yeah, create a PR. What kind of contributions are you looking for? What, you know, what, where do you want to take this? So what could people work on to take this further? All kinds of contributions, in particular, if you start building something with WordPress Playground, just unrelated app, like I don't even want to contribute to Playground Core, and you go through the documentation, and at any point you go like, you scratch your head and like, what am I supposed to do here? Like, this is confusing. Please let, please open an issue, or even better, please edit that page and propose like a better writing. It will go a very long way to help others. Or if there's a feature that you're missing, well, if you open an issue and tell everyone about it, that's super helpful. If you want to open a PR to help start building it, that's also awesome. But if you just want to help try existing issues and just figure out like, oh, maybe this can already be built or maybe this is a super high priority and like, this is a very important problem affecting many people because it affects you, that's also fantastic. So everything at all, like WordPress Playground is super open for contributions and, oh, it may seem very scary because, you know, WebAssembly, all this stuff, but just so you know, you don't have to know what, you don't have to know any WebAssembly at all. WebAssembly is a very important part of the project, but it's like 1% maybe of the code base or even less. And most of the time, you don't have to touch it. Like, most of WordPress Playground is JavaScript and some CSS. So the translation Playground that I showed you earlier, that came together in the initial demo. It was built by Alex Kirk, who's also WordPress core contributor. He built that in, I think like about short three hours from first learning that Playground has a public API and you can now use it through a website. So this is quite approachable. It's all I'm saying. Excellent. And the documentation looks really good as well. It looks like you guys have done a really good job on the documentation. Thank you. A long way to go still and I'd love to improve everything that can be improved there. And for that, a lot of feedback will be super useful, but I'm glad to hear it looks good. OK, so it looks like we don't have any questions from the floor. You clearly explain things so well that nobody has any questions. So well done on that. That's a good news. OK, we've posted a whole load of links in the chat. If you want to keep those links or to refer to them later, it's save the chat now. Somewhere there's a little, at the bottom of the chat, there should be a little save button that you can save the chat into a text file and then you can refer to all the links there later on. Let me just remind you before we close up that WordPress is open source. If anyone can contribute, head over to make.wordpress.org to see how you can contribute. Core is one of the ways that you can contribute. And of course, you can contribute to WordPress Playground. Sure, Adam would welcome any contributions there. So I'm just going to share a quick link for getting started with contributing to WordPress Playground as well. Awesome, curious. Fantastic, thanks for that. OK, so we're just a couple of minutes short of the hour. So I think we can wrap it up here. So I'm just going to thank you all for coming. And in particular, I want to thank Adam for his excellent presentation. That was super interesting. Oh, thank you. Thank you for taking the time. And thank you for that. Thank you for having me. Contribution to the WordPress ecosystem. It looks amazing and will be super useful to all kinds of users, developers. Amazing, thank you so much. Thank you so much. Thank you for having me, this was excellent.