Title: December 2024 – WordPress Playground --- # Monthly Archives: December 2024 [ ](https://profiles.wordpress.org/berislavgrgicak/) [Bero](https://profiles.wordpress.org/berislavgrgicak/) 11:04 am _on_ December 16, 2024 Tags: [meeting ( 3 )](https://make.wordpress.org/playground/tag/meeting/), [summary ( 3 )](https://make.wordpress.org/playground/tag/summary/)    # 󠀁[Playground Team Meeting Summary – December 13, 2024](https://make.wordpress.org/playground/2024/12/16/playground-team-meeting-summary-december-13-2024/)󠁿 The Playground team met to discuss recent updates, ongoing projects, and community questions. ([Slack script](https://wordpress.slack.com/archives/C04EWKGDJ0K/p1734098437070179)) facilitated by [@berislavgrgicak](https://profiles.wordpress.org/berislavgrgicak/) ## Announcements * [Enabled CORS Proxy for all network requests](https://github.com/WordPress/wordpress-playground/pull/2076). This gives WordPress running inside Playground more access to cross origin resources. Limitations still apply around allowed headers and download sizes. Props to [@brandonpayton](https://profiles.wordpress.org/brandonpayton/) * The new and experimental Data Liberation importer [is now available in the importWxr step](https://github.com/WordPress/wordpress-playground/pull/2058) if you use the `"importer": "data-liberation"` option. The new importer rewrites links in the imported content, downloads assets through Playground’s CORS proxy, parallelizes the downloads, and communicates progress live. * [WP cron is now enabled in Playground](https://github.com/WordPress/wordpress-playground/pull/2039) * We used the Playground tester to compare the error rate of the top 1000 [WordPress.org](https://wordpress.org/) plugins. [In 2023 7% of plugins failed, and today it’s 5%.](https://github.com/bgrgicak/Playground-compatibility-reports/blob/main/reports/test-comparison.md) ## Contributor Updates * **Data Liberation Efforts:** - [@zieladam](https://profiles.wordpress.org/zieladam/) added a [experimental integration to the `importWxr` step.](https://github.com/WordPress/wordpress-playground/pull/2058) - [@zaerl](https://profiles.wordpress.org/zaerl/) is working on [topological sorting of WXR entities.](https://github.com/WordPress/wordpress-playground/pull/2030) - [@bpayton](https://profiles.wordpress.org/bpayton/)  [created a WXR + uploads export package](https://github.com/WordPress/wordpress-playground/pull/2078). - Experimental [Markdown importer in the importWxr step](https://github.com/WordPress/wordpress-playground/pull/2080). * **SQLite Integration**: - @janjakesjanjakes is focused on implementing MySQLMySQL MySQL is a relational database management system. A database is a structured collection of data where content, configuration and other options are stored. [https://www.mysql.com](https://www.mysql.com/)` information_schema` into SQLite. - Next: translating `ALTER TABLE` statements. * **Playground Tester**: - Tests will be able to run automatically after we add support for 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 by the repository owner. [https://github.com/](https://github.com/) actions to push reports. - [@berislavgrgicak](https://profiles.wordpress.org/berislavgrgicak/) [prototyped Playwright tests for the Tester.](https://github.com/bgrgicak/playground-tester/pull/9) * **Workshop**: - [@psykro](https://profiles.wordpress.org/psykro/) and [@berislavgrgicak](https://profiles.wordpress.org/berislavgrgicak/) delivered a [WordPress Playground for developers workshop](https://wordpress.tv/2024/12/16/wordpress-playground-for-developers/). ## Open Floor * **[Should Playground load if Blueprint steps fail?](https://wordpress.slack.com/archives/C04EWKGDJ0K/p1734100147789199)** - We would like to [improve error messages and how they are displayed.](https://wordpress.slack.com/archives/C04EWKGDJ0K/p1734101191915709) - We discussed if Blueprint authors should be able to allowed a step to fail, but [concluded it might cause issues. ](https://wordpress.slack.com/archives/C04EWKGDJ0K/p1734101386273749) Thank you to all contributors for your participation! Stay tuned for updates in SlackSlack Slack is a Collaborative Group Chat Platform [https://slack.com/](https://slack.com/). The WordPress community has its own Slack Channel at [https://make.wordpress.org/chat/](https://make.wordpress.org/chat/). [](https://make.wordpress.org/playground/wp-admin/post.php?post=131&action=edit) [#summary](https://make.wordpress.org/playground/tag/summary/) [#meeting](https://make.wordpress.org/playground/tag/meeting/) _Props to [@zieladam](https://profiles.wordpress.org/zieladam/) for reviewing_. * [Login to Reply](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fmake.wordpress.org%2Fplayground%2F2024%2F12%2F16%2Fplayground-team-meeting-summary-december-13-2024%2F%23respond&locale=en_US) [ ](https://profiles.wordpress.org/zieladam/) [Adam Zieliński](https://profiles.wordpress.org/zieladam/) 5:11 pm _on_ December 13, 2024   # 󠀁[Recap of Hallway Hangout: Playground for Agencies and Product Demos](https://make.wordpress.org/playground/2024/12/13/recap-of-hallway-hangout-playground-for-agencies-and-product-demos/)󠁿 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](https://profiles.wordpress.org/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](https://wordpress.github.io/wordpress-playground/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](https://github.com/WordPress/blueprints) 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/](https://git-scm.com/) repositories would help agencies working on secure or proprietary projects collaborate more effectively. Shared resources * [Blueprints Documentation](https://wordpress.github.io/wordpress-playground/blueprints/data-format/#landing-page) * [Nick Diego’s Playground Live Demo – Icon Block](https://nickdiego.com/projects/icon-block/) * [GitHub Repository for Icon Block](https://github.com/ndiego/icon-block/tree/main/_playground) * [Next-gen PHP Importers for Data Liberation](https://github.com/WordPress/wordpress-playground/issues/1894) * [Playground Docs Workflow Repository](https://github.com/adamziel/playground-docs-workflow) 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/](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](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/](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/](https://slack.com/). The WordPress community has its own Slack Channel at [https://make.wordpress.org/chat/](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/](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 by the repository owner. [https://github.com/](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/index.php](https://www.php.net/manual/en/index.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. * [Login to Reply](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fmake.wordpress.org%2Fplayground%2F2024%2F12%2F13%2Frecap-of-hallway-hangout-playground-for-agencies-and-product-demos%2F%23respond&locale=en_US) [ ](https://profiles.wordpress.org/bph/) [Birgit Pauli-Haack](https://profiles.wordpress.org/bph/) 5:06 pm _on_ December 2, 2024   # 󠀁[Recap of Hallway Hangout: Blueprint Block Editor](https://make.wordpress.org/playground/2024/12/02/recap-of-hallway-hangout-blueprint-block-editor/)󠁿 You can create Playground configuration files called Blueprints, written in 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. ([see docs](https://wordpress.github.io/wordpress-playground/blueprints/)). With the help of Blueprints you can build demos or test environments to share with clients, users or co-workers. You can also view a list of example blueprints in the [Blueprint Gallery](https://github.com/WordPress/blueprints). You can access it directly from the **[https://playground.wordpress.net/](https://playground.wordpress.net/) > Blueprint Gallery.** Not everyone is comfortable writing JSON, so Ajit Bohra and his team created a Blueprint builder in the 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. On Friday. **Adam Zielinski** and **Dawid Urbansk**i met with **Ajit Bohra** for an informal discussion about this tool and how it can be integrated into the Playground platform. The Hallway Hangout took place on November 29, 2024. Here is the recording. The meeting focused on the development and future of the WordPress Playground project’s blueprint builder. Adam Zielinski and Ajit Bohra introduced the current challenges with creating blueprints, which require extensive JSON knowledge. Ajit demonstrated a new 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. for building blueprints using the block editor, making the process more intuitive and visual. The team discussed integrating the blueprint builder into [playground.wordpress.net](https://playground.wordpress.net), improving content management, and potential features like parameterized blueprints and 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 by the repository owner. [https://github.com/](https://github.com/) integration. The conversation also touched on the importance of data liberation for exporting content and blueprints, and the potential for using the tool for onboarding and PR previews. Shared Resources: * [Blueprints Documentation](https://wordpress.github.io/wordpress-playground/blueprints) * [Block Editor Dev Repository on GitHub](https://github.com/lubusIN/block-editor-for-playground-blueprint/) * [Data Liberation Tracking issue](https://github.com/WordPress/wordpress-playground/issues/1894) * [add blueprint builder plugin](https://github.com/WordPress/wordpress-playground/pull/2008) ## Action Items * Explore options for hosting and sharing blueprints, such as using GitHub, Google Drive, or a dedicated service. * Investigate connecting the blueprint builder to the Data Liberation project to handle content import and URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org rewriting. * Decide on the appropriate repository for the blueprint builder development (WordPress Playground vs. WordPress Tools). * Identify additional contributors to help with the blueprint builder development, including ReactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. [https://reactjs.org](https://reactjs.org/) and WordPress experts _Props to [@zieladam](https://profiles.wordpress.org/zieladam/) for review._ --- Transcript via AI (unedited) Right. All right, right, right. Welcome to the blueprints editor Hallway hangout where we’re going to talk a lot about blueprints and adding, Oh, hello there. All right, people coming in. Yes, hello, hello. Oh, lovely, yeah. So we have Adam here, we have Ajit here, and my name is Birgit Pauli- Haack, and we have David here too. And then, well, hello, Ankit and well, human ju and then, where are you all? Where are you all coming in from? Where are you located? Use the chat window. It’s okay. So we have one India vote. All right now I think we all we have people who can show up early, benefit from that event. And yeah, Adam, did you want to introduce yourself and what you’re doing on the project and what we’re going to do today? Yeah, sure. So my name is Adam Zielinski. I’m the lead of the WordPress playground project. I started it around two years ago, and today we’re going to talk about blueprints and ways to build blueprints. Blueprints are these recipes for WordPress websites that we use in playground to create WordPress with specific set of plugins, themes, content, Site Settings, anything at all, really. Problem is they are quite cumbersome, and to build today, you need to know a lot about JSON and go through the documentation. And there are better way. There are better ways to approach this, and that’s what we’re going to talk about today. Add it here. Created an excellent UI for building blueprints, and that’s going to be at the center of the call. Shall we do a round of introduction? Birgit, or how you do you think it works? That’s alright. Adi, do you want to say a few words? Yeah, definitely. So my name is he Bora. I’m from near Mumbai, and so this is something that we initiated, blueprint, I guess, from WordCampWordCamp WordCamps are casual, locally-organized conferences covering everything related to WordPress. They're one of the places where the WordPress community comes together to teach one another what they’ve learned throughout the year and share the joy. [Learn more](https://central.wordcamp.org/about/). Europe, where me and Adam were discussing. So previously, we did a lot of attempts around this, like building it purely around react and everything. But then at the US, we were like, Okay, we need to do it with the blockade, right? Because on the wish list of Adam also, and I also, like, wanted to build it out right. And cut to WordCamp us. We had a good enough, you can say an MVPMinimum Viable Product " A minimum viable product (MVP) is a product with just enough features to satisfy early customers, and to provide feedback for future product development." - [WikiPedia](https://en.wikipedia.org/wiki/Minimum_viable_product), where we can take things forward from there. Well, interesting. So my name is big Polly hog. I’m a coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. contributor, and I’m doing a lot of community work for the WordPress project, and kind of facilitate that today. So I’m going to be in the chat and watch for your questions, so I can relay them to Adam and Ajit and also David and so use the chat window for your questions, and we’ll get them answered. And if nobody’s here to answer them, we’ll find somebody who answers them. But yeah, well, we have Adam here, and it’s kind of no and yeah. So how about you, David? Yeah. So Hello everyone. I’m David, and I’m here just to listen to watch and maybe mentally support main actor Ajit, presenting his his work. I’m also related to WordPress a lot. I’ve I love a playground. I contributed to playground as well. I’ve built with Adam. I work with playground block. I block to embed WordPress in in 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/](https://wordpress.org/gutenberg/). Also. I’m a speaker. I spoke at like over 30 WordPress related conferences, including word camp Europe and word camps Poland and so on and so on. Yeah, I’m active, and I love to hope, and so I’m here, and that’s about him, yeah. So how about Anne? And himanju. Sign us. Maybe. Do you want to briefly introduce yourself and what you’re doing with WordPress and why you’re here? Or others, all team members you. Or No, no, all right. Well, you can definitely get on camera and unmute your microphone if you want to anytime, but if there’s no further the conversation here, introductions, we let Adam push it off, or are you gonna do it? All right? We defined a little bit of an agenda. Was it like last week or the week before that? The first actually go and go ahead and paste it on the chat. We may fully drift off from that, but it’s, it’s in there in case we’ll need structure. So let me kick it off by just sharing my screen for a second and showing how blueprints are created today. And I need to, need to grant me the permissions. Yes. All right, lovely, right. So now you now you should be able, all right, I think I’m showing my entire screen, which is not what I intended. I wanted to show just single window. We didn’t see anything. Okay, lovely. So this is the blueprints editor that we have today, and it’s very simple. We have a WordPress preview on the right hand side, and on the left hand side we write the blueprint. And that’s the first challenge. You need to know what to do and have some sort of guidance, right? Because there is a defined data format, and I know that I can type say plugins here, and that I can provide a list of slides, so maybe I can say, say WordPress SEO, and that will install Yoast, but it is quite, I would say, unintuitive, right? Like, I know Yoast has this, like WordPress SEO, but I’ve seen many people get confused by that, and that’s not specifically for 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/](https://wordpress.org/plugins/) or can be cost-based plugin from a third-party.. Many plugins have different name and a slide, and I need to know that I’m I need to put a plug ins key here, and maybe there’s some other completion that makes it just a little bit easier, but it’s just a list of things, right? So if I’m going to say 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., what is it? Is it a user? Meta, is it a post? Meta, is it site options? Well, there is some information in the docs, but the process is quite cumbersome. You have to go between this and the docs, and you have to know where, where they are. So definitely, like it is a MVP that enables creating blueprints, but it is not an optimal experience that would make blueprints available to a wide audience, and a basic tool that that we’ll use and to that, addit developed a great solution. Added Do you want to take over and show what you build? Yeah, sure. We have a working playground where it takes the architect build. So let’s anchor that. So we are going to use playground to build the playground blueprints. Currently, we use our WordPress plugin which times of power the block editor. It uses the custom page types and custom blocks. It always takes a little bit longer when, when we’re streaming, yes, this is precisely from a GitHub, so it takes slightly more time compared to if we do it from a compile.org frame, yeah, and I just shared in the chat window the blueprints documentation, if you want to kind of dive in a little bit deeper. And I’m also sharing right now the repo where Ajit just clicked on the try playground button so you can follow along afterwards or here, because yeah. So there’s also a PR in the GitHub repo of the web. No, it’s, yeah, it’s a pull request to actually add the blueprint builder to the playground. So if you want to, it’s pretty much action sold. Told me it’s the same code base for. Data. Okay, yeah, so this is the playground right now. We have a play on blueprint build up. So this is a custom post tag that you have here so that we can build multiple blueprints and keep it aside. It’s kind of people can create their own library, or we can, kind of import our library also. So for example, I see we can set any title for so right now, we are using the side bar for setting all the different playground patterns like 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/index.php](https://www.php.net/manual/en/index.php) WordPress versions the landing page. What is the default ending? So if you look at this one, it’s straight away, open the blueprint with the post type. So this is the parameter which controls like this is the field we can say, Okay, once blueprint start with this, you go to this URL. So we are going to eventually get rid of this options. We are able to have a kitchen Simone future. But right now we have this options if you want the networking. So these are the global configurations around the kingdom that we can add here. And we have a complete block library around the steps. So right now we saw that for the JSON part, we need to remember, we need to have some ideas, or some sort of just like, what are the steps? What are the different steps that are possible? So to remove that barrier for people who, probably there is a tutor who want to just show how WordPress works, or just want to show FSC, so they might not be comfortable with the Jason format or going to the documentation, so we give them a visual representation with steps. So we can say that these are all the steps that are available here and right now. These are all categorized into logical group. Is like, Okay, if you want to config anything around the WordPress, then we have log in, enable written sites. If you want to extend the WordPress, then install, plug in, activate if you want to work through the file systems. To be a file system, if you want to import the data, so we have data if we do it. So we have categorized everything into different groups, so that if someone is even glancing through this like they’re going through these steps, like scrolling this, they can get a gist of like, okay, these are the sensible groupings, and this is how I can get things. And the major benefit of using the block editor as a basis like, they get a familiar interface that they are doing for the FSC sites or building pages of the blog. So they already have that family Rex. They don’t have to learn anything you they know how to drag drop, how to add blocks. So we have just cut short that fiction also for So, for example, if they want to use logging, they can use login block, yes, mean, and password. So normally they need to remember those things and say that, okay, there is a step. There is a log here. They don’t care. They just say that, okay, I want to create a playground. And okay, my playground, the login credential block this, then they say that, okay, I want to install a plugin. So if I search for plugin, so we have installed, it needs to be found the repository. So right now it gives three options. This is the place when we say, WordPress SEO. So right now it is a textual scheme, but yes, we are working on a picker where they will get an option, either auto suggest, or they can say click, and they will get a similar interface to what right now we have on the WordPress or slash plugin. So they can say that you SEO, and they get 1020, options for the SEO. They can say that, okay, this is, this is the plugin where looking at so they can add this So similarly, they have lot of other options here, like if you want to send the language, you can handle. So all these tabs have a kind of a context for editing. By default, they start as I do. If you click on it, it shows you more options, so they don’t feel overwhelmed with lot of forms tipping the essence of the UXUX UX is an acronym for User Experience - the way the user uses the UI. Think ‘what they are doing’ and less about how they do it. that we right now have on the blocks. They are only editable when we select them, so we are using the same user experience like we don’t want to diverge and reinvent user experience. So most of the options are right there because we don’t want them to diverse into maybe, let’s side by anything it most of the option has to be s2 so now we have options. So we can just drag, drop, move things here, so once they have set everything here. So let’s say we just try to add this two. So we have now four options here, like we can directly open this with playground. We can download the file, we can copy this J so, or we can open it. We edited that item, so this is now automatically generated, like you don’t have to type everything the all the entire JSON is built. So this options might change both on we can use options here. We can customize this part. So this is what we have right now. So. And idea is to add more options make it more easy for people to like, select plugin, select teams. In fact, even so right now it goes to the editor here. Maybe we can bring it inside the blogger itself, so they don’t have to jump to a different URL. Right now we don’t have open the JSON file. But yes, right now we are working on it where they can just, just if they have downloaded the JSON file, we will have an option somewhere here they can say that open the JSON and it will automatically convert the JSON file into blocks and pre fill everything for them. So they can either create new they can open the existing one also. So that’s the plan ahead. So So apart from that, we have step library also, yes, so there’s another amazing steps library that is being developed. So it kinds of give you a UI, often configuring most of the common option, like if you want to add a client, so you don’t have to write all the code. It automatically generate Jessica. So idea is to bring this also into the blueprint in some ways. So right now, working on an APIAPI An API or Application Programming Interface is a software intermediary that allows programs to interact with each other and share data in limited, clearly defined ways. where we can see that. So the way we register block variations like meet something similar, where you can say that, okay, I want to do this, this, this, and you don’t have to actually create the custom block. You can just add a variation kind of So, for example, if you know your PHP. So right now, this is just a code like we don’t want to do so some area where you can say that, can you define the parameters that you want, and behind the scene, it will automatically create that. Or maybe it can kind of a variation of a run page. So that’s still under exploration, but yeah, this is a wonderful library that would be good to add so that you know, if anyone wants to aid, add a user, choose an income stream. So right now they have to remember things. So this is done from the user meta, yeah, but there are, there are a lot of other steps which are definitely useful see. So we can bring this. We can bring this so all the efforts that are right now consolidated, we can bring everything under p1 roof and a much better user experience for the end user. So about, yeah, that’s it. This is fantastic at it. I just want to take a minute to appreciate all of this. It’s an excellent place to continue from. And this like is 100,000 times better than just writing raw JSON, right, like this. This speaks to you, oh, let’s install a plugin, and I don’t have to know where in the JSON structure that goes. I can just work with that plugin. This is so lovely. I have a question or two. But before I ask that, maybe someone else on this call have has a comment or would like to step in, maybe I’m gonna ask one. Because fantastic. First of all, I love it. Love to see it. As Adam said, great base for future improvements on this, like as a great as a first iteration, I’m taking two things, because I saw some explorations on the UI for the builder. And wouldn’t it be useful to use, maybe a custom editor, custom build editor, build for the playground, to utilize all the goodness, and, for example, maybe embed the playground preview also on the right, the same as on the builder. So we don’t even need it at all. It’s just like only this, because as far as I know, what Adam plans to do is basically unify all of those bits that are scattered across the web just to one piece that is like rule them all. This is the way to do it, and we can support all the use cases. That’s the end of the question. So just maybe, maybe suggestion, a question. Maybe, yeah, but still, great. Great job. But that’s the plan. So idea is to be go with the custom build a standalone editor so that we don’t have to render it. So idea was to, let’s go with the plugin, where it helps iterate faster, and at least get an idea. So So I still consider this as a POC, like this is a POC for me, or we still need to work on the NP. So yeah, a custom build editor will be good, because right now there are a lot of I will say, a barrier in customizing thing. Like, for example, we want a code view, so right now it shows the block markup, and we want to have a different like, they straight away see the JSON. So right now we have to do a lot of customizations and add things, because editor in the WordPress right now, with the overall framework, does not allow us to do that. Like, if you want to declutter most of the UI, so there is a lot of UI that comes with it. We cannot remove that either. We have to do hacks to mirror for more control and to be like, more integrated into play. Definitely where standalone your credit custom tailor for the blueprint builds is the way forward. Thank you. All clear. No, you, oh, sorry. All right. About the step library, I’m really excited for being able to add more interactions to this via custom blocks and then writing a WordPress plugin would be the same as adding a feature to blueprints de facto, even if it’s transcribed to all the JSON steps that we have today. From the user perspective, it could be something completely different, right? I don’t know, add a widgetWidget A WordPress Widget is a small block that performs a specific function. You can add these widgets in sidebars also known as widget-ready areas on your web page. WordPress widgets were originally created to provide a simple and easy-to-use way of giving design and structure control of the WordPress theme to the user. for reservations of restaurant tables, and it could be step where you just configure, like, here’s my layout of the tables. I’m really excited for this. I’d love to explore what would it take to get this to view on and by view one, I mean something that we could integrate directly on playground.wordpress.net, I would really love to have that as a first class experience in there whenever you edit blueprints or create new ones. I’d love there to be an editor available directly in there for everyone to enjoy. So I wonder you’ve already mentioned a lot of things added in terms of future plans and improvements, I have some thoughts, and I wonder if you have any other thoughts on top of that. Oh, there are a lot of that I have written. So this was some of the gist. But I’m still putting down a lot of other items also now. But yeah, I’m with you on that part, like if they get it. So if, right now, if we go with the plug in the root, until we have started out, so maybe when they once they spin it, we can have this plugin as a must use plugin. So they get the editor by default, whenever, whenever they spin the playground. Lovely. So, in terms of, yeah, well, I have a question of the when writing blueprints and demos, a lot of people need some content that they can actually also import into playground. And we did some, and you’re working on quite a few things, but Well, the only thing what kind of intrigues me by having the editor in the playground, but also I can put my content into the playground and then, but is there we need, would need a feature to kind of identify the content that will be then loaded with a blueprint, and from where does it Come? Because it, well, it needs to be exported as an W, X, R kind of thing, but it also needs to live somewhere for somebody else to use it for the playground. So Can, can there be a bridge to from this playground instance to where the content and the blueprint can live so it’s not tied to my blueprint playground instance. Does that make sense? It does make sense. So let me paraphrase. You want to wait to manage content inside that editor so that you can bring it in, maybe even create it entirely there and then when it’s ready, you want the artifact that get you you get from the editor. You want it to reflect that content so that you can share it with others. Yeah, is that right? That’s right, not only, but not only the content, but also the blueprint. Yes, it also needs to live somewhere to be able to be downloaded from other playground instances. Yeah. So one, one thing that came to mind is, imagine, if that blueprints editor, it would have a insert content step or manage content, or whatever. There you would have a visual WordPress in it, there would be another playground instance where you could just go through pages, edit them, manage, manage them. You could populate that with an existing WXR file, or you could start from scratch, and then when you’re finished, and when you save your blueprint, instead of getting a JSON file, you would get a zip bundle, and inside that, there would be blueprint, there would be that content file, maybe some static assets that you uploaded, and that would be interchangeable with the actual JSON, right? So you could share that directly and import that into playground. Would that solve your problem? Yeah. Yeah, well, right now it needs to live somewhere, yeah? And if it’s in my playground, it’s just on my site, it’s just in my browser, yeah, so would I export it, then to GitHub or to my own website, or, Oh, that’s what you mean, yeah, like the part where you’re sharing it. I see David raised his hand, so maybe, yeah, yeah. I just want to chime in and tell and say that there is already an import WX, XR, Yeah, no kidding, query parameter. But as you said, it has to be hosted somewhere, because it’s only a URL. I’m thinking, like for the short content. Technically, you could maybe inline and put it in the URL itself. But I’m guessing me may hit limits on the URL length in this way. But if you have a little demo content, maybe that would be possible to just inline in the URL, right, if not where it is hosted. Yeah, that’s a great question. I’m saying, well, the manner of playground is that I can use WordPress in the browser, and so I can create my content right there, and then I can export that and with the blueprint that I do with a block editor or separate editor, yeah, kind of all in the same interface, so I but then I need to export it, like anything else that I use with playground. I need to export it, yeah, yeah. So it’s something just clicked for me, and it’s, this is just data liberation when I think about it. So in the Data Liberation project, there are two parts of it. One is getting content into WordPress, and the other part is getting content out of WordPress. And in here we are really talking about exporting something we create in WordPress into some location where it can be publicly accessed, right to some hosting facility. Yeah, so and link up that to the blueprint, yes. And so I wonder if we were building that as a Editor inside WordPress, then whatever we built for exporting as a part of data liberation, we could just connect to this. So maybe if there is a connector to host this on your WordPress site, if you connect it via some like or something like that. Or maybe there could be another tool hosted on a GitHub as a gist or inside some repo, right? Or another service, maybe Dropbox, yeah. Or or some, some local app that you can run and expose your local even environment and all its contents if you want to move it to like remote or spin it apps and send it somewhere without actually even having a real site. Have you just created with this so? And then I wonder, yeah, like, that’s a very good point. And I also wonder, could there be a hosting service attached to playground like there is a risk in there that the usage would go over the top and we’d have to close it down. But the same way we have a blueprints gallery that’s public and you can propose your blueprints there, maybe we could have something like blueprints temporary stash where you can just upload it and maybe it stays there forever, if you want, or maybe it disappears after a few days. But just to remove this additional friction of, oh, I actually need to authorize that with some other service that I may not have, yeah, well, cloud up could be one service. Google Drive would be another service, if those but then you need always the connectors to API, connectors with everything and so, yeah, but I think it would be worthwhile to have these connectors in playground. Not everybody has GitHub, not but a lot of people have other other services. But I think that’s for the first part. I think it would have, would just be okay with using GitHub for most part, or your own website. So if I have on the Gutenberg times. I want to have some content that uses the newest things from the Gutenberg nightly. I have a playground link for the Gutenberg nightly so I could then also add a content piece to it and then host it all on the Gutenberg times, the sub directory right now it would be just the upload folder or something like that, or just just a matter of documentation, like how to host it on somewhere like s3 or whatever. Yeah, pick your server, and it’s up to you to set this. Set this up. But just with the proper docs, yeah, there seems to be two audiences for this. One is I just want to build this blueprint and click a button and be done with it. And the other is, oh, I’m a power user. I want to do a lot of custom stuff with it, and I want to connect as three to Google Storage and go through a proxy. And both are valid use cases, and one of them is more about the tools, and the other one is more about technical resources, right? Exactly. Well, I’m also kind of thinking, what are the use cases for playground? And one of them, that’s a very compelling playground, is creating demos for your for your theme, for your plugin, for your yeah for your whole solution. And and that always kind of hinges on the content and how people then my travel that content in a in a tryout session, and we are from the conversation that I had with sponsors and people at WordCamp Europe, actually, and they’re really looking for something like that, many other services, but they’re all kind of one side, one server, kind of way, one domain. And with blue brand, you don’t have to do any of that? Yeah. Oh, that made me think of something so on 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/](https://wordpress.org/) we have this live preview feature for plugins, and you have to provide a blueprint. Well, this could be connected with this, and maybe even as a guide at experience where either the UX itself tells you what to do, or you have some sort of clues, as in, Hey, you want to set up a basic WP admin page to showcase your plug in, cool, do this? Do that? Click a button Exactly, and that’s yeah, and then you export the site you just created. That’s what I wanted to say. Imagine we have you. Imagine you have a website that you know is going to be the the preview one. So you set everything up on this site, you install blue print editor, you say, one step, login as admin, and the second is, clone this site and you have all the plugins from it, all the content from it, whatever you just specified. Every time you hit a button, it’s going to be everything will be pointing to this source side. Let’s say that could also work, yeah. Then you don’t have to post it anywhere, because, I mean, it’s hosted already. You have this one source of true site that everything is being pulled from for each of the playground on the initialization. So that also could work, yeah. And that’s very related to data liberation, one of the projects there is exactly cloning a site or transferring a site, so then we could just connect it to this, and everything comes together beautifully. We have the editor, we have a clone feature, we have a place to host things, and we have a really easy experience. I love this. LG, Ajit. I want to point to Ajit, but I don’t know where he is. No so one thing interesting is we already have similar workflow that is being used by create a blockchain where they can connect it to the GitHub, and they have the entire GitHub workflow, so something that can work for the entire discussion that we had. So they can just say that, okay, they want to connect it, and whatever they do, we can give them an option and it push everything on the GitHub. So the similar workflow can be somewhere replicated here, so the content, the import file, everything stays in this GitHub repository. Also the blueprint Jason is also there. And now blueprint Jason knows that awareness of the GitHub report, so it can automatically link the assets there. It will automatically generate the Read Me file with the big button that open this playground. So we have a blueprint gallery. So this sort of becomes like a mini packages, or mini GitHub repos that have everything with blueprint and all the content. So that’s the one part second we were talking about story, like lot of people. So when I think about Blueprint, so I know the item which we had this vision where people who don’t want to go to the hassle of full lot of text, they are just simple people. They want to use that so, so here they most of these people might not know GitHub. What are the things? So we, if we consider that audience, they, most of them have a Google Drive. So we can say that connected with the Google Drive, and we put everything on there so that can also be explored as a storage because those people might not know what is s3 they they just want to use WordPress desktop. So either we can go with the GitHub flow, where they connect everything stays there, or maybe some exploration, simplifying things through things that they use every day, like a Gmail, Google Drive, or anything like connected to the Google Drive to our box, whatever. Yeah, good thoughts. So many things to do. Yeah, such a project. And one more thing I would like to see in this, and that’s why I was also thinking about the standalone editor would be it’s also connected to the blueprints library, because I was imagining something similar to synced patterns and sync blocks, like reusable blocks, but for blueprints, so we could have like a like pre defined set of like steps. Imagine we have our setup that we always do for we have seven plug ins in our company, and every single plugin uses the same seven steps as the first one. I could create a pattern or like blueprint that then I can reference this blueprint so it would it would just like come such nice and handy feature. If I could un sync it and say, I have this block, I click on it and I get like, like, we another editor inside, and I can just edit this blueprint, save it, and it’s like, unsync now, and I have like, customized version of this blueprint that was saved before. So I have like, Yeah, I’m using both the best of both worlds? Yeah, I can say, pick something that’s reusable, ideally, maybe could also be para parameterized. So if I have like, seven steps, but on one step or two steps, I need to change something like a plugin name. I can just use this, but I can parameterize it. Thoughts, thoughts here, but, yeah, I’m that’s what I also imagine usefulness It is, yeah, I had a similar, a similar vision when I saw the the block library on the left hand side, Yeah, where is another tab up there that says blueprint gallery kind of thing? And they’re just gonna, yeah, yeah. I love it. If you ask, if you ask me for a one liner vision, we want to create FSC for blueprints. That’s, that’s the vision I have. I’m on board with the patterns thing, where we have the patterns and we have pattern over rights, where you can just change those things, right? We use patterns, in fact, right now, when we create, it creates a blank ideal. It should show all the blueprints from blueprint calories. Say that, okay, start blank, or these are the blueprints that you want. Yeah? FBE whole Blueprint Editor, yeah. Parameterization makes me think of partially since patterns, that’s exactly what they are, exactly like it for free from the block editor, correct observation, yes, this is amazing, all right, now, correct? Now they have, now they have block binding also, so we can use block binding if they want to connect it with dynamic data also, yeah, and especially external sources, right? Yes, so external sources plus blueprint, and they want to pull data from an AP and then add it to the blueprint generated like we don’t want to import it, but they want to, real time, get their data. So well, some some plugins connect with an external source. And if you want to have content showing up, you need to have your blueprint connect with the external source as well. Somehow, I love, I just love WordPress, like we’re this is there’s so much overlap with other things and for free, just because core is having, getting these features and there’s significant development in there, this project immediately benefits and such a great ideas. Yeah, absolutely, absolutely. So, well, all right, so getting to to v1 wise. So to me, v1 is a point where we are MVP, whatever you call it, a point where we integrate that directly on playground.wordpress.net, and to do that like we’ve already touched on a custom editor and a way to get the content out of a blueprint, even if that involves a WXR file that’s a side of blueprint, or maybe some static assets that were uploaded in there. So a part of that is related to data liberation and the work we do there. I know Brandon Paton is exploring a export bundle format that’s just a zip file and it includes content assets and potentially a blueprint, and that would be a perfect tie in to what we need here. And user experience wise, I think there’s like, a future, a few tweaks we could do there with how these steps are displayed, or, like, where specific checkbooks lives, but we’re in a pretty decent place, like right at this point, which is very encouraging. Yeah, excellent. Do you think so? I have a blueprint to or a developer blog post in the works about creating a theme demo for with playground or for playground and, and there’s one blocker in there because the links that are in inside pages, or, I know. Application blocks that are not translated or transformed. How far are you with, kind of getting that solved, or is it already solved? So let me paraphrase it to make sure we were on the same page. You mean you’re importing content, and there are some URLs in that content, and in playground, it still references URLs from other domains, which means it will not work on the actual site. That would be one thing. The other part is, I went through the XML file and made those absolute references. Oh, okay, relative references, so it’s only slash pages or slash testimonials. Those also don’t work in playground, which normally they would if you imported Right, right away into a, oh, because of the slash scope URL, because of the scoping Yes, got so that is actually the the problem for that that blocks the the the developer blog post from being published, because it’s not fixing it, but if it in this. But the the change that I made to relative links came from the original problem that the absolute links are not translated to the new site. Gotcha, I think we’re a month or maybe month and a half away from solving this. So I just shared a link in a zoom chat. This is a tracking Q sheet for Data Liberation inside the playground. And all I’m working on recently is the content import problem, and rewriting those URLs to make sure that they come across with the actual target site URL after they’re imported, right? So if you even like, regardless of whether you import a absolute thing or a relative thing, you would end up with something that works on the target site. This is not a part of most of the existing WXR importers, and this is one of the problems we’re solving in this one aside of importing very large pieces of content, importing things with assets, and handling scenarios where those assets have gone missing and can no longer be fetched, recovering from errors and really serving, solving all the importing problems that I was able to learn from while reading all the support forums and historical explorations on this. So, okay, yeah, yeah. So short answer, it’s on the way. It’s on the way. So I’m, I’m doing a workshop at WordCamp Asia. What was February 20? So, and I would like to kind of go through that process to actually build that demo. So that’s your deadline. Is actually February 12, because that’s when I leave. Yeah, I don’t like committing to dates, but in this case, you have most of that in place actually, and I only want to mature it enough to be confident in it. So yeah, you will have it for your workshop. And thank you for doing that. Yeah, sure. Absolutely total fun. The work on the playground project there, like that. Amazing. Thank you, Ashish, I wanted to ask, are you using that editor in your work? Not yet. Sorry. I said, object. Oh, I’m sorry. Yeah, I want to say Ajit. Yeah. I said, Yes. I met Ajit. Yes, yeah, we are using Do you want to speak a little bit more about that? How are you using it? I’m really curious about the source case right now. Yeah, so right now we use playground. We use a WP. Now we use studio like these are the three variants of playground that we use for this. A lot of a lot of developers you want to like no quickly spin up from the command line. They prefer WP now studio for a UI one, and play around as the disposable that when we use so right now, what is happening? We have lot of interns who want to work on this, and we don’t want them to go to the hassle of request, setting, the setup everything. And sometimes we want to share few things with them, so we just use this editor create things for them and then give them the URL in the group. So, for example, we want them to explore something related to almost different plugins, you know, like we want to give them a fixed setup. So we just discuss something we talk about, and even someone who is very fresh to the WordPress he or she knows that Okay, so we just say, discuss. And we say, okay, test run this environment, and they just use this editor. They just add the plug in names and everything, and they have the shareable link ready with them. Amazing. So it’s an onboarding slash teaching tool. Sorry, would it? Would it be a fair summary to say this is an onboarding and teaching tool? Yes, onboarding will use it. Yeah, yes, that’s that’s something that we are using. Because lot of time we have seen people hustling through like, no matter whatever easy tool we give them when they are starting, it’s too much for them to set up local by fly with our any other tool if you go with the lampLAMP LAMP is an acronym for Linux, Apache, MySql, PHP – a stack of free software programs that can function as the environment for running WordPress.. Ma’am, fam. Each system have their own server problem where something or something might not work. Like, even sometime I have reform at my setup, and I’m like, God damn, this was working. Why it is not working now. So there is a problem. So we often get a few things here and there with the player, but most of the time it’s like, enter and you just get it period. So with blueprint, it is easy for us to build those recipes, and easy for like those interns to get on. In fact, our clients also use this a lot, like we keep on updating them with all this thing that’s coming. So they kind of toy around with this, then kind of send us an export files also, like sometime they did, okay, we explored this plug. We have done this and that. So they are also kind of now getting just started using it also. So they kind of use that and help us. Amazing, lovely. It’s that’s so hard work. So now, now majorly, we are exploring to use this for PR preview, so we already have the actions, but right now it does not support the private repositories. But yes, that’s the area where we want to deeply integrate the playground, because we do a lot of lot of side projects where we build plug ins and everything, and we don’t want to go through hassle of like, setting up everything, checking out, like, you know, the PR preview, that’s it. It will be very good. No need of like, manually doing anything. So right now, about the WordPress and the Gutenberg, we have to manually get there. So for example, imagine, like, if you have a PR and on the Gutenberg pair, it automatically gives you the link. Cloud pages have this. So we like that. So there is another project that we are right now building called WP around it. So I like how, like, every time they create a PR, it just gives you the right technique there. You can just view the build part of it, amazing. So you said, like, that’s a cloud for project. So it’s called Cloud for pages, so they have this real time preview of the PS. It works for React and JavaScriptJavaScript JavaScript or JS is an object-oriented computer programming language commonly used to create interactive effects within web browsers. WordPress makes extensive use of JS for a better user experience. While PHP is executed on the server, JS executes within a user’s browser. [https://www.javascript.com](https://www.javascript.com/), JavaScript, I just opened it about it. Thank you for sharing. So the project that we use called WP it is, again using WordPress components, and it’s a predefined layout library. So I was like, if something we can have around the playground for teams. And so I guess the folks at gather press has done a great work on that action. So these I discovered that, I guess while being in Poland for the World Trade list, and I just loved it, and now we have it in the playground tool. So fantastic. The only missing puzzle is having the support for private deposit trust, yes, so that that will encourage more and more product owners, people who build product plugins like they will leverage this more. And yes, I imagine connecting via our my might be of help so that you can have an authorized part to authorize tunnel to download, to download it. We don’t have that in playground car today. But if you that will be useful for you, I’m happy to to consult on how to build it. And if you’d like to contribute APR for everyone else to use that that will be highly useful to the community. Yeah, that will definitely on the data, because I have got some feedback also, like lot of people, lot of plug in houses. So they kind of, right now, use different hosted services, and they have this, like, deployDeploy Launching code from a local development environment to the production web server, so that it's available to visitors., they have their previous solutions, kind of thing. But the only complaint they have is, like, it’s too slow, like it is on the server, and it works very slow often time. And I’m like, playground looks like a good fit there. And yes, they will definitely, so I always tell them, because this is something, so they’re like, this looks like good, if it’s reality. Yes, amazing. And as a complete tangent for deployment services, Data Liberation, once it’s fully shaped, and that may take a year or two, that would be a possible way to WordPress deployments, actually, if we can transfer an entire site to a new place, right? Because that’s deployment, like transferring things, all right? Like I wanted to touch on one or two more things, so I’ll move on to the next one, which is where the development would take place. And I know we started the PR for the WordPress playground repo. I asked, like, at one point, I think I asked for that, and I know, David, you said that maybe playground tools would be a more suitable place for this. Yeah, I was thinking, since this is going to be a WordPress plugin, and all the other WordPress plugins lives in the WordPress tools, playground tools. Sorry, I was thinking like a logical step would be to move this to WordPress, to playground tools. And it is a playground tool like, literally, probably what it is. Yes. So, yeah, that was my like question or proposition under this PR. Do you have any thoughts at it? Yeah, so I was also kind of SLA because It more looks like a part of a playground, but if you look at it, so another angle, if we look at it, we want it to be more tightly integrated with the playground. So, so I’m like, here, or you’re like, like, it looks like logically there, but I’m like, if we are integrated here, so maybe this is the repository it says. So I’m like, 5050, split on both the solutions, like both repositories. So what happens when the playground team comes up with new steps for blueprints with recruitment. Yeah. So is it possible to to kind of integrate the blueprint builder with automatically creating blocks for a new step, or does that have to be a separate step? That’s kind of, kind of, we might have another 50 steps or something like that, I don’t know, but yeah, if it’s in tools, yeah, there is no complete integration. But if it’s in playground, then it automatically can kind of add those steps to it. Maybe that’s a very good question. I was thinking about that as well recently, and I think we’re not going to have that much more blueprint steps compared to what we have now. I think we maybe may only have get like one tour or like five more in the next month. And the way to create new steps will not be extending the blueprints format, but to build custom blocks that will give you a customized experience for this a set of widgets and a visual representation and that will be translated into these very low level and blueprint steps that are move file, create file, install this, activate that, right? But I think extending the blueprint as a data format, there are a lot of risks with it, because then the API surface area gets very large, and this is tricky to maintain in a core project. Whereas, if this is a more of a community driven initiative, and this lives outside of the core project, it can be extended. This becomes much more manageable, and also it enables others to contribute their steps, and it spreads the burden of maintenance of a larger ecosystem. Also, the question is, is playground core allowed to use features developed in playground tools? Because if yes, then it can be developed as a tool that is being used in the core. So there’s only a little bit a surface area overlapping on these two by implementing the tool that’s being developed in the WordPress playground tools always this is tricky right now, playground tools depend on playground car, but the dependency can go both ways. Right it doesn’t right now, but it could, and there could be a GitHub sub module connecting virtual or maybe it could be based on publishing packages, or maybe it could be just based on pushing things to 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/](https://git-scm.com/) repo and playground will use the latest version of whatever is in the other repo. This is how it works currently, with the blueprint gallery, when you merge a new blueprint, you don’t have to do anything on the playground website to just fetch the latest list of blueprints directly from the gallery and show it to you in the UI. And it could be very similar with the playground tools repo like that. Yeah. So summing that up, I would say, maybe let’s try playground tools for this. We already have some automations in there to publish plugins in the WordPress plugin directory. Wouldn’t be that difficult to extend it to a new plugin, and seems like the integration. I initially thought it would be much more difficult, but as we discussed, I realized it wouldn’t it. We already have prior art on this. Does that sound okay? Edit, yeah, sounds good. All right. Thank you. And also, I apologize for directing you to a wrong drop, because I know it took work to create that pull request in there, and now we concluded, or I’m asking you to choose another repo and thank you for being open. No, it’s I knew that might happen, because even I was 50 of this paper, because once I saw the play, like, is this the right place? So mentally, I was like, we might have to move it there. All right. Oh. Yeah, it’s, it is a large project, like, it’s so easy to get I get confused with even the internals all the time. It grew quite a bit. Alright? One also, one other thing, yeah, yeah, about, about this PR, by the way. Also, it’s 120 files I saw so Ajit, so respect, respect. On the one side, you know, we don’t like these huge PRs, but on the other other hand, there are so many blocks in here, so yeah, congrats, congrats. Sometimes they get large, and that’s fine. And yeah, a lot of good work. True. Agreed. Like, this, I think you have to, yeah. You have to wait, yes. So one other thing I hope to touch on, and we have four more minutes left, is so added. I know you’re, you’re interested in contributing to that and keeping that work moving forward. I know you’ve mentioned you’ve had some help with it so far. Like, was it on a contributor dayContributor Day Contributor Days are standalone days, frequently held before or after WordCamps but they can also happen at any time. They are events where people get together to work on various areas of [https://make.wordpress.org/](https://make.wordpress.org/) There are many teams that people can participate in, each with a different focus. [https://make.wordpress.org/support/handbook/getting-started/getting-started-at-a-contributor-day/](https://make.wordpress.org/support/handbook/getting-started/getting-started-at-a-contributor-day/)? Or do I not remember that correctly? Sorry? Oh, I’m just asked. Like, so I posted a few bullet points on a chat earlier on, and I’m on who’s contributing now as then, I know we want to keep that work moving forward. I know David is also interested. And I just wonder, do we know of any other folks who want to contribute to that work as of today? Yes, definitely. So there are two different folks from my team. So one is Philip. He initially helped with some of the work on prior art. So the if you saw the another one that I posted the plugin data. So there’s another guy from the student, so he’s working on it. So we’ll get them also on good so we have lot more hand and things not being dependent on like single eight one. So where you guys, is more on the React side. He works on React. Punit is more well. Verse along to how play around works blocks so these two are also going to contribute to the role, so we can put down a plan, and they will help us with it. Amazing. I think Alex Kirk will also be interested in bringing over some blocks from the step library. That would be also fun. Nice. Nice. Aji, just thank you so much for starting this and for bringing other people into this project. This is really amazing work. Yeah, it’s, it’s not an MVP anymore, yeah? Well, it is a prototype, but, yeah, it can really shine on its own. Yeah, yeah. And David, thank you so much for for being open to contributing to this, for for coming to this call, and just for being a part of this. You’re welcome. We might we have been a few more folks also so have been part of the coherent, the coherent mentorship program, so they might also join in, and we might have a fun report. Fantastic. I know Jarek, the designer, wants also to keep contributing to this work, so we’ll also get help on that front. Excellent. And since I’m thanking everyone, I also wanted to thank you Birgit for being a fantastic MC today, for organizing colors well. And I also got all my my own question answered. So that’s the beauty of being a facilitator. I get to ask questions. Yeah, you get to control the flow of the conversation. Well, at least part of it. All right, yeah, no, it was good to see you all. And Ajit is my word camp Europe, buddy. I hope you. I’ll see you in Basel, well, maybe on WordCamp Asia. Yeah. We first met seven years back by Belgrade, the early days of WordPress, yeah, the good English, yes, and we will see each other at WordCamp Asia. I would think Nice. All right. Well, if any, I don’t see any question from our other guests that are not on video, but if you have more questions, come to the playground channel on the WordPress slackSlack Slack is a Collaborative Group Chat Platform [https://slack.com/](https://slack.com/). The WordPress community has its own Slack Channel at [https://make.wordpress.org/chat/](https://make.wordpress.org/chat/), where we all hang out and ask any questions anywhere, or you just if you not sure if that’s a question that’s maybe too basic. Some people have that problem, yeah, feel free to DM me or DM Adam also on the slack, and we get everything answered there. Well, thank you very much for coming at all, all of us, kind of coming here and seeing the future of playground blueprint builder. All right, I’ll stop the recording now. I. * [Login to Reply](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fmake.wordpress.org%2Fplayground%2F2024%2F12%2F02%2Frecap-of-hallway-hangout-blueprint-block-editor%2F%23respond&locale=en_US)