Not everyone is comfortable writing JSON, so Ajit Bohra and his team created a Blueprint builder in the block 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 Urbanski 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 UI 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, improving content management, and potential features like parameterized blueprints and GitHub GitHub is a website that offers online implementation of git repositories that can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/ 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.
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 WordCamp 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. 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 MVP "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, where we can take things forward from there.
Well, interesting. So my name is big Polly hog. I’m a core 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 Gutenberg 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/. 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 plugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party. 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 meta 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 PHP PHP (recursive acronym for PHP: Hypertext Preprocessor) is a widely-used open source general-purpose scripting language that is especially suited for web development and can be embedded into HTML. https://www.php.net/manual/en/preface.php. 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 UX 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 API 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 widget 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.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/ 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 lamp 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 JavaScript 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/.,
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, deploy 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 Git 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/. 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 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/ There are many teams that people can participate in, each with a different focus. https://2017.us.wordcamp.org/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 slack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at 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.
