As an agency, you can use WordPress Playground to streamline your workflows, test your products, share interactive demos, present, and so much more. In this recent Hallway Hangout sparked by @karmatosed, attendees from various agencies and product teams discussed their experiences and curiosity about applying WordPress Playground in their work.
The Hallway Hangout took place on Dec 6, 2024. Here is the recording.
Here’s a few themes from the conversation:
- Try before you buy: Blueprints allow quick setup of WordPress sites with pre-configured plugins, themes, and settings, making it easy to include a demo of your product directly on your website.
- Accessible Testing for Non-Developers: Playground simplifies testing workflows, enabling non-technical team members like sales or project managers to try changes with a single click and no complex development setups.
- Sales demos: With dedicated setups for specific customer groups, Playground makes it easy to present directly to a client and even provide them a link to try your product.
- Starter sites: Agencies can maintain their own Blueprint Galleries and quickly bootstrap specific types of websites for different customer groups.
Future ideas
- Replicating Client Environments: While Playground doesn’t support that yet, replication of existing sites is on the roadmap.
- Streamlining Bug Reporting and Testing: An ability to share a link to the exact state of a WordPress Playground environment would single-click sharing and bug reporting without having to craft a custom Blueprint.
- Improving Private Repository Access: Expanding support for private GitGit Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency. Git is easy to learn and has a tiny footprint with lightning fast performance. Most modern plugin and theme development is being done with this version control system. https://git-scm.com/. repositories would help agencies working on secure or proprietary projects collaborate more effectively.
Shared resources
- Blueprints Documentation
- Nick Diego’s Playground Live Demo – Icon Block
- GitHub Repository for Icon Block
- Next-gen PHP Importers for Data Liberation
- Playground Docs Workflow Repository
AI Transcript (Unedited)
Computer.
All right, all right. So waiting for Adam. I’ll leave it up to you reggae to go and find Adam.
So really, rather than being talked at this is open conversation. Playground is amazing, but everybody, if you’re an agency, I also want to talk about the crossover between agency and product, because I think a lot of agencies, whatever they produce, is also a product, I would argue quite strongly, particularly from a demonstrating perspective, and that’s where playground really comes in. Well, you have as an agency, or as someone that works in product, you have your own processes, and you would have your own processes before playground. And what I’m really curious in particular, and this stems from, like, one of the conversations that started to have with Adam at work camp Europe, was, How on earth does playgrounds start to fit in when people already have their existing processes? And for me particularly, and this is my story, but I don’t think it’s unique. I tend to be hip kids. Call it fractional, but I tend to be a freelance or contractor that goes around and works with different people, and that’s amazing to collaborate, but that means I have so many different environments. I’ll go to one agency and it’s one environment. I’ll go to another agency and it’s a different environment. And that doesn’t mean that everyone should work on the same environment, but it does mean that something like playground maybe is a really interesting way to have throughout it, you know, a quick way that can be a good language. It also means that playground could be one possible way to spin up things quite quickly for demonstrating. I think of there’s a whole remit of people demonstrating. So we always think of, when we’re talking about test sites, the dev team, right? We think of like your dev setup, you know, whatever you’re going to do, and what’s your stack when you originally, initially set up any repo. However, one of the big ones is sales teams, right? So sales teams might want to set up past sites, and they might want to demonstrate them, or they and or the products as well. Playground could be possible for that. So I’m just really, really curious about, is anyone using it like that? What are the frictions that people have? What would you want from playground in order to be able to do that? That was so many questions of the curious Betty here, but that was a lot of me talking, and I would love that there to be other people talking as well.
Yeah. Well, thank you, Tammy, for giving us a context and what you’re thinking. I think we are enough people to actually do some introduction and what you’re working on, or why you’re here today to maybe answer all those questions that Tammy has. But why don’t we talk? Start with you, Colin, and you pick the next one.
Yeah. So my name is Colin Whitmore. I am an agency owner, and we are all the way in on new WordPress with blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. editor and site editor, and we are really trying to explore how to put playground into our workflows. So many of the things that we’re looking at and trying to think about is like, and Amy, I love you said, project, or, I’m sorry, product, because that’s like, our theme that we start with, that’s our product that we look and we give this to everyone. So, you know, basic testing of that we want to be able to do pull requests for projects that are production sites, and being able to test that, one of the biggest powers I see with playground is I can give somebody that’s not a dev, a spin up environment that they can just throw away when it’s done. And that’s huge. Being able to demo plugins, being able to demo themes, different things like that, we’re and then actually, I just use it all the time to find out, okay, is this something I broke, or is this actually a real issue, so and being able to test against different versions quickly. But yeah, so that’s me, and that’s what I’m looking for. Let’s go with Jim.
No, we couldn’t hear you.
Okay? Sorry, second call of the good day where that’s been a problem. Yeah, so thanks. I’m Joe. I’m an engineer at human made and yeah, just joined used playground a little bit myself while working on a few projects, kind of in the open sourceOpen Source Open Source denotes software for which the original source code is made freely available and may be redistributed and modified. Open Source **must be** delivered via a licensing model, see GPL. community. Things been very, very impressed like it. It still feels a little bit like magic to me. So there’s all this stuff, kind of without the certain things, but at the moment, very much looking, you know, like you just said Colin about the whole kind of non techie ability to just easily spin up something for someone I think has huge potential. So been exploring a little bit how you know how reliable that is as a sort of a perfect analog for WordPress, being able to demo all the things. Does it fit nicely? And so far, it seems like it has come on leaps and bounds. But I’m, really interested to kind of see how that would fit into our way of doing things, like if there are any any gaps still that maybe we could explore how to fill in things so very keen to learn More really, see who pass over to Ajit. Sorry.
Yeah, actually, so my name is and I’m an agency owner. I guess it’s been long we have been like embracing the block editor and even the playground. Also the day we discovered we started looking at it like, you know, how we can leverage it, because it was very fascinating. And I guess it was something that we have been always looking at because we build a lot of small projects. And for that, you know, like maintaining temper inside. I was like, That’s too much. So every time we have to write down an instruction where people have to download everything, set up, we have to put a big process. But with playground and things are much better, we can, like, create a branch, build things, say that, okay, this is a link. You can get a quick demo. So that definitely helps a lot. So in terms of leveraging, we are looking at creating temporary sites, like every day right now, it’s like regular team in our team there, we just need to talk. And then randomly, we are just looking to playground and seeing, okay, see this pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party. This is something that it can do. There is a new version of WordPress. New things are there. So from taking time to like, you know, like talking in randomly two minutes, exploring things around the WordPress a lot easy with it. So that’s where we are using to discover things. Second for our open source, definitely. Another area that we are looking at is the pull request thing, where you can get the preview. So right now we have an action there, but it only works with the public repositories. It doesn’t work with the primary one, so it will be good where we can incorporate that. So we want to make it part of the private repositories. So even if you are working on a projects which are not public, but it will be good if we can like straight away with something that we like with what we can just create, reactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/. with applications and like we create the pull request, anybody from the team can just go and say that, Oh, this is the PR. This is what we can look at it. So it’s very easy for them, like any, anyone from the team who is even non tech, or who doesn’t want to spend time setting up things, can look at it. So that’s, that’s the thing. It would be good if we can get that in terms of, like, you know, so we work with lot of different plug in houses involved. So we find that if they can leverage the playground to be good, because right now, they host it on different sites and platforms. So I feel the real power of playground is not in having it hosted as a playground, but more people start personalizing it. Because we we are like, Okay, what they feel like having a little custom build off playground for ourself, where it has a pre config setup. So right now, there is a little friction, because we don’t have that much documentation examples on it, but yeah, these are the areas that we are looking at. QA will be good, but right now, I don’t think it’s it gives a perfect kind of environment. We can definitely test the thing, but there are fair chances things are working perfectly, finding the live server, but in the playground, being the SQLite, it’s not accelerating. So we can have a somewhat functional QA, but we cannot be 100% sure that things that we are testing might definitely work there, but these are the areas that we are looking at exploring. In fact, we are trying around this simple LMS system for ourselves. So like how learn.wordpress.orgWordPress.org The community site where WordPress code is created and shared by the users. This is where you can download the source code for WordPress core, plugins and themes as well as the central location for community conversations and organization. https://wordpress.org/ uses we are like, okay, we can have something of a pool where we can give people the practice place where they can just learn around things, and it’s more of a customized thing that we are. So previously, it was not possible. But lately, in last couple of years, with blog editor, with playground, lot of things are possible. So these are the areas that where we are looking at leveraging the brain.
Yeah, that’s all on my Yeah. So is it Kirsty? Yeah,
sure. Hi, so I’m Kirsty. I’m an engineering manager at human made I am here because I haven’t seen Tammy post in the WordPress UK community slackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/. about 30 minutes ago, we are currently actually doing some research into ways we can provide demo sites for potential clients like this is an internal project with our commercial team that we’re doing some research for. So this, this whole Hangout, seemed especially relevant stuff I was looking at today anyway. So yeah, that is why I’m here. I don’t know very much about playground, I will confess. So I’m hoping to learn lots of things any other person who’s going to pass to his left.
Oh, okay, well, I didn’t say who I am, so I’m gonna jump in. My name is bilihack, and I’m a coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. contributor, and I’m also curating the GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ times, and I also contribute to playground, especially to the blueprint gallery. And I’m here to kind of see more ideas or hear more ideas for what is it that a good example for the blueprint gallery would be that you at the agency kind of jump off of or where you kind of can piece it together like other building blocks. So, yeah, all right. So the next question that I have so is, there are these ideas that you all shared with with us. What have you? Would it be helpful to show the latest playground version to kind of walk through the pieces of it? That’s one thing should we go through the blueprint gallery,
the blueprints might be quite interesting, because one of the things, so does everybody know what we’re talking about with blueprints? First of all, I’d be happy to kind of because there’s a lot of presumptions with new language. I think sometimes so. One, what are blueprints, and to what is missing from blueprints, I think is a really interesting discussion to have in the context of this, because blueprints are just the starting point, and that there’s, there’s some interesting thing there, because there’s initially, like, if you’re an agency doing your own blueprints, how you can kind of do that stuff. So there’s all kind of interesting. I’m seeing lots of nodding when I’m saying this, which both makes me feel really good. I’m just going to say, so keep nodding. And two, means we should be doing this.
I would love to hear your definition of blueprints. And
yeah, so, and how you work with, yeah, Tim, would you want to take it away? Or should I kind of jump in? I can
go first. The way that I describe it is in cooking. Although blueprints is literally, like, if you had Lego and you wanted to make something, it’s that. It’s literally like a, like a blueprint for from Lego, like, I want to build a house. Well, build a Lego house. I want to build a Lego Shop. Oh, build a Lego Shop. But you’re but that is a really dumb down version. And maybe it’s just because I just had lunch recently, but I would bring it back to recipes, but there is so much more to that. And I’ll let kind of burger maybe do a less like, simmered down version. I’m not going to call myself down, but a version of that so
well, I’ll be happy to share at least something there. So I’m going to share a screen, and that’s my not the desktop. No, this one here, and that’s, that’s kind of already a blueprint. You can all see my screen, right? Yeah, excellent, cool, yeah. So that’s the blueprint. That’s playground.wordpress.net. That’s the entrance to playground. And there’s a new the interface has changed in the last month or so, so now you can have a three pane window, and you can actually have multiple sites in one screen. You always start out with a temporary playground, unless you pull up one of the other ones. So you’re on the left hand side, you have some menus. And there is a three dot menu here that is actually relatively new, with the preview for WordPress PRs, preview for Google PRs, and then import from GitHubGitHub GitHub is a website that offers online implementation of git repositories that can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/ and import from sip. That’s kind of the tools here. And the second line, the first one is your site, the temporary playground, and then comes the blueprints gallery and and then you could the temperature. You can have the WordPress version. Yeah, it’s the nightly or previous version. So you can go back and say, was this bug in 6.6 or did I do this wrong? Or there’s a you can also have multiple, yeah, change the PHPPHP PHP (recursive acronym for PHP: Hypertext Preprocessor) is a widely-used open source general-purpose scripting language that is especially suited for web development and can be embedded into HTML. https://www.php.net/manual/en/preface.php. version and also the language of the site. And this one is on. The next one is allow network access is pretty important when you want to install plugins from the. A site, so you need to allow network access, and then you could also spin up a multi site network, because I changed things, I can apply the settings, and it kind of we resets the site on the right hand side because I allowed the network thing. So that definitely changes if there’s anything that you already put in there, it’s gonna be gone. So you probably can so up here you can export to GitHub, download, as I said, view the pre, print or report the error, and then. So this is very simple WordPress plugin site. So when we look at the blueprint, you can, you can see here that that’s the blueprint. That’s a it’s a JSONJSON JSON, or JavaScript Object Notation, is a minimal, readable format for structuring data. It is used primarily to transmit data between a server and web application, as an alternative to XML. file, and it pretty much is a configuration that’s how I define it. It’s a configuration file for the instance that you want to pull out. So, so I think I have a problem now that I don’t know how to get back to the other one. So it opens the new side, a new tab, but I’m back, yeah, so I’m gone from my other one, so I need to, I think it’s in a different tab. That’s one. Here we go, yeah, yeah, so, and now that’s blueprint. Is a JSON file with and there’s a documentation in the documentation tab. I don’t know. Do you see that here? There’s one that says blueprints. And it has, here the steps. And this is more documentation. So it says, okay, the steps say, one step is, Log Me In. Another step says, install a theme. Yeah, install a theme, pull it from the WordPress repo. The name of it is pendant and activated. And also, if it has import the startup content or the install the plugin, the install the plugin step, gonna say, okay, oh no, I started in 40 minutes. Alright, okay, Hi, Adam. The last I’m just explaining a little bit of the blueprints.
Can I add while you’re going through this burger? I think this is a important thing to see, because you’re seeing this kind of new but this is incredibly common, from a an agency and from a developer perspective, to have these recipes that you would just use like you, no matter what platform you have, you would have something similar to like this, that you just maybe have Dockers, maybe you have whatever you’re having. You’re passing these around, like when you start a new project. This is like the recipe that you have to base on your site so, or you let go. So I it’s just exactly the same kind of thing there. And
there were some contributors have put on a blueprint gallery. So when you go from that side to that link, you see all the different recipes kind of thing. So there is install a feed reader for feeds, plug in or create use to create block theme with any with a with your blueprint or I have there was one. Install the latest plugin, good work plugin. And then here’s one, loading, activating, configuring a theme from a GitHub repo. So if and there’s one how to get pretty permalinks? Yeah, we all do permalinks. And then or serve the media files from another host or admin, admin the color scheme so there are small steps or bigger ones. Jason ball has has one that’s to import the WP Graph QL and then have the website already set up to use it. Or you can use your WP CLICLI Command Line Interface. Terminal (Bash) in Mac, Command Prompt in Windows, or WP-CLI for WordPress. command to add posts or add a post image to a featured imageFeatured image A featured image is the main image used on your blog archive page and is pulled when the post or page is shared on social media. The image can be used to display in widget areas on your site or in a summary list of posts. here. So or have a WooCommerce so these are a WooCommerce product feed. And when you click on here the preview buttons, you get actually a new site with that enabled. And let’s do the, I think let’s do the WooCommerce. One kind of is pretty, pretty elaborate. Might take a while, but so when you click Preview, it opens up the playground.
It’s done. Only takes a little bit of when you’re on zoom all the data that’s streamed.
Yeah? Well, yeah, it’s actually getting pretty, pretty fast. Yeah, toffee, yeah. So it’s getting faster and faster depending on my internet connection. So, and what you see is kind of that there is up here that has been in the blueprint, what is the first page that a person sees that follows it? So that is pretty important to make sure that even if you have the blueprint, that you also think about the the landing page. So when I go here, I can it’s a temporary site, is that the one where I can see the blueprint?
So if we’re talking about this in the sense of products, what you could do, and I’m just a strap lady, or in agencies, you could go to a particular point in a site or and, or you could go to a particular point in onboarding, that’s kind of what we’re talking about, right?
Yeah, so on the left hand side, you see the Blueprint Editor, where you can kind of follow along. So it’s a description, and that’s just from the gallery. You don’t need the metaMeta Meta is a term that refers to the inside workings of a group. For us, this is the team that works on internal WordPress sites like WordCamp Central and Make WordPress. part of it, but the landing page is pretty much that where we landed. You know, it’s the page with the web toffee product kind of thing. And then these are the versions, latest WordPress, latest PHP, fine. Kitchen SinkKitchen Sink When using the WYSIWYG (What You See Is What You Get) editor in WordPress, you can expand the capabilities to allow more options. This expanded area is called the "Kitchen Sink." is fine. We don’t need that anymore. I think that’s that’s redundant. But the login, yeah, automatically install the plugin WooCommerce activated. Install the web toffee product feed activated, and then run a PHP command. And what that does is it loads and deletes transient, activate redirect, redirect post, create some posts with the sample product, and has some block block markup in there, so it creates actually content for the site. So when we go back here and go to product, there’s actually a sample product here, and you can create that directly. There are multiple ways to do that. There’s one is use PHP to create the product, or use WP CLI command to do that. Or if you have more than a set a small set of content. You can import a, W, X, R from another WordPress site that you say, Okay, this is a great content. So you can actually use playground to to create the content, export it, and then have it upload to the next playground. So there is in the blueprint gallery. There are some other ways.
Was it
was a theme tester, you know, add content and block. Let’s see if we can preview that. We can also go to the original blueprint gallery. Maybe that’s easier to look at. So that’s repo where we upload the blueprints. And here’s the gallery, so you have it in one smooth you don’t have to go and do you have additional links there? So that’s the same list that you see, but you can actually open in playground, view the source, or we can also edit it. So if you go view the source with a 2025, theme, yeah, there was a there was content that was, it’s an XML format that can be, there’s an input, W, X, R, step. So if you know where that is on GitHub, you can do that. You can put it on any server that has course, that doesn’t have course problems, restrictions. And we are almost the team is almost ready with providing a separate course server to offset some of the hiccups there, but that there’s also a step here that says, what is that? That’s the pretty files. Yeah, it’s. Kind of changes the permalink structure and does the pretty, pretty links kind of thing. And then you can also set aside options, yeah, so I set up, okay, this is a preview for the 2025 so the site itself will call, will be called 2025 and then the description, if there is a template to displace that would do that as well. Yeah, so, and that was actually used in one of the videos
for a demo of the 2025 theme. For the release. So, so does it give you a little bit of an overview of what what blueprints are and how to use them? I’m looking at you. Christy Kirsty, yeah.
Thank thanks. I think it’s really useful. Yeah,
absolutely, definitely, a lot to think about. Now we’re stuck here, but yeah, so I gonna stop the screen and Screen Share, and then we have a few questions. Are these questions in the chat? Yeah, so I’ve seen mixed use of schema. When Should this be used? Well, the schema helps you make sure that your steps are kind of what they’re supposed to be. So you’re not gonna it gives you in the IDE, it gives you the oh, this is not an allowed step, or this is a deprecated step. So it makes your blueprint a little bit more adhering to the standards there otherwise, because the playground sometimes it’s getting so much better now, but someone has a little bit hard time identifying where the error comes from. So this is definitely a one level where you say, Okay, I don’t I use the schema in my playground. So I have that IDE advantage of that, yeah, when you want auto completion in your code, edit tool,
sorry to the schema question.
Oh, that’s the answer. Okay, yeah, good. Legal instructions, nice, okay, and Colin shared, oh, the landing page, yeah, good, yeah. So I handed, well, welcome to the show Adam Tammy did, and we did some introductions here, where everybody kind of said why they’re here. They are agency. Work at agencies and have either no clue or little clue, or have already gone somewhere with playground and, yeah. So the discussion was, and I kind of said, Okay, if there are some missing links there, like, what is a blueprint? I kind of jumped in and did a little demo, but I so I wanted to get it back to you and Tammy to kind of lead the discussion here.
All right. Hello,
Tammy. I remember this all started one on world camp here in Torino earlier this year. Right when, when you saw playground, this would be so useful for agencies? Yeah, yeah. So what? What are the angles you’re thinking about?
Yeah. So I kind of shared that at the beginning, and I guess that kind of leads us into beyond. So blueprints of blueprints of one of the key bits I do feel particularly what we were shown. And it’s, it feels like a really insignificant thing that was shown, but it’s a really significant thing that was shown. Often people have 1012, bookmarks, if they’re on the sales team, to go to particular parts on the site, but been able to have a blueprint that works with sales like and part of my original concept, and that, when we were talking was, I don’t think this just helps developers. I think this helps anyone in your agency. And I think that’s really, really important here. I know like it’s going to come from the developers, but I also think it’s one it’s helps everyone in the agency from demoing through to and we’ve kind of spoke about that at the beginning. Agencies are creating products like it’s your theme. It’s your onboarding for learning the new tooling that you have in a way to do language from a unifying tools a little bit more be able to spin up sites quicker, and if you think of the amount of new clients that you have and. And just the sheer diversity of working environments been able to simmer that down a little bit, or at least have a quick way to spin things up without having some of the complexities. So I think it’s a lot, but for me, blueprints feels like it starts to unlock a little bit some of the hitches, like, how many, how many bookmarks Have you got? How could you have that? I don’t know if this is even possible, but like, locally, having, like, your own bookmark collection of blueprints, or those kind of things you’re nodding that’s so good, but things like that, I think, like agency we’re talking about, like agencies having their own version of a block thing, right? That they stick together, like the components that’s that’s what’s happening more and more. So having their own set of blueprints feels really powerful as well. To me. That’s a lot, but those kind of things, and then product companies as well, like going from agencies product demos, been able to land on a site and be able to suddenly start, been having to have a demo website, because you’ve got a blueprint. That seems incredible. You’re nodding again. I love it when people nod. That seems powerful to me. Someone before you join, someone said it’s like magic. It kind of is like, I like to ground it in Lego because it feels a bit too magic sometimes. And I think that’s one of the things we’ve got to be aware of with agency and product, is the end user is going to feel a little bit like, this is Magic science, so being able to, like, broach that as well. So there’s a lot for me there.
All right, yeah,
some of these things are actually possible today, and for some of them, there’s future development coming. So let me share some of that, starting with the blueprints gallery. Since that’s the use case you’ve mentioned earlier on,
I’ll share my screen in a sec. You should
I do have permission? So that’s probably,
yeah. Thank you, Colin for sharing the Nick Diego project. He has taken the blueprints quite some ways, yes,
yeah. So as as you were showed earlier, this is the work with blueprints Gallery, and this is just a GitHub repository. So tell me for for any agency that needs their own set of blueprints, it’s like there’s, what I’m trying to say is you can from this triple, for example, and there’s, there are workflows in here such that whenever you add or remove anything from the blueprints directory here, it will re create this table based on all the entries here. So you could have a private report with those blueprints, or we could have a local version of that and use that, or for demoing also, to make it less of a oh, here’s a bookmark, here’s a link, and tomorrow, by Yeah, we have a website, and all of our products have their own demo. There is something called WordPress playground blog that allows you to embed playground new WordPress site. So I quickly like Preview button, and it will load that blog, a demo of that block inside playground. So we’re going few levels deep. So now that’s playground demoing a playground block. And this block right here, by default, it just loads a regular WordPress site and playground. But you can go to the block inspector and you can tell it, oh, I want to use a blueprint, and I can paste that Blueprint here. Or if you’re hosted somewhere, you can say, yeah, just touch it from this URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org and it will create the exact site preview to that blueprint spec. So maybe, if you had a five plugins and three themes and you sold them through a WordPress site, then each page on that site right like showcasing a particular plugin and theme, have a preview right there with Then, with this blog, and I’ll stop sharing for exact and I’ll ask is this, does that sound like things you’re interested In? And are we going in the right direction? I see a lot of people nodding, which is good, Tommy, Am I answering your question? Are
you answering me? I’m going to go with the nodded as well, because I’ve done a lot of speaking, but I love the fact that other people. Nodding, and I would love other people’s input, because that’s just like what I’m kind of gaging from working with people. But do other people fail that need as well?
I think I don’t want to steer away from that. If there are people that are wanting to dig into that more. I am very interested in finding out, you know, as an agency that’s building sites for our clients, how can I actually create a blueprint of a live production website that I can test the pull request against and like, that is the workflow that that like, that’s my, my dream right now with playground, I feel like, you know, it’s like, we reach a new dream, and then I get a new dream. So, so my, my current one is, you know, we can test pull requests against, you know, just default themes, default plugins that we’ve got out there, we can load in all content. You know, we can import content. We can import a zip from just like the wp content directory if we need but we have some sites that are very large, you know, eight gig plus websites. And I want to be able to have product owners, not just developers, be able to test pull requests and essentially have this as part of our like our code review goes through or a pull request goes through two things. It goes through a functional test and it goes through a code review test. And I want that functional test to be something that can be done by a non developer, because they would just be able to click a button and there it is, kind of thing similar to how you can test the GitHub, or, I’m sorry, the Gutenberg PRC, yeah.
This will be the theme of 20, 25/5
2025, or 16,
testing, cloning, WordPress sites, moving data around. There’s a in playground. We’re exploring a lot of things related to data liberation, exporting content, importing content, even if you don’t have all the right PHP extensions installed, making sure that still works right, like something fails in between. Make sure it can recover from the failure. If there’s a lot of data, maybe we don’t have to bring all of it the beginning. Maybe we can reference the images on another site without actually downloading eight gigs. So yeah, like, this is a really large project that that’s in progress right now. I’m happy to say there’s good progress on that. I’ll actually share the tracking issue. And in a couple of days, there will be a new page on wordpress.org under Data Liberation. There is there’s one there right now. It focuses more on migrationMigration Moving the code, database and media files for a website site from one server to another. Most typically done when changing hosting companies. guides. It will be in a couple of days, it will be more of a road map where we are. What are we building specifically with all the links out and resources for specific pages. So, yeah, I know it’s a really big struggle, because these big sites, it’s probably
is some of this also part of what’s kind of being built in the experimental Sanebox plugin.
Yeah, plugin was a very first stab on doing that just to explore the problem surface. It works for small sites only, and it downloads everything, and sometimes it doesn’t stream things and crashes in between. So I’m very aware of that, and this exploration actually allowed us to discover all these problems and find ways of addressing them. So I that plugin will get updates along the way. It didn’t get get one for a while now, but it will get updates and it will be along those lines. Yes, you’ll get a touch on maybe in WordPress admin, if that’s the workflow you want, like on the site, or make changes in Sandbox, and then when your changes are finished, maybe you get another button synchronized back to the original site. This kind of workload. Awesome.
Yeah, if you need a guinea pig for any of those, I have tons of sites with really weird edge cases,
lovely. This is really good and really helpful. How can I connect with you? After this,
I will share my contact as well. Alright,
thank you so much.
Yeah. Also
in the playground channel, I love it, I saw you, yeah. I saw you,
yeah. A lot
of people are also asking about exporting a blueprint from a WordPress website, right so sort of not just making a clone out of a live site that I can use right now, but sort of moving it in time and space to other people later on, even if that site changes or if not online at the moment, and that is also coming as a part of the collaboration effort in 2025
right? What are questions out there? I
about private get repos.
That’s it. Yeah, that’s a good one. The this will also come and today you can somewhat use that like you need a for any private opera. You need a way to authenticate, right? So that might be a special link to send to someone, or that might be a prompt telling you, well, you need to log in first. So the way it works today is, if you authorize it, have playgrounds on WordPress net, you’ll be able to access your private repos through that site. Now, for non GitHub repos, just git right, maybe in GitLab or git back edge, we don’t have solutions for private repos today, only for public plans and also for just sharing a link with someone that would pull from a private report without them having to exclusively Authorize. It’s not there today yet. It’s it’s a difficult problem actually, how to do it securely, right? Because you don’t want your credentials to float around fully on the internet in the URL. So I’m not yet sure how to approach that problem. But it’s a it’s one that many people ask about. I think, like on every word count, there’s like at least three or four questions about projects, YouTube posts. So if you’re if you have any thoughts on how this could be solved in a secure way, let’s
all right, it’s quiet, so some more further questions in this point. Of course, feel free to interject at any point. Tommy, so how do you like what you’re hearing right now? What comes up for you in terms of things that you could do with this? Yes, so
one of the things that I strikes me at the moment about the current situation is, particularly as someone that goes in and out of lots of different agencies is, and I kind of, again said that the beginning was how many different situations in environments there are. But what I like about playground is the simplicity. Um, maybe it’s my it is my bias with Blockchain, all those kind of things. But it is just easy with the recipe I call the blueprints, whatever they’re called, whatever they’re called, right? We were calling Lego Lego earlier, with with the way that they’ve written. It brings me back to like the old days of like Vagrant, where we were kind of making like this, the really simple kind of setup. And the reason things like that worked, and the reason they took off so well was because of that simplicity and that just sharing around and that ability to do but they never really quite had what I’m seeing, which is what what you showed at the beginning very good, which was they’re going to the exactly well doing the certain thing at the certain point. There’s many implications that I’m thinking of with that from a testing perspective. So if I put my other hat on my designer hat, which has a feather, I think of like usability testing. I think of accessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) testing, the amount of times that you have to like now log in, now go to now do this. And those aren’t the steps you care about. The steps you care about, like the eighth or 10th step, that’s the one that you want to, like, actually get the feedback on. But you end up getting the feedback, or you use the credits, or use the time wasted on that bit of the budget of the tester, or whatever you’re doing, because you can’t go straight to the point depending on what source you’re using. So things like that come to mind that you would be able to just get straight to where you want to test, or you’d be able to share straight and get to those kind of communications. I don’t know if other people have got that experience, but I for one, have written so many times in a report like now go to and now do this, and now’s the test. Hey,
every single bug report, yeah, and for that case specifically, I would really love to see at one point a button in playground that says, share a link like, to this exact stage I’m in right now. Goodness, yes,
yes. Because how many times like, it does feel a little bit antiquated when we share a screenshot now, and I don’t mean to be little screenshots, because I do it all the time, particularly with arrows pointing at things and maybe circling. But to be able to do that like, and I know, like, you’ve got to be on the same environments. And I also know that we’re not always going to be on the same environments, but if there is a way that I can go, Okay, quickly spin up the same environment, potentially, because some clients are going to have very particular things, and some clients are never going to be in and I think this is going to be the friction of agencies, right? Some clients are going to maybe never want to be on playground, never want to be on this situation, but that’s okay, because they can be replicated if you know their details. And that’s like the the interesting thing with that I’m maybe curious about is, how can they stay on what they’re on, but how could you replicate it quite quickly, like the snapshot of their environment. Well, you got excited there.
You mean, what there are on, as in a production siteProduction Site A production site is a live site online meant to be viewed by your visitors, as opposed to a site that is staged for development or testing. or as an Yes.
So a good example is some, some like maybe the healthcare or some secure situation, and they are a long established setup, and they have high, you know, high dev situation and Dev setup, and they’re using, I don’t know, Hamster servers, whatever like configuration flipping, but whatever configuration they’re using isn’t can then rerun onto what, like, whatever you want to use locally for your right been able to just go. I want a snapshot of this straight away. And those kind of like quick ways of doing it, I think are really powerful as well.
Yeah, so the full answer is what Helen asked before, and in 2025 we’ll have a explore ways of forming these sites, but maybe quicker answer. And we also don’t have that today. We have site health reports in WordPress. And would be so, so cool if there was a way to grab a site health report and paste it into playground and get a site that at least reflect these things, right? It may not have all the same content, and that says, but at least the PHP version, plugins, all of that.
Yeah, I think, I think that’s kind of what I’m expecting. I mean, you can have like for like, because some of these sites are going to be secure, and that’s totally okay, but, and don’t want country scraping, but just being able to go like, Okay, I just want to make sure I have the same plugins, make sure that I have the sameness ish, generally, like, they will provide a database dump. So you’re generally going to have, like, the content, it’s just to be able to, yeah, but just be able to replicate it. That’s also at the amount of times when I’ve been in an agency and it’s like up to a week, it can sometimes be to set up your local testing environment. I’m not joking, like it can be that long when you start on a new project, it can be such a long time people are nodding, but it can be such a long time to set up the intricacies of DEV environments depending on what you’re doing. Like, if you’re lucky, it’s fast. If you’re unlucky, it’s it’s like unpicking Jenga made out of jam.
This actually makes me think of edit, or what you are building the blueprints editor. So right now, the blueprints editor that we have is just the JSON editor, and you have to type in text, but that it is working on a really cool tool that’s visual and uses the block editor, where you can arrange these different steps just well with a UIUI UI is an acronym for User Interface - the layout of the page the user interacts with. Think ‘how are they doing that’ and less about what they are doing. right the writing code. And maybe one cool way of using that would be if he could drag and drop a simple dump on that? Oh, yeah, I’m going to import it, or if there was a way of pasting, in fact, how people and it would configure all the right steps? Yeah, probably not going to be one, but would be really nice to have that.
Yeah, I’m thinking of this future where it’s not just you inspect the site. Is inspect and then open in playground. Yeah, I honestly like the usability testing. I think it will encourage more people. The PR testing I’ve seen in core has worked with more and I honestly think from the agency. Perspective, testing is hard. Like, automated testing was groundbreaking because it became easier, like, the easier. So the easier this type of thing is to do, the more usability testing, the more accessibility testing can be done, because the easier it’s going to be to do. You don’t have to set up and I’ve had to do this. I’ve had to do this. I’ve had to set up specific environments to have usability testing or to have accessibility testing come in, and that is like a chore, like you’ve got to hire someone for a day to set up the test, to write everything. Now you just, you wouldn’t have to, you’ve still got to write tests, but you wouldn’t have to go through the setups and all of those kinds of situations. Yes, I don’t know if anyone else can also see there’s that application for it. I see nodding. I like nodding. Yeah,
two questions. One of those kind of is based on that, and the other pivots just a little bit. So the first one is, you know, as we are testing, we’re pulling this data in. Is it possible right now to have your default import, but then also an import of only the content that is needed to test the specific PR or does that do you basically need to give a full new export that contains your content of what would be tested.
You mean a blueprint,
so it would be in the blueprint. But for the import
step, yeah,
and you can run, you can have three important steps, or one, right? And the one computer the base content. And then, depending on whether you want to load additional one or not, your add the second step or not. Does that is that helpful or not quite what you meant?
I think so. So I can actually have like, like, if I did like, here’s just all of our let’s take like, the you know, like the accessibility testing data that is used on like 2025 when that came out. Take that, but then I’ve added functionality that I can also add a second import that adds the additional content for that specific
PR, yeah, that’s amazing. Okay,
awesome. And what does it have a different name? Or is it actually the same thing? And we just use the same we just make another step,
yeah, with another step?
Fantastic. Okay, I hadn’t actually tried it, so I was like, what’s gonna happen? So my other question is a feature I didn’t know was there, and it was forget the minute, just a little bit earlier, there’s now that export to GitHub feature in playground. What is the intent with that? And how do you see that advancing?
Oh, so this is a way of so remember the button I mentioned earlier, share link to this playground as it is right now. So this is a very early stage of that feature. You can basically channel playground to drop all the files it has, or maybe just a subset of them, but let’s talk about all for the sake of the argument, and start a pull request for a GitHub repo directly with that playground state. And it actually does that. And then once you merge that pull request, suddenly all the changes from the playground are in a Git repo. And then we also have an integration that allows you to import content from a Git repo. So this is a very primitive version of shared storage where you have to go through all the GitHub workflows to do a PR merge it. You don’t have to import it again, but it can be done. And I’ve played with it for a oh, I’ll share my probably favorite use case of playground so far, playground or may find it real quick.
Docs work. Yes, I think I found it. How do I share my screen. Oh, yeah.
So I have this experimental repository here, and I’ll drop a link on our zoom chat. And what it does is a it’s, I have a video here to show it. It has a button Edit the documentation, and I click it, I go through the GitHub connection flow. And once I do it, it’s actually downloads a bunch of Marcum files on my GitHub repo. And. Load them into WordPress as pages. From there, I can edit one of them and maybe change the title, make a few content changes, like add a new paragraph in there, and then I can even upload an image here. So I’ll go to that. Yeah, perfect. Save that page, and from here, there is the export pull request to GitHub. It’s pre populated with some defaults, which tells playground which directories where in the GitHub repo. What’s the repo? Even creates the PR that takes a small while, but once it’s done, I have a pull request of my changes. And note that I have a I have a special plugin installed that saves all my pages as HTMLHTML HTML is an acronym for Hyper Text Markup Language. It is a markup language that is used in the development of web pages and websites. files. So I don’t even have, like a database binary blob that would be hard to review, but I have actual markup in here. And there’s also the I upload an image earlier on, and you notice, like, I don’t think I scroll that far in the video, but it’s also here. So this is just a different idea of how to store work besides, and how to collaborate.
Static site generator, using, yeah, brilliant, amazing.
It’s like, using as an app. It’s basically using it as an app, not just a blog that’s kind of CMS, that’s where I’m going. Like, it’s,
yeah, yeah. Brilliant, yeah.
And you just did the mic drop at the end. That was like,
how to do it? Because this is, as you can see, this is block market. This is for a version you can collaborate. But there’s also an actual static, say, generator, and I can click this route the documentation button. And this is just a static site in HTML that’s rendered without WordPress. And I don’t have that set up, but you could have a WP admin link in here that loads playground where you can edit it. Now, that’s my mic drop. Yeah,
that’s a perfect I just wanted to say that if you want to leave right away to see the speed billet challenge Ben molovig against Jessica, we wouldn’t be offended, but I’m fairly
sure most people do, so we probably want to wrap it up.
Great. We will have a recording available in a couple of days. And we also do a recap, so you kind of get some of the links that we shared in the chat and all that, you know, in a blog post. Well, yeah, this was cool. I learned so much from all of you. Wish you all, if you don’t see each other, happy holidays and all the best for the new year, and but there’s still two weeks or three weeks to go, so yeah, we might see each other well. You all be well. And thank you everyone for sharing. Thank you Adam and everybody else. Bye
bye. Thank you so much. Bye bye.