New Playground UI ![rw-book-cover](https://d34adp677peecb.cloudfront.net/static/images/article0.00998d930354.png) 🔗 **Source:** [New Playground UI](https://www.youtube.com/watch?v=nYVTxr9MFK8#transcript) WordPress Playground has a new interface with a doc UI that lives in the bottom of the page. That makes the UI cleaner and also help users to get into all main features with fewer clicks. To explain that better, I will show you how that works at playground.wordpress.net. The house of WordPress Playground. As we can see here, we have eight buttons with the eight main areas of WordPress Playground. On the top, we have this refresh button. It's a button that have existed before. So, if I'm doing some change in the page and I want to reload without reload all the WordPress instance, that's the button. It's kind of like the regular refresh button if you are in a normal site. And I have a URL that I have all the main address and I have a quick access to them. And here on the side of the URL, I have the auto save option. So, that functionality was a little bit like before the new UI and it's a really powerful functionality that will auto save the change that you do on your WordPress Playground. And if you want to come back there or for some reasons that you just close the tab or you reload all WordPress instance accidentally, that auto save option will help you to recover the work that you have done before. Another nice feature that I am seeing on the doc UI, if you want more space for example, you have this option to hide tools and you have this minimal UI only with the URL bar and the reload button. And that's really nice if you want to do some demo and show all the features for a theme or plugin, you can use that. And you can also move that item that you can just drag and drop, select the best position to add this item. We have also option to have like a full width stick bar. That will be similar to the experience that we had before. And another functionality that I I think that is super nice, if you even need more space, you can just drag your doc to the corner and will be a full width. And the playground options will be listed here in that playground icon. And if I want to come back to that, I just click and my doc UI gets back here. And now let's talk about the main buttons here. The new button will list all the options to start a new playground instance with blueprint galleries, from a URL, if I'm hosting a blueprint in some address, writing a new blueprint, so we have a editor here. If I want to write something from a scratch, I can do that. PR previews from WordPress Core and Gutenberg is a functionality that I have already inside the WordPress playground, but easily now with two clicks, you're going to get that. And import project from GitHub and also import a zip file. All those options existed before, but now we group in a easy way. For example, as I explained now, if I want to start a new playground, all the options will be here. And if I have saved my playgrounds before, I have this list that I can navigate all the playgrounds that I have created before. And the nicest thing from that functionality, thanks for the feedback from the community, is that preview. So, if I make some change, I will see here the preview of that playground instance. If I'm using a specific theme and plugin and videos, I will have the preview here. And that will help users to easily identify different instance of WordPress playground. But if I want to name then, also I can rename that. On the three dots on the right side of each options, I have the possibility to rename or to delete those playground instance. Clicking outside, I will just move on to blueprints editor with the classic item that we have before, but we have more space, more distribution. That pop-up UI you're going to have on the desktop version, but if you're using a mobile version, that UI will adapt as well. That I think that's super cool. And settings are here that we can define the WordPress version, PHP version, and some behaviors of your WordPress instance such as the language and another caveat that now WordPress Playground support all the versions of WordPress. Even if you want to try the version 0.7, you'll find here as well. Database is the support to PHP my admin adminer. So, once you click that, it will open a new tab and you can manage the database from these WordPress instance. So, here I have a classic PHP my admin. I can do change with SQL and also I have the option to export my SQL database as well from that PHP my admin. Moving on, I have the file editor. I have a dedicated video talking about that, but such such powerful tool. I can change files here and all those files are related to that WordPress instance. I can preview my change, I can drag drop files, add new files, create new folders. You can do anything that you want with that functionality. Logs, all the logs errors if you have some. So, if you do some change and some change are not behaving well, you can go to that section and check if your WordPress instance contain any error. And the export button release the three options to export this WordPress instance. With a download zip, creating a shareable link, or exporting this project to GitHub. So, and if you have any feedback about this new UI, we would love to hear. So, contact us in our blog at make.wordpress.org/playground or at the playground slack channel at wordpress.org slack #playground. You're going to find us there. Please share your feedback, your opinions, and if you have any positive feedback, also post that. That I would love to share with the team. And thank you so much to watch that video, and see you at the next playground update., New Playground UI, Fellyph Cintra, 01kyzftf8kkna0g2an1twqzf1x.