#163 – Birgit Pauli-Haack on the Magic of the WordPress Playground

Transcript

[00:00:00] Nathan Wrigley: Welcome to the Jukebox Podcast from WP Tavern. My name is Nathan Wrigley.

Jukebox is a podcast which is dedicated to all things WordPress. The people, the events, the plugins, the blocks, the themes, and in this case what the WordPress Playground is, and how it’s transforming the scope of WordPress.

If you’d like to subscribe to the podcast, you can do that by searching for WP Tavern in your podcast player of choice, or by going to wptavern.com/feed/podcast, and you can copy that URL into most podcast players.

If you have a topic that you’d like us to feature on the podcast, I’m keen to hear from you and hopefully get you or your idea featured on the show. Head to wptavern.com/contact/jukebox, and use the form there.

So on the podcast today, we have Birgit Pauli-Haack. Birgit is a longtime WordPress user, an influential voice in the WordPress community. She’s known for her role as the curator at the Gutenberg Times, and host of the Gutenberg Changelog podcast, and she brings her wealth of experience as a Core contributor to WordPress as well.

She joins me today for an in-person conversation recorded at WordCamp Asia in the Philippines, and we are discussing Playground, a remarkable development that’s set to redefine the WordPress development landscape.

Playground allows users to launch a fully functional WordPress instance directly in their browser, without the necessity of a server, database, or PHP, playground breaks down barriers, offering developers, product owners, educators, and everyone in between a new way to interact with WordPress.

We explore how this technology not only simplifies the testing and development process, but also sets the stage for more interactive and immediate web experiences.

We explore the concept of Blueprints within Playground, tailored configurations that enables a bespoke user experience by preloading plugins, themes, and content. This feature helps developers to present their work in a controlled environment, offering users an insightful hands-on approach that can significantly enhance understanding and engagement, and it’s all available with just one click. It really does eliminate the traditional hurdles associated with installing WordPress.

If you’re curious about how the WordPress Playground is set to usher in a new era of friction free web development, this episode is for you.

If you’re interested in finding out more, you can find all of the links in the show notes by heading to wptavern.com/podcast, where you’ll find all the other episodes as well.

And so without further delay, I bring you Birgit Pauli-Haack.

I am joined on the podcast by Birgit Pauli-Haack. Hello Birgit.

[00:03:28] Birgit Pauli-Haack: Oh, hey Nathan.

[00:03:29] Nathan Wrigley: We’re actually looking at each other, not through a screen.

[00:03:32] Birgit Pauli-Haack: Yes. It’s a total different feeling.

[00:03:34] Nathan Wrigley: Yeah. Birgit And I chat a lot on various other channels, and it’s a pleasure having you right in front of me. That’s lovely.

[00:03:39] Birgit Pauli-Haack: Yeah, same here. I’m always glad we meet at a WordCamp.

[00:03:42] Nathan Wrigley: Yeah, thank you. So that’s the introduction then because here we are, we’re at WordCamp Asia, in the Philippines. It’s the first day of the conference in general. We had the Contributor Day yesterday, and we’ve got another day tomorrow.

And we’re going to have a chat with Birgit who is going to be talking to us today about Playground, because you’ve got a slot at the event all about creating a demo in Playground. And we’ll get onto that in a minute. But first of all, for those people who don’t know who you are, just a few moments for your potted bio. Tell us about yourself.

[00:04:09] Birgit Pauli-Haack: So I’m the curator at the Gutenberg Times and I’m the host on the Gutenberg Changelog podcast. And I also am a Core contributor to WordPress, and I work for Automattic. I live in Munich and I’m married, 37 years.

[00:04:22] Nathan Wrigley: There we go. That is a very potted bio. Thank you, I appreciate that.

So here we are, we’re going to talk about Playground. And I figured the best place to start is answering the question, what is Playground? And just before we hit record, it was pretty obvious that both you and I are very excited about this. And so I want to encourage people to really pay attention because this genuinely, for me is one of the most exciting developments, not just now, but ever, in WordPress. It truly is a transformational technology. But for those who don’t know what it is, just tell us what Playground is.

[00:04:54] Birgit Pauli-Haack: I’m totally with you there on the magic, yeah. And it’s not just for WordPress, it’s for web development. So WordPress Playground is a WordPress instance in your browser. Yeah, you go there, put in playground.wordpress.net. You get a full WordPress instance in your browser, and you can add plugins, you can themes, you can content. Test it out. Whatever you do with that and want to learn with Playgrounds, you don’t need a server, you don’t need a database, you don’t need PHP installed or something like that. So it’s just there.

And for someone who has been in the web development for many, many years, it’s like magic. Because before you’re always kind of, oh, where do I host things? What’s with the database? What’s with the server? And it’s all gone. Yeah, so it’s really cool.

[00:05:43] Nathan Wrigley: I think probably it’s best on this particular podcast to avoid the technicalities, but I would point the listener to a podcast that I did on the WP Tavern with Adam Zielinski several months ago now, where Adam came on and tried, in an audio form, it’s very hard to do, but explained in an audio form exactly what the underpinnings are.

And the only words I can use to describe it are, it’s voodoo. It is literal magic. Just two or three years ago, if you’d have said that Playground was possible, I honestly would’ve thought that you were talking nonsense. It could not happen. That will never happen.

[00:06:18] Birgit Pauli-Haack: Snake oil.

[00:06:18] Nathan Wrigley: Yeah, exactly. And yet Adam managed to pull it off. And so just to re-explain what Birgit just said, it’s all in the browser. When you go to playground.wordpress.net, there is no server. Just say it again, there’s no server. There’s no PHP that you need to install on your local machine. It all happens inside the browser. Close the browser down, it goes away. We’ll come to that. Maybe that’s changed.

But the idea is it’s happening in the browser, and so you can have any combination of website that you like immediately inside of Playground, and it really is remarkable.

I liken to the moment that the iPhone got the App Store. The iPhone was a very useful thing to have. You know, it did phone calls and it looked beautiful, and you could upload music to the phone with a cable. And then along came the App Store, and suddenly a thousand, a million, different developers could get their hands on it and tell you, here’s a different way you can use the iPhone. And here’s another way, and here’s another thing that you can do. And it feels a bit like Playground is WordPress’ moment like that. You know, it just suddenly prizes the lid open, and makes developers able to show you what they’ve got in a heartbeat.

[00:07:25] Birgit Pauli-Haack: Yeah. And that’s pretty much, that’s a very good analogy because we also have a Blueprints gallery that could be something like an app store where you can learn how you can assemble it. So the core technologies is not not, I don’t know any of the technology that’s underlying. It’s based on Web Assembly. And that has been around for about 10 years, trying to get a lot of different programming languages talk to each other in the browser.

And then it’s based, not on MySQL, but on SQLite database. And then Service Workers and worker Threads API, that are browser APIs. For storage, for instance, yeah, or for sending commands to other different applications. But that’s all I know, yeah. I have never worked with Web Assembly, yeah. And MySQL, I know that, just really amazing.

So you can use that. Many people use it to spin up a fully functional WordPress and demo that. So you can use it in educational settings. You don’t have to download a whole lot of stuff. You don’t have to, as a teacher, you don’t have to set up, talk to your IT department to set up a server for all the students. You can just point them to the Playground and then give them instructions on how to work with that.

It’s a sandbox environment. It could be, yeah, if you want to. You can upload your content and then see what else can you change with it without messing with your live site. You can integrate it with your development. There is a WP now, VS Code extension where you can, so when you’re working on your plugin and you click on the button, it loads up a local Playground for you with the plugin that you’re working on already installed, and that’s really cool.

Same with the theme. The training team has been working on interactive demos in terms of having code examples on one side, and then you make changes to the code and you see it in the right hand side. How it changes the website. So that’s really cool.

[00:09:20] Nathan Wrigley: I think one of the things that you said there, you’ve got an understanding of some of the underlying technologies, but you were stressing that, basically you don’t need to understand them. Having a knowledge of them is fun, you know, it’s interesting. But a bit like I don’t have the faintest idea how to build an iPhone app, but I can still use an iPhone. And I can still benefit from this application, the maps, navigation app. I don’t need to understand how that’s built, but I can use it, it works.

And really that’s, I think the purpose. The developers over there, thank you so much, but most people are never probably going to want to get into the weeds of that. They just want to click the button and see what happens.

And just to be clear on this, if you’ve never done that, I, at my home, have a fairly good internet connection, so I don’t know if I’m in a sort of slightly privileged position, but when I click the button at playground.wordpress.net, I’m imagining it’s somewhere in the order of three to four seconds before that website is ready to go. Basically it’s the length of time it takes me to blink and grab the mouse again. It’s in a heartbeat. So there’s literally no friction.

But if you go to playground.wordpress.net and click the button, what you’re going to get there is a vanilla version of WordPress, which is fine. Then you can do whatever you like with that, put plugins in, what have you. But wouldn’t it be interesting, wouldn’t it be great if somebody came up with, oh, I don’t know, let’s call them Blueprints or something like that, where you could pre-build something that then somebody else could use.

So this is the App Store, isn’t it? You know, somebody’s built the maps navigation app. Somebody’s built the note taking app. Somebody’s built the whatever. This feels like what the Blueprints are. But I want to make sure that you are describing it and not me because I am not sure that I’ve encapsulated it perfectly.

[00:11:00] Birgit Pauli-Haack: No, you did. But in opposite to the App Store, you actually can look at other people’s Blueprints and steal them. Blueprints are written in JSON has nothing to do with Jason. It’s JSON. It’s a data format for JavaScript. And there is a schema for it, so when you put it into your code editor, it gives you signals, yeah, that you formatted right.

And then you have two different ways of configuring your Playground instance. One is to do settings. So you could do which PHP you want to use? Which WordPress version do you want to use? Also, do you want to have network enabled? And most of the time you want it enabled because you want to import and install themes or something like that. Those are the settings.

And then you have steps. And those steps are also just formulated in JSON format. For instance, you can log in. Automatically log in the person in the Playground. Or you can say, I have a landing page that should land, so when somebody uses that blueprint, when Playground is ready to completely load it, you should land in the block editor, for instance. And you should have that particular block plugin already active on that post, so you can really play with blocks. Nick Diego with his plugin Block Visibility has done a great way for a live preview of his block from the repository.

Another way is to, so install a plugin, add content to it. Use WP-CLI to instantly load up new versions, add new pictures, or use an export from another website, an XML file from another website and load it into the Playground instance.

But sometimes you have, you said you get the vanilla if you just do that, if you just do playground.wordpress.net, you get the vanilla WordPress. But it’s one post, Hello World, and it’s one sample page. But you don’t see how content kind of interacts with whatever feature you want to demo. So you need some content there, yeah. And the Blueprints Gallery has actually some nice examples on how to configure that.

[00:13:08] Nathan Wrigley: Let’s come back to the gallery in a minute. Just to recap what you just said. So there’s a bunch of settings, probably more for developers. You know, you might want to test something in a particular PHP environment or what have you, so you can select those. And then you can do these steps where you can essentially design, if somebody was to use that Playground and somebody was to click on your link, they would wait the 2, 3, 4 seconds, whatever, and then, depending on the steps that you’d set up, they would arrive where you chose them to be.

So for example, you might pre-install the latest, greatest plugin that you want to share with the world. And you want people in a post for that. And you want them inside the block editor. And you can make it so that upon clicking the button, the first thing they get is, we’re inside your plugin, we’re about to use it. So the profundity of that is pretty amazing. You can really tailor the experience.

So rather than going from being like Playground, which sounds like children, you’re messing about, larking about a little bit. It also becomes like serious ground a little bit, you know? Serious developers can use this to circumvent, I don’t know, support tickets, the capacity to demonstrate to users who’ve never seen your product before, your plugin, your theme, or whatever it may be.

You can point them to a link. They can click the link. You as the developer configure everything within an inch of its life, so they get exactly where you want them to be. And in that way you can use it as a sales mechanism, as a support mechanism.

[00:14:29] Birgit Pauli-Haack: And sometimes it’s really hard to tell people what your plugin does unless you show it them in the video. But then they still don’t get their hands on it. And with that feature, with the Playground combined with the Blueprints, you can actually make them feel the thing. How it works with them, and what ideas they get when they play around with it, and have better questions, educated questions for you, for the product, yeah.

[00:14:51] Nathan Wrigley: So a Blueprint then is a version of Playground in which somebody has pre-configured things. Is that basically what it is? You know, let’s say that I have got this fabulous new plugin and I want you to experience it. I don’t necessarily want you to land on a particular page, but I just want the plugin to be available to you and you can do things.

If I install my plugin, use Playground to do that, I can then share a link. And because I’ve tinkered with it, it becomes a Blueprint because it’s not the playground.wordpress.net version, it’s my doctored version, adapted version.

[00:15:26] Birgit Pauli-Haack: Well, it also goes to playground.wordpress.net, but it has a query parameter, to be a little technical term, that says, use the blueprint at this URL. So a plugin developer for the repository, at the repository there are live preview buttons now. And the plugin developer can put in a separate directory Blueprints on the WordPress site, put all the assets, all the image that they want to load, and the configuration file, which is written in this JSON file, and put it there, and then make that live. And every time someone clicks on the preview button, they go to playground.wordpress.net with the Blueprint kind of loaded, the configuration files.

[00:16:09] Nathan Wrigley: So it’s all happening through playground.wordpress.net. But then there’s JSON configuration file, which gets sort of sideloaded, if you like, through the URL. That tells it, okay, add this and then end up here and what have you. The important part is that JSON, that’s what makes it the Blueprint. It’s going to playground.wordpress.net, but the JSON file means that it does something else.

And you said the word gallery, which tells me that there’s a whole host of these things. Pre-configured, pre-built, put into a box if you like. And we can go to that gallery and explore. What kind of stuff is in there?

[00:16:38] Birgit Pauli-Haack: So, what kind of stuff is there? So there’s one, how do I put an admin notice on top of the dashboard? How do I add a dashboard widget and load it up with my Playground? So most of the time, when you want to log into a WordPress site, you get the dashboard. And if there’s a widget, you can actually guide people to go some other places. You can say, okay, I have a plugin that needs 50 posts, for whatever reason. So there is a Blueprint there and how to use WP-CLI to create 12 or 50 posts automatically, that are then loaded into the post content.

So there’s also a Blueprint for a specific WooCommerce extension. So it loads WooCommerce, it loads the extension, it loads some products, and then you land for a shipping page where you can say, okay, this shipping plugin, what does it do for me? And you see it working with products on a Playground site. So that is really remarkable. It takes a little longer when you have content to load.

[00:17:38] Nathan Wrigley: Goes up to like 10 seconds.

[00:17:40] Birgit Pauli-Haack: So you go and get your coffee and come back.

[00:17:42] Nathan Wrigley: But it’s still profound.

[00:17:43] Birgit Pauli-Haack: Yeah, remarkable. Yeah, you don’t have to do anything, kind of just wait a bit.

What else is in there? Oh, there is a demo of 2025. So when you load 2025 theme automatically and go to your website and see it, you get the post, the blog site, where all the posts are in one one big site with the full content. And not a whole lot of people have that kind of blog. And in the demo, you actually go to the magazine front page, and then see all the patterns that are in there. You can see all the templates in that Playground demo.

That’s interesting for plugin developers that have experimental themes or experimental settings on the settings page that you can actually preload them as well. There’s an example in there for the Gutenberg experiments. They’re on the check marks on a setting site. And you can take that and replicate that for your own plugins site, how to do that, with the areas.

Because you can do site options. So the site options is not only site title and tag descriptions, also, oh, make my block editor have the top toolbar instead of all the other things or the distraction free model, yeah. So these kind of features, you can also preload there and have examples from the Blueprints Gallery.

[00:18:57] Nathan Wrigley: I think we’re just at the beginning really, aren’t we? Of of this journey. And basically, the underlying technology is now provisioned. It’s there. And we’re at point where, okay, people, developers, explore. And we’re really just at the beginning of that. And the gallery is probably a good place to go.

But if you wanted to put one of these JSON files together, do you know, is there some credible documentation out there that would help people to get started, learn the ropes?

[00:19:25] Birgit Pauli-Haack: Yeah, there’s definitely, there’s documentation of all the steps that are there, yeah, like how to run PHP, how to have additional PHP extensions installed and all that. So when you open the Playground, there are three, and you’re not going to the full page, so you have three panes. On the left hand side you have some menus, and one of them is the documentation link. So that’s good.

And another link is there, it’s the Blueprint Gallery. So in the middle of the section of your Playground, you see all the list of all the gallery content. And then when you click on the preview or the view site, the Playground loads that for you, and then there’s another menu item where is says, view Blueprint. And that gives you a Blueprint editor.

So you see the Blueprint loaded in, but then when you want to edit from the documentation, okay, what happens when I put that in? And you click the run button, and it reloads that Playground with your changes. So it’s really, very hands on, and you still don’t have to create a server or a local environment or something like that.

[00:20:31] Nathan Wrigley: Yeah, there’s this really virtuous cycle of, okay, so you’ve used something from the gallery, but you’re curious about how it works. Look, here’s how it works. Here’s the buttons to click to go and explore. Oh, and whilst you’re at it, if you want to edit anything, here’s the option to edit it. And when you click save, it’ll restart that whole thing and you’ll get the new version.

So all of the sort of helpful tooling is now built into it. Because when I talked to Adam, none of that existed. I mean, the version selection for PHP didn’t exist. The ability to land people on particular destinations when they first load up the playground, none of that existed. It was literally the technology of getting it working.

So now built into it is this knowledge base, if you like. Not really a knowledge base, but more, you want to know how this one works? We’ll show you. And it’s that beautiful, well, the purpose of WordPress, democratising publishing. In this case, it’s democratising the nuts and the bolts, and the bits and pieces of publishing.

Yeah, so that’s really nice. And that’s all built inside. So just follow the prompts in the UI, and you can adapt what you want, and what have you. But also there are some 101 articles out there, perhaps on Learn or something like that where can see in text format how do all.

[00:21:40] Birgit Pauli-Haack: Yeah, the developer blog has, on developer.wordpress.org/news has three articles about Playground. One is about the underlying technology from the Web Assembly people. That was really good for those who want to explore that even further.

And then there is one on what use cases you can do with a little bit of an example. And then also, so we are right now always talking about playground.wordpress.net. But you mentioned something that someone could put this on their website, and you can.

Playground can be self-hosted. It does not have to go through the wordpress.net site. But how to do this is in the documentation. It has a seperate section there. So if you say, okay, I don’t have my plugin in the repo, but I want to use it through my own website, then you can actually put it there, and it’ll have your own branding around it. So it’s even get further than just the WordPress part.

[00:22:35] Nathan Wrigley: So that’s a really important distinction to make. So in the cases that we’ve been talking about so far, if you want to go to playground.wordpress.net and you use your own JSON file, it will be able to suck in anything from the WordPress repo. And that’s the sort of, the WordPress way, if you like. I’m doing air quotes.

[00:22:51] Birgit Pauli-Haack: Also from GitHub.

[00:22:52] Nathan Wrigley: Oh, thank you. Yeah, that’s an important distinction. I’d forgotten that. Also from GitHub, but you know, it’s everything that’s open source out there, free to download already.

But a big part of the WordPress community, one of the things that makes it popular, is the ability to sell commercial plugins. And so that was another question that I had. Is possible to do it?

And so, yes, but you need to take the technology that builds WordPress at playground.wordpress.net, you put that onto your own server, and you can do whatever you like with that. So you can put your premium products in there on a, I don’t know, two day free trial sort of basis, and show people how that all works.

So Playground suddenly becomes more interesting outside of the free to play area as well. And you can imagine that being a really, really useful tool. Because we’ve always been able to play fairly straightforwardly with free things on the repo, but suddenly the moment where you’ve got to pay $100 for a thing, the capacity to see that really is the bit which opens the wallet.

Okay, it’s $100, maybe I’ll buy it, maybe I won’t. It’d be nice to see it. Okay, they’ve got a 14 day trial, but I’ve still got to pay for it. This opens up the capacity to, look, there it really is. Play with it for two days or whatever it may be. That’s fascinating.

[00:24:05] Birgit Pauli-Haack: Absolutely, yeah. And if you want to test that plugin, yeah, you still would need a local server or a hosting server to load it on. And you have that 14 day trial. And now you can really test it right now.

[00:24:16] Nathan Wrigley: Right. And that’s the other big thing. Because if you buy a commercial plugin, you then have to spin up a site somehow. You have to download the plugin, upload the plugin, get the plugin configured. This gets rid of all of that, because you don’t need to download and upload anything, and it can be pre-configured.

So the author of the plugin can say, okay, if you want to use my LMS plugin for this kind of thing, here’s playground version with everything just right. And if you want to do it for this kind of thing, I don’t know, you’re an elementary school teacher who might use my LMS plugin in this way, or you’re a university lecturer, who might use it in this way. Let’s build it a perfect version for you.

And you can imagine that a million times over for all the commercial plugins out there. You know, form plugins. Okay, this is the contact form that we’ve pre-built. This is the, I don’t know, the form which integrates with WooCommerce or whatever. So the developers can do all of this. And that really makes it super useful to them.

[00:25:11] Birgit Pauli-Haack: Yes, absolutely, yeah. What’s coming down the pipeline for Playground. One is that you can also use it with private GitHub repos. Which right now is not possible, but it’s in the works. And there was a problem with the proxy, that you get some cross site downloading errors because some servers are not set up to have images downloaded from a machine. They have created a proxy server now, where that is kind of circumvented that you can also from non WordPress sites download stuff, like images and content, or PHP plugins.

What also comes is, so SQL, MySQL, for some plugins Playground does not work yet, because they use very specific MySQL query, the union query, for instance. Select union and other commands like that. The SQLite doesn’t have those yet. And they are however working on it to replicate these kind of behavior of a database also with Playground. So to make it even more compatible with all the plugins that are out there.

I think they did a test of 10,000 plugins that are in the repo, and test every month kind of how many plugins don’t work with it yet. And they got it down from, I think 7% to 5%. So it’s always kind of progressing very well towards zero.

[00:26:33] Nathan Wrigley: Yeah, there’s a lot of things going on in the background that the likes of you and I probably, you know, because we’re curious about it, we’ll probably know about, but maybe the average listener who’s not wedded to this subject maybe doesn’t. But that’s really interesting.

So the intention is to get it so that more or less anything works in more or less any scenario. And really nicely putting it out there so that you can do things which aren’t bound to GPL, WordPressy kind of things, if you know what I mean. So, you know, you can use your commercial product over here, and you can use your GitHub repo over here. That’s really nice.

My understanding is that when Adam began it, he was immediately repurposed. So Adam Zielinski, he was an, was, still is, I think, an Automattician. And I think that it was immediately understood, this is profound. Let’s get Adam on this full time. You know, it’s no longer a hobby project. But I also think that he’s got other people from Automattic involved. There’s like a little team around it now, pushing the development of that. Is that still the case? Is this a team which is growing, or stagnating at, well not stagnating, maintaining at a certain number?

[00:27:33] Birgit Pauli-Haack: Well, it’s growing in scope. So they’re also working, and that was a focus starting in last fall, that they’re working on using Playground for the Data Liberation Project. And that’s what Adam was doing also full-time now in the last few months. That he looks, okay, what kind of parser do we need to do really good data liberation from other systems, or from WordPress?

Yeah, because the import and export in WordPress only gets you so far, yeah. And there are some quirks in there, and they want to really have a perfect data liberation through Playground. They have a browser extension. It’s all beta right now. It’s not functioning yet. But it’s really coming along quite nicely.

[00:28:20] Nathan Wrigley: So Data Liberation then is this very laudable project of being able to bring into WordPress, I guess data liberation on some levels is the whole point of open source really, isn’t it? Is that you can grab your data and just pick it up and take it somewhere else.

[00:28:34] Birgit Pauli-Haack: Open content.

[00:28:35] Nathan Wrigley: Right, yeah. It’s your content. This platform is no longer being used, or you’ve fallen out with it. You know, you no longer love it in the way that you did. You want to now move it here. And you’ll be able to, let’s say, go Joomla into WordPress, Drupal into WordPress, or as you said, WordPress into WordPress.

Which suddenly kind of opens up the whole idea of migrating websites, which a real mess frankly. It’s a really difficult thing to do. And I often think that people are bound to products and services that they’re purchasing on a monthly basis because the migration process is so difficult. And they don’t want to be caught up in all of that because things can go wrong. You know, it might not work perfectly and there’s all the just carrying it out.

But if you can essentially do migrations, and Playground is the sort of go between. It’s the bit which talks from, I don’t know, one hosting company to another. So it goes from hosting company A to Playground. Playground then serves it up to hosting company B, which is where you want to end up. And all of that happens through Playground. That’s remarkable. And you can do the inspecting in the middle bit, the middleware, Playground if you like. Check it’s all working before you deploy it. That’s amazingly powerful.

[00:29:41] Birgit Pauli-Haack: Yeah. And that’s actually the vision of Playground’s part of Data Liberation. They also have a browser extension to kind of identify a non WordPress site, the various pieces like the pages, the posts, the news, the events, kind of the custom post types. And then kind of teach Playground what it all is. But that’s kind of, it’s very technical on one side, but it’s also, you need to have a total different concept about content management systems to actually make that. So that’s not really for a normal consumer.

[00:30:13] Nathan Wrigley: Yeah, because if you’re coming from Drupal and you’ve got like 1,000 different modules in there, you know, think plugins in the WordPress space. Then it’s going to be difficult to one-to-one map that over to WordPress. But the endeavor is to do a half decent job and in the middle you can step in and say, okay, this might need modifying, that might need modifying. And then you can go back to your Drupal install, change things a little bit, try again because it takes no time to do it. That is really a key, interesting part. You do kind of wonder actually if hosting companies in the future will just offer Playground in as part of their bundle, you know, their onboarding migrating bundle.

[00:30:47] Birgit Pauli-Haack: Yeah. A lot of hosting companies have their own plugins for that. So I know that Pressable and SpinupWP, they all have their, or wordpress.com has their own plugin that they then connect with. I think it’s BlogVault most of the time. Pantheon, same, yeah. Where you can migrate in. But that part in the middle, that kind of always takes a long time.

And you are bound to the hosting company to actually offer that, yeah. And that’s not a cheap plugin. But if you go from one small hosting to one, another small hosting, you don’t have that luxury.

[00:31:20] Nathan Wrigley: Yeah, and if you’re crossing platforms as well, say Joomla into WordPress and what have you. That’s also really different.

[00:31:25] Birgit Pauli-Haack: Yeah. There are a few agencies who have built for their customer things, but it’s not open source and it’s, well, it’s open source, but it’s not meant for a huge amount of public to kind of use it.

[00:31:36] Nathan Wrigley: Yeah, I’d imagine that it’s fairly proprietary technology, isn’t it? It’s probably locked down because it’s the secret source of getting the Drupal installs into WordPress on their platform.

One of the things which Adam spoke about when we talked, I don’t know where we’re at with this, but I raised the question of the destructibility of it. So essentially when I spoke to Adam, when you launched Playground, you fiddle with it, played with it, the moment you click close on the browser tab everything went away. That’s how it was designed. But he said that at some point in the near future, and maybe that moment has already been passed.

[00:32:09] Birgit Pauli-Haack: It’s here.

[00:32:09] Nathan Wrigley: Yeah, so now we’ve got a more permanent version. Tell us about that. Are there any constraints on that? Like, can I close the browser tab? Can I shut my computer down, for example? I mean, will it last forever? Could I even use it as a, I don’t know, as a temporary website in, let’s say I work in a school and I want an intranet for my staff or something, could for those kind of things?

[00:32:29] Birgit Pauli-Haack: Well, it cannot be, it doesn’t have a domain or something like that. So that wouldn’t work. But yes, you can save. You have two options to save the site that you’re working on, so you can come back tomorrow. One is in the browser. So it uses the local storage of the browser and really downloads the whole WordPress stuff there. And then you open up the browser again, you get the site again. You cannot load it from another computer because it’s a different browser.

And the second option is to load it in your local file system. So you can, it downloads the whole thing, gives you a directory and that’s your website, and you can load it then back into Playground a day later, or a week later, or two months later, because it’s still on your computer.

You can also have multiple sites now in one Playground instance. So you can say, okay, save this site, and then now I use another blueprint, load it again and it’s another temporary site. And you load it, you save it again, then you have a second website there.

[00:33:29] Nathan Wrigley: A curious version of version control or something like that. You’ve added this plugin in, I’m going to save a new version marking that this plugin got added. Let’s see how that works. And then if it doesn’t work, we can roll back to the, just delete that one and go back to the previous one. Oh gosh. So essentially permanent. Locally permanent maybe is the better way to describe it.

[00:33:50] Birgit Pauli-Haack: And you need to think about the saving part. If you do a second site and you close it, a browser without the saving part, it’s going to go away. Yeah, it’s still ephemeral there. Which is also a good thing sometimes.

[00:34:02] Nathan Wrigley: But obviously as you said, you know, the point of hosting in the end is that, you know, it connects to a domain name, it goes through the DNS process and you you can see it online. No.

[00:34:10] Birgit Pauli-Haack: No, not yet.

[00:34:11] Nathan Wrigley: This is not. Oh, not yet. I wonder.

[00:34:12] Birgit Pauli-Haack: No, no, I don’t think that’s ever going to be. But what can be, soon hopefully is kind of pushing it to a hosting company. And that, I think it needs to be just finalised which hosting is going to be there. And the Playground team learns a lot from wordpress.com, because the new development, local development system that wordpress.com has, Studio, is based on Playground. They develop some of the features also for, that wordpress.com can use them in their Studio. And what was the bug fixes? Come to Playground.

[00:34:46] Nathan Wrigley: That makes real sense though, for hosting companies to be clamoring all over this, to build a Playground import functionality. Because then developers all over the world, you know, maybe if in teams it might be a little bit more difficult, but you know, a solo developer, certainly at the moment, you’ve been working on something. You’ve got this perfect version of the site, you’ve got all the plugins that you want, you’ve set it up, it’s working on my machine. Now I go over to my hosting company of choice, click the import Playground button and there it is. Why wouldn’t the hosting companies offer that frankly, it just seems too straightforward.

[00:35:17] Birgit Pauli-Haack: Syncing up with the live site or there’s also a GitHub deployment there. It opens so many ideas, yeah. And when you ask Adam, well, if I think about this, and can you do that? He said, sure.

[00:35:28] Nathan Wrigley: Give a few weeks. I’ll add it to list of 1,000 things that people have already suggested.

[00:35:32] Birgit Pauli-Haack: Yeah, we need to develop that. Yeah, the ideas are there, the prototypes are there, the proof of concept is already done. Just a matter of resources now, yeah. I can for instance see one thing is, if you have a documentation and you need people to contribute to documentation, you load the documentation in Playground, you make the changes, and then you push it to GitHub as a pull request. And then somebody can review it, load it in their own Playground and approve it so the documentation could be updated.

Something like that is already in use. That scenario, that’s in prototype. It’s not there yet, but we know that it can work, because some theme developers have that process. They’re not developers per se, that they go into the files. They load the theme into Playground, use the Create Block Theme plugin. Make the changes to the theme. Save it and create the block theme, so it’s in files. Then push it to GitHub as a pull request for this theme, and then have all the changes there. So that’s how a lot of designers work with their developers on the themes. They don’t have to touch any code, but it’s still all saved in code.

[00:36:48] Nathan Wrigley: It’s just such an interesting beginning of everything. It does feel like we are at a moment where there’s just so many different roads that could be taken, and lots of people coming up with lots of different ideas.

Just quickly circling back to the Studio thing that you mentioned. So Studio is a local development environment. You’re going to be downloading this as a software bundle for your Mac or your Windows machine or what have you. You’re saying that’s a wrapper for Playground, is it?

[00:37:13] Birgit Pauli-Haack: Exactly.

[00:37:13] Nathan Wrigley: But that’s immutably stored. That’s not dependent on.

[00:37:17] Birgit Pauli-Haack: No, it’s on your machine, yeah.

[00:37:19] Nathan Wrigley: Right. So it’s going for the files on the machine approach as opposed to being stored in the browser. So if you download and make use of Studio, you can close that machine down, come back to it whenever you like, it’s there until you decide to delete it.

[00:37:32] Birgit Pauli-Haack: Like any other local environment that you can, yeah.

[00:37:35] Nathan Wrigley: Yeah, okay. And that’s available free you to download for anybody.

[00:37:38] Birgit Pauli-Haack: Free, open source.

[00:37:39] Nathan Wrigley: Okay. Is there anything else you wanted to cover off, apart from the fact that we’ve both got ridiculously excited about this. Was there anything curious, interesting, quirky, novel that you’ve seen out there that we haven’t yet touched?

[00:37:50] Birgit Pauli-Haack: No, not yet. But I’m starting now to kind of dream about it. And sooner or later I come up with something, yeah.

What I would want and what I want to pursue is that I can have a Playground instance for writers. And I know writers who are not very keen on using the Block Editor, because it gets in the way. But the Block Editor has these settings where you can do distraction free, where you can do, put the toolbar on top, yeah, and hide it as long as I write, and just let me have when I’m not writing kind of thing, and log in and not have to go to the menu.

Right now, if I’m a blogger, I have to log into WordPress, and then I need to look at post, new post. This would give you, start writing, and don’t have to worry about the rest of it. And then click a button and then your WordPress site is updated with it. That’s kind of what I’m working on. I don’t know if really helpful, but.

[00:38:44] Nathan Wrigley: No, that’s really great. I mean, one of the things that I always thought was curious about it would be the idea in education, for educators literally standing in front of pupils, children who, you know, depending on what the kind of curriculum they’ve got. It might be we’re doing about poetry. We want everybody to upload and modify a poem, or comment on a poem or something like that.

And here’s the link. You know, we’re in an environment where everybody’s, we’re in the computer lab, everybody’s got a computer. Just click on this link, scan the QR code, whatever it may be. Give us your modifications, what have you. And I know that’s a sort strange example, but it’s the fact that instantly, very, very inexperienced users are in the same exact interface as all the other experienced users. And the level of difficulty was clicking a link. You just needed to click a link.

And the educator didn’t need a great deal of technology to set it up. The pupils needed zero technology to access it. And so it’s that one to many thing, where lots and lots of people can access the same thing in a heartbeat. And I’m imagining that the tooling to create the Playground installs, and to create the Blueprints is going to make it more and more easy in the future. So possibly not the perfect example, but I do like the example of one to many.

[00:39:56] Birgit Pauli-Haack: Yeah. What I like about it is that it’s not about WordPress. It’s about poetry. It’s about writing. It’s about, well, even image uploading and editing, yeah. You could certainly do that. Technology gets out of the way. And for the last 25 years, that’s always been in the way, yeah, and now it’s out of the way.

[00:40:14] Nathan Wrigley: Well, because the internet is basically a reading experience. I mean, I know we’ve got forms, but really all you’re doing is submitting a form so that somebody can read that. But you go to any website and largely websites, you know, if you’re going to some sort of SaaS app, that’s a different thing, it’s configured probably to be more interactive. But broadly speaking, you’re going to consume information.

But in this, you click a link and you’re reading information, but then you can do things with it. Oh, I think it would be better if there was an image there in that poem. Or, I don’t know, it’s an explanation of some principle of physics or something, and a diagram would be really useful at this point, and I don’t like the way they describe that, that could go in bold. And you are interacting with the internet. And it’s totally free, and it will be easy to deploy, and it’ll take seconds to load. And all of a sudden the internet became more interactive. And it’s just the beginning. It’s very exciting.

[00:41:05] Birgit Pauli-Haack: Yeah, it is.

[00:41:06] Nathan Wrigley: Birgit Pauli-Haack, thank you very much for talking to me today.

[00:41:09] Birgit Pauli-Haack: Thank you for leading me down the road of all the ideas here.

[00:41:13] Nathan Wrigley: Thank you for explaining it.

On the podcast today we have Birgit Pauli-Haack.

Birgit is a long time WordPress user, an influential voice in the WordPress community. She’s known for her role as the curator at the Gutenberg Times and host of the Gutenberg Changelog podcast. And brings her wealth of experience as a Core contributor to WordPress as well.

She joins me today for an in-person conversation, recorded at WordCamp Asia in the Philippines, and we’re discussing Playground, a remarkable development that’s set to redefine the WordPress development landscape.

Playground allows users to launch a fully functional WordPress instance directly in their browser. Without the necessity of a server, database, or PHP, Playground breaks down barriers, offering developers, product owners, educators and everyone in between a new way to interact with WordPress.

We explore how this technology not only simplifies the testing and development process, but also sets the stage for more interactive and immediate web experiences.

We explore the concept of Blueprints within Playground, tailored configurations that enable a bespoke user experience by preloading plugins, themes, and content. This feature helps developers to present their work in a controlled environment, offering users an insightful hands-on approach that can significantly enhance understanding and engagement, and it’s all available with just one click. It really does eliminate the traditional hurdles associated with installing WordPress.

If you’re curious about how the WordPress Playground is set to usher in a new era of friction-free web development, this episode is for you.

Useful links

Gutenberg Times

Gutenberg Changelog podcast

Podcast with Adam Zielinski on How Playground Is Transforming WordPress Website Creation

WordPress Playground

Block Visibility plugin by Nick Diego

Playground  Blueprints Gallery

WordPress Developer Blog > News

Data Liberation Project

SpinupWP

BlogVault

Pantheon

WordPress  Studio

Create Block Theme plugin