- All right, we seem to be live.
We had the picture in picture in picture
in picture in picture earlier.
Welcome, if you are joining.
Literally five minutes before the stream,
I swallowed something wrong.
So I have this annoying little tickle
at the back of my throat now,
and I hope that it goes away as the stream continues.
But welcome to my Thursday live stream.
I don't do these that regularly.
I try and do them every two weeks.
But in these sessions, I just kind of figure something out.
Hey, Cynthia, good morning.
What are you doing here?
You should be at Red Camp US.
And it's Chris as well.
I have lots of friends here today.
Welcome, welcome, welcome, welcome.
So to catch everybody up as to what I've been doing,
two weeks ago, I started working on this pull request
that I've been wanting to,
Cynthia says, "Everybody is asleep here."
Ah, okay, still two, two in the morning.
Welcome, anyway.
I've been working on this pull request
for the playground block.
The playground block is a way that you can
basically set up an instance of the WordPress playground,
which is a WebAssembly instance
inside of your WordPress site.
And it looks essentially like this.
(coughs)
Excuse me.
And it has a code editor view
where you can pop in some plugin code.
Hey, pjorgv.
And you can run that in the front end.
So I'm not gonna do any plugin code now,
but it'll enable the plugin
and run it on the front end environment.
And then folks can edit that plugin code
and see the changes happening.
It only works with plugins currently.
And what I'm doing is I'm busy working on trying to
make it work with themes as well.
So, last week,
not last week, two weeks ago,
I started working on this functionality
and I was able to create a kind of working pull request.
There it is over there.
And I got stuck towards the end.
I couldn't figure out why.
I got the theme files writing.
I got the theme saving,
but then not activating.
And so I created this pull request
and I asked for some help and the very cool,
I think it's David Urbanski.
I hope that's how I pronounce his name.
He is a Polish developer.
He has worked with,
I think he was the primary person
who built the Playground Block plugin.
He worked with Adam on it.
And what he reminded me was that what I was missing
about the activate theme call
is that it has the client as the first parameter
and then an object as the second parameter.
And in an object, you need to pass a set of key value pairs
or at least in this object.
And the key is theme folder name, not theme slack.
So what I was trying to do was just pass in the folder name
or the slack as a variable.
And then I also got reminded that in JavaScript,
you can pass, there's the shorthand notation
for objects that you can pass.
If the variable that you're passing
has the same name as the key that you're assigning it to,
you can just pass in the variable name
and it will just magically works.
So the best of my knowledge is there's nothing in PHP
that does that, which is why I forget it every time.
Chris, you can correct me on that one if I'm wrong there.
I don't think there's a shorthand like that in PHP.
There might be, I don't use it, but it's what I missed.
So really all I had to do was either pass in
the fully defined object, so the key as theme folder name
and then the variable that I was passing in
or I could use the shorthand method.
So I tested that and sure enough,
when I changed that code, it worked.
So now it's at least writing the theme files.
Well, that was what I was really doing.
But now it's at least activating the theme
and running it on the WordPress front end.
So I'm gonna just test that out again,
just to make sure that my code hasn't been broken.
And to do that, I'm gonna remind myself
how to set up this local environment.
So this is the Playground Tools environment
and it was this NxDev WordPress Playground block command.
So I'm gonna switch into my Playground Tools,
I think it's just Playground Tools repository.
Let me just check if I'm, yes,
I'm still on the same branch that I was working on.
That is the file that I've been working on.
So I'm gonna run this command and this will set up,
oh, I don't have Nx installed.
That's weird, I could have just saw
when I installed it last time.
Anyway, let's install it again.
(clears throat)
So weird, I thought I had installed it last time.
Maybe it's not in my path, somewhere along the line.
Let's try again here.
No, not that one.
Let's go NxDev.
There we go.
So that's running.
Hello, Hilda Hidalgo, good morning,
from Manassas VAUS, welcome.
If this is your first time,
I do these live streams roughly every two weeks.
They're very unprepared.
They're usually just me trying to figure something out.
As I said, this is part two of a series
that I ran last week.
If you want to catch up on part two, you can do.
It's on the WordPress YouTube channel.
I'll share that link very quickly.
If you want to see what I got caught up to last week,
let me find here, that was contact form, blog, here we go.
This is last week's video.
So I'm gonna copy this link here
and I'll pop it in the chat.
As I said, apologies,
have a little bit of a tickle in my throat today.
Okay, so this is the local environment setup.
I'm finding the background music a little bit too loud,
so I'm gonna turn the volume down just a tad.
There we go.
If anybody's wondering,
this background music was created for me by my friend,
EchoJelly.
EchoJelly creates custom content,
custom music for online content
and EchoJelly was very kind to create my playlist for me
for my live stream.
So thank you, EchoJelly.
I'm gonna turn that down a bit more.
No problem, happy to share the links.
If there's any links that you see on screen
that you want me to share,
just pop a question in the chat,
I'm always happy to share them.
While I'm at it,
let me actually share the pull request that I'm working on,
so folks can follow along there if they would like to.
For some reason, command V in Obt. Studio doesn't work,
so I have to right click every time.
It's the most annoying thing.
Well, maybe it's not in Obt. Studio,
it's in the Twitch chat box that I have enabled.
There's probably some settings somewhere,
but I couldn't be bothered to figure it out now.
So I'll just right click.
Okay.
So let's check that this still works.
So if I go to my dashboard,
the plugin should be installed in Active.
I did have that test theme that I built last week,
which was just two files.
Oh, it doesn't look like I do have one anymore,
so I might have to recreate that.
Let's have a look here.
So let's let WP Admin load.
I don't know why this is taking so long.
There we go.
Okay.
And let's have a look at the plugins.
Okay, the Playground Block is there.
There is a new version.
I'm not gonna, this is basically because
I'm using a fork of this plugin,
so I'm not gonna update this now.
And let's see if the...
(clears throat)
Theme version works out.
Okay, there is the theme.
It's still loaded in memory.
How cool is that?
It actually loads it for you and keeps it in memory.
So this is the code editor.
And now if I activate this live preview,
let's open up DevTools,
so we can see if there are any errors.
If I activate that live preview,
it should save the theme and then load it.
(clears throat)
You see that?
It first loads the initial site
and then it triggers the theme.
So there's the theme template.
Here's the style that CSS, here's the template.
And so now I know that theme's working.
So, George E.V. says,
what WordPress stack are you using?
MAMP, local WP, or something else?
So the stack that I'm using for this piece of development
is very specifically the Playground-based version
called WPNow.
If you go to, let me show you quickly.
If you go to Playground Tools,
this is basically the repository
which manages the Playground plugin,
the Playground block for Gutenberg,
the WordPress Playground for Visual Studio,
there's a Playground extension, and then WPNow.
And WPNow is essentially a local development environment
kind of similar to, let's see,
similar rich to something like,
what's that one that Laravel built?
Not heard the one before that.
Can't remember it now.
It has escaped me. (laughs)
They actually talk about it in WPNow somewhere here.
Laravel Valet, that's it.
So it's kind of similar rich to Laravel Valet.
You basically can run it from the command line
in a theme directory, in a plugin directory.
It'll load up a Playground setup,
and then you're all good to go.
So that's what I'm using for this development
because the Playground block plugin uses that environment
for its development environment.
It's not what I personally use.
If you wanna know what I personally use,
I'm happy to share that as well,
but it's not what I'm using for these live streams.
Okay.
Do check out WPNow if you're interested.
Let me share that link in the chat
if you wanna play with it.
If you've heard of Studio by WordPress.com,
it's kind of similar to Studio,
but it's not as polished.
Studio has a nice front end, a nice user interface,
a nice app that runs.
WPNow is all command line based.
Similar to WPEnv, but instead of using Docker,
it uses the Playground WebAssembly image.
All right.
So it's kind of weird
because if you think about it,
I'm running WPNow, which uses WordPress Playground,
and then I'm loading up the WordPress instance
in my browser,
and then I'm adding the Playground block,
which then triggers another instance of WP Playground,
or WordPress Playground.
It actually, what it does is it loads the one
on the Playground site.
So it loads it from the internet.
So it's like Playground within Playground within Playground.
(laughs)
Or as I like to call it, Playgroundception.
Okay, so it looks like this is all working.
So this is great.
So now I've got my style and my templates index working.
It loads how things I want to work.
So that's cool.
But the code itself is not done
because all I really did was
I took this WritePluginFiles component,
and I literally just copied it
and called it WriteThemeFiles.
And then everywhere it said plugin, I changed it to theme.
And then in the,
try to remember where it was now.
It wasn't here, I don't think.
Yes, it was here, wasn't it?
Can't remember now.
I made the image check.
I made changes to two files.
Three files even apparently.
So it was the edit.
Okay, in the edit.tsx,
that was where we added the,
the controls to have plugin or theme mode.
That's something I'm gonna need to fix
because currently it's a dropdown
and really it should probably be a toggle.
In the PlaygroundPreviewIndex file,
which I think is this one.
No, not this one.
This one.
Is it that one?
Yes.
And this one,
it was the Playground, oh, here we go.
Basically I just, I get the code editor mode
and if it's theme,
then I call the WriteThemeFiles component.
Otherwise it's plugin,
then it does some JSX transpiling
and then calls the WritePluginFiles component.
So really, this needs to be cleaned up a little bit.
There should only be maybe one component
that is called maybe WriteCodeEditorFiles
because I don't see the point,
it's essentially all doing the same code,
just some different changes,
some different variables really,
but at one or two different function calls,
but otherwise it's effectively the same.
Maybe it does make sense to have one
that says WritePluginFiles
and one that says WriteThemeFiles
and then the functionality that is duplicated,
we can extract somewhere else.
I haven't quite figured that out yet,
but the goal today is at least to do all of that,
to clean it all up.
And then the other thing I need to fix
is in the block itself,
there is a download button
and the download button I think is the file
that I have open here.
Yes, is it?
No, it's activate, get templates,
mount, mount.
Is it this one?
No, it's not this one.
There is some functionality somewhere
that manages the download of the file.
I can't remember now where it is,
but essentially it's only working
with the plugin directory at the moment,
so that's gonna break if somebody clicks on download.
So I need to fix that as well.
So that's the goal.
I'm gonna move some files around
because I get confused if they're in the wrong place.
So let's start with this.
Now this code,
I kind of use some code that was there previously
and I don't really wanna do that.
I kinda wanna leave that code back the way it was
and have a separate toggle control.
So in the block area,
I wanna have a toggle control for whether it's a plugin
or whether it's a theme.
Does a toggle make sense?
Maybe not, maybe not a toggle control.
Maybe a dropdown does make sense.
Hmm.
The other option would be a select.
Not a select, a what's it called?
Radio buttons.
I wonder what, let's have a look at what components
the block editor has.
So if we go to...
I think it's in the component reference.
Yeah.
Combat box.
It's an enhanced version of select.
No, this is really what I want.
What I want is like a radio buttons.
Hmm.
Radio control.
That's probably kind of what I want.
I want a single option from a list
but I wanna show all variable options.
That is kind of what I want.
So I think that's what I'm gonna use.
Okay.
So let's use radio control.
Okay. So let's import radio control from the components
which is probably going to be up here somewhere.
Hmm.
Okay.
Select control.
Yeah.
Let's export the...
No.
(laughs)
Let's export the radio control.
And then...
I'm gonna put this just under this control here.
So radio control.
And then there's a label, selected options,
options unchanged, subscribe all of this.
We'll take out whatever we don't need.
Okay. So label is...
Code editor.
The mode.
Gonna leave out the help for now.
The selected option is going to be...
Code editor mode.
Which I think is just plugin or theme.
Radio editor mode.
The options are plugin theme.
I'll check now why this thing is giving us arrows.
(clears throat)
Gave me a similar area here a while back,
but it still works.
I think it's just TypeScript being fussy
and I tend to ignore those things.
(laughs)
Type...
Isn't that assignable to type read only array?
I think this should just work.
(clears throat)
Okay, there wasn't every there.
(clears throat)
Let's check these out.
Okay.
It's a text error 272779.
272779.
Oh, that's why.
No, yes, no.
(clears throat)
See if this throws an arrow.
Oh, it's because I'm a singer.
I think that should be fine.
(clears throat)
It's not, it's not happy.
It's like...
274.
Oh, maybe that's not supposed to be there.
Okay, there we go.
Built successfully.
Now this is where it gets interesting.
So these red lines here, as far as I know,
are because this is TypeScript code.
And so I'm not very good with TypeScript.
I've never used TypeScript.
So as far as I know, the code will compile
or transpile, but my ID is gonna throw errors at me.
Which I'm okay with right now.
So I'm gonna leave those red lines as they are
because this should work.
So let's have a...
(clears throat)
It's just like there's bags in my code.
It's just that I'm not using the types correctly
or something.
I'll have to dig into that once I get it working.
I don't know enough about TypeScript
to know what the problem is.
I'm gonna mute my mic for a second
'cause I need to blow my nose.
So please bear with me.
(soft music)
This is the beauty of livestream folks.
You get to see me do all kinds of weird things.
Okay, let's refresh this.
Okay.
Value is not defined.
27443, so there is an error there.
Oh, unchanged needs to get a value.
That's why, bear, bear, bear.
Unchange needs to receive that value.
I'm not great at...
It's going to be...
that.
There, that...
should be fine.
Okay, it built, so it's more happy.
Let's refresh.
(soft music)
There we go.
All right.
So now if I click on my block, I should have...
There we go.
Like in or theme and look, it's changing that as well.
How cool is that?
That's very cool.
Okay, that's nice.
So that's doing what I need to.
It's probably gonna change the...
What's it called?
The attribute as well.
So now what I can do is I can revert this code over here
that I just kind of stole for this.
And so to do that, I'm gonna put it back to...
how it was.
Which I can do by going back here
and checking out the
workpress.playground.sourceedit.tsix.
Packages, workpress.playground.block,
source, edit.tsix.
All right, so there's all this stuff
that Adam had commented on a while back.
There we go.
So it's here from line 265,
down to somewhere.
(clears throat)
It's this one, it's this div.
It's this div here.
Okay, so it's this whole div.
There.
Okay, let's just go to raw mode.
Maybe let's edit it a little bit easier
and I can scroll.
That's up to there.
So that's from that div.
And I'm gonna copy the comment as well.
There, there we go.
And then here, that's where the comment is.
And that's where the div is.
And essentially, what I'm doing here
is I'm just putting back the code that I changed
because I want to leave that code there
because it was used for something else.
(clears throat)
And, oh, it's not exactly right.
Is it?
Oh no.
Oh, that's why.
It didn't go far enough.
There we go.
Okay.
So I'm just gonna leave that there for now.
Um, there was some script mode that was enabled
and it was disabled.
So I'm just gonna leave it out for now.
Read only array.
I wonder if it needs to be passed as an object or something.
I don't know.
I'll have to check without them on that one, but it's fine.
It's working for now.
Okay.
So let's test that.
So to test that, I'm gonna have to switch between
plugin mode and code mode.
It would be cool if switching between those modes,
like set up a default template.
I have a feeling that's actually available in here somewhere.
(soft music)
Let me see if I can find that.
First, what I want to do is I want to just copy out
these files.
So I'm going to open up some scratches.
You don't know, scratch is a feature of PHP Store
that allows you to create sort of temporary files.
And I'm gonna steal, I'm actually gonna delete these.
No.
Don't need any of these.
Okay, so let's create a new scratch.
So let's create a style sheet.
No.
(soft music)
New scratch file, there we go.
(soft music)
More pump now, that was the template, I want the template.
(soft music)
Okay, leave that over there, and then let's create
another one for the template.
(soft music)
Okay, I can just sit there.
So now what I want to do is remove the block plugin.
Or at least remove the block, should I say.
And then add a new instance of it.
And then enable the code editor, and here we go.
So it's gonna be something like this
that I'm gonna be looking for.
So there must be this template somewhere.
I'm interested to see how that's implemented.
Okay, so here it is.
Okay, so it's block JSON.
So it imports it.
(soft music)
So I would have to set up this,
'cause it's gonna be difficult to do
with the template file for a theme.
(soft music)
Not going to worry about it today.
Suppose what we could do.
(soft music)
'Cause I'm guessing what it does when you toggle that,
it's going to need to call something.
And what it calls is probably write plugin files.
Let's see if the write plugin files is being called.
(clears throat)
Not what I wanted to come to.
(soft music)
It's here in the index.
So in the index, it's, oh, it's when,
it's reinstall edited plugin,
which probably gets called when the block loads.
(soft music)
By my files equals files, files is.
Pass to this.
(soft music)
Let's see if we reinstall edit plugin.
(soft music)
I think it's here.
Yeah, here it is.
Yeah, so init_playground eventually calls
reinstall edited plugin.
Reinstall edited plugin gets the code mode
and writes the files.
(soft music)
Let the files get updated.
(soft music)
It looks like.
(clears throat)
Yeah.
(soft music)
Use editor files probably.
(soft music)
Yeah, so the files need to be written.
Okay, I'm going too deep into this.
Would have been cool if we switched from plugin to theme
but then rewrote the code editor.
I could refresh the code editor
but I'm not quite sure where that would be.
So I'm gonna leave that off for now
and hope that somebody can help me with that bot.
What I am gonna do is go back to where I was,
which was,
was here I think.
Yeah, there we go.
So that'll give us the code editor mode.
(soft music)
So.
(laughs)
Bye Chris.
The code editor mode should probably be
below the code editor field.
I'm gonna start by fixing that.
I can just remember where that was.
(laughs)
Let me see that, yeah, there we go.
So I really have that, do I do I do I do I do?
There we go.
(soft music)
Let's take that out.
The reason I say this is because
if you switch to theme,
it shouldn't show you the transparter JS expert.
So here I'm gonna say,
(soft music)
if code editor mode plugin,
then do this.
(soft music)
I don't know if this is the right way to do this.
(soft music)
This is the way to do it.
(soft music)
Think.
(soft music)
Seems to be complaining about that.
(soft music)
Let's check on the next additional rendering.
(soft music)
Okay, so I think what I need to do here
is set up a variable,
something along the line of show,
wait, const show JSX.
There, so that'll be true or false.
Okay.
Then, this kind of thing.
(soft music)
There we go.
(soft music)
Okay, so that should work now.
So when I switch this coded item mode,
it should show the transport JSX.
Let's see.
Okay, code worked.
Okay, let's click on the block.
Okay, it's currently on theme.
Let's switch to plugin.
Yeah, that works.
Multiple files can stay like that include error log.
I think is fine, but that's kind of exactly what I want.
So I don't want the transpiling to be visible
if you switch to theme.
I probably should also set
the code of the transport JSX to false
when you change the value.
So, if value plugin,
and it's, if value equals,
then,
(soft music)
Don't need to set, I mean, that's not a battery,
it'll set both attributes at the same time
or just set once.
I'm okay with that.
Basically what I'm doing is I'm turning off
if somebody sets the coded transpiling plugin
and then size the switch to theme.
So, I think I'm okay with that.
So let's test it.
Okay, so it's currently in theme mode.
If I switch to plugin and I switch that on
and I switch back to theme,
then when I switch back to plugin, it should be off.
That's what I want.
Okay, cool.
The files thing I'm gonna figure out,
maybe I'll get someone to help me with that
before I wrap this up.
Don't think I'll need to do another livestream on it.
It would be cool if it just loads,
maybe just the style sheet with just like one,
and maybe an index template with like nothing.
That's a good possibility.
So style sheet with just the theme name
and index template with nothing,
'cause that'll work.
Yeah, that will work.
So that I'm gonna ask for some help on
because I'm not quite sure how to trigger that.
But, now if we go back to, where were we?
Not there.
Here.
So now,
we can move this code out,
because if it's switched to theme,
then this shouldn't trigger.
(laughs)
There it is, because the toggle is turning it off.
So that can go there.
And then,
we can,
now,
if we look at write plugin files,
only differences are the path
and the core.
So what I'm going to do is I'm going to create
a new component
called write coded editor files.
(soft music)
TSR.
Write code editor files.
Okay, I'm gonna add that to git.
Going to take plugin files out,
or copy, let's say plugin files, into there.
Okay, so this stays the same.
Editor file from index.
It's an editor file.
All right.
That stays the same.
This changes.
So it's activate plugin or activate theme.
(soft music)
But,
maybe if we keep write plugin files and write theme files,
and then just keep the core functionality.
Or we just leave it like it is, 'cause it works.
(laughs)
(soft music)
Let's think about this.
So write plugin files, it's got import activate plugin.
The docroot changes.
And then the activate plugin call changes.
(soft music)
Does it really need to be,
I'm only doing this twice, either on a plugin or a theme.
So I'm never gonna need to create
like another write something component.
So does it matter?
I've always been led to believe that when it comes to
do not repeat yourself,
the minute you need to repeat yourself more than twice,
that's when you should refactor the code.
(soft music)
I could then spend the time trying to keep the files,
the judge.
(sighs)
I think that's what I'm going to do,
because I think that,
leaving this like this, works.
And so I'm gonna just leave it like that.
(soft music)
(clears throat)
(soft music)
This is me trying to figure out how I can
change the files and rewrite them to the code editor.
When we toggle the...
(soft music)
So reinstall edited plugin should be reinstall edited code.
(soft music)
This is just getting the files from the attributes.
(soft music)
What do I do, Edward?
(soft music)
This is a hack.
(soft music)
If I change
(soft music)
the change
(soft music)
the files
(soft music)
to here.
(soft music)
Where is the thing that I added a second ago?
(soft music)
Yeah, coded it to mode.
(soft music)
No, it wasn't that.
Okay.
(soft music)
Zero log files.
(soft music)
Yeah.
(soft music)
I wonder if
I
sent attributes.
(soft music)
Right.
(soft music)
(clears throat)
Files.
(soft music)
Right.
(soft music)
Let me check what the attributes are.
(soft music)
Should see what's inside the attributes object.
(soft music)
Hmm.
(soft music)
Okay.
(soft music)
There you go.
So it's an array and it's contents name.
Okay.
I was array contents name.
Okay.
(soft music)
So,
if I
(soft music)
files.
(soft music)
Okay.
(soft music)
- Jax.
- Yeah.
Okay.
So it was
contents and name.
Contents.
No.
Actually we can go name contents.
It doesn't really matter.
I like,
it's beauty of
JavaScript objects.
Okay.
And then if the first one is
style CSS.
So this is if it's theme style.css.
And
it's just theme name.
(soft music)
That should work.
The other one is
templates index of HTML.
Let's just check it there.
Yeah.
I was going to leave it blank.
(soft music)
Okay.
So that is if it's a theme
and if it's a plugin.
(soft music)
Then it is
what we set up in the block chase.
(soft music)
All right.
(soft music)
That should work.
That is the right way to do it.
But it should work.
Maybe.
(laughs)
I have no idea.
But I feel like that should work.
So let's see.
Okay.
Let's go now.
I'll take the console uploader.
If that works, then I'm going to bounce
to the whole download thing.
'Cause I've got an hour left.
Okay.
Hmm.
Okay. It doesn't work 'cause it doesn't rewrite.
Obviously it doesn't re-render when the files change.
Or could we make it re-write?
(soft music)
I have no idea.
(soft music)
Hmm.
(soft music)
Okay. I'm not gonna worry about that now.
Do you want to try and see if I can,
I think the probably the easiest way to solve this
is actually just to.
Um.
(soft music)
So that should be true or false.
I'm not string.
We do control.
It's weird.
(soft music)
Type string sounds like T.
(soft music)
You're like, TypeScript is requiring the radio button
to be either true or false.
And that's why this is an issue.
So I'm not sure of myself.
I'm gonna leave it as is for now.
It's not trying to make errors.
Okay.
Let's figure out the download bit.
So where is that?
Downloads plugin.
(soft music)
This is probably gonna be a similar thing
as downloads of theme or whatever.
(soft music)
So there's the button.
I click if ref.
(soft music)
So in here, we should specify.
We could probably specify here.
We can change if theme if plugin.
And yeah, we can probably figure some things out.
So let's make this downloads it.
I don't know.
What should we call it?
Package.
(soft music)
Before we do that, let's search for.
(soft music)
Okay.
So let's call this downloads it.
Package.
Can't spell.
And we'll change this one downloads it,
plugin to downloads it, package.
And then we'll change the file name as well.
Downloads package there.
There we go.
Rename downloads it.
Package.
All right.
And then in here,
plugin path and the file name.
So if I need to import code editor.
We have coded to mode.
Possibly.
Code editor mode.
See if that exists around here somewhere.
Yeah, there it is.
Okay.
Client.
Code editor mode.
(soft music)
Maybe we should
(soft music)
set some defaults.
So defaults to plugin if it's a mode is theme
and we can set theme.
I need to be alert.
(soft music)
Okay, so defaults to plugin.
Let's change the theme.
It'll switch to theme.
And it'll download and do the thing.
And then that should work.
As far as I know.
(soft music)
Okay, that's all built correctly.
So let's test this out.
(soft music)
So currently we're in theme mode.
(soft music)
So let's refresh this.
Okay, so let's run this.
Okay, that definitely works.
I'm gonna preview this post.
No, wait.
(soft music)
I'm gonna try and download this.
Is it working?
I wonder why it's not working.
(soft music)
Did I go and break it?
(laughs)
That's not even showing any errors.
(soft music)
That worked.
Okay, well let's just see if it did the right thing.
(soft music)
Yeah, did the right thing.
Weird.
Okay, now let's do a plugin.
So let's switch this to plugin.
And then let's move that file.
Create a new file.
(soft music)
And remove the style.
And let's just fire up like the most basic plugin.
(soft music)
Okay, that should work.
(soft music)
There's the plugin.
(soft music)
That's what I want.
Okay, let's go.
Oh, there's the plugin, the PHP.
(soft music)
Okay, so.
What's interesting is that it just exposed the file.
I think that was normal.
(soft music)
I think that's what it did before
and I'll double check it now.
But that seems to be working now.
The only thing that it's not doing
is it seems to be still loading.
My theme.
It's not the end of the world, I guess.
Because I can't see myself using the same block
and switching between the two.
It's not the best experience in the world, but it's okay.
I would still like to be able to automatically,
so I feel like that's sort of dark.
Let's just go back and stuff.
I feel like that's sort of dark.
I would still like to be able to automatically
change the files.
(soft music)
I have no idea how I would do that.
(clears throat)
But I think I'm going to leave it there
because if I'm honest, that's a really nice thing to have,
but it's not the end of the world if it's not there.
I can always work around that manually.
I'm going to commit this to my branch and do some testing.
Okay.
Support or code editor.
Changed the mode, control to radio.
Control, selection.
Edit the download functionality to support
plugins and themes.
Okay.
Branches this on 351.
Code it to the support.
Oh, don't have the latest changes.
Get call.
Oh, get commit.
No idea why that wasn't committed.
What?
Oh, as the code is a word, I go as far.
No, oh, just, oh, just a reformat.
Change.
(soft music)
Okay.
Should have done this.
Before I started.
(soft music)
Okay.
Which was components playground preview index of 26.
It works.
Right now, this case on this one, it's a workload.
(soft music)
It is a hate merge conflicts.
(soft music)
There's some changes recently.
Last.
Okay, so it looks like this was it.
So I can just take this out.
(soft music)
I can take that out.
(soft music)
I think that's fine, but.
That seems to be the only problem.
(soft music)
Should have done a get pull before I started.
What a maroon.
Rest seems fine.
(soft music)
Okay, that seems fine.
So get add.
This one.
(soft music)
Okay, and the next one was write the involves.
Okay.
Looks like something weird that I left there.
(soft music)
So that's fine.
(soft music)
That's totally fine.
(soft music)
Okay.
Get add.
This one.
(soft music)
Okay.
And then get read base continue.
Okay.
Okay, that all looks good.
Version, that's right, one.
(soft music)
Okay, managed to fix my conflicts.
(soft music)
This has been updated.
Let's run through this.
So changing that, adding that, changing that,
adding that to code its word.
(soft music)
We installed its code.
Yeah, that's fine.
(soft music)
Defiles.
(soft music)
That, okay.
(soft music)
Now to test.
It's always the least fun part,
is testing the stuff out.
Gotta be done there.
Okay.
So then let's close that.
Let's refresh all of this.
Just see how to run that diff server again.
(soft music)
Okay, so that's all happy.
Let's go back to the dashboard.
Okay.
I must've done a sync at some point.
I'm glad about that.
Anyway, all good.
Okay, let's delete this.
Save this.
Let's close the auto save and then let's refresh.
And let's test.
So first test will be the default, which is plugin.
Okay.
Switch on the code editor side by side.
It's in plugin mode.
I need to, I also want to test
the transpiling JSX2Js thing,
but that's a separate conversation.
Let's do a regular content.
No, it's a filter.
(laughs)
(soft music)
Filter the content.
WPLan the content.
And then, actually, no.
(soft music)
No.
(clears throat)
Okay, so that will just be a default content filter.
So let us run that.
We will activate the live preview.
Okay, plugin works.
Should work by default.
It's got a sample page and there is hello.
And then if we preview this in a new tab,
there's the plugin.
It's a bit small because my view is very narrow.
So there's that.
Let's get the sample page.
There it says hello.
If I download, I'm going to delete those things
from my desktop quickly.
I'm also going to delete that
'cause I don't need that anymore.
Okay, let's download the plugin.
WordPress plugin, there it is.
If I extract, there's the index.php.
Okay, so that's good.
So now, let's switch this to,
let's actually delete it and refresh.
And then let's test it in theme mode.
So code editor, theme mode, transpile disappears.
Excellent.
This, I honestly don't mind if this is manual
because what I can do is I can actually
change the file that's there.
And I'm okay with that really.
It would be nice if when it switches,
it actually changes the files,
but I'm going to chat to Adam separately about that one.
Let's see if I can get some feedback from him on that one
and see if I can make that at another stage.
But I'll do that in my own time, to be honest.
I'm not going to do that in the live stream.
Maybe I'll do it in the live stream.
So there's the templates and then let's add the style.css.
You can actually load this from a GitHub URL as well
if you like, just kind of cool.
But I'm not going to do that today.
So that's there.
There's the demo theme.
There we go.
And now if we run this, it should activate the theme.
Good.
There it is.
Let's preview this in a new tab.
Right. Let's preview this in a new tab.
There it is.
Let's run it.
There it is.
And let's see if we can download it.
Hey, it worked.
Sweet.
Okay. And if we extract this,
this one actually creates the theme folder,
which I think it's because of these folders inside.
Not sure if it's a Mac thing,
but that all seems to work.
So I'm very happy at this point in time.
This is essentially the core MVP that I wanted.
I wanted it to be able to work in plug-in or theme,
load up the theme files, and it just works
so it does.
So that's where I'm going to wrap up this live stream.
And I'm going to change this to a draft.
I'm going to mark it as ready for review.
And I'm going to say,
(soft music)
(chuckles)
(soft music)
(groans)
(soft music)
Okay.
(soft music)
Okay, now I'm going to update the...
(soft music)
Testing instructions.
Check out the...
(soft music)
Check out the...
(soft music)
Branch.
Load and install the playground in site editor.
Change the code editor.
I'm going to...
Theme.
Create a style that uses an index...
No, templates.index.html block theme files.
Run the playground instance.
Hello, Aslan, welcome.
(chuckles)
The two theme files should activate
as the active theme in the preview.
Okay.
That's all I'm going to do there.
So that is...
Ah, it didn't...
It needs to be changed.
Okay.
So that's done.
I'm pretty happy that that covers what I needed to do.
So I hope that somebody is able to review and merge this
over the course of the next few weeks.
I am going away for a week next week.
So I'm hoping that by the time I come back, this is merged.
So I'm probably going to ping a few people.
But I'm very happy with that.
Yeah, we'll see how it goes.
We'll see what happens to it.
So that's going to be my bit for today, folks.
I just wanted to mention that if anybody out there
feels like being nice to me,
I noticed that my...
Let me just pause this.
My Twitch subscribers, I'm sitting on 199 followers.
So if anybody feels interested to hit follow,
do that, please,
because then I can be a nice round 200.
But yeah, I'm looking forward to seeing this getting merged.
Cynthia is also quite keen,
because Cynthia is hoping to use this for some of her
Learn WordPress theme developer learning pathway lessons.
And so am I.
So yeah, I'm quite happy with where this is, how this works.
Maybe in future I'll be able to add functionality
so that if you switch these,
it automatically switches the files,
but I'm not going to worry too much about that today.
So thank you all for joining me today.
I will hopefully see you again in about two weeks.
I don't know what I'll be live streaming on
in about two weeks, but I'll try and come up with something.
I'm going to try and do a live stream every two weeks if I can.
I do have some ideas of what I could do next,
but I haven't got them in stone yet.
But thank you all for joining me and following along.
I'll see you around.
(sniffs)