I'm gonna get started because I want to
do this
when I
have
questions
on the end of this one.
So we're gonna get startedearly and people can be late.
That's right.
Because you're sort bitwaffling about who you are.
Something coming in two minutes.
That's
true.
Yeah.
Okay.
I hope you enjoyed your cookies.
Yeah, that's the lastfood until we go home.
Or the after party.
Coming to the after party tonight.
Good, good, good, good, good.
Um, what we got now, this is Austin.
I can't pronounce his name.
And we're doing the interactive API
for common do interactions.
That's actually interesting because Yeah.
Cool.
This is gonna be cool.
I'm looking forward to this.
Uh, Austin is a frontend developer workingfor the Australian based code code company
and specializes in enterprise work, doesproper word, first stuff, not the stuff.
Okay, off
you go, alrightyy.
Well, thank you everyone for coming.
Can everyone hear me all right?
Nope, much.
Is it turned off?
Might
be.
Here
we go.
How about now?
Yeah.
Use my announcer voice.
All right.
Yeah.
Okay.
That's good.
Alrighty.
So thank you for coming today.
Um, this is my first time speaking so.
If you wanna leave now,totally understand.
Um, today we're gonna be talkingabout the interactivity API.
Um, I've just had a great introduction.
Um, I don't think I've everbeen introduced before.
Kinda makes me feel a little bit likea celebrity, so just, lemme know how
much we're charging for autographs laterand we'll get that that sorted out.
Um, yeah, I just want to go over quicklyagain, if you're looking interested
in finding me, I'm on LinkedIn.
Uh, it's probably thebest way to, uh, reach me.
Um, previously I was at Word Camp Asia.
Has anyone been to that one thispast February in the Philippines?
No, that was one of the flagship ones.
There's, uh, quite a few people there,so if you ever have a chance to, to go,
I definitely, uh, uh, recommend that.
Um, I work for the code company, like aswas mentioned, uh, based in Australia.
So the, uh, the commute thereevery day is a little challenging,
but, uh, we make it work.
No, I'm just kidding.
I'm based in, uh, uh, London.
Um, I guess we should define that asLondon, Ontario, not London, England.
The, uh, maybe the little bit.
Less famous, uh, Canadian version.
Uh, so before we start, I justwanna get a, a read of the room
here, um, with a few questions.
Nothing too invasive, sodon't worry about that.
Um, who's heard of the interactivity?
API.
Okay, so almost everybody.
All right.
So I can go home now, right.
Alright.
And who's used it?
Perfect.
And final question.
What are your sin numbers?
I'm just kidding.
All righty.
So, uh, let's start witha little bit of history.
Um, just to provide some context,this was released in April
20, uh, 24 with WordPress 6.5.
So it's pretty new.
So if you, if you haven't, uh,used it yet, totally understand if.
Um, prior to that, there is a privateversion that was used in some core blocks.
I know everyone was asking aboutthe light box feature for a long,
long time, so it's included in that.
Um, and there have been incrementalimprovements since then.
If you're interested in reading,uh, release notes and whatnot,
you can read those, uh, posts 6.5.
There's, um, some good contextin there around, uh, what they're
doing with the, with the API.
Um, I added this line in here.
It's foc, I, I think it'sfo focused mostly on.
Block driven development.
Um, is anyone still using like classicor hybrid themes in their workflows?
Yeah, don't worry.
I've been still using hybrid themes.
It's all right.
Um, I think this kind of works in wellwith that kind of, uh, Gutenberg paradigm
we're moving towards in WordPress.
Um, so a lot of the examples and,um, stuff we'll be talking today
will be based in that context.
Um, but no worries if you're, if you'renot using, uh, uh, block teams yet.
And finally, um, prior to this,correct me if I'm wrong, but I
don't think there was a whole lotof standardization around your, your
front ends, especially on your blocks.
Um, kind of wild West backthen before, uh, the inter
interactivity API was released.
So it's, it's interesting to see some,some standardization being applied.
Maybe we can, we can, uh.
Carry that forward and makeour lives a little bit easier.
Alright, so interactivityAPI, what's the deal?
Why do you want to use it?
Well, I'm being paid alot of money to say this.
No, I'm just kidding.
Um, it adds a lot of,uh, dynamic behaviors and
interactions to your front end.
Obviously there's the interactivity part.
Um.
There's no need to use jQuery.
I'm not gonna knock you if you do.
That seems to be everywhere these days.
So if you want to continueusing jQuery, please do.
Um, but this kind of eliminatesthat, that need for, for third
parties in your front end.
Uh, it's declarative, so I'msure we've all written it on
imperative JavaScript before.
So it's, it's gonna be quite, uh, wordy.
Um, so I feel like with the declarative,um, stuff, we're kind of reducing
our, our development time by, um.
Adding these, uh, directives.
You see a lot of those in here.
Um, you're all familiar with the, theinteractivity APIs, so I'm gonna assume
that most people know what directives are.
Those, those, um, custom attributesare added to our block templates.
Uh, so why do we wanna use this?
I think the biggestreason is standardization.
Um, obviously moving forward,you know, there's a ton of
different JavaScript frameworks.
I'm sure there'll be three more by thetime I'm done the talk today, so I.
If you're using something, you know,react views about whatever on your
front end, I think bringing in thestandardization, especially in the
WordPress environment, will really helpus, um, kind of eliminate that context.
Switching, maybe we're moving betweendifferent projects and stuff like that.
Um, if we're using the interactivityby, there's no, there's no real
reason to kind of switch that thinkingin our brains if we're using, you
know, react versus view or whatnot.
Uh, performance, keep it blazingly fast.
Uh, I gotta add the buzzwords in here.
Um, so because we're eliminating thatoverhead of having to add a third
party library, this is WordPressnative, everything's in there.
We're not worried about shipping erroneousJavaScript, um, to the front end.
And has anyone used Alpine before?
Few people.
Okay.
So if you use Alpine, very,very similar to the, um.
The interactivity.
API, it fact, it's actuallymentioned in the doc.
So there's certainly a lot of,um, inspiration taken there.
So if you use that, you'd probablybe pretty familiar and be, be
able to get up to speed prettyquick with the interactivity.
API, uh, more reasons to use.
As I mentioned previously, it's um,WordPress native, so you got the backwards
compatibility with WordPress Hooks.
Um, works well with existingblock development tools.
Anybody use WP Scripts yet?
Fantastic.
Love it.
I'm not wrangling, uh, webpack configurations all day.
Um, atomic by design, whatI mean by that is you can
progressively enhance your blocks.
So if you are kind of apprehensiveabout pushing this into production,
um, you can start with a verysmall section of your blocks and
kind of move, um, ahead with that.
Um, if you don't end upliking it, no worries.
You can kind of remove thatpart from your blocks, if not.
You can gradually, uh, replace whateveryou were using before and, uh, integrate
this into your workflows a lot easier.
So I like to try and boil it down 'causeI know we can sometimes ramble on.
Um, if you're trying to explainthis to your, maybe your boss
who's maybe not tech savvy, yourgrandma, whatever, um, boil it down.
I would call it a moderate declarativereactive layer on WordPress blocks.
Alright, so let's getinto some directives here.
So.
Directives are the custom attributeswe're adding to our, um, blocks.
We have our syntax here.
Obviously we start with our data,our custom kind of standard, uh,
uh, attribute stuff there, followedby WP and then our directive name.
And then the values we're passingthere is what we're, whatever we're
calling in our store, some sortof action callback, et cetera.
Um, we add this to theblocks render PHP file.
The examples I'm usingtoday are dynamic blocks.
Uh, so you'll see those in there.
And then we define our interactivity.
I call it space documents might,documentation, might use a little bit,
uh, different terminology here, but, um,that data, WP Interactive will define the
space where that interactivity is used.
So if you're trying to use it outsideof that, it's just not gonna work.
So make sure that everything we'rekind of nesting inside there is
inside of this directive here.
It's probably the, thedirective you wanna start with.
Um.
Some syntax things to be kindof aware of is sometimes you're
gonna pass additional, uh, I guesssuffixes to your, um, directive.
Just be aware that those aredelimited with double dashes.
I've run into this problem before we had asingle dash, and then you kind of scratch
your head and wonder why it's not working.
Um, so just, uh, just be aware ofthat with some of these attributes.
Uh, so defining our thinking,it all starts with the store.
So this is defined in your view, jsfile in your block and the store.
Um, I call 'em movers and shakers.
That's where all of your, your stateactions callbacks are gonna go.
Um, and then it's gonna be referenced byyour, uh, block in that interactivity,
uh, attribute that we called.
So state, this was probably thetrickiest slide I had coming up with
because I'm sure we could talk aboutstate for hours and hours on end.
Um, the docs boil it down to three,uh, kind of main categories here.
You have global state, so this is gonnabe available on your, all your blocks.
Uh, so interesting to note if you have twoblocks of the same block on the same page.
Um, if you define global state inthere, they will both use that.
So just be aware of that when you'rebuilding your blocks, if you're gonna
have a button where you open something,you don't wanna open all of that
same button on the page, et cetera.
Um, which is where you'll get yourcontext or your local state, which
is available on a per element basis.
Um, that's what we'll beworking with mainly today.
Um, you'll see some exampleshere I have down at the bottom
where we can define that context.
So that's gonna be scoped to,uh, wherever it's defined.
And then finally we have derived state.
You won't see too manyexamples of that today.
It's basically a way of managingyour state in a way where if you
have a value, you don't necessarilyhave to track it if you can derive
it from two or more, uh, value.
So if you have like something likemaybe a, a cart with a product
and a quantity, you can, um.
Or a product in a price, you cankind of derive like the total,
et cetera from that, that state.
So that's kind of what they talkabout when they mean derived.
Alrighty.
Um, so some key principles here, as Imentioned, we have actions and callbacks.
Um, actions are justthings that we, we do.
I, I like to kind of use these withsomething you'd use an event handler with.
I think there was a talk yesterday.
By Ryan.
Sorry, sorry to call that out there.
I attended that one.
And the same kind of thing wasmentioned, callbacks and, um,
actions kind of interchangeable.
Um, I try and limit actions to,again, events, uh, that would normally
be some sort of handle on that.
Um, both are defined inthe store as you need it.
It's just kind of convention to that.
I have a quick example here.
Uh, if you want to definea toggle, et cetera.
And then you see in our markup,we're gonna call that on a a click
event, and we're gonna referencethat, uh, in the store there.
Okay.
And finally, key principlesof our interactivity, API.
So we have context that we mentioned.
It's local, uh, available on the,um, the element that you call it on.
You can define that with.
There's a couple ways to do it here.
You can use a directive, uh, WPcontent, or sorry, WP context.
And now, uh, we can either definethe string, uh, directly in our HTML.
Um, I just have a quick example here,or there's a PHP function that will
output the string five JSO for us.
Um, and we can call that with prettyverbose, but WP interactivity data.
WP context, um, you'll most likelyuse that one for, um, situations where
your context is a little more involved.
Um, if you look at the documentation,there's some pretty, I don't
wanna say basic, but um.
Simple examples that, uh, uh,use the, the top example there.
I found, um, in the stuff that we'vedone where we've released production, I'm
using the the second option here becausesometimes that content has pretty big.
Um, and I'm not sure if you wannawrite out a, a string like that inside
your, uh, inside your render file.
So it makes it a lot easier to, tomanage with that, that PHP function.
And then finally, um, what's used a lotis this function called Get context.
Um, if you end up using theinteractivity api, I feel like
you're gonna use this regardless.
Uh, so I wanted to call that out here.
Um, and it's a handy function to getthe context of the element the function
is evaluated on, if that makes sense.
So wherever you're calling it, it'sgonna get the context of that element.
So if I define it in some sort of diviv,it's gonna grab the context from that and
allows us to, to use that, uh, when we'reevaluating stuff in our functions, there.
So getting it all setup, uh, some caveats.
As I mentioned before, I use WP Scripts.
Um, if you haven't used it again,it's an excellent, uh, WordPress
native tooling for block development.
I find it really handy.
Um, I don't have tomess around with those.
Uh, like I said, those web packconfigurations all day, um, you wanna
update your block json metadata.
You wanna add in your interactivity.
True.
It just tells us, Hey, we'reusing the interactivity.
API.
Uh, do it that way.
You will, um, make sure you havethat 'cause it won't work otherwise.
And then finally, in your, uh, scripts,you want to make sure that you're
ad adding, um, experimental modules.
Uh, this flag will just tellit because the interactivity
API is loaded as as a module.
So kinda using that, uh, modern,uh, es module paradigm that
we're seeing more and more.
Um, and that just lets our build pressbuild process know that we're using that.
So bringing it all together,we have our, uh, block dot JSO.
The other thing you want toadd is your view script module.
So most of, you're probably callingthat now with just view script and then
you're referencing your, your View file.
What you want to have isyour view script module.
Again, because this is a, a yesmodule, you wanna make sure that you're
telling, um, block JSO about that.
Otherwise, again, this,this isn't gonna work.
And I have a quick example down atthe bottom there of a typical store.
Again, this is just.
Uh, at convention you have yourstate actions and callbacks.
You necessarily don't have to define, ifyou don't have any callbacks, you can em
admit that it's not gonna break anything.
And then we have anexample of our render file.
So you can see at the topthere, we've kind of defined our
space with our WP Interactive.
Anything inside of there is gonna bethe interactive portion of our block.
Um, if I were to write somethingabove that or outside of that, again,
it's not gonna work because it's,um, it's not gonna know about that.
So just be aware of that whenyou, uh, build your blocks.
Alrighty, so our first examplehere, I figured I'd start
with something pretty basic.
We have a toggle block here and I'mjust gonna press it and boom, we're
gonna show some, some content there.
So we're just hiding andshowing content really.
Um, and that's gonna allow us to, um, dothings like menus and stuff like that.
It's a pretty common paradigmwith that sort of thing.
Um, so using something like atoggle, really easy way to do that.
Um, I find this sort of thing,you're running it imperatively.
You can really speed up yourdevelopment cycle by using this.
So let's go back to our presentation.
So in here, so when I click that button.
What I'm doing is I'm callingthe action the toggle, um, on my
click event, on my button, andthen we're just, we're evaluating
that context that it's defined in.
We're saying, is it open?
If it's open, let's close it.
Um, if it's not open, let's show it.
It's pretty straightforward.
The second example I have is kindaexpanding on the previous one.
I have a button here where you canclick it, you can, uh, modify the,
that state in there of the button.
Um, so again, this, this would bepretty handy for certain things like
mobile menus where you have, um, you'llhave that typical hamburger menu.
You open it, you probably wannashow the X or the close button.
So we're using a directive herecalled Switch back to my slides,
um, toggle text.
So what we're doing is we'regrabbing the context of that.
We're evaluating whetherit's open or closed.
And then we're using a directivecalled WP Text, which will update the
text content inside that, that, uh,element and, uh, update it accordingly.
It's a little trick there.
Alright, number two, uh,leveraging our state.
So you'll see some, uh, directiveslike WP and Knit and WP Watch.
Um, there's a couple more, butthese, these directives are, um.
Uh, fired on certain conditions.
So WP and it will be fired when the nodeis created and only when it's created.
So I think that's good for something,um, like here where I can, I have
a callback, and I'll show you in asecond, where I'm gonna set up some
tab data, uh, that we're gonna use.
And then there's, there's other examples.
There's one called WP Run, butWP Watch will run a callback
when it's when a note is created.
And when the state of context changes.
So you have to evaluate when you're,you're building these blocks.
Okay, when, when do Iwant these things to run?
I think the docs do a really good,um, uh, job of explaining these
things and where to use them.
Um, 'cause I know if you've ever usedreact, sometimes you can get into
those, uh, cycles where, uh, thingsare, are, are rendering endlessly
and you don't know where to look.
So I think these help manage that, uh,especially in, in clear terms with,
with the docs, uh, that describe that.
So down here at the bottom,I have a couple examples.
Um, again, we have this ait, sothat's going to fire my some tab data.
So what I'm, what you're gonna see herein this example is I'm going to, um,
have a few tabs here where I'm gonnaset the, uh, session storage value.
Um, and we're gonna havethat persist across.
Refreshes.
So, sorry, I opened a bunch of tabs here'cause just before the presentation my
mouse ran outta battery, so I figuredI'd, I'd try and open as many tabs as
I can reduce my usage of the track pad.
So, uh, we have ourtab examples down here.
Um, so what I'm doing when I am,I am selecting these, just, it's
just a couple of posts with a posttitle and then some content there.
So just a, an arbitrary examplejust to illustrate this, but.
I'm loading some content in there.
Now, when I've loaded this page,the WP Andit directive has fired.
So what it's done is it's storedthat, um, that session, uh, value in
there, and then if I go and refreshit, it's gonna fire again, and it's
gonna make sure that it keeps the, um,the selected, uh, uh, tab, uh, active.
So you can use, uh, things likethat where it's going to, um, fire
on certain conditions and then youhave a, a callback or an action
that does something like that.
So I'll show you an example at theend of a, a production app that
we, or a, sorry, a component we, weput into production, uh, that uses
utilizes, uh, features like this.
All righty.
And this is probably, I would saythis is the most important side or
important slide coming on the heels of,uh, the global, um, accessibility day.
I think accessibility, just as asidetrack here, is something that
is sometimes overlooked, especiallywhen we're building applications
like these with lots of interaction.
We're focused on how it worksand why it's working and whatnot.
Sometimes we can overlook our,um, accessibility features
that we might need to add.
So a great way to keep track of that.
And I know it can be tedious,especially with, um, with a lot
of these, uh, uh, aria attributes.
That have Boolean values?
Like is something selected?
Is it expanded?
Is it opened?
Um, I think it's important to havethese in the spirit of, of the
open web where we're, you know,pushing as, um, our content out.
We wanna make sure that we'rere as reaching many audiences,
audiences as possible.
So having things like that in there,um, definitely recommend that for,
uh, for accessibility purposes.
So what we have here is we have adata, um, WP bind, uh, uh, directive.
And what that's gonna do is it'sgonna bind the, uh, attribute
that we've defined here.
So in this case, aria hasselected to our, uh, callback.
So what the callback is doing is,is grabbing the context and it's
saying if, if it's matches the index,we're going to, uh, set the aria
selected to either true or false.
So a quick example of that.
Down here, we have that open.
So you'll notice over in our inspectorhere that that will change as I select it.
So you see that, that that selectedupdate, that it changes this for you.
Um, I think that eliminatesa lot of overhead.
I know in my personal experience,um, with things like accessibility
where you have to kind of focus onthose, those smaller attributes that,
you know, not everyone might catch.
Um, this is a great way to do that.
Then you're not, you're not foolingaround with, uh, imperative JavaScript
trying to grab things like, um,the attribute and, and toggling it.
I think this is a, a reallyeasy way to do things like that.
Alrighty.
Okay.
This is an interesting one.
Um, a lot of blocks you'llprobably run into a case where
you are fetching some sort of,um, uh, data from an external API.
Uh, the example I'll show you at theend is, is utilizing that heavily.
So there's another directivecalled WP on Async.
Now what this one does is it'sa non-blocking, uh, performant.
The docs specifically mentionedperformance, so I wanted to call that out.
And it's great for asynchronous workflows.
So when we're firing this event,let's say I have a button, I click it.
Using the synchronous version WP on, um,that's going to block the, the main spread
in the event that we have, you know, somesort of promise to resolve, et cetera.
We don't wanna block that because thenwe're, you know, we're holding up the
user who's maybe trying to be interactingwith another part of our block.
It's not gonna happen.
So what we can use is this,um, this async, uh, directive.
Um, I, I know I've used itheavily with, with APIs.
Um, it's a great way to keep yourinteractivity working while something
is processed in the background.
Another thing I wanna call outhere is the WP Interactivity.
Uh, function.
So what this does in your, uh, render php,you can define this, this, uh, function
here, you're gonna pass in the namespaceor the, uh, store of your, your, um,
whatever you're defining as interactive.
And what's that that's gonna do is it'sgonna set the initial state on the block.
So I've, I've set up some data hereto, uh, to handle the API requests
that you'll see in a minute.
And what's that, what that's doing isit's defining state at the global level.
So just be aware of thatif you're gonna use that.
But this is, um, pretty handy for, uh,SSR stuff when you're defining state.
Maybe you need to pull valuesfrom somewhere else that, uh,
we normally wouldn't be able toget with JavaScript, et cetera.
Um, and that's gonna, that's going to loadinto your state, in your view, js, um,
it will automatically merge with that.
So it's, it's a great way to, um.
To define state in your, your block,uh, especially where you need something
like, um, some sort of SSR examples.
And then finally on the right here,I have a quick example of that.
So I have my async, um, uh, onclick event that's gonna load some
characters you'll see in a minute.
And then, um, I have the, uh,uh, bind directive as well.
So during, um, loading of that, that API.
We can disable things so people don't keepclicking buttons and we can wait for that
promise to, to resolve, um, in that state.
So I'm not sure if anyone'sfamiliar with, uh, star Wars.
There is a, uh, fun Star Wars,uh, API that uh, anybody can use.
I, um, so I'm gonna click here.
I'm gonna click load characters.
You see the loading state comeup, it's gonna resolve, and
I have a list of characters.
And their appearances.
And that's just referencing thenumber of films they've been in.
So I can scroll down here.
You'll notice when I click thatthe first button disappeared.
So I manage that with my state as well.
I have some callbacks, um, thatcheck whether or not, uh, some
character data has been loaded.
If character data has beenloaded, I hide that button.
So that, again, that's allmanaged by the interactivity
API, um, with those directives.
If I scroll down here.
I can click load more.
Might have seen a little Easter eggthere if you're familiar with Star Wars.
Um, and I can continue to callthat, that API for for data.
So let's take a look at
that.
Okay.
And kind of the last example I have here,if you're working with API data, you're
probably gonna use the WP each directive.
And we use this to generate lists.
So if you, if you've worked with anysort of substantial API, you know
that there's tons of nested data.
A really easy way to workwith that is the wp uh, each.
So I got a, a bit of a,a wordier example here.
Um, this is referencing the, um,the block that you just saw with the
getting those Star Wars characters.
So what this does downhere, where we have our.
WPH we're gonna use our template tag.
If you're not familiar.
I, is everyone familiarwith the template tag?
Okay, good, good, good.
If you're not, the template tag isa way to, um, kind of define this.
This is reductive, but a templateor a, a framework of your HTML
that is not necessarily known,um, at render time, but will be.
It's sort of hydrated by the JavaScript.
So we're, we're setting up when we'resaying we might not necessarily know that
this is, uh, what this is gonna, um, hold.
But we can define some structurehere that when the JavaScript, in
this case, the interactivity, API,um, uh, initiates, it's gonna load
that into our, our, our markup.
So you'll see the WPeach, uh, directive there.
So what I'm doing is I'mcalling my state characters.
So I've loaded in.
Um, this is after we press the button,we're gonna assume that we got some
data back from the API and we've loadedthat into the, uh, character's array.
So we're saying for each character thatwe've loaded into our state array, we
want to, uh, populate that going down.
Now, the interesting part here isyou'll notice this context item name.
So when we define a,uh, WP, each directive.
The context of that directive you can use,uh, state if you loaded something in the.