Up next we have Ryan Welcherwith the Block Developer's
Cookbook, WCA 2025 Edition.
Uh, at, uh, working at Canada.
Ryan is bringing his block developercookbook home to Canada for its Ottawa
debut, this interactive workshopwith attendees in the driver's seat.
You will vote on which recipesto explore and work through
them live with Ryan's guidance.
Each edition of the workshop growswith new content, showcase in the
latest WordPress features and APIslike the interactivity, API and the
block bindings, API, while focusing onpractical real world examples that you
can use in your projects right away.
Take away Ryan.
Thank
you.
Uh, do I need to turn this on?
Can you hear me okay?
Or this thing on?
There's a, is this thing on?
Switch on.
Hello?
Okay.
Can you hear me okay?
Good talk.
Yeah.
It's a little quiet.
It's a little quiet in the back.
Okay.
The door has to stay open.
All right.
How about.
We'll try this.
How about that?
That's better.
Okay.
'cause I have to type and talk.
Thank you for coming.
So this is the Block Developer Cookbook.
Um, this is a workshop thatI've been lucky enough to do on
every, every flagship this year.
And now the new flagship, which willbe, uh, Canada when, when Mac gets here.
Right.
Um.
Correct.
Yeah.
So we're gonna do these a little bitdifferently this time because normally
what we would do is we would go to blockdeveloper cookbook.com, you'd create an
account, we would vote on the recipesthat we're gonna work on together, and
then I will live code them and you'llwatch me do horrible typos and break
at least five builds and, and do that.
But because we're kind of on a shortertimeline today, I thought instead
of voting and chewing up some timedoing that, I'll just kind of go
through as many examples as we can.
So, um, yeah, so if you didwanna follow along at home.
Uh, at home in the audience, you, youcan check out the, the repository,
uh, right there, uh, which is the samerepository that I'm gonna be working from.
And, um, there's a localdevelopment environment in there.
If you just wanna watch me code poorlyfor 45 minutes, I welcome you to do that.
So let's take, oh, sorry.
Lemme get outta here.
So I'm, I'm just gonna switch around.
Let me know if I need to zoom this in.
So this is the Block Developer cookbook.
The site is always up, always active.
Uh, you can create an account ifyou want, and these are the recipes.
They're ordered from least amountof time to most amount of time.
It's a really, I'm really forcingthe, the cook analogy we have
number of cooks is the skill levelone is sort of like beginner ish.
Three is.
The hardest, I guess,and some ingredients.
So if you're sort of like wanting toknow more about, for example, block
variations or block bindings or the datalayer, you can kind of streamline these
to your own, your own in interest level.
So que my one question to you is, doyou want to start with the ones that
take the least amount of time and workthat way, or do you wanna work from
the most amount of time backwards?
Uh, most amount of time will probablymean we'll get one recipe done.
Um, the other way, we'll probablyget like three or four done.
So show of hands.
Smallest to largest show of hands.
Largest to smallest.
Okay.
I don't know.
That looked exactly the same to me.
So, uh, Stefan, you get to pick.
Uh, let's go with one small one and then,
oh, we're gonna throw it like that.
Okay, great.
That's great.
Okay, so we're, so I'm gonna dothe first one called preset bind
block bindings with variations.
I love this one.
It's super simple, but it is amassive time saver for those that
work with, with with clients whoare constantly messing up UI things.
And no client has ever done that.
So why, what do you want?
Okay, so each one of these recipesis broken down with an overview, and
then there's a little setup thing.
So, um, you can run, uh,a, um, an NPX script.
This is the create block package,uh, with a custom template that'll
give you all the files that you need.
So you don't, you can runthis in your own development
environment, so on and so forth.
I've already got this all set up,so I'm gonna kind of skip this part.
Um, and then we're just gonna.
I, I'm literally gonna copyand paste the code from here
and talk our way through it.
So the first thing, which one is this?
Precept bindings with variations.
Okay.
So, um, this is basicallyhow block bindings work.
So it works.
So what we want to do is we're gonna beregistering a piece of custom post meta.
So if I jump over to here and I get mycode open, is that zoomed in enough?
And I have, now I have to findthe preset block bindings.
Okay.
So in here we have.
Some very basic code.
It's all, it's, it's, it's very, um,it's all kind of pre-configured for the
stuff that you don't need to worry about.
And we're just gonna do the other things.
Hi, move this a little closer.
Yeah, sure.
You can uh, you can moveit, you can move it closer.
No, I'm just kidding.
Uh, okay, cool.
So the first thing that, that wewant to do is we're gonna add just
a, a chunk of code that's gonnaregister a piece of post meta.
This is just standard, uh, postmeta that you would register
normally within WordPress.
And all this is gonna do forus, and I'm just gonna paste it.
Into the, uh, the plugin, uh,the block registration file.
Um, in here we're justadding the knit hook.
Uh, we're gonna add a function.
We're gonna register a piece ofpost meta to the post, post type.
Gonna call it my custom data.
And this is just regular rest, API stuff,making sure that it's showing rest is
true and it's single and the T of string.
And we have a some off callback stuff.
This is not really the point ofwhat we're doing today, but we
need this in order to move forward.
So, um, my, my local and developmentenvironment is, um, studio, WordPress
Studio, which is, uh, great.
I love it.
I use it all the time.
Um, and I'm going to create a new postin here called, uh, preset Bindings.
Bindings, and let's see.
Did I, you know what I forgot to do, andI will forget to do this every single
time, is, uh, probably enable the plugin.
So let's, let's take a look.
Each one of these blocks isin its own plugin, so, uh,
that's not the right button.
So we have all of these.
I'm going to deactivateeverything 'cause clearly I used
this last time I ran this, um,
where is it?
Precept block bin.
So, act we'll activate that.
We'll come back post.
Is that zoomed in enough?
Just let me just yell if it's notzoomed in enough and I will zoom
it in enough so we should have
pre, uh,
build
it.
Probably not.
Let's look, uh, the build's in there.
Let's just see.
Is it not?
What's that?
Yep.
Probably.
It's probably it.
Hold on.
Yeah.
Just did it works on my machine.
This is probably.
What it is.
Let's just see.
So, oh, wait, wait, wait.
There, there's no block.
This is a binding, Ryan.
Let's be smart.
Um, so what this is doing is this isjust registering the post meta so it's
registered in there behind the scenes.
So let's, let's just take a look atthe second step right here, which is
we're gonna register a block variation.
So a block variation isexactly what it sounds like.
It's a variation of an existing blockwhere you can preset attributes and
that becomes super important with whatwe're trying to do with block bindings.
So, um, let me, let me just show youhow Block Bindings work with this.
So if I put a paragraph tag inhere, which is what this is,
this should be a paragraph.
I'm not gonna ever spell that right.
We're gonna attributes.
We're gonna click on content, we'regonna click on, uh, content again,
and you see what pops up thereif that's not zoomed in enough.
So this is that post metathat we just registered.
So you can do this outta the box.
With core, any post meta that'sbeen registered and is exposed to
the rest API is available to bebound to a certain subset of blocks.
Those blocks being the paragraph block.
Uh, the heading block.
Image block and uh, button block.
So we, we can do this ev every time.
And now I, I've done that andyou can see that this is actually
sh uh, showing the, the defaultvalue of that, that rest thing.
And the other thing is, I thinkI can, I can update this as well.
So if I save this now and I switchover to preferences, and I don't
know why there's not a command palletthing for this, but there should be,
I'm gonna pop open, uh.
So you see this is the custommeta that I just registered.
Now I'm getting that data.
So this is two way syncing, so itretrieves it and it writes to it.
Um, and just a side note here, neverleave this open when you're trying to
write meta using the, uh, Gutenberg.
'cause it'll get it, it'lloverwrite itself and it won't work.
So we're gonna turn this back off.
So that is really how block bindings work.
But the problem that you, thatyou're always going to run into.
Not always, but that you may runinto is this step of having to go to
attributes and, and, and choose thecorrect per uh, um, attribute that
the particular block, uh, supports.
And then choosing the rethe correct post meta.
And I'm saying this from the pointof view of an editor or a client
that maybe doesn't understand.
What post meta is, and it doesn'tknow why this is called content and
why it's got underscores in it andwhat that actually re represents.
So what we wanna do is takethat guesswork away and that's
where the variations come in.
So if we jump back over to theright tab, right here, we're gonna
just register this block variation.
I'll take us through all the steps, and ifI'm going too quickly, it's because I've
had too much coffee, but just let me know.
Okay, so Register blockvariation is pulled in from
the WordPress Blocks package.
It is, uh, just a JavaScript function.
We're gonna pass the name of the blockthat we want to create a variation
of, and then we're gonna give it itsown sort of like machine friendly
name, which I'm calling show my data,but you can call it where we want,
followed by a title, which is whatwe'll show up in the, the block editor.
And then a description again, whichis what shows up in the block editor.
And then we have a, a Scope.
So the scope is gonna be, it can be addedby the inserter or it can be transformed
into this block from another block.
Now, right now this isn't,this isn't gonna do anything.
Um, well, it will, but it won't work.
And I'll show you what I mean bythat cryptic sentence in a second.
So we've registered this and if we lookinside of here, we should have a show.
We gotta build it.
You do have to build it.
Who said that?
Oh,
do I get Yeah, you do.
Woohoo.
I forgot to mention this.
I have WordPress really greatwordpress.com bags for anybody that
has a good question, or, or, or helpsor saves my, uh, my presentation.
So I'm gonna CD into plugins, andthis is, what is this thing preset.
All right.
MPM start.
I'm just gonna run that in the background.
Okay.
And we'll just rebuild this.
Um, and we should have ashow, show, show my data.
So, so you see this block here?
This is my custom variation.
Now it has a paragraph icon.
Now if I insert it, watch what happens.
Uh, nothing.
And that's, that's becauseit doesn't know that this is
supposed to be a variation, right.
The way the variations workis they are under the hood,
they're whatever block that is.
But the way that you differentiatebetween them is done in this next
step that I'm gonna show you.
So this is very real, that you mightcreate this variation, you might
insert that block, but it's alwaysgonna show up as a paragraph block.
'cause there's no way for the block editorto know, oh, this is your variation.
And not just the standard oldparagraph block or whatever block
you're creating the the variation of.
So that's, that I think isin this next step, right?
So we're gonna add.
Some attributes to our variation.
Now, if this is looking a lot likethe way you register a block, like in
block JSON, it's because it is, um,variations just can preset certain things.
So this is a big, long.
Piece of data, but I'm gonna showyou why I, I, I use this right now.
If I were to select it, my block here andcome over to code editor, you see this
big chunk of ridiculousness right here.
This is that same thing.
So what this is setting, it's setting.
So if you're not familiar with what we'relooking at, first of all, this is how
a block is saved into the post content.
Okay?
And so anytime there are customattributes or styles or anything
like that, they're saved alongwith this HTML comment as as JSON.
So it's big J SSON object.
So what this is actually definingis an attribute called metadata.
Inside of it is a bindings property.
Inside of it is a content insideof it is source and it's got
some OO other things in there.
And that is the code representationof that binding that we built.
Right.
So what we wanna do is we wannaput that into our, our variation,
and that's what this is doing here.
So we see attributes, that metadata,that binding, that content, that
source, and then ARGs, and thenthe key, and then blah, blah, blah.
Right?
So I'll, I'll walk usthrough this a little bit.
Sorry, the, the, uh, coffee'skicking in and I'm like seeing
sound and hearing colors.
So the, the content isthe, the bound attribute.
So because this is a paragraph block, itstores the information that you type into
it, into an attribute behind the scenes.
Content.
So then we're telling it that thesource is coming from Core Forward
slash Post Meta, which is, right nowit's the only predefined source that
Core provides it's access to post meta.
And then the ARGs are the key of the postmeta, which is our, my custom data thing.
So we're just presetting all of that.
So if I save this now,um, switch back over here.
And refresh because apparently that'show you do it according to Mike.
Uh, I should be able to insertthis, but I think it probably, it's
probably not, if I remember right.
I don't think it's goingto, um, look right.
Okay.
So there is the thing I justinstalled or inserted, but look
over in the right hand side andthe block inspector, what does it.
Paragraph block, but thisisn't a paragraph block.
This is to show my data block.
So the next part is goingto help us with that.
So we've set this up.
So the last thing that we have toadd is this is active property.
And the is active propertyis super important.
What this does is it checks to see isif a paragraph block is inserted and
it has whatever is in this, like ifthis value matches this value, it's
like, oh, well that's this block.
So now that this is the active variation.
Does that make sense theway I'm explaining that?
So if the value of metadata bindingscontent are ARGs key matches, metadata
binding content, ARGs key, this valuematches, whatever this is, it's like, oh,
that's a, that's a show my data block.
So let's, let's test thattheory, save this refresh.
Now let's see if I click on.
That.
There we go.
So now we have this.
Now it's actually sh uh, show my data.
So this, that is activeis extremely important.
The, the, uh, emojis are not, um,
first paragraph.
Now show my data.
Yes.
Because the attributesmatch the, is active, right?
So I can come in here and I can saylike, so the default block that gets
inserted is always a paragraph block.
So I can come in here and say this, thisempty block, I'm gonna pick my content.
Click on content.
I'm gonna make it my custom data.
It's gonna do this.
And look now, now itturned it in into that.
So we just finished the first recipe.
Any questions on that?
That was a super fast one.
So, and questions?
Questions in the back.
Content
doesn't match anymore.
Will report back tothe paragraph or still?
Sorry, I missed the first part.
So
if you start tying it up, thecontent of your post meta Yep.
Is it going to revert to aparagraph or No, just update it.
It has
nothing to do with the, withthe value of, of, of the meta.
It's, it's the in, in, in, in,in the case that we're doing
here, it's the key that matters.
So when I'm bound the key ofcustom data to this block,
that's what makes it the show.
My data block.
Once it connects, it doesn't connect.
It doesn't connect unlessyou change the key.
Um, which you'd have to come into, to the UI and disable it.
Um, but the value stayssort of outside of all that.
Cool.
Anyone else?
Good?
Yes.
So I can buy into anythingI set up and choose.
Um, that's it.
That's a, that's a, um, no, but yes,there are, there are four blocks.
Sorry.
Where would you use, you would usethis if you want to, like, this
is a, this is a perfect example.
So let's say that you're usingsome sort of, uh, a custom field.
Plugin that manages fields andyou wanted to show a bunch of
stuff inside of a query loop.
You could create a bunch of, of bi,like let's have an au example of
like an author bio or, you know, soyou could have a group of authors
that are stored in post types.
This is a really contrived example, andall this post matter that represents,
you know, years they've been whatever.
Like, you know, they're, they'rebyline, they date of birth, I
don't know, whatever you want.
That's all stored as post meta.
You could create a number ofbindings in your query loop template
that would display all of that.
So that, that's a really greatexample, but you can use it
to, for basically anything.
Um.
Sorry, let me, let me re retract thatand say you can use it for any, any
core meta, like any post meta that'sbeen exposed to the rest, A API.
Now there is a way to registeryour own custom sources and that's
where this gets really interesting.
'cause you can create a customsource that, that provides any,
like any data that, that you want.
Um, and then you can bind it toone of the four blocks that's
that currently support bindings.
If you're on a blog post,would you have seen under
attributes category publish date?
Author you could, yeah.
Not exposed.
Well, if it's post meta, it's available.
Okay.
So it's not about the values,but it it, it's about the keys.
Um, there is a recipe in here whichdovetails nicely with this one, where
I create a custom binding source.
So, so you remember where it says,and sorry, it, this is blurry,
but there's this like source.
Thing.
Well, this is the core, post meta is aprebuilt one, but we can make our own.
And I did one where I bound, uh, uh, uh,the post excerpt to a paragraph block.
And, but I had to create thatcustom, uh, uh, binding source.
And then once you do that,you can get, you can do really
interesting things with that.
Like anything you want,really pull anything outta the
database, pull it from an A API.
Super interesting stuff.
Yes.
If you basically took this andduplicated it and just changed the,
uh, the key to a different mm-hmm.
Value, would the, isactive have to be changed?
It
would.
That's very astute of you.
Yes, it would because, um, youwould need to have, um, yeah.
You, you would need to addanother way of doing that.
Um, this is a very simple example.
I, I, I have a plugin.
That's a, a, a query loop, block,a variation that I, I'm adding a
namespace, so that's a way of doing it.
It, it won't affect anything,but it checks to see is the
namespace and it's, and like aclass name, what I want it to be.
But what's really cool about is activeis that you can do multiple things.
So you could say like, if the, if the, Idon't know, whatever, if the, uh, source.
Also matched, uh, you can dothis sort of thing, right?
So it checks for multiple things.
That's not gonna be right.
But if I go, what is it?
Um, like this?
So if those two things are, are thesame, then this will be, um, active.
And then, and that way if you had asecond source, even if you, if you had
common key names between the two, likesay you had postdate and postdate.
Why?
I dunno.
But they were from two,from two different sources.
Um, you could still match the,but the source is different.
Right.
So as long as whatever it is is different,you're differentiating in some way that
is active will, it might need more thingsto make it the thing the same, you know?
Sorry, rambling on.
Cool.
Okay.
Well, that was the first one.
And so what's, what's, what's next?
So now we, we want to doa really complicated one.
Yeah.
Is that what we want?
All right.
Okay.
The most con I have two.
These are the most complicated ones.
Uh, the interactive, API galleryslider is pretty, is pretty fun.
Yeah.
All right.
So, uh, alright, let's do it.
So, we're probably not gonna be able toeven finish it, but we'll do our best.
So let's get into here.
Okay.
And I will say this, you can come backthis at any time on your own time.
Do any of these and atme if you hate them.
So, uh, so what this is gonna do iswe're going, okay, so there's a lot.
First of all, who knows whatthe interactivity API is.
Okay.
Who does not know and wants meto explain it briefly and I'm not
gonna point and laugh, I promise.
Okay, cool.
So the interactivity API is basically afront end framework for WordPress that
allows you to create interactivity.
Um, via an API.
That's so,
and, uh, now we're moving on.
No, it's, it, it is, it's pre-ACT based.
You don't need, need to know that,but it's, it's very, very cool.
Like, so if you have a React application,for example, like the way we used
to do it is we would render a div,we'd inject that whole application
into this, the diviv, and thenlike, it's completely not editable.
You know, it's just like a, it's like whatFlash was, everyone here remembers Flash.
You just put it on the page and it wasself-contained and yeah, there you go.
Um, so with the interactivity, AAPI, that allows us to, um, create
blocks that have this, the, these,these stores attached to them.
So if I have blocks here, here and hereand here, they can all talk to each other.
They can pass data around to each other.
What it allows us to do iscreate really complicated, um.
Interfaces on the frontend that are composable.
So if, if your client says, oh, I loveeverything, but the, that button block
should be at the bottom of the page.
Instead of having to recompile your wholeapplication and redeploy, you just go
into the site editor and move it to thebottom of the page and it all just works.
So it's really, really powerful.
It's for things like, um,like, like button clicks and,
and, you know, shopping cart.
Yeah, shopping.
Yeah.
Uh, WooCommerce has somereally interesting things
that they're doing with it.
Like the whole shopping cartis, is based in interactivity.
API it's very cool.
We're not doing any of that today.
We're building a, a gallery slider.
Excuse me.
Okay.
So the first thing that we haveto do is we have to tell our
WordPress that our block is goingto be using the interactivity.
Well, actually the first thing Ihave to do is find the source code.
There you go.
So block json.
It's right here.
Um, this is the configurationfile for our block.
If you're not familiar with it, thinkof it as the, there is a supports.
It's not in there, butI'll show you in a second.
There's a supports attribute,or sorry, property in here.
Right.
And in, in here it is how we opt intoor opt, opt out of even, uh, certain
functionality for, for the block.
Like for example, if you only wantedto have one instance of this block
in any piece of content, you couldsay multiple, uh, instead to false
without that leading colon like that.
So this would mean once you've insertedthis block, it'd be grayed out inside
the block, editor inside the block.
In inserter.
That's just one of many thingsthat, that we can do here.
So what we're gonna do is we'regonna add some supports to this.
I'm just gonna copy and paste theseand we'll drop 'em in these, Steve.
Um, so the first oneis the most important.
This one here says, Hey, this block is.
Use the interactivity mode interactivity.
API, right?
The second two are justhow we align things.
I'm just adding that 'cause it'sfor, it's for the gallery, uh, part.
Oh.
The next thing I have to do is CD intogallery slider and start the bill process.
We'll do that.
Okay.
So that's the first thing.
Okay.
So next.
We need to tell the word the scriptspackage, which is our build process.
Um, where to find.
A specific file, the v js file, whichis what's gonna contain all of our
information about the store and allour actions and, and, and things.
And we'll talk aboutthat stuff in a second.
But everything that has to dowith this, um, in, in our activity
that we're going to build, so wehave to do this via a special,
uh, key called View Script module.
Um, if you're familiar with VJS, um,with blocks, there is a view script.
Property.
And then there's alsothis view script module.
It's because interactivity mode use,sorry, the interactivity, API builds the
scripts out as an ES module, which is adifferent way than we've been building
stuff in WordPress for a long time.
Um, so just trust me that that'swhat you have to do because once you
do this, you won't have to worry.
The, the only other time where thewhole module thing becomes a problem
is when you wanna use other packages.
And I'll show you a workaround for that.
Okay.
So we're gonna add this.
Two R Block js, ON.
So right here, down at thebottom, we're gonna add that.
So now the block, JSON, part ofwhat it does is tell the block
registration process, um, whatfiles do, what does this block need.
So we're gonna like, so the editorscript is the JS file that registers the
block and candles, what it looks like inthe block editor and things like that.
Uh, style is what it sounds like.
Just some editor styles.
We have style, which isfor front and backend.
We have render becausethis is a dynamic block.
We're gonna be processing it,rendering it in PHP on the front end.
And then we, now we have viewscript module, which is the, the ES
module that will be loaded on thefront end that contains all of our
store in interactivity via the API.
I'm gonna, I'm gonna do thatjoke as many times as I can.
Okay?
The next thing you have to do is modifythe build processes a little bit.
We have to pass this, thisexperimental modules flag.
Um.
It says experimental.
It is, I guess, sort ofstill experimental, but we're
gonna do that in our package.
JSO, not, not the lock, the packageJSO we're, so we're gonna get rid
of the ones that are in there.
And we're just gonna replace these, payno attention to the, uh, form the, the
block manifest thing that was in there.
Okay?
So all this is doing is just gonnachange the way that, that the, the
scripts package builds out this pieceof this, uh, piece of JavaScript.
So, because I'm actually runningit, I have to stop it here.
Anyways,
I'm gonna start.
So, so I believe you sawthat, but when I ran it.
Not there.
Uh, anyways, it doesn't matter.
It ran the script that Itold it to, to, to run.
Okay.
So now, now we're sort of, we'reset up, we're building, everything's
sort of the way it's supposed to be.
So we're gonna prepare, we're gonnaprepare the render, do PHP, which is
what handles the front end of this block.
Now this is a dynamic block.
This isn't, has nothing to dowith anor for the most part.
There are some things inthere that, anyways, but, um.
Any dynamic block usesa render.dot php file.
So I'm just gonna grab this and, oh wait,I think it's already done like that.
So we have this stuff in here.
Um, it doesn't look like that.
Oh, yeah.
Add interactive data.
Yeah.
I need to add that,that doesn't seem right.
No, it's not right.
We're gonna leave that.
So this is what it, itit should look like.
Uh, I will insert a block here.
We're gonna add a new one of these.
Nope.
Not that.
Nothing like a live demo.
That's fine.
Typos,
gallery slide.
So gallery, what is this thing?
And again, what do theyname the stupid thing?
Oh, activated there.
Who said that?
Was that you?
All right?
Yep.
There you go.
You got it.
Thank you.
All right, here you go.
There we go.
It's funny 'cause like two thirdsof my workshops are like people
solving the problems for 'em, for me.
If you've ever seen my, one of mylive streams, it's exactly the same.
So, uh, okay, so where's Gallery Slider?
Gallery Slider is the site.
There we go.
There we go back into posts.
All right, so if I do this now, oops.
Gallery slider.
All right, great.
Yay.
Thank you.
That's the end of my workshop.
Thanks for coming.
That's great.
Yeah.
Awesome.
Okay, so we have nothing going on here.
This is just sort of the,the, the framework, right?
That's, that's what we're doing there.
Okay, so now let's.
Jump back over to here.
So it should look like this.
That's not actually correct 'causethat's something we do later.
But, um, the next thing that we have todo is we have to tell render dot php.
We have to add thesethings called directives.
So the interactivity, API has a concept.
Of directives, if you're familiarwith like alpine js or some other,
uh, frameworks, it's similar.
And so what these do is they, theyare parsed by the block parser and,
and things, and, and magic happens.
I'm just gonna leave itat that 'cause it's magic.
So what we want to do here is we'regoing to add this attribute to
our, um, to our wrapper class here.
Right.
I'm just gonna add it there.
And this is going tosay, okay, that this is.
This is an interactive block andthe store name that's associated
with this is going to be closing.
I have an extra closing.
Do I?
Oh, I gotta turn this stupidcopilot off every single time.
Snooze.
There we go.
It'll come back in five minutes.
I'll be like, what?
Okay, so this won't do anything.
Like, we won't see any, actually, willwe see anything on, on, on the front end?
Let's take a look.
I don't think we actually will.
Not yet.
'cause we're not doing anything.
But let's just have a look here.
Oh, geez.
Um, so in here.
Let's see if I can just inspectthat and get us in the right spot.
So, okay, so that's allwe're seeing in here.
That's not surprising.
Let's, uh, go back.
Okay, next step.
So all this is really saying islike, this is an interactive block.
So now let's do some stuff.
So now we want define a store.
So in our source, VJ.
S. Um, we're gonna open that up.
So Source, VJS.
So, so what, what we have in hereis a very typical way that that
stores are, are, are defined.
The first thing that they we're doingis we're retrieving the store function
from the WordPress interactivity package.
We're defining a store, we'recalling it gallery slider, and then.
This is convention.
It's not like it, it will notbreak if you do it a different way.
But the convention isto have three objects.
The first is called state, if you'refamiliar with data stores, react,
redox, any of that sort of stuff.
It's the current, like the shapeof the application, the state
of the application or the, yeah.
And then we have actions.
Actions are functions thatare usually user initiate it.
So an on click, um, likeon scroll, stuff like that.
Those would go in actions.
And then we have callbacks.
Which are basically actions, butthey're like not initiated by the user.
And there's, there's not really a reasonfor the differentiation there other than
just like a mental model of this wouldbe something like unload or like, um,
like if you wanted to watch something.
I'm sort of listeners Yeah.
Some sort of listeners.
Something that's not that that, thatthe user doesn't know anything about.
It's just a way of keepingthings organized and this is how
you'll see most of the examples.
Out there in the world.
So this, this little piece of code downhere is just a really fun debugging
thing because there's a proxy that'swrapped around the objects in the store.
So you, anyways, you justhave to, yeah, I'll show you.
It's, it's this weird JavaScripts codethat somebody in my stream gave me.
'cause they're smarter than I am because.
All right, so I talked aboutstate actions and callbacks,
but we wanna talk about that.
I do wanna talk aboutstate versus context.
So there's two, um, there's twovery important concepts here.
So especially in, in the interactivity,API, so the state is the state
of the block, and the state isshared across all instances.
So, um, you don't want tohave two gallery blocks.
Moving the, the, the likegoing on to the next image.
When you click on the left one, youwant the left one's image to move.
You don't want the right one.
But, so if we were to handle that bya state, that state is changed across
all instances of the store, whereascontext is specific to the instance.
That make sense?
Yeah.
Okay.
So this is an example here, butif I were to do this on, um.
Should I, should I show that?
Maybe I, maybe I'll skip that for now.
How much time do we have?
Two 20.
Okay.
Um, so it, so this is a functionthat will be called, so if we were
to call this and we have a pieceof state called Current slide.
When I change this, every instanceof this block will get its
current slide number change, andthat's not what we want at all.
Right?
So that's, that's, it's an importantconcept to understand and it makes
more sense once you kind of screw itup once and then realize and then come
back, which is what I do all the time.
Okay.
So that's, we're gonnado some context stuff.
Um, we're gonna add in our PHP,we're gonna generate, uh, PHP,
we're gonna generate an array of.
Items that will, that are slides.
So the number of slides that this,this gallery contains the current
slide it's on and the total, oh, sorry.
This is a reference to each slide.
This is the total number ofslides and the current slide.
So we're gonna, we're gonna just generatethat in PHP and then later on, uh oh,
that's where this is supposed to go.
Oh, my, my blurring is all messed up here.
I apologize.
I'll grab this.
So we use this, this function.
It's called here, right here.
And try to get this working properly.
Oops.
Okay, so this interactivity data WPcontext is really, it's a mouthful.
What it does is it, it createscontext for this particular block.
So the way context works is, um, any,so we put it on the outer wrapper
because any inner blocks inheritthat context or any inner elements.
Inherit that context from it sowe can use that anywhere else.
Right.
Um, so if we were to refreshthis last time, I, I, I did
this, here's a funny story.
Last time I, I did this,the function name was wrong.
And when I refreshed thepage, I got a fatal error.
And then someone in the audiencewas like, the function name is
wrong and told me what it was.
And then we, we, we were able to move on.
'cause I forgot.
So now it didn't, didn'tbreak, which is great.
So now if we look at here, we have this.
Um, attribute down here.
Sorry.
Can you see there's a data WP,uh, context at attribute that
contains all that information.
So the default state of our, orsorry, context of our, of our block.
Can you see that in the back?
Do you want me to Yeah.
You good?
Okay.
So this is just setting up, um, the,the sort of the default values, right?
So what, so now we're gonna set up someactions to change the active slide.
So in, uh, our, uh, JavaScript,we're gonna create two functions.
I'm going back over here.
Oh, I better, you know what?
I better save that and refresh.
I just in case.
Okay.
For a guy that wrote all thiscode, I'm really worried it's not
gonna break or it's not gonna work.
Uh, okay.
So then in our actions, we'regonna add two functions.
This, this is gonna becalled previous slide.
And it's gonna be called next slide.
So that won't do anything in and of, ofitself because we have to bind something
in our application to these functions.
And that's where a, uh,oh, am I adding this now?
I don't know what I've donehere, but all my, all my blurs
are all messed up on this one.
I have to go back in here and, andlook this, but what we're gonna
do is we're gonna add another, uh.
Attribute, sorry, directive.
And we're gonna add it to the button.
So we're gonna add it to this button, theprevious one, and we're also gonna add it.
I just, I just snoozed you.
What's your deal?
So what this is, so the way thatdirectives work are, some of them
are really straightforward in thesense of like, it's like, like a
data dash, WP dash interactive.
That's just what it is.
So the data, it's alwaysgonna start with data.
'cause this is a, an HTML data attribute,and then it's gonna be followed by W
by wp, and then this will be what thething is that you're trying to do.
Now, some of these.
Like the, the on, except whenI think of, like, I like to
think of it as a parameter.
Let me, uh, scroll thatup so you guys can see it.
So this is like an on event.
So when something happens, um, we, wewe're, we're gonna respond to it, but
we need to know what we're waiting for.
In, in this case, it's a click.
So it's on click, it couldbe on scroll on, blur.
Any regular HTML um, sort ofevent like that will work, right?
So what we're doing is on clickwe're, we're going to call a. A, um,
one of our actions, and we do thatby accessing the actions directly.
We say, I'm gonna, sorry, I'm going to dothis so it's a little bit easier to read.
Okay.
So what this is saying is onclick, we're gonna run the actions
previous slide function, andwe're gonna do the same thing.
On here, would you mind just,uh, closing that door for me?
Thanks, man.
Appreciate it.
And in this one we're gonna do next slide.
All right.
Okay, so just check to make sure.
So we got previous slide and next slide.
So this, this is justgonna console log stuff.
So we've built it, we gonna refreshit, we're gonna hit console, and then
if there is a God in heaven it works.
There we go.
So, yay.
Five minutes.
Oh my God.
Okay.
Okay, so that's cool.
All right.
I'm gonna pick up thepace a little bit here.
I'm gonna start, uh, stop rambling.
Okay.
So the next part is weare gonna find the thing.
Okay.
So what I'm gonna do, I'm gonnajust gonna paste this stuff in
and I'm going to explain it,
uh, okay.
We're just gonna pastethis in, explain it.
So what I'm doing here is I'm pulling,get context from the interactivity.
A API.
This is just a way ofgetting the current context.
From our block.
Remember the stuff that we definedearlier, it's gonna retrieve that.
I'm holding it in a variablecalled CTX call wherever you want.
And then all I'm doing is taking thecurrent slide variable that is defined
over here and I'm incrementing it.
Okay?
So that's all that's doing.
Now I can demo that for you orwe can keep moving so you can
see this thing actually work.
Okay, Cole, I figured everyone in theroom would, would figure that out.
Um, okay.
Okay.
And so the next thing that I, I'm, I'mgoing to do is we're going to, uh, bind.
We're gonna use another, uh, directive onthe slider container, which is right here.
And what it's gonna do is it's goingto say we're, it's another one of those
like directives with a, with a parameter.
So we're gonna say style.
So we're gonna bind the transform likethe, the style, the style attribute
with the transform See CS selector rule.
And we're gonna bind that to afunction called state current
pause, which is not defined yet.
So I'm gonna grab it, put it in.
And talk about this in a second.
I apologize for how fast I'm havingto go now, but, so this is what's
called a JavaScript getter function.
And all, all this is gonna dois when you call it state dot
current pause, it's gonna justreturn something for you, right?
So that's what the getthe get keyword means.
So what this is gonna do is thisis gonna get the current contact.
We're gonna get the current slide.
We're gonna translate x the currentslide times a hundred percent,
and it's gonna move things around.
And in order to show that, I'm gonnaneed to put a cover block in here.
Yay.
And then we'll put another one in.
Uh,
where's the cover block?
Cover?
Block Cover block might just,I just put a cover block
inside a cover block, didn't I?
Yeah.
Oh, dumb.
Okay.
Um,
I'm moving too fast.
I can't do it.
Uh, okay.
And we're gonna just, uh,how do I change this now?
Overlay.
We're gonna pick that color.
No, God.
Get outta here.
Okay.
Yay.
Okay.
Test it there.
Okay, so if we save this now
gallery slider
you.
Of course it's not in the gallery.
Slider.
Who, who said that?
Me.
You.
He's already got, oh,you already got a bag?
Okay.
Oh, okay.
So now if we have this, we shouldsee we've got our little gallery
sliders in here and see it's moving.
Is that still not inside of there?
What's going on here?
Weird anyways, so you can seethe translate is, is happening.
I think I probably screwedsomething up 'cause I'm trying
to go a bit too fast here.
You have some undefined,
you have undefined stuff.
Whatcha talking about?
Oh CTX current?
Oh, you know why?
I'll tell you what current slide isactually spelled with a T in real life.
So if we look at this.
Uh, so you can see we have the currentslide, so that the translate is doing
its thing right and moving it along.
Uh, okay, cool.
And, okay, so, um,
okay, so there's a, how muchtime do I have left, Sean?
Do I have, I'm trying to be,how much time do I have left?
One minute.
Show the rest,
then we're done.
There we go.
So I can, maybe I'll just talk to it.
Does that make sense?
Yeah, yeah, yeah.
So I, yeah, I, it's burned,it's badly, badly burned.
Um, so what I'm doing inhere, so the what you.
The takeaway that I want you to haveis an understanding of how directives
work, uh, because this is how you connectyour store to your, to your markup.
Now, behind the scenes, all ofthose directives trigger some really
cool stuff with the inter, sorry,the H-T-M-L-A-A-P-I tag processor.
Yeah.
And it's really, reallycool stuff you can add.
Um, it adds all of these things.
Anyways, that's not very helpful,
but basically.
We, you, you, you, uh, I, I, I don'tknow how to go through this in a minute.
So, let's see.
So we, there's some functionality that,that, that we've setting up around, uh,
being able to determine whether or notthere is a, uh, a previous or next slide,
and then we're binding that to a disabled.
Attribute, um, which makes sense.
Uh, we have a total slides thing inhere, so you can actually show zero of x
or one of what, 10 or, or, or whatever.
Uh, we're actually, we we're having,we're creating, um, this is a callback
and what this does is on each slide.
It calls itself and it, it adds, its,it adds itself as a reference to,
to all the slides that are known.
And then it actually, thisis just some funky stuff for
like re like removing itself.
Like we're never gonna be removing this inreal time, but, but that's what that does.
Um, and then in the interactivity,API, what I'm doing is I am.
Filtering the render block.
Um, so there's a, there's a renderblock filter that you can use for all
blocks or for in individual blocks bypassing the name of the block here.
And what this is doing is, this ischecking to see is the block a block
cover an image or a media and text block?
And if it is, we're adding some.
Um, that knit method, or sorry, that knitfunction that, that I was talking about.
So when the block is initialized,when that code is actually
run, that callback gets run.
It adds itself to thelist in, in the array.
So we have a, a sense ofhow long the array is.
Um, this is actually redundant,um, because we don't, this is
because this is a child of.
The outer context stuff.
We don't need to do that.
But this is a really great example ofthe tag processor, which is such a,
like doing this with RegX would requirean entire, you know, team of missing
a method.
What's that?
I said sometimes you still do withthat when it's missing a method.
Yeah, it's a few things still.
From the HTML tag crossing.
Yeah, yeah, there is.
But it's really good for removingand adding attributes, adding
classes, things like that.
It's really, really good.
There's a extension for this orlike, I guess it's more of a, uh,
another flavor of it where we canlike insert and remove like actual
nodes of html, which is really cool.
So knows
what tag it is and stuff.
Yeah, so like it, this ischecking the next tag in.
So for this next tag, I'm gonnaget all the, the list of classes.
For each class, I'm gonna checkto see is the class on that node,
uh, in one of, in this list.
And if it is, it does something.
If it doesn't, it justcontinues on onto the next one.
Uh, yes.
You were talking about how theWP Interactive is redundant
when it's a child code of Yes.
You know, the thing, so I, I haven't,you know, be building something
discovered that, you know, thelogs were like spitting out like,
Hey, you're missing all this stuff.
I said, what is this?
Like, and figured out that,yeah, you have to kind of put it,
yeah.
So I don't know if there's any, uh,
is that, sorry, so you're saying youdidn't do this and it was yelling at you?
Yeah, the child block,
if you don't put that in theactivity in the child block mm-hmm.
It still, it sort of triggers errors.
Interesting.
Okay.
I'd like to see that, because in myexperience, you don't need to do that
because it, it should inherit it.
But there's been, there'sbeen some changes to the
API since I built this part.
So there, so that's interesting to know.
I mean, it doesn't hurt.
Right.
So, so just put it in.
Um, but it's, uh, but yeah.
Um, I don't think, I, I don't know.
Do I have time for questions?
Yeah, yeah.
Sounds like Sure.
Why not?
Try.
No, it's like we got five minutes.
Five minutes?
Okay.
Just waiting to do a drop.
Two 30.
Okay.
Cool.
Does anyone have questions?
Because if anyone has questions,I have a couple bags remaining.
If, if anybody wants or if you justwant a bag, you can have a bag.
No, you, you know.
Oh yes.
There we go.
Bring in my, here.
Do you know if, uh, the interactivityAPI is ever gonna get like a
standard if, uh, like what wehave with Alpine already could do?
Oh, interesting.
I don't know off, off the top of my head.
I do know that there's some, there's,there's a lot of directives that I'm
not even remotely covering in here.
There's, there's directivesthat allow, allow you to loop.
I think there might be someconditionals that they're working on.
Um, I have to look back at that though.
Um, it's still a fairly new aAPI, um, but it's with what we can
do now, it's extremely powerful.
Um, but that's an interesting question.
I'll, I'll, I'll, I'll, I'lldefinitely find that out and
I can follow up with you want.
You're
saying you can import packages and stuff.
Oh,
right.
Yes.
Okay.
So the importing of packages.
So, because I don't think I'm,because when you're using, I'm
just gonna throw that on the floor.
Um, because this is building asES modules, every package that
you import to, it has to alsosupport ES module bundling, right?
So if you were to dosomething like, uh, import.
API fetch, which I think is just,I, I don't know if the word is.
Yeah, sure.
I think it's just that, um,this'll fail and it'll actually
tell you, Hey, you can't do that.
That's, that's, uh, that's fromnot equals This'll the build won't,
won't even run, I don't think.
Uh oh.
You have to use it.
So what you do is in WordPress.
We have, uh, a, the a WP Global thatsits, uh, on the window object, and
that's on the front end and the back end,you have to queue it for the front end.
So what you'd need to do is access itlike, um, you'd have to say, uh, cons to
API fetch equals wp not web kit, WP dot,uh, I think it's whatever it is, right?
API fetch, and then youwould access it that way.
Now the downside of this is that you haveto actually also in queue this manually.
Um, so one thing that you could doin this particular case is in the um.
I didn't do it here because we didn't havetime, but in inside of this callback, uh,
here, you can actually just run like in Qscript and the name of that script because
it needs to be part of the dependenciesthat this, um, that the script relies on.
And if you're on the front end, theAPI, uh, fetch package is not like in
queued, automatically in the front end.
So you have to get that in queued,but that's the way that you would, you
would interact with any of the otherclass, any other packages that WordPress
supports without breaking your build.
Does that make sense?
Mm-hmm.
Yeah.
All right.
That's it.
Oh, sorry.
You have a question?
Yes.
Is this stable enough touse in production right now?
Absolutely.
100%. Yep.
I, there are some really, reallycool things being done with it.
Um, it's, yeah, it's very, very cool.
Um, p Research is doingsome amazing things on it.
The WooCommerce team is doing, likeall their checkout stuff is, is all
built and it's really, really powerful.
Um, and it's only gonna get better.
Um, yeah, there's some, if I had anhour more, I could tell you all kinds
of fun, really cool things about it.
But, uh, yeah, absolutely use it.
Um, and you have a bag when you wanna,if you wanna come up and get it.
Uh, and I have one more.
Does anyone want it?
First person is, oh, youhad your hand up first.
And there's more@the.combooth, so, all right.
Oh, sorry.
Yes.
I'm a developer.
I, I don't do sports, so.
All right.
Well thanks for coming.
Appreciate it.