All right, so the recording is in progress.
That's always my indicator that the meeting, the workshop can start.
I'd like to start by welcoming everybody here today.
Hopefully you can hear me and see me.
Today we're going to be talking about WordPress, WordPress playground for developers.
So hopefully this is something that excites you as much as it does me.
While we're kicking this off and while we get going, I'd like to invite folks to please
share in the Slack where you are joining us from and maybe what time it is for you.
Because I know we have folks from all over the world.
So where are you joining us from in the world and what time do you have today?
I will start with my introduction.
So those of you who don't know me, my name is Jonathan.
I am in Cape Town in South Africa.
I'm a developer educator at Automattic and I'm sponsored to work with the WordPress training
team.
We create lessons, we create online courses, we host these online workshops all around helping
folks to learn about WordPress and use WordPress.
My focus specifically is on developing with WordPress, which is why I enjoy these sort
of development topics like we're going to be covering today.
And now I'm going to hand over to my guest and I'm going to ask him to introduce himself,
my co-host for today.
So take it away.
Hi, I'm Berra.
And I'm from Ságib, Ságib, Croatia.
I'm a author.
So I'm making mistakes.
I work in Automattic as a code wrangler and for the last year, Automattic has been sponsoring
me to work full time on WordPress Playground.
So I actually have the lack of building, maintaining Playground and supporting people using it.
Awesome stuff.
So if you need to ask anything about Playground, Berra is a guy.
So today's focus is specifically around how developers can use Playground.
So we're going to be diving into some topics in a second.
Before we do that, I'm going to have a quick look and see where everybody is joining us
from.
So we have Daniel from Geneva, Switzerland.
Welcome, Daniel.
I was in Zurich, Switzerland a couple of weeks ago.
Rico is also in Switzerland.
It's three in the afternoon there.
Riverman is from, I'm going to pronounce this, Kuenka Ecuador.
I've been pronouncing that correctly.
Boost brand from Paris.
We've got Cynthia from Ontario, Canada.
So we've got folks at 9am in the morning.
We've got folks at 3pm in the afternoon.
We've got people from all over the world.
I love that.
Before we get going, a couple of announcements.
So again, welcome to everybody.
Please let me know if you can't see the shared screen at any point in time.
So I'm going to be sharing these slides now while we do the introductions.
But once we kick off the workshop, Berra is going to take over.
So let us know if you can't ever see the shared screen, and we will sort that out.
We are presenting in something called focus mode.
So what that means is, sorry, I'm trying to admit somebody.
As you join your video and your audio is switched off, we do this because we have had a few
incidents of zoom bombing in the past.
So it's just to prevent anybody jumping in and just zoom bombing us with anything that
we shouldn't.
But please do consider enabling your video so we can see you.
You don't have to enable your video, but it's always fun when you're presenting these digital
workshops to actually see the folks who are watching.
So if you would like to enable your video and give us a wave, please feel free to do
that.
You are welcome to ask questions.
Those of you who have joined my previous online workshops, you know, I like these to be very
informal.
So feel free to ask questions if you as we're going through, you're welcome to post your
questions in the chat.
I will be keeping an eye on the chat.
You're also welcome to unmute your mic and ask questions.
If that's easier for you, I don't mind either way.
The only thing that I do say to folks is, if your question isn't specifically about something
on screen, then maybe keep it for where there's a break for questions or post it in the chat.
So we can kind of let Barrow continue with his flow.
But I chatted to him before the session.
He's also very happy for folks to jump in if they have questions.
So if he's presenting something on screen and it's not quite clear to you what's going on,
let us know and we'll answer your question as promptly as we can.
Then if if any of us start talking too fast or we're going too fast, we're clicking too
fast, we're moving too fast, please do let us know to slow down.
We're happy to pause so you can see things on screen.
We are recording this session.
So if you miss anything in the live session, you'll be able to watch it afterwards.
It will be posted to WordPress TV afterwards.
There also is a resources slide with all the links.
There's a GitHub gist that we'll be sharing.
Boost says, can you please articulate?
I don't understand English very well.
We'll do our best to do that.
If anything is not clear, just let us know in the chat.
We'll slow down.
We'll reiterate that.
And yes, I tend to speak very fast.
If I'm rambling and speaking too fast, do let me know.
Then if you're looking for any further WordPress tutorials courses or anything like that, you
can go to learn.wordpress.org.
And if you're looking for any WordPress developer news, you can go to developer.wordpress.org/news.
Two great places to find educational information around working with or developing with WordPress.
Right.
Now I've got all the announcements out of the way.
Today's learning outcomes.
We're going to learn how to configure a Playground instance with your custom plugin or theme
and store that in GitHub.
We're going to learn how to create a blueprint version of the above configuration or any
type of configuration that you can use to share with clients, teammates, and beta testers.
And then we're going to look at some possible use cases, maybe some things that might not
work in Playground, and then allow time for Q&A.
One of the things that I did when Barra reached out to me about planning this workshop was
I tried to reach out to as many developer community spaces as I could to get feedback
from folks, try and gather questions.
And one of the big things that came through from those questions were what are the use
cases?
How can I use Playground in my day-to-day workflow?
So that is kind of the goal of the session.
And I'm looking forward to seeing what Barra brings for us today.
So without any further ado, I just want to pause for a second and just check if there
are any other questions before I hand over to Barra to let him take us away.
So if you have any questions now, feel free to ask them or pop them in the chat.
I'm going to have a sip of water while you do that.
All right.
I think we are good to go.
So Barra, I will let you take it over.
Please do share your screen with us and take it away.
Okay, thanks.
So yeah, as Jonathan mentioned, I tend to speak fast when I'm excited and I'm excited
about Playground.
So slow me down, ask me any questions.
I'm here to help and I don't have so much to talk about.
So I'm happy to derail the conversation, try something different, so maybe we can try doing
something totally different from what I planned just to get back.
Okay, are we good?
You can see the screen.
I speak clearly.
Perfect.
Okay, so to get started.
What I wanted to do is I wanted to give you an introduction to what Playground is, how
it works and not assume that you all know.
So I won't go through the website, but this is the first place you should go to the what's
Playground, workersorg/playground.
And from there, let's get started.
I'm loading the Playground website.
This is the browser implementation of workers Playground.
What happens now is this site, technically speaking, is a static HTML JavaScript site.
But what happens internally is we load a WebAssembly version of PHP and we run WordPress in it.
No server, everything is in your browser.
I wanted to start off by kind of showing you around the UI and giving you some basic instructions
of what you can do here.
The simplest way of modifying stuff is just by going to this icon and then you can say,
"Oh, I actually don't like this PHP version.
Let me move to PHP 8.1."
Apply.
Playground gets re-loaded because Playground is currently in temporary mode, so you can
modify it as much as you want.
But to ever refresh, you're getting a fresh WordPress site.
So if you made any changes to blog posts or any content stuff, it's all gone.
If you want to go into more details, you go to the other side of the icon and this is
the Playground Manager.
Here you can do more modifications.
You can store sites and you can access your previous stored sites.
So to keep going, I already modified the PHP version here.
Let me adjust the language to creation because we actually have a few translations in WordPress.
And let's see what happens.
So you're all familiar enough with WordPress to keep up with the creation stuff.
But let's try and install something.
This is a common problem most of us face when we use Playground.
Networking is disabled by default.
This means that if you think of your standard WordPress site, imagine that your server is
just blocked from accessing the internet.
To work around this, you just enable networking and try again.
I'm specifically mentioning this one because it can cause issues to people frequently,
so I just like to make sure everyone is aware.
And now if you want to install a plugin, here it is.
We're actually able to do that.
I won't go further into the details of the UI.
We can browse through the stuff.
We can play around with it.
Now we're going to actually go into the fun stuff.
So I know this is pretty small, but I don't have a way of increasing the size.
But let's start doing a few things.
First of all, what you should be able to see here is there are -- let me share this link
here.
Where is chat?
Chat is here.
Sorry.
Give me a sec.
So this is the link you have.
If you look at the link, you can see that we have defined PHP version, WordPress version.
It's set to yes, and the language is set to creation, HR.
Now I want to try a few more things.
I would like to install a plugin.
So what I'm going to do is I'm going to change my URL to something like this.
I just added end plugin equals maintenance.
And now you can see here, maintenance is on.
If we go to the plugins page, we install the maintenance plugin.
And that's one -- that's already for me personally a really huge use case of Playground.
If you want to quickly test the plugin from WordPress org to see what settings does it
have, does it have the features you need, you just go to Playground, you do question
mark plugin equals the plugin slug and the plugin gets installed from WordPress org.
Yes, thank you.
That's the plugin I installed.
Okay, next step.
Let's add a theme.
So what I'm doing now is I just added the end theme equals a dictionary.
Sorry, I forgot what theme I chose.
Okay.
Now we also have a custom theme.
As a final step, I'll do something that's totally unrelated to Playground.
I'll go and edit the site.
Just to modify the site name so that we know it's actually something custom from the database
and not only file changes.
Going back to the site, you can see that it's now a file site.
Okay.
So if you remember from the beginning, I said if we refresh the page, all of this is going
to be gone.
So if I would refresh this, the yellow site would be gone, but I would still get the install
plugin and install theme because it's coming from the query API.
I'll pause for a second now in case anyone has any questions.
I do have a question and this is a question I've been wanting to ask for a while now.
And this is kind of nothing to do with what you've shown, but it was kind of related to
the first point.
What is the reason that networking is disabled by default?
So Playground is quite big out of the box.
It's 36 megs without any additional stuff like the WPC-LI, plugins, and so on.
If we enable networking, when WordPress first loads, it does a lot of network requests and
that's significant to source down the initial thing on boot.
And because the promise of the Playground website specifically is to quickly give you
WordPress and to quickly give you access to working with WordPress, we are defaulting
to disabling networking and then letting you choose it later on.
And this is one specific convention in it because yes, you would expect it to work out
of the box.
A hundred percent.
Thank you.
Okay, so what I actually wanted to do is I wanted to show you all the query strings in
the documentation, but I was rushing.
So let me go back to this is our documentation.
Like any other documentation in the world, it's incomplete, but we are doing our best.
So the first part is what we call the query API, where you can set the PHP versions and
all of the stuff that I showed you, like installing plugins and a bunch of other things.
If you don't want to go deeper into boot prints and other stuff that Playground offers, already
knowing what's possible to do with the query API is like it can do a lot for you.
In case there are no questions, I would now like to move on to persisting the data.
So as I said, if I refresh this, all this is gone and that can be quite uncomfortable
if you spent an hour doing stuff.
The easiest way to handle this is when you go to the site manager, you have here, this
is the temporary site.
So let's just save it.
You'll see there's two options here.
Playground is heavily using experimental APIs, which don't necessarily work in our browsers.
So what you can do here is you can save to your browser, but you can't save to your local
directory in your machine, like to your documents folder.
That's something that only Chrome allows these days, but eventually Firefox and Safari will
catch up.
So now what's happening is all the WordPress files, your data and the copy of your database
are being moved over to the browser storage.
And now I have a happy Glamware server site.
That's its name.
And if I refresh and nothing goes horribly wrong.
Hmm, taking a while.
This is a lot quicker.
Yep.
I'm sure we've all done demos that didn't go perfect.
So give me a second.
Okay, I'm not sure what happened there, but we're back.
So this is the safe site.
You can refresh, you can come back in a week.
It's still going to be here.
I find this very useful for to have some small test sites where, again, maybe testing some
plugins and combining stuff, maybe writing some content even, or experimenting with footprints
from the gallery where I see something interesting.
And then I just want to keep coming back to it and work further without losing my progress.
This is limited to your browser.
And we live in a world where stuff is shareable.
So one thing that's highly useful is exporting.
There are two standard ways of exporting stuff from the plugin website.
One would be by downloading the zip, which would contain the WP content in the copy of
your database.
The other way is to export to GitHub.
So you would connect your GitHub account.
I'm going to check to find a link to a repository I prepared.
So I prepared just an empty repository on GitHub.
I will select that I want to export my entire WP content.
You can choose, you can export a theme, a plugin, or maybe a specific pet.
And now I just need to choose where in the root folder is probably the easiest.
And start.
Oh.
What happened here?
Please try again versus.
There's more issues in this.
Let me, I have backup.
You always need to come prepared for these things.
Okay.
We're going now.
So because this is now exporting all the files to get it takes a while.
But what you will end up with is while that's while that's exporting, there was a question
in the chat.
Rico says, why the strange names of the save instances and where do these names come from?
We made them up.
We didn't make them up.
We're just using a package that makes up these strange weird names.
And a complaint I've been having about Playground is we should really allow people to change
those names because it's hard to remember what my strange hit does and what my home
hit park does.
So yes, that should be coming.
PR is accepted.
Yes, definitely.
So good interaction point.
We are as the core sponsor team, it's only five of us these days.
And Playground wants to do huge and amazing things and we need people to help us.
There's already community around the project helping us, but we are open to contributions.
We're willing to guide people if they haven't worked with WebAssembly to help them get maybe
like a feature into PHP or something.
We would really love any help.
In case building Playground isn't something you're interested in, but you like building
WordPress, we have the Blueprints Gallery, which you can access from the UI or directly
on GitHub.
And this is just a place where people upload different blueprints.
And then you can try them.
So you see like, oh, like how would I build a feed reader using the friends plugin?
Then like you can see the blueprint or you can just run the site.
And we want to have a lot of these examples to help the community out when they're getting
started because then what this allows you to do is you see Playground for the first
time.
You don't know what it can do, but you go to the gallery and you browse and see a lot
of examples of what it can already do and it's one button click away.
Okay, so to get back to where we were, what happens when you finish the Git expert is
you're going to get a pull request with all of your files.
So in this case, it's language files, it's plugins.
So here you can see the maintenance plugin.
You can see themes, picture our theme that we installed, and you can also see the database.
In this case, Playground doesn't use MySQL, it uses SQLite.
So the database is called .ht.SQLite.
And what this allows you to do then, let's ignore this message for the time being.
It allows you to come back to it from different machines.
So you would go back to Playground and then you would import from GitHub instead of exporting.
You would choose your repository, which in my case is this one.
You would say wt-content and then you would also say where from wt-content.
And importing is much faster than exporting because exporting does literally interact
with Git.
So it's quite a lot of work in the background.
While importing is just pulling a bunch of files straight to the import engine.
And now suddenly, maintenance mode, that's the plugin we installed.
So let me go to WP Admin because as an admin, I'm allowed to work around maintenance mode.
That's it.
I'm back to my yellow side.
And just to confirm, it's a 10 per second.
I'll stop now again to see if you have any questions either about the query API stuff
or about persistent Playground in different ways.
If you have questions, you're welcome to post them in the chat.
You're also welcome to unmute.
If you have any direct questions, you want to ask Bear right now.
I just love the fact that you got...
Sorry, Bear, would you mind just going back to the GitHub repo where you exported it just
to show that on screen?
I love the fact that it creates a PR.
So if you're working on a project, I'm assuming you can create multiple PRs like that through
the course of the project.
And then you can review them and merge them back in and then pull them back in again.
That's a very clever thing.
I thought it just exported to the repo and you would just have to browse the commits,
but I love the fact that you can create as a PR.
It's very, very cool.
The only thing that you...
Because the SQL database is a binary format, you won't be able to see the depth of SQL.
But yes, if you modify your team plugin or add media items, you will see all of that.
We use this for note taking or we build static sites using markdown, then we put them into
Playground from Git, then you modify those sites as posts using the post editor, then
you push them back as markdown into Git.
The possibilities are endless.
It's just that you need to take all those blocks and figure it out.
Yeah.
I see there's a question from Felipe.
I'm going to get you off to my next note.
One of the things that I like about this, so there was a theme that I was busy trying to
develop last year based on a design that was given to me.
I was using create block theme to start the process and then I was designing the theme
in the editor.
Then I was using the create block theme export to save to theme files and then I was having
to manually commit those changes to the GitHub repository.
This to me is so much easier because I can just design in the Playground and then hit
that export to GitHub and it creates the PR and all that for me.
I'm going to play with this next year.
Yes.
Exactly what you mentioned, people are doing that.
These are developing block themes only using Playground.
You have your iPad and you sit down, you start Playground, you save the site.
Just to make sure.
You use the plugin for creating block themes.
You create your theme, you export it to Git and you actually are able to create the full
theme just from your problem.
100%.
That's amazing.
Felipe's question was, is it possible to create private blueprints or import from a private
repository?
That's a good question.
Private blueprints, not because, so how Playground works is it's in the browser.
You need to be able to access your browser needs to be able to access that resource.
The way you secure that resource is up to you but ultimately there needs to be a URL
that the browser can access.
Welcome to private GitHub repos.
Honestly, I'm not sure.
I would need to check.
I assume it works because when you're starting the first time, the process you need to connect
your account to GitHub.
It has a temporary token.
We don't store it in the browser, it's just stored in memory.
You should be able to do that with a private repo.
I'll get one of the things.
I will need to test it.
I haven't tried it.
We tried to do everything in public so private repos are not making the case.
It's a good one to test though.
After the school, when I have some time, I want to play around with this and I'll give
it a bit of a test, Felipe, and I'll do my best to feedback the information.
In the meetup comments, I'll pop a comment there if I was able to get it right because
I agree with Vera.
It should be possible because it has access to your account, your GitHub account.
I'll play with it and find out.
Thank you.
Just one thing I wanted to highlight is the WordPress project.
I think WordPress teams, maybe even book comerks.
There's a bunch of projects that already use GitHub actions on pull requests.
Whenever you create a WordPress pull request, you would get the bot saying to you, "Do you
want to test this pull request in Playground?"
Now instead of figuring out how to run WordPress, the development version locally, setting up
a development environment and everything, here's a link.
Yes, it might take a few seconds to load, but suddenly you can test pull request again
from your tablet, sitting in a car, away from your working machine.
And the small letters here say we are actually running 6.8 alpha version.
I should probably get back to my notes because I've been doing it for a long time.
So just to recap, we export the Playground website UI just to see how you can set up
Playground.
We export the query API to see what you can do further using URLs and how you can create
custom Playground instances using URLs.
And then we talked a bit about how to export the data, how to store it in the browser so
that you can get back to the content and not lose everything by refreshing.
And now the next thing for me is, I would say this portion is complete.
And I would like to talk about for me probably the most exciting non-technical part of Playground.
The technical stuff can be more exciting for me, but movements.
So a while ago, you had to write code to build a site.
These days you can create a JSON file.
And what I mean by that is a blueprint is a JSON file that when you give it to Playground,
it runs it during Playground boot and it sets up the site for you.
You can do stuff like adjusting the PHP version, WordPress version, so the stuff that you can
do with query API, but you can go much, much further.
You can create a lot of different steps that happen during the boot process.
I'll increase my screen size because I can barely read this.
You can install plugins, activate plugins.
You can run SQL queries from JSON.
You can run PHP.
You can download zip files, unzip zip files, run WPCI commands and do close to whatever
you want.
With the big enough blueprint, you can build fully working apps by just having a JSON file,
attaching it to a URL and giving someone a fully working app.
No infrastructure, nothing except for a single hosted file.
Now to actually show you why I'm so excited about all of this, what I wanted to do is
I wanted to rebuild what we did here using the blueprint because under the hood, all
these query strings and imported files and those things, they are built in the boot.
We can do all of this using the blueprint and then we can expand that further.
This is the blueprint builder.
It's like a handy tool which might not be the best in the world, but it's practical
to quickly build the blueprint and test it.
What we'll do now is we are going to recreate what we did there.
If I remember correctly, we had PHP, what happened?
8.1.
We used the latest version of workers which would be 6.7.
Let's see if that works.
Okay.
We're so good.
Now the next thing we said is we wanted to enable networking.
I'll go back to the documentation and I'll go to the blueprint format and find out about
networking.
You enable networking by adding a feature.
I'll do this slowly step by step.
Please interrupt me at any point.
The idea is for us to build this together so we have time.
Okay.
I enable networking.
I'll refresh just in case.
Then the next thing we did is we switched the language over to creation.
To do this, we need to use steps.
I'll go to the list of steps.
In the list of steps, there should be a set, site language set.
This one.
Now we say to our blueprint, okay, I want to log in.
There's an admin.
But I also want to set the site language to creation.
And I'll update the URL to go to the homepage just so we can see the actual homepage and
get to our fancy website.
Okay.
There's a positive, which is hi, so we're in creation.
Let's keep going further.
The next thing we did is we installed a plugin.
So let me get to the install plugin step.
Okay.
So this is the step.
This one has a bit more content to it.
But it should be still fairly straightforward.
So you are defining the resources, work for store plugins.
You're choosing the plugin slug.
And then you can optionally set do want to activate it or not.
This can be highly useful in case when you want to first install a plugin, do some customizations
to it.
Like for example, modify the file because you can rewrite files using footprints and then
activate it later instead of activating it immediately.
But in our case, we are rebuilding something relatively straightforward.
So we just want to do this.
And then we want our maintenance plugin instead of Gutenberg.
Let's give it a sec.
And maintenance is on.
So we're good.
Okay.
Next is installing a theme.
So you can see it here.
It's kind of more with the same WordPress work themes slot.
And we don't want to be boring.
So let's do something different.
The dictionary, the theme actually comes from GitHub from this repository.
So it's a public theme available here for us to install.
So instead of installing it from WordPress work, let's install it directly from GitHub.
Because why not?
Okay, I'll copy this resource over.
Add it here.
And then let's see what needs to change.
So I'll go back to documentation because we need large text.
So we can see here that in team data, we are choosing the resource, which is WordPress
work themes.
And here we have resource references.
And if you look at the resource references, you can see that there's a couple of different
types of ways we can reference files.
So what happens internally in Playground is when it gets that step and it wants to get
access to, let's say the theme, it has different ways it can directly talk to WordPress work.
It can pull from a repo using a URL resource.
WFS is the virtual file system.
So it's like locally from, you can store your theme inside WFP admin folder for whatever
reason.
And then you can access it from there.
We can store it in a separate subfolder, whatever.
But you have access to the local file system within Playground, the same way you would
have access to the local file system on a standard server.
And then you have literal references, which I never used, but they are literally writing
files.
So you say, I want the file with this name and this is the content.
In our case, we're going to use a URL reference.
So the resource is URL and then we need to provide it a URL to the GitHub, to the content
that we want to install.
Okay.
So resource URL.
Okay.
No, what's the URL?
If we would do this, this wouldn't work because this is an HTML page.
This isn't a zip file with a theme.
And to help us with this, there is this wonderful project called GitHub proxy.
What GitHub proxy does is you can say, please tell me if I need to enlarge stuff because
I tend to forget it.
You go to the site and you say, this is my repository.
This is my branch.
Please download the zip file.
But now I would like to actually download the full request and not the main branch,
or I would like to download a separate subfolder.
In our case, this leads to a URL, which is something like this.
So we want to go to the repository automated themes.
We want to use the branch trunk in this case, and we want to download the directory fictionary
because that's the path inside the repository.
And just to let it out, when I do this, I'm getting the zip file and it's the full theme.
So now if you have a public repository with your custom plugin, custom theme, or like
an MU plugin, maybe even, you can use the same approach to install data to your site.
Where did I lost the editor?
So this is our URL.
And in case we did everything correctly, we should now get the theme.
Something didn't work.
Resource URL activate.
I messed up something, but I have notes.
So give me a sec.
I made it work.
Okay.
Also, where are we?
We have 20 minutes.
So we still have enough time left.
Okay.
What's different?
I messed up the directory path.
It was wrong in my notes.
So this is the actual work path.
Let's confirm.
Second.
And that's it.
Our site is back.
Okay.
I'll brief for a second.
Any questions?
So there was a question from Rico.
Rico says, is it possible to load the data from a local directory or is it only possible
with zip files?
Rico, I assume you mean like a local theme or a local plugin.
So yes.
But again, by local, I will assume you mean like your machine.
Yes.
Okay.
So yes, it is possible.
And.
Oh.
It is a bug that I reported recently.
So as I mentioned, it is possible from Chrome only to save a plugin to your local directory.
And then there should be a button in Chrome only that allows you to start the site.
But we have an issue open for that, which I can pull up.
So it will come soon.
That is coming soon to a playground near you.
Yes.
But this is also a good point to mention some of our other cool stuff that we do.
So up until now, we've been talking about browsers, browsers and browsers.
But if you go to any web assembly conference, nobody will ever mention the browser to you.
Everyone is going to talk about servers and how you can run kind of containerized secure
code on any environment.
And what that means is what we actually did with WordPress is we didn't port WordPress
to a browser.
We ported WordPress to any web assembly supported environment.
Right now, because we are limited with time, we support browsers and we support Node.js.
But technically speaking, there is nothing preventing us from running PHP and WordPress
inside any environment that supports WebAssembly in the future, like, for example, in native
Android apps, iOS apps one day, hopefully, or maybe even in Rust.
There's even a proposal to add WebAssembly support to PHP so we could run WebAssembly
inside PHP and then inside that WebAssembly we could run PHP with WordPress installed
in.
That's just a dream.
That's my mind going.
Wow.
There's more layers we can add.
You can always, when you spin up your Playground site, you can install the -- sorry, I'm deriving
the conversation, but it is connected to what you can do with Playground.
So I'll pretend that that's what you asked for.
It's called Playground block.
So yes, I found this point.
If you install it to your site, you're going to get a block which is a full Playground
instance.
So suddenly inside your WordPress site you can run WordPress.
And then you can do something like this.
Okay.
I have an example right here where this is a standard WordPress site and inside that
we have Playground running.
And the block can work inside that so we can go as many layers deep as you want.
Okay.
Now back to our conversation.
We got to installing the theme and we still have a few more things left.
Our site was called differently.
So now let's figure out how to change the site name.
Let me go back to documentation.
And there's a few ways of doing that.
Sorry, I'm in the sec.
Okay.
I'm back.
You can set site options.
But this seems too trivial and too boring to do.
So we could just use this and change the block name to something different.
But so what, a week?
Oh, no.
Let's actually do that.
Okay.
I'll show you the PHP stuff later on.
Okay.
So we said our site is called a yellow something, a yellow site.
Let me copy that.
Let's make it work.
Okay.
That's it.
We're back to where we started.
That we used and way more complicated approach.
But now let's take this a bit further.
So I want to go into the depth of what we can do, but for me speaking, you can see like
there's again, there's a lot of excitement here.
There's a lot of potential.
And because this is a topic for developers, I'll show you just one thing that spark your
imagination running PHP inside WordPress.
So what you can do is you can create a step and inside that you just write your PHP snippet
and you run it.
What you can also see here is if you want to run WordPress specific code, you need to
the same way WordPress does it, you need to require WP load because when playground loads
initially it loads as a PHP site.
So if you want to access the WordPress, you just say, first of all, WordPress for me,
but then you have access to all the stuff like filters, sections, all the internal functions,
everything there.
So now let's, let's have a blog post because that's what purpose is for.
So what I did here is I did run PHP.
Sorry, this might be too small.
So I'll temporarily increase the size, require once, world work, WP load, and then I did WP
search post the way you do it in PHP loads.
And then I just added the post title.
We have another post and I made it state the status publish.
So now if we reload and I'll decrease the size again, you can see that my site has a
new post and just for, just for the sake of it, I'll also update the landing page, which,
which is the property that says on which page they should do all the initially we headed
to WP admin and we moved it over to the homepage.
But now I want to build my new post because why did I write?
That's it.
We have that post.
Okay.
And at this point, we are ready to share this to the world.
We have our friends decide, we have our content.
So let's figure out what to do with this.
I want to give you all access to this.
So what I'm going to do is I'm going to publish this JSON file somewhere.
Just are typically the perfect place to do that.
And I want to write another one because I already did this morning.
So I'll go.
What year?
Yes.
So this is the blueprint we just created.
I'll get the actual link to the rubble print and now we'll go back to play on whoever's
net.
Uh, I'll share this with you because, uh, it's hard to read.
I know.
And then I would do question mark blueprint URL equals and attach my URL.
Uh, again, here's the full URL and if it haven't done anything horrible, we should again get
the same yellow site.
We got three other ways.
That's it.
So now you can share this site to whoever you want.
And this is, this is ours.
What one of our standard use cases that we suggest to people, uh, you can share your
site with your customers.
Now, now you see the approach.
So you can build a site using the query, either the query API or content and expertise to get,
or you can build everything inside the blueprint and then just share the blueprint.
And I also just want to add to that while Barrow was doing all of this, I actually tested the
private repositories and it worked perfectly fine.
So the only thing that I had to do is make sure that my private repository had at least
one file in my case, a read before.
And I was able to connect it to my private repo and create the PR exactly like buried.
So it works with private repos as well.
Nice.
Well, that's my mind blown.
I mean, I've never seen playground use that way.
I've always come to it from more sort of a plugin developer theme developer point of
view.
Um, so it's really cool to see some of these things in action.
Uh, it's very exciting to hear, you know, some of the stuff you're working on, some
of the cool things that can be done.
Uh, does anybody else have any other questions or is everybody just itching to go out and
play with, with WordPress background right now?
Uh, if you have any questions, now's the perfect time to ask them.
Um, but yeah, that was, that was very, very cool to see how quickly it was just to, I
liked, I liked the fact that you sort of built it all in the live demo to show us the one
way and then you showed us the blueprint builder to show us the way you can sort of set it
up.
Um, so yeah, that was, that was very, very cool.
Thank you.
Yeah.
Okay.
So in case there are no questions for now, uh, we have 10 minutes.
So let me show you a few things you can, you can do with play on and I'm not talking about
writing a post.
Uh, this is dinner slides from, from a conference I went to.
So, uh, please ignore most of the slides.
I'll, I'll just do this.
These are examples.
So what you've seen, you can build that apps using playground.
What you haven't seen is people actually built model apps using playground.
This is not box.
It's a fully working, not taking up.
You can build desktop apps.
This is worker studio, uh, which is like, uh, which is a local development environment
similar to local by file wheel.
Uh, it's, uh, uh, but instead of installing Docker and the bunch of dependencies on your
machine, you just install this single app.
It has played on built-in and can start using those set up, nothing extra.
And uh, we have a CLI.
So if you want to start playing on from a CLI, that's what I wanted to show in GitHub.
Then I got the real, uh, so you can install the play on CLI, uh, and you can just start
running play on the locally like you would do with, uh, like w with double P and D. Like
it, it's not, it's not an exact replacement, but it's, it does the same thing.
We use that this, for example, for running automated tests or speeding up local environments.
And uh, okay.
So one day if you're curious about learning how to work under the hood, I'm happy to do
a full walkthrough of, uh, all of the layers play on has and how you get from how you get
to a page load, which is something like this.
In case you're interested, you go from HTML down to WebAssembly and see, and then all the
way back.
Uh, but what I wanted to show you is the actual use cases.
Uh, so I mentioned already block notes and studio, uh, we have a VSCode extension.
So now instead of installing an app like this, you just install the VSCode extension.
You open your project and you say, okay, let me start the WordPress server again.
Your dependencies.
Uh, I showed you the block, uh, that allows you to, uh, embed, uh, WordPress instances
inside the block editor.
Uh, it supports blueprint so you can do all the fancy stuff with it.
Now, uh, in that you don't need to get just your plan, WordPress like this, like this
has been one of the, uh, one of the best examples of Wagon up until now, because it allows us
to do a better education material.
Now when you're reading a tutorial for WordPress, you don't need to do it manually on your own
by following like all the settings go to this and that we could just drop you into WordPress,
uh, with all of the setup, uh, could take it for you.
Uh, unfortunately this one isn't working properly, but this is a sandbox plugin, uh, which should
allow you once it's working again, uh, to install it on your site.
Uh, you go to WP admin, you click a button and your entire site gets cloned over into
Playground.
So like your database, your content, everything.
Uh, and you have a temporary site.
Uh, you try doing an update, you try modifying something to see if it breaks or not.
Uh, and then you just close the tab and it's gone.
This turned out to be slightly more complicated.
So button isn't necessarily something I would recommend using to now today, but once data
liberation is done, uh, this should be, uh, some, uh, this should be like one of the first
use cases.
Uh, I think I mentioned the margo editor.
So, uh, if you're like me and spend a lot of time in GitHub, uh, you can install the
margo editor extension and instead of writing margo by hand, you click this, uh, this, uh,
bull button, you get the WordPress site, you get the book editor, uh, writer, mark on inside
it, you close WordPress and all the margo goes back.
And just for the sake of yes, uh, you can run the, um,
Okay.
And that's it now.
Now I'm really done.
Awesome.
I also just want to mention, um, something that, uh, those of you know, Ryan Welch, he
also wrote a, a similar to the markdown editor and GitHub extension that the various showed
us he created one using playground or VS code.
Um, so when you're working on local markdown files, it loads up the WordPress editor, reads
the markdown file, allows you to edit an editor and then save it again.
So there's, there's so many cool things that you can do with this.
It opens up so many possibilities.
I didn't know about that one.
It's fairly new.
I think he hasn't, he hasn't been very public about it.
Uh, he, he went to, I think it was the word camp EU talk, uh, that, um, I can't remember
the chap's name.
He's working on the, um, HTML API.
Um, Dennis.
No, Dennis.
Yes.
He went to Dennis's talk at WCEU.
And after that talk, he came home and he sort of built this, this markdown editor, it's
a VS code.
So it's, it's great to view.
So like for myself, for example, I create all my WordPress, my learn WordPress lessons
in markdown locally.
Um, and it's a great way to kind of edit those things in a, in, in the, in the site that
was in the block editor.
Um, so check that one out as well.
If you work in markdown locally a lot.
Um, awesome.
That was very, very cool.
I've never, I've never seen somebody who knows playground as well as you do use it and show
it in the way you've done that.
Um, you know, I'm always trying to fiddle with it myself and sometimes I'll see Adam
show something or one of the, one of the guys on the team working on something, but I've
never seen somebody sort of show a full workflow.
So this was very, very cool to see.
Thank you so much for doing this for us today.
Um, if anybody wants to reach out to you, if they have future questions around how playground
works or what they can do with it, what they can't do with it, where is the best place
for them to find you?
Okay.
So, uh, in case you want to reach out to me directly, uh, the WordPress community Slack,
uh, I'm, I met Beryl, uh, just, just being with their, uh, on the typical ground, uh,
and happy to answer questions.
Uh, if you have any questions for the playground team, uh, then, uh, GitHub is our home.
So just go to WordPress slash WordPress playground, uh, and say hi again.
Uh, the discussions, the discussions time tab is enabled on this repository.
So if you want to start a discussion about a feature or if you've got a question about
how something works, that's the best place to get started.
Um, you'll see some of my comments and questions in there on my early days of playground usage.
So it's a great way to, to get it, get involved with the entire playground team and ask them,
how does this work or how do I, how do I do this?
Or can I, can I upload from zip files locally, all those kinds of things?
Uh, internally as a project, we want to be like early community driven.
We want to, like, so we are, everything that we are doing is out there publicly in the
open, uh, all of our mistakes, all of our thoughts, if everything is there, uh, but
also like we are trying to be responsive to the community.
Yes, we can't get to everything, but we probably have like 10 issues that we haven't talked
of or maybe 20, not the 300, which we didn't build.
But if you ask us to implement, to implement the top support, we won't do it in a week.
So that is going to be around for a while.
I like that.
Awesome folks.
Well, thank you so much for joining us today.
This is really cool to see.
As I say, this has been recorded.
If you want to watch this again later, we will be uploading this to WordPress TV.
Um, I'm probably not going to get to uploading it today or tomorrow or Friday, because I'm
working at a very remote location on Thursday and Friday with very limited internet access,
but I will do my best to get it uploaded over the weekend when I'm back at home.
Uh, so you should have it.
I'll share it in the comments in the meetup group, um, at least by Monday, latest Monday,
um, all the links that Barrow, uh, shared with us, I actually want to just grab, he
shared that with me in a just beforehand.
So I want to pop that into the chat as well.
Um, and I will add that to the, um, to the meetup chat as well.
So all the links that he went through all of these notes, they're all there.
So go and check that out.
Go and play with that.
I personally love the fact that playground is called playground because it, it sort of
invokes this idea of going and playing with it.
Um, so go and check it out.
Fiddle with it.
Do things with it.
Try things out with it.
The playground builder is one of my favorite things, um, because it helps you kind of bulge
your blueprint, uh, the blueprint builder.
I love the fact that the blueprint builder has auto-complete enabled based on the schema.
So I don't generally even need the docs.
I just start typing and then it auto-completes for me if I'm close.
Uh, if I'm totally wrong, then I go and check out the docs.
Um, but yeah, go and go and check out these things.
And if you want to, if you want to just have a play with playground, um, for fun, the playground
block that you can install on your local site is a lot of fun.
I'm using it or at least Cynthia and I are using it for the Learn WordPress content.
We want to sort of make all lessons playground block enabled.
Um, but do it on your own sites and have a play with it.
And if you're somebody who blogs a lot about how to use WordPress and how to do WordPress
things, it's a great way to show your readers how to actually do those things.
Um, so do check out playground block when you get a chance.
Uh, again, Barrow, thank you so much for your time.
I really appreciate you reaching out to me and setting this, this conversation up.
Um, the one thing I wanted to know from everybody in the chat, would you like to see a more advanced
conversation around, around playground?
Barrow mentioned maybe diving into how it actually works underneath the hood or maybe
some more advanced topics, some more advanced demos.
Is that something you all would be interested in?
Because if it is, we can certainly set up something like this in the new year.
Um, let us know in the chat or let us know in the meetup comments or let us know via slack.
Um, if that's something you would like to see, because I certainly would like to see
more of this, but I don't know.
Uh, Rico says yes, much more about playgrounds.
We've got one person on board at least.
Um, so I think one person is enough, Barrow.
If we can do it for one person, then that's enough.
Um, yeah, Cynthia says, Cynthia says maybe some automated tests, automated tests, that
might be something cool to look at the fact that you guys are running automated tests.
Uh, do we have a couple, two, three more minutes?
Uh, yeah, we got, we got a couple of minutes.
Yeah, we got a couple of minutes.
Uh, so let me get back to my screen.
So like this, like I'm not being shameless and showing something that I'm working on
these days, uh, which is, uh, which is called the play on tester.
Uh, it's a mass tester.
Uh, it's going to test all 40 something thousand WordPress work plugins and all 12,000 something
thieves.
Uh, it's, it's close to done.
Uh, and, uh, it runs for free on the transactions.
And we are using the play on CLI, uh, to automatically test, uh, everything.
So we are checking if, uh, if, if plugins and teams can boot, uh, with, uh, with, with
with, uh, we even have an implementation of playwrights.
So like end to end tests there, which isn't, which is, isn't completed.
It's just a prototype.
Uh, but, but what I'm saying is, uh, if you don't want to just see how, uh, how, how
play on testing works, but you want to contribute, uh, or you want to get your stuff tested, uh,
we are extra right now working on, on, on, on, on adding support for these things.
Uh, so.
And this is like 50,000 files.
Sorry.
I'm trying to find something useful, but yes, uh, like we are creating overboards of how
many plugins are failing succeeding.
We are listing all possible errors that you can get, like what's happening in SQL, what's
happening in PHP.
Wow.
That's amazing.
Awesome.
So much, so much cool stuff.
Great.
Well, Barry, thank you so much.
Uh, really appreciate your time.
Yeah.
And just one tiny thing.
Cool.
That's great.
So, uh, in, in case, uh, you have your, your own project and, uh, you have any questions,
like for example, how do I get my project alive?
Demo of my project, or I have an idea for to build something, uh, please, uh, reach
out to me, uh, anytime on, on, on GitHub, uh, oh, sorry, on, on GitHub or on Slack,
maybe even better.
We can schedule one, one conversation.
We can schedule a call because we need to see how people use playground and where people
get stuck and we need to get you all unstuck and make this as seamless as possible because
again, the potential is there, but how you get to that potential might not be the easiest.
Uh, and, and we need to see from you, uh, how you think, uh, and especially in the next
couple of days, like I'll be devoted a hundred percent of my time.
So if you're paying me tomorrow morning and ask me, I need to build something amazing
in playground, we'll get it done by the end of the day, or at least try real hard.
Well, there you have it folks, right from various mouth areas.
He's available for the next couple of days.
So reach out to him and bug him and throw questions his way.
Uh, awesome stuff.
Thank you.
So another person came on and said, yes, it'd be really great to go into more advanced topics.
So Barry, I think we have, we have an audience who's keen for another workshop here.
So, so let's plan that.
If you think of questions or any of the questions you've had today that have sparked other questions,
please leave them in the comments in the meetup chat group somewhere or the meetup event,
should I say, uh, or you can ping me directly or ping Barry directly with questions for,
for a future workshop.
Um, or maybe as you ping Barry with questions, he might bring some more things to a future
workshop, but let's definitely set that up in the new year.
Um, I do need to run those now.
So I'm going to cut us off here.
Um, thank you so much for your time, Barry.
Thank you everybody for joining us here today.
Keep an eye out for the recording.
It will be coming soon and have a rest.
Great rest of your Wednesday, the rest of your week.
Uh, and we will see you with another workshop in the new year.
Thanks folks.
Bye.
Thanks.
Bye.