[Silence]
All right, we are live.
Welcome to anybody who is joining us today for the first time.
Welcome to anybody who's joining for the nth time.
It's been a few weeks since I did these live streams,
so a couple of announcements just to kick off.
First of all, I have a bit of a voice thing happening,
a little bit of a head call sitting at the back of my throat.
So I'm probably going to be doing this quite a lot today.
Hopefully coughing off screen.
So I apologize in advance for that.
I am currently sucking on a throat loss, which will hopefully help.
I do have some water.
Sure, we'll take a break in a sip of salt.
But it is rather irritating.
Today we're going to continue playing with WordPress Playground.
Last time I live streamed, we looked into WP now.
And you can find that video at the same, which I will share in the chat.
And there was also GitHub just that I created with my blueprints
that I want to just keep handy.
I think I made this public.
So if you're in the chat, let me know if you can access this.
I'm probably going to look at working with this blueprint maybe today.
Anyway, moving right along.
So last week it was WP now.
This week I want to look at the VS Code extension.
So if you don't know, the Playground project has a Visual Code Studio extension,
which you can install in your Visual Code Studio IDE.
And you can then run Playground from the IDE.
So I'm going to dive into that today.
It works using the same modes as WP now.
So it has a plugin theme or WP content mode or a WordPress mode.
So it will actually pick up all of those options.
Handy, it also has the WordPress develop mode.
It has an index on the PHP file and Playground mode,
if you know the conditions matched.
So I kind of want to test out all of these modes today
and kind of see how they work in the Visual Code Studio extension.
It has only been tested on Mac OS,
so at some point I would like to test it on Windows.
But that's going to mean taking,
I don't know if you can see behind me, there's a monitor.
I have Windows machines set up behind me.
So I might have to bring that over.
And oh, Patricia says, "Eko, thank you for pointing that out.
I do get this weird thing where my audio does funny things.
I'm going to do that.
Let me know if the audio is better now, if the echo has gone away.
My OBS regularly updates itself and then does weird things.
And one of those weird things is it messes with my audio.
Thank you for pointing that out.
Patricia, I think it is.
And also that the just is public.
Thank you for mentioning that.
Thank you, IMJK.
It's better now. Awesome.
Okay. So the sound is better.
Apologies for that.
Thank you for pointing that out, folks.
As I was saying, the extension has only been tested on Mac OS currently.
It may not work on Windows.
So I need to test it on Windows at some point.
So if you're a Windows user and you feel like testing this out afterwards,
please do go ahead and let us know.
If it works, there is, excuse me,
here we go with the coughing.
Yes, hello, Patricia.
The last time I saw you was Athens as well.
I do remember that.
So there is a Playground Tools Git repository,
which contains all of the Playground tools that are built around Playground.
So the plugin, the Playground block,
Interactive Code block for Gutenberg, Visual Code Studio, and WPNow.
These are all housed in the Playground Tools repo.
So it's basically anything that's built on top of WordPress Playground.
So there's another thing I want to show you in a bit,
but we'll get to that in a second.
So if you're on Windows, please go ahead and test this out yourself.
And if you find issues, report them back to this repository.
I am on Mac OS, so I'm going to fiddle with it today.
And I'm going to, as I said, test out all these different modes, see how they work.
Excuse me.
I'm also curious to see if this extension works with the blueprints,
because it would be cool if I could implement my blueprints set up,
my site options, my names.
I somehow feel like it's not going to work,
but I could probably get something similar if I wanted it to.
But anyway, so that's going to be the goal today.
Most of these live streams don't have a set goal.
I just kind of sit down and try things out.
So we're going to see how it goes today.
So let's open up Visual Code Studio,
and let's update to get the latest update.
Clearly, I haven't used-- I've been away for about a week and a half.
And clearly, I haven't used VS Code during that time.
Those of you who have joined me for these live streams
know that I generally use PHP Storm for these things.
But I use Visual Code Studio for my presentations
and for my workshops and my live stream.
Not so much the live streams, but for my lessons and coursework.
So I just haven't done any kind of presentations with it yet.
All right.
So what I'm going to just check is whether I have the extension installed.
I think I do.
Yes, there it is.
[COUGHING]
So it is installed.
The last update was on the 27th of March.
I'm just going to check that.
Actually, let's go to the VS Code page.
It should be the most recent one.
There's the VS Code extension.
All right.
What I'm looking for is the actual extension page.
So I've got a careful WordPress program.
OK.
There it is.
27th of March does seem to be the most recent update.
OK.
That's good.
So we are running the most recent version.
All right.
So once that is installed, it adds this little WordPress icon
to the sidebar of your Visual Code Studio install.
And gives you some introductions.
And then you can just hit Start WordPress Server right here.
So Start WordPress Server, to the best of my knowledge,
it'll just start it in the default playground mode.
So it'll just be a completely virtualized WordPress site.
I want to start with WordPress mode.
So what I'm going to do, I'm just going to create a site directory
in my development projects directory.
Oh, excuse me.
And I'm just going to make a directory called LearnPress,
because that's what I tend to work with.
And inside LearnPress, I'm going to use WPCli to download all the core files.
So this is just an easier CLI way of going to WordPress.org and hitting
Get WordPress and downloading and extracting the file.
But essentially what you end up with, if I open up that location
in my Visual Code Studio, so let's go to development projects sites,
LearnPress, it just has a default WordPress installation.
So it's just all the core files.
Now, what's interesting about this is, excuse me, this coughing is going to happen
all session long, so I apologize.
And that's the last time I'm going to apologize.
I haven't set up a WP config file, so I'm curious to know what would happen
if I just ran Playground.
It says an existing WP config file will be used if it exists.
If it doesn't exist, it will be created along with a SQLite database.
Okay, so let's do that first and let's see what happens.
So if I now go to WordPress Playground and I hit Start WordPress Server,
it says here to get started, make sure you open a folder with either your plugin theme
or an entire WordPress and then press the button below to start the Playground.
So if I hit Start Server, it then opens up and this theoretically should be pointing
to the WordPress install that I just created.
You'll see it tells me it's running on localhost 8.8.1,
it's running PHP version 7.4, that's the default,
it's using the latest version of WordPress,
and it also points to the project directory.
So it's confirming that it's running the files inside the project directory.
So what's cool about this is I don't have to do the WordPress install,
it will install itself with, you see it creates a WP config file.
It sets up some default values from the default config,
it doesn't do anything with auth keys and secure keys and those kind of things.
But what it does also do, and I'm going to show you how this works,
is it has this db.php file,
which I can't open for some reason.
Oh, that's a directory, sorry.
What it does is it installs a directory called the SQLite database integration main
inside of my MU plugins.
And to the best of my knowledge, that is some link somewhere.
So if we go and have a look inside this directory,
and we go to cdwp-content,
if we go to MU plugins,
there's the SQLite database integration main,
and I want to see what happens inside of that, if anything.
Okay, it doesn't need to install anything.
Okay, I want to see what this is installing,
see if there's anything in plugins, nothing in plugins.
Maybe these are hidden, let's go to database, nothing in database, interesting.
So my understanding is that this installs it somewhere else,
and I want to figure out where that is quickly.
So let's just go here to development projects sites,
and press the content, I think it's windows full stop that shows hidden directories.
That's a folder, there's nothing in there, that's a database, there's nothing in there.
I want to see what this configures.
[silence]
ntp-sittings.
I'm not quite sure how this works,
but it doesn't actually say how it works.
It's a database somewhere.
Now, if my memory serves correctly, it's sitting in my home directory somewhere.
So let's see if I can find it.
It doesn't seem to be anywhere, yeah, there's WP and V.
I'm curious to know how this works and where the database sits.
[silence]
Because it's certainly not in the sites directory as far as I can tell.
Let's have a look here.
Content, just the default themes,
kismet-muplgins has the SQL database integration main, which doesn't seem to have any files in it.
db.php doesn't seem to have anything, database doesn't seem to have anything.
So it's possible that it's all stored in the playground instance,
which effectively runs in the browser, which is kind of interesting.
So the downside to that is I don't have a way of accessing that database,
which is not the end of the world, to be honest, but it would be cool to be able to do so.
I need to check if there's documentation on where it stores.
It stores in the user's home directory and load into the virtual file system.
See, that's if you go plug-in theme or content.
[silence]
Wonder if WordPress does the same.
[silence]
Let's have a look if there's anything in my home directory that would make sense.
WPNow. Oh, interesting. It looks like it creates it in the same spot as WPNow.
Okay, let's test that. Let's go back to VS Code. Let's go back here. Let's stop the server.
And then what I'm going to do is I'm going to go inside the WPNow directory
and I'm going to nuke everything in here.
And then I'm going to go back into this directory
and I'm going to nuke everything in here as well.
Yes. Okay. And just remove this DS store as well.
So that's empty now. So let's go to WPCore download again. So we're back to scratch.
Okay, so that's that. So those files don't exist anymore.
Or at least the config doesn't. Okay, so that's back to normal.
So let's run the server.
Okay, that's working. There we go. Okay. So the VS Code extension uses the same WPNow
directory that WPNow uses to set up the database. That's interesting. Okay, good to know.
I feel like this should be documented somewhere, maybe in here, just to say, you know, where it's
installed, where it's set up. But now I can, for example, there's a thing called SQL light studio
that somebody mentioned to me a while ago. I think I've actually got it installed.
So I can, using this, I can drag that database. So it's in WP content. See, there's LearnPress.
What I like is it gives it a hash name as well. So I can have multiple LearnPresses. I can have
one in WPNow and one in the VS Code Studio, VS Code environment. It's kind of cool. So there's
LearnPress database. Okay, so there's the SQL light database. So I should be able to drag this into
here somewhere, somehow, maybe here, not sure. I don't know how this actually works.
Maybe add a database. Yeah, maybe add a database. Okay.
So let's go find that one.
And now it's not showing.
Okay, I might have to get the path this way.
So this is a little bit clunky, I will add. I wonder if there's a better way to do this.
But it's basically, it's going to be that and then it's going to be dot,
dot HT, dot SQL light. And we'll call it LearnPress in the list.
Okay, our connection was fine. So there we go. So there's the LearnPress database.
There's all the tables. Let's make this a bit bigger.
And then let's go to options, for example, and there's the options. Let's go data.
Okay, so there's localhost, entity one and all of that.
So let's change something and make sure we're happy that's the same thing.
So if I go into settings and I say my VS code WordPress website.
It's interesting that these days, there's just another WordPress site has been removed. I kind
of miss it, but anyway, I will pop that in there just for the sake of having some data there.
All right, so that changed that and we can verify this in the database if we refresh
this, which I have no idea there we go, refresh my VS code WordPress website. Okay,
so we can access the data. And now we can make changes and do things. And this runs just like
any normal WordPress site. I can do things like set up custom permalinks. So if I go to posts
and I go view this post, it has the hello world permalink. So I do like this is very cool.
One of the things I do like about doing this in VS code, or at least the VS code version is I can
then do things like change the PHP version very quickly. So let's say I'm testing versions and I
want to test something on PHP 8.0. It resets it and runs it in PHP 8.0. So let's verify this by
creating an info PHP file. Inside of that, we use the PHP info function.
And now I can say info PHP and ego running version eight quick and easy. And now I want to test
something version 8.1. Well, then I can just quickly go to version 8.1 and it restarts
everything. And if I refresh this URL, I'm running 8.1. So this is one of my favorite things about
the VS code session. The VS code extension is the fact that you can change the PHP version easily.
You can also change the WordPress version. So I can very quickly switch to 6.4.
And it'll download 6.4 and then run that code. And I think it'll physically actually change the files
in the local directory. So if we go to dashboard, oh, it's running 6.5. That seems broken.
I wonder if it updates to 6.3 and then updates itself.
And I feel like it does. That's interesting.
Okay. So the version switch doesn't seem to be working so great.
Sorry, just to answer the comment in the chat there. In this stream, I'm basically looking into
the WordPress playground VS code extension and I'm just literally testing it out and playing with it.
So I don't have a very specific target in mind. I'm just
live streaming my findings, for want of a better word. Okay.
So that's interesting. It looks like either the version update is broken.
Or it's automatically updating the WordPress site, which is possible.
I have no idea how to test that.
I got a 6.2. What happens?
Yeah, it's still 6.5.2. So that seems to be a bug.
It probably works if I don't have call files. I bet you it works then.
We'll test that out in a second when we're working with a plugin or a theme.
But in the WordPress version, in the WordPress, what is it called?
Mode. In the WordPress mode, that doesn't seem to work. So that's interesting.
It does make sense because it's working with the specific files that it has.
It's not the end of the world that it does that. But it is interesting.
Okay. So that's the WordPress mode. That was the first one I wanted to start with.
The next one I want to look at is the plugin or theme mode. I'm not going to worry about WV content.
Because I don't generally work. I suppose if you're doing a theme and a plugin,
you might have a WV content for all the presence of plugins and themes.
What I want to work in is plugin mode. And then maybe we can do theme mode later.
So to do that, let's stop the server.
What I love about this is I don't have to install anything to get this to work.
So let me show you what I mean by that. If I take an existing plugin, let me find an existing
plugin that I have. So let's go to my GitHub repository. And I've got a couple of test
plugins in here. There's an interactive game block that I built a while ago. So this is a
plugin that stands on its own. I'm going to copy this URL. Then I'm going to go back to development
projects. I'm going to just move the sites directory and call it testing for now. For
the sake of being weird. I should call it live streams. There we go.
Okay, so there's the learn press that we created there earlier. There it is.
So now what I want to do is I want to
clone my interactive game. Excuse me.
And I'm going to need to probably
in PM install and all of that. I really haven't left the read me to be quite useful here.
So let's go in PM install. Because this is a block. If you want to read about what this game
does, you can hop on over to my personal blog. And there's a link there. It's called dodge.
I'll share the link in the chat. But essentially it's a game that allows you to
move an icon around the screen and dodge the bad guys. Anyway, so there's the plugin.
Okay, that seems to have worked. So let's go in PM run bold. Okay, so that's bolted. Good.
All right. So what I'm going to do now
is going to close the folder.
I'm going to specifically open up the
interactive game directory. So this is if you're a plugin developer.
And all you're really working on is plugins. And you don't need or want to have to worry about the
WordPress install, you just want to be able to test your plugin. So theoretically, I should be
able to now hit start WordPress server. And it should detect that we're in plugin mode.
So it runs WordPress. And it should pick up the plugin and listed in my list of plugins.
That's my understanding of how these things work. So if I go to plugins,
there's my interactive game and it's activated. So now I can go to a page.
I just go to turn on the sample page.
And I should just be able to install my game. There it is. And if I view this,
there's my game, it runs and I can then test it out. So let's give it a start.
How does this thing work again? Press S again. It doesn't seem to be working. It's broken.
Is there a bug? Looks like there's a bug somewhere.
I guess it's a bug in my code. Maybe something changed and I need to fix it.
And disable move icon. Yeah, something's broken in my code. I wonder if
do I have I think
I think I need the most. I don't think I'm working on the most recent branch.
I actually don't even know.
I already did it in PM install, so that should work fine. What I'm going to do is I'm going to
just download the zip file. January 4th. Let's just see here. Yeah, this was three months ago.
Okay, it's probably a bug somewhere. I'm not too worried about that.
The point is I can add the block. So there is something working. The point is I can now test
this on different WordPress versions. This should work. So I should be able to. So currently it's on
PHP 7.4. So how would I test this? I wonder what we can do. Let's create a info file here.
Let's see if we can get that working.
Okay, let's see if I can access that directory directly. So I'll be WP content plugins.
Okay, that works cool. So it's PHP 7.4. So now if I go back to here,
I can then say right now I want to test this plugin on PHP 8. So it should.
Now it's PHP 8. So now I can go ahead and I can test my plugin. I can make sure things are working.
I should also be able to change my WordPress version. So let's say I want to run it on like
PHP 6.4 for some reason. Let's see if this works. If I go to the dashboard, update required.
It's probably because it's on 6.4. It's updated itself to 5.2.
Oh, there we go. Learn more about the 6.4 version. So yeah, it's saying get 6.5.2.
So now I can test my plugin in 6.4. So this is one of the cool things about the VS Code extension
is I can change PHP versions. I can change WordPress versions. So now we're on PHP 8.1,
I think it is. There we go, 8.1. And I can go and I can test my plugin. So that's very,
very cool personally, I think. Let's miss that. I want to see
what's the credits or about?
6.4. Did we change to 6.3? No, we were at 6.4. We changed the PHP version by again.
Okay, so this is plugin mode. So this is perfect for plugin developers. You don't have to worry
about your WordPress install. You don't have to worry about setting up a WordPress install.
You can just run it on the plugin code. It'll activate the plugin in the WordPress install.
I want to see what it does. It's probably going to create a WP interactive game site in your WPNow
directory. No, I've gotten the last step. There it is. So there's the WP content and there's the
interactive game version. There's the different WordPress versions. There's the plugins it needs
for SQLite. So that's kind of cool. Perfect for plugin developers. Essentially, yes. If you don't,
if you use this, if you're a plugin developer, if you're a theme developer,
and you don't care about the local install, you don't need, you don't need Jamf, you don't need
local WP, you don't need Wamp, you don't need any of the WordPress installs. You don't need to set
them up, configure them, figure out how they work. You can just plug in directory, run it in the
version and off you go. So that's one of the cool things about the VS Code extension. WPNow is the
same. If you missed the YouTube video, I did the WPNow version earlier. It's basically a CLI version
of the same thing. So if you don't like to work in VS Code, you can use the CLI version and run the
same thing. And it basically, it handles all the WordPress stuff for you. It doesn't require you to
fiddle with it. Now, the next thing I want to do, the other thing it allows you to do is it allows
you to run on WordPress develop. I'm not going to do the plugin and theme one today. We could show
you that the theme one works, but I'm going to trust that it does. But the WordPress develop one is fun.
Because WordPress develop, contributing to WordPress core, WordPress develop has a very specific
folder structure. So let me show you what I'm talking about there. So this is the WordPress
develop core code base. And you will see that there is a source directory. And inside the source
directory is the core code. And it's slightly different to the way a default WordPress install
is set up. So if you want to contribute to WordPress core, there is a local development
environment set up for that. You've got to install things like node and all these kinds of things
and run commands or whatever. But if you use VS code and you use the VS code extension, you
should be able to just run it on WordPress develop and it should just work. And that's kind of exciting
to me. So let's do that. So let's shut down some of these tabs that I have open, because like any
good developer, I've got multiple tabs open. And then I'm going to go to, so I have a forked
version of WordPress develop in my account, which I'm going to use.
So I'm going to just sync this fork so it's up to date with the most recent version of core.
So that's done. And then I'm pretty sure I've got this already somewhere in my
development projects directory. I think it's just called WordPress develop. There it is. So I'm just
going to pull the latest version of that code. Okay, so that should be done. So now if I close this,
and I close this folder, and I open up the WordPress develop directory, which is there,
there it is. And you'll see it has a very different structure to what I'm used to in a default WordPress
install. And it requires various steps to get it set up and working and all that kind of thing.
I'm just going to open that directory. And I'm going to come back here, and I'm going to start
the WordPress server. And theoretically, this is just going to work. And look how fast that was.
Okay, so now I'm working with the WordPress core code base. If we hop on into the dashboard,
we should see something about versioning. Looks like it's running 6.5.2. I guess that's right.
I'm not sure myself. But let's test to make sure. No, I don't want the dev containers extension.
Thank you very much. Let's go into the explorer. And let's go into the source directory.
And they have created an info dot PHP file. So if we go here, and we go to info dot PHP,
okay, it says file not found. So it looks like this might not be working 100%. So let's have a look
here. The build directory is served as the web root. Okay, so I still need to install and run
the bold steps. Okay. So let's stop the server. Let's see what's happened here. Okay, so what it's
done is it started in playground mode because it couldn't pick up that there was a WordPress
developer install. So I still need to install NPM and run the bold step. Okay. So I still need to
have no JS installed. And then I still need to run these. I think it's just NPM install.
Don't think I need, I think it's just NPM install NPM bold dev. So let's do that.
Not sure if you can hear it right now, but there's a dog next door that box.
Okay, so that's all installed. And then let's go NPM run bold dev.
Now I'm pretty sure that this also includes an NPM start somewhere.
Bold, bold dev dev test watch. Probably watch PM run watch.
So it'll watch for changes, but I'm not going to worry about that now.
Okay, so that's done. So now let's run the playground. Is there now a bold directory?
No.
I have a feeling this integration is broken.
Okay.
We need PM run dev. See what that does.
Okay.
Okay. So this doesn't seem to create a bold directory, but let's try run the playground
and see what happens.
All running in playground mode.
So that tells me there's a bag here somewhere because it's expecting a bold,
but it doesn't look like WordPress core creates a bold directory.
From what I remember, it uses the source directory.
And then, listen, I'm doing something wrong, but I don't think I am.
Okay. I'm going to test this very quickly
by doing the following. So I have a local environment that I use.
All right. So let's do this. I'm just going to test this out quickly.
So this is my personal, excuse me, local development setup.
I'm going to remove WordPress develop here.
And then I'm going to clone WordPress develop.
Because it is possible to run the WordPress core code base on a default
web setup, which is what I tend to do. So this local environment I use is running a virtual
Ubuntu server, which has a standard lamp stack setup. So it's like running it on any other web
server. And I just want to confirm how I remember these things are configured.
And then I might just log this as a bug on the VS code extension and see what folks have to
say about that. So let me just clone this quickly. Okay. It's NPM install.
Oh, wait, before I do that, before I do that, before I do that, before I do that.
Let's just go and see something.
So these are the local URLs that I have configured for this environment.
Okay. That was to be expected. But if I go to the source directory, then I get this message.
So this is if you have a setup the way I have a setup.
So then it would be NPM install and then NPM run dev. Okay. So let's go NPM install.
And then we'll run run dev.
I just want to see what happens there. So I'm going to open that up over here so long.
And create a new one.
So that's done. So now we can run NPM run dev.
Oh, it's probably the node version I'm using.
Don't think. I would press call likes version 20.
Oh, grief.
Oh, it is 20. Oh, okay.
Oh, that's frustrating.
Oh, dear. I'm not going to sit and try and figure this out now.
Let's try NPM run bold and see what that does.
Same issue. Good grief.
Oh, yeah, we can certainly try that. NPM minus I F.
It seems to all be fine.
I can only assume this is some current bug in WordPress call.
But I'm pretty sure I remember that it doesn't create a bold directory.
It's irritating that it seemed to work elsewhere. I'm not sure why.
I can always try and clone it again and see what happens. Let's try that.
Okay.
That's the fun thing about livestreams folks.
Sometimes they just don't go as planned.
I'm only doing this to verify my recollection of how WordPress Core works.
In that it all runs from the source directory.
That's an interesting question.
Are the WP program tools preferred now over WPEnvy?
To go back onto a little history around WPEnvy.
Some of this I already knew and some changes I found recently.
But let me just find the relevant blog post.
I'm not going to find this now, am I?
Let me see if I can do a Google search.
Back in 2021, it looks like.
Let's open it up.
It was Marcus who wrote this.
Yes.
I'll share this link with you.
Back in 2021, Marcus Kazmirzak, I have a butcher surname there, so apologies Marcus,
suggested about the fact that he suggests a unified documentation on setting up WordPress
development environment, etc.
Back then, the suggestion was WPEnvy.
That was the WordPress Core's recommendation for local development environment.
Then in August 2021, this link, the Docker engine, Docker desktop license changed.
As you might know, WPEnvy requires Docker desktop to run.
That raised a concern.
At that point, people started saying, what other options are there?
And VVV was suggested and somebody suggested multi-pass from Canonical, which is what I
use, funny enough.
I think I actually commented on it here somewhere.
I thought I did.
There we go.
Multi-pass from Canonical, which is what I use for my local dev environments.
Essentially, this conversation happened and people suggested all kinds of things.
There was never really a consensus around what we should be using.
Some of the comments that were made were quite valid in that maybe we shouldn't just have
one thing that we use.
We should have a few.
Anyway, since then, in case you're wondering why we're talking about WordPress, the WordPress
developed local environment.
This one that is discussed here still uses Docker and you can still use Docker to use
it.
The license hasn't changed since then that makes it fully incompatible with WordPress.
But since then, Adam Zielinski created WordPress Playground.
WordPress Playground is something that we as a community of developers, we own.
As you can see, it's got a page on the site.
It essentially uses...
Let me find the...
No.
That's not what I want.
Here we go.
It essentially uses WebAssembly PHP and it runs WordPress in the browser.
It doesn't require any third-party software that doesn't match our GPR license requirements.
Because we as a community have more control over it, over where it's going, over how it
works, it is a good suggested alternative to WPNV.
I find it a lot easier to work with.
You can see there's WordPress Playground forked the original PHP to WebAssembly published
there.
It's a fork of another piece of software, but we now have full control of it.
Started by Adam Zielinski and then the tools are all built on top of that.
Because we have control over it, the licensing can't change, it can't become incompatible.
I personally like the fact that it opens up a whole bunch of options.
It opens up things like the VS Code Studio extensions.
You can run Playground from VS Code.
I like the fact that it has the WPNow option.
You can run it from the command line, just like with WPNV.
There is also things like you can preview pull requests.
Using Playground, you can, for example, the live example of the Gutenberg PR Reviewer.
You can pull requests, load it in Playground and test it in a WordPress install.
Some of the other cool things that it enables, let me show you here quickly, excuse me, is
you can do things like, let me go find my plugins.
This is not the best way to find them.
I'm looking for plugins that I worked on, but they're never listed here properly.
I think I did it with this one.
You can enable a live preview mode.
This basically opens up a Playground instance with your plugin installed and allows users,
it doesn't look like it's working right now, maybe I broke it somehow.
Here we go.
It allows a user to test your plugin or test your theme in a WordPress install before installing
it on their local environment.
It unlocks a whole bunch of things.
I am suggesting it to folks to check out.
I'm suggesting that they play with it, they try it, they use it.
Here we go.
This is the list URLs page for the plugins, so you can now test it and see how it works.
Off you go.
It hasn't officially been announced as the replacement for WPEnv.
WPEnv is still a thing that exists.
Most folks are starting to move towards using a WP Playground solution.
I like the fact that it's so extensible, it can do so many different things.
It is essentially operating system agnostic because it runs in the browser.
It doesn't require anything to be installed on your machine for it to work.
The only software you need is the software required for your plugin.
If you're building a plugin that just uses PHP, you don't even need to have PHP installed
on your machine, you just load up the file, the directory for the plugin, run it in Playground
in VS Code and you're good to go.
You can do the same thing with WPEnv from the command line.
I did that in the previous stream that I showed earlier.
It just opens up so many more opportunities and it's fully open source and it's owned
and managed by our community.
I do recommend checking it out.
There is also, and I'm going to just share this quickly, WordPress.com has released a
free version, a free local development environment where they're going to release a soon called
Studio.
It basically is a more refined version of WordPress Playground.
There was a beta sign up a while back, so I do recommend checking that out.
It just creates so many more options and more things that we can do and it just creates
so much more flexibility.
Cool, that was a long answer to a short question.
All right, let's go back to where we were.
I think this is all pulled down, so let's go npm install here.
This looks like it might be working.
Let's install that.
While we do that, I'm going to close down some windows here.
Let's try npm install.
We did that in npm run dev.
Yay, that seems to be working.
That was in my WordPress develop test source.
No, WordPress-hype and develop.
I don't know why it does that.
There we go.
npm run dev.
That's still going.
I don't know what happened with my other repository, but this one seems to be working, so it's
fine.
The watcher is running.
Let's run this.
There we go.
Now we're getting some things happening here.
Let's just check.
That's what I thought.
It doesn't create a build directory.
I think it needs to be updated to run off the source directory.
I was pretty sure I remember that's how it works.
Along those lines, I'm going to create an issue for that.
Let's go into the Visual Code Studio plugin.
Let's go to Playground Tools.
Issues, here we go.
Let's see if there's anything open about WordPress develop.
Playground mode.
Here we go.
Oh, well, the directory doesn't exist yet.
This was actually logged earlier in March.
I'm going to come and share and I'm going to say I experienced this today as far as
I know when developing or core against.
Let's go find the WordPress develop code base.
And WordPress develop.
A bold directory is not created as in the traditional Node.js environment.
Everything is run from the source directory.
So it might just be a case of updating the tools, including the VS Code.
Okay, I experienced this today when testing the VS Code extension.
And maybe something else, maybe something like...
I'm sorry, I'm sorry.
Okay.
We could just say, what did I take the URL in the package to JSON file?
Maybe source directory and the repository URL of...
The package.json file.
Yeah.
So I think that's good.
I might try and see if I can fix this myself.
Because it should be a case of finding the code that runs the mode, checks the mode.
And then let's see if we can...
Inside tools, I think.
Inside packages.
Oh, here we go.
Inside packages.
WPRVSCode extension.
There's going to be inside here somewhere.
There will probably be something that checks the different versions and looks for something
specific.
Anyway, I'm not going to dive into that now.
Cool.
The other thing I wanted to show you folks today.
This kind of was planned.
I've kind of played around with the VSCode extension enough now.
I like the fact that it has this index option.
So if you just have an index.php file, it'll just start a PHP server.
I actually want to test that now.
I do want to test that now.
I want to see if that works.
So let's close this.
And let's create a new folder somewhere.
All right.
Okay.
So let's cancel this out.
Let's go back to development projects, live streams.
Okay.
Let's just make a index directory.
And let's just create an index.php.
I mean, you know what it's going to be.
Hello world.
There we go.
And then let's open that up.
Development projects.
It's got data added live streams.
Index.
Okay.
And let's just run the playground on that and see what happens.
Hello world.
That's cool.
Okay.
It says PHP version 7.4.
It's using the latest word precision.
I feel like this sidebar could do with some work depending on the mode that it picks up
because obviously the word precision is irrelevant at this point in time.
It would also be cool if this path wraps slightly.
Anyway, things that could be improved.
Not too worried about it.
But now I can do things like this.
I can say create even an index.html file.
And let's see.
I should be able to browse to that, which is kind of cool.
So you can just do standard PHP, HTML, whatever you want.
So you could use it for any PHP language or framework.
So that's kind of cool.
Yeah.
Little fun things you can do with this.
Okay.
And then playground, if there's no conditions that match, then obviously it just launches.
The other thing I wanted to show you all is the...
Where is it now?
No, it's not listed there.
Let's go to the repository.
There's another tool that's been added to this list of tools recently and it's called
the interactive code block.
And the interactive code block is very, very cool.
So let me show you the interactive code block.
So what I'm going to do is I'm going to just fire up a local WordPress that I have installed.
I have so many local environments and different names.
I can hardly remember them half the time.
And then you install this plugin like any other plugin in your WordPress site.
I have never tried to install the plugin inside a version of WordPress Playground, so I wouldn't
recommend doing that because that just feels wrong for some reason.
But it's called the WordPress Playground block.
You can search for it in the standard WordPress plugin search screen or dashboard or whatever
you want to call it.
So there it is there.
It's currently installed and active.
And then what you can do, which is very, very cool, is you can add an instance of WordPress
inside an instance of WordPress.
So I can create a WordPress demo and I can add the interactive block.
It's called WordPress Playground block.
And then it adds it to my site.
And then if I publish this page, I haven't activated the live preview yet.
I'll do that in a second or view this post.
Oh, I need to activate it first.
Sorry.
One sec.
No, I don't.
Sorry.
I'm too quick.
It'll come on.
Let's go.
It'll load the page.
It will load the demo and then the user can activate the demo and have a working version
of WordPress inside a WordPress post or patch.
Now this is something that I'm very personally very excited about because I can use this
to demo WordPress code on my site, on my blog, on Learn WordPress.
So it's very, very cool from that perspective.
So I'm sure I'll let this thing run.
I see that there's a question here.
How much resources does the WP Playground VS Code extension take up?
Same question for the WordPress Playground plugin.
I honestly don't have the answers to that.
It's running inside WebAssembly inside of a browser.
So I'm guessing it's going to use some kind of memory.
How much it uses, I don't know.
I think if I remember correctly that it's the same as like your memory settings on your
server and I think the Playground instance is configured to a certain set of memory.
It might be 16 megs.
It might be 32.
It might be eight.
I'm not sure.
But I assume that's what it's going to use up.
So yes, there is a memory usage for it.
What that is, I'm afraid I don't know offhand.
But there we go.
There's my WordPress inside my WordPress post or page.
If I now go inside the dashboard and let's say I do something like this and I say I want
this to be full width and I update the page, then I can get-- and I don't think my theme
supports full width.
So it might-- it is going full width.
There we go.
So it goes full width.
And it loads the sites full width in the page.
The other cool thing about this is I can use a code editor version.
And I can build a plugin for my sites.
And I can do things with it.
So let's do something silly.
Like let's say add action init.
No, no.
Let's do this.
Let's add a filter.
So let's add my favorite filter, the content filter.
So it's apply filter.
It's going to be add filter, add filter for content, da da da da.
OK.
So let's do that.
So inside of this block editor, I can create this plugin here.
And let's say my filter content.
Take away that.
And then we'll go function my filter for content.
It's going to receive a content variable.
And then let's say return.
And let's say the content variable.
And then let's append an h4 header.
And it's a hello world h4 again.
And then let's close that down.
This has given me red because my grammar is going, I don't understand that.
So this isn't a syntax highlighting or anything like that.
But now if I update that, check this out.
This is cool.
So if I go to the page or the post or the whatever, it loads the demo.
It activates the live preview.
I just really hope this works.
I need to activate it.
Sorry.
And you can set that to automatically activate to show how it works.
If I now go to a sample page, I don't think this plugin is there.
It is.
There's hello world.
So this plugin is installed active and running.
Now check this out.
Hello WP Playground.
And then I can click run.
And then I go back to my page and it updates with the latest code.
How cool is that?
So this is very, very, very cool for teaching for teaching WordPress development.
You can add JavaScript files to this.
So you can create a PHP file, JavaScript file, all those kinds of things.
Your users can download the plugin from here.
So if I click there, it downloads the plugin as a zip file.
So it's a great way to share the content if you're teaching WordPress.
And so and so and my understanding of it is that this code inside this, this, this WordPress
Playground WebAssembly instance is contained.
So any code in here can't leak into your main WordPress sites.
That's my understanding of at least.
I'll need to confirm that with Adam.
But it's a very cool way of showing off WordPress functionality, showing off code snippets,
seeing what they do.
If you have a product that that's a WordPress product, you can show folks in your documentation
what this code does, how it works.
So it's very, very, very, very, very, very cool.
So you've got a question here inside this, can I upload my plugin or theme after some
time or data will convert to the default version?
Basically if I want to give a live feel to a user and reset user data at the same time,
essentially, yes, essentially, that's my understanding.
You could you could basically set this up.
I think I think currently it only works with plugin type files.
So this code here is just a plugin that works.
I don't think it supports themes right now.
It's actually such have a look WordPress.org plugins.
I cook search for playground block.
I don't think it works if you're working with themes right now.
I think it could be made to work with themes.
What you could do though is you could in this, I think in this in this version, so this playground
block, I'm pretty sure if you go to themes, so let's disable the code editor.
You could install a theme here.
Let's try that.
So let's install a theme from the theme repository.
I've never tried this before.
So this is one of the other reasons I like doing these these these fun things.
Let's install 2017 just for fun.
So it's download 2017.
Put up my desktop quickly.
Then let's go in here and let's install 20s. I think this will work.
You need to label it to allow program access directories.
Oh, so what you can do is you can use some of the settings.
So no, maybe I can't.
Let's just see.
Let's just see what happens if I install 2017.
I think this might work.
So now if we go back to the site, there's 2017.
So if I update this page and I view this post and the user activates the live preview.
No, it didn't work.
I wonder if they need to.
That didn't seem to work.
I'm not sure why.
Oh, wait, wait, wait, wait.
So what I can do is use blueprints.
So a blueprint is basically a way to tell the playground instance to do certain things
when it loads.
And that is how you would configure installing a theme.
Now I did cover blueprints last week, but let's see if we can very quickly get a blueprint.
So you can do things like steps and you can use steps to install themes, activate plugins,
activate themes, install themes as far as I know.
Install plugin.
There we go.
Install theme.
There we go.
So let's take that out.
Let's go back here.
There we go.
So the theme we want is 2017.
There we go.
That will install and activate the theme.
There it is.
So let me update this and let me review that.
I need to activate the preview.
And there it's downloading 2017 and installing it.
So now my user can try out this theme, see how it works, and then anything that they
save I can wipe.
In fact, I think every time it loads in a new page, it reruns the blueprint steps.
So for every new user that comes along to the page, I think it's a clean slate.
What I don't know is whether you can specify a theme URL.
So if you want to install a theme or a plugin from an example, from a GitHub repository
or an online URL somewhere, I would need to figure that one out.
But that's essentially how blueprints work and how you can use blueprints to install
different things.
You can do things like enabling multi-site.
You can define the site URL.
There's various other things you can do.
So yes, there are lots of exciting tools coming out and around with WordPress Playground.
WPNow is one, the CLI tool.
The visual code here, plugin is another.
The Playground block is another one.
So I highly recommend, if you're interested in any of this stuff, go to the WordPress
Playground page on the WordPress.org site.
Also go to the Playground Tools GitHub repository because that contains all of the fun tools
that we've been looking at.
So that includes the Playground plugin, the Playground block, interactive code block.
I don't know what the difference is between those two.
Playground for Visual Studio Code and WPNow.
Then if you want to work on Playground itself, there's also a link to the Playground repository,
which is the core WebAssembly version of WordPress Playground and how that works.
So all of the tools are built on top of the core Playground and PHP WebAssembly, whatever
you want to call it.
I am excited about all these tools.
I think they open up some quite fun solutions of how to use WordPress in a different way.
Nobody has used Playground to create a Notes app for Apple devices.
I think it's called Block Notes.
Come on, Staken.
Block Notes.
Is it Block Notes?
Block Notes.
So it's just a simple little app that uses the Block Editor and lets you create and do
things.
One person is rated one star.
Who knows why?
I think it was just an experiment.
I don't think it was meant to be anything serious.
But it's using Playground.
It's using the Block Editor.
It just opens up so many more things to install WordPress and use WordPress in different places.
All righty, folks.
I'm going to call that a day there.
My voice is starting to get worse.
I hope that I've at least inspired you to check out these tools and try some of them
out.
I'm really excited about taking the VS Code extension and trying to add it to PHP Storm
because I use PHP Storm as my local development environment.
But it definitely opens up some interesting things.
So do check it out.
Check out the first stream I did where I use WPNow.
I will be uploading this stream to the YouTube channel soon, later this week.
But if you're interested in a different way of working with local development environments
that don't require any other software underneath, then do check that all out.
And, yeah, let me know what you think.
You can find me on Twitter.
Jonathan is called Basinger.
You can find me in the WordPress Make Slack.
I think my name there is just Jonathan.
I don't know how I'm known.
Jonathan, my first name there.
But do check that out.
Do go to Bash.
And then send feedback.
If you find bugs, if you find issues, send feedback to the relevant repositories.
I know that Adam is very keen to fix as many bugs as he can and make it usable for as many
people as possible.
So do check that out.
Okay.
Next month, there's a strong possibility that I'm going to be diving into contributing to
the Gutenberg project.
I was having a conversation with somebody on Twitter recently who expressed some frustration
with contributing to Gutenberg.
I have never contributed to Gutenberg myself, so that will be an interesting experience
for me.
I'm going to go on the live stream on the Twitch channel on the Meetup page for when
those are coming live.
Hopefully, the next time we do this, I won't have a cold anymore, and I'll have a guest
who will be taking us through that process.
But thank you all for your support.
Do let me know what you think of all the playground tools, and I'll see you in about, I'd say,
two weeks' time also.
But keep an eye out on the meetup.com page and on the Twitch for updates.
Okay.
Have a great rest of your Tuesday.
I'll see you again.
Bye.
[clears throat]
[music]
[silence]
[BLANK_AUDIO]