Thanks! I love the new API but it took me longer than I would have thought to get a grasp on things from reading the docs; wanted to help people that were in that same position.
Great video, thank you. Is the Interactivity API on available to individual blocks or could we create context and wrap our entire site in it and store user preferences in there? Such as a dark mode for example?
Hi Brad, thanks for sharing your knowledge. I started in the world of WordPress two years ago and your tutorials have helped me a lot, thank you for that! Regarding this topic, I'm still somewhat confused because I still don't see what the real benefit or the revolutionary aspect of the API is. On the server side, the data exists in the DOM on the first render, just like the data using . If we assign a specific class to this 'skyColor' data, we could also manipulate this data on the client side with vanilla JS using .querySelector, .querySelectorAll, addEventListener, etc., to give it interactivity or some functionality. I just want to understand why I should start using the API, since in my opinion (personally) the traditional way is more readable without using all those HTML "data-attributes" in the code. Or am I simply not understanding how it works? Thank you very much for your content!
You're welcome, thanks for the kind words! That's a good question; I'm not sure that the new API accomplishes anything that vanilla progressive enhancement JS can't do. But I suppose that's true for React, Vue, or any JS system, and it's more about does it save us time or make our lives as developers easier. In the case of complex blocks and having interactive logic based on block attributes I think the API does make things significantly easier. Previously, if there was a block attribute that you weren't going to output to a DOM element, but that you needed to access in your JS logic you'd have to reinvent the wheel in terms of finding a way to feed that value from PHP to JS. And then not having to (1) select dom elements (2) add event listeners (3) update dom values may not sound like much, but I think if you have 3 or 5 or 10 or 20 different UI details that you're waiting for clicks and updating, that would result in significantly cleaner, easier to manage code. Really it comes down to a personal preference of what do you want your source of truth to be? The DOM (imperative) or raw JS data (declarative). Having said all of that, I do think the main excitement around the new API was it's single page application routing / navigation features which haven't been officially added / supported yet, but I've heard that those will be added in WP 6.6 or 6.7 - and I'm very excited to check those out.
@@LearnWebCode Thank you very much for your explanation, it's much clearer to me now. I didn't know that SPA routing/navigation features would be added, that sounds very interesting!
silly question, does interactivity api available to be used through gutenberg editor only or we could use it as developers through bricks builder even by tricky ways? or manual development without editor or builders?
hi brad. what about static blocks and the interactivity API? this new API makes total sense in dynamic blocks where the font end code already was in (render.)php. but what about static blocks where the front end is in React?
Good question. Just client side. We wouldn't want just any public visitor guest to be able to change values server-side. However, in the same view.js "action" function where we change the context.dogname value, we could also use JS to send off a POST request to an a custom endpoint that we create, and that endpoint could check the current user's cookie / session and if they should have permission to update data we could update anything in the DB that we needed to there.
@@LearnWebCode Thanks, I understand. I am trying to compare this technique with Laravel Livewire, that will do the POST request for you automatically (I guess Livewire has some 'permission challenges' but that is out of scope for this video ;-) )
I Finished your Wordpres Course few days ago, I really recommend it for anyone who is wondering. | have a question that I can't seem to find an answer to, I see that the attributes object is always renders as an attribute in the outer div, What if I don't want that ? let's have the quiz block we built in the course as an example, What if I don't want the user to know the correct answer by inspecting the HTML? in short Can I prevent the attributes object from getting rendered in my HTML ?
Thanks, I'm glad the course has been helpful! Good question; I think the only way to not have the answer in the HTML that we send over would be to create a new custom REST API endpoint that you send guesses to onClick and it returns back either true or false for correct or not. So we'd be careful to not send the answer at all in our render.php file, and then handle the guess/answer comparison server side. To answer your question; we can prevent the attributes object from being included on the outer div by not including it in the context PHP array that we're building and giving to the outer div. But do you need the attributes?
also u got PPP / country based pricing for your courses? I am from India and country parity pricing will help us take your courses or membership at affordable cost... Thanks! Vishal
I hear you loud and clear. From what I've researched Teachable doesn't have an intuitive way to setup PPP, but as of September 2024, all 9 of my courses are also available on Udemy which runs regular sales and I believe offers PPP.
@@LearnWebCode A coupon code would be nice in teachable. I read somewhere udemy courses are not updated (or outdated) so not sure, they may be cheaper but dated? Thanks
@@LearnWebCode any coupon code? Udemy courses I hear r not updated.... I prefer your site with one time bundle deal. Will u be having any BFCM sale? Thx!
@@LearnWebCode Udemy courses aren't usually updated... I'd like to get the lifetime membership directly from your site teachable. Some discount would be nice if possible. Thanks Vishal.
still i dont understand WHy use this interactive api. - When i can do the toggle using jQuery. - also i can change server data: dogName to 'woof' using jquery. Please help me understand with real time usage Thanks
Hello! Yes it is, but I do want to make updates to my WP Beginner course, Full-Stack JS course, and Laravel course before I can dedicate enough time to finish the Next.js course.
Sorry brad, surely is my fault,but i don't have so clear the actual benefit or benefits of the Interactivity API than Vanilla JS or React/Vue. The main benefit is that is easier to achive and that the value you changed (like the dogName in the latest example) is changed everywhere is called in the Context like we're using a Store in React/Vue etc? Thanks
I think the main benefits are (1) the ease with which the block attributes (like skycolor and grasscolor) coming from PHP are handed over to JS. With vanilla JS / React you'd need to manage that yourself and (2) the seamless server rendering + client side hydration. We have one common language/template system (the Interactivity API) that can create dynamic HTML server side and client-side and it's already setup / configured for us. It's just nice to have an "official" WP solution as opposed to needing to reinvent a wheel ourselves. I do think the IAPI is lacking the excitement it was supposed to have because they removed the "Interactivity Router" but it should be added into WP and officially documented in the next version or two of WP! That will let us create SPA / navigation / routing all with official WP APIs; no React-Router or any outside code / configuration setup.
In the 1990s we didn't use PHP. We used Perl and command line utilities. Don't knock PHP. A true dev wouldn't lean on frameworks and no code. I code solely in plain vanilla ES6, PHP, and if necessary Python and C. I don't even use jquery. most people only "need" one or two things with jquery, so instead of just figuring out how to do those few things with a few lines of code, they strap an entire library of solutions for everyone else's problem onto every page on their site. And don't get me started on React. Those devs just want to be regular office staff using regular office tools, not devs. They want to drag and drop their way to a mindless office job instead of understanding code.
I definitely wasn't knocking PHP, I'm a huge fan of PHP. My primary platforms are WordPress and Laravel. I was saying "good old 1990s PHP" to try and distinguish between the new/scary Interactivity API that was released in the last 2 or 3 months, and the timeless (great) act of echoing strings with PHP server-side. My bad if that was unclear.
Companies use frameworks like React bc know it all devs, that think the way that you do,p actually end up writing unmaintainable, fragile and untested code. rameworks follow common programming patterns and everyone can read publicly accessible documentation. Why reinvent the wheel?
Thank god for this tutorial. So much easier to understand than the docs.
Thanks! I love the new API but it took me longer than I would have thought to get a grasp on things from reading the docs; wanted to help people that were in that same position.
Great video, thank you. Is the Interactivity API on available to individual blocks or could we create context and wrap our entire site in it and store user preferences in there? Such as a dark mode for example?
Hey Brad, in order to understand the interactivity API is required to know react? Thanks for your help. I have your udemy course.
Hi Brad, thanks for sharing your knowledge. I started in the world of WordPress two years ago and your tutorials have helped me a lot, thank you for that!
Regarding this topic, I'm still somewhat confused because I still don't see what the real benefit or the revolutionary aspect of the API is. On the server side, the data exists in the DOM on the first render, just like the data using . If we assign a specific class to this 'skyColor' data, we could also manipulate this data on the client side with vanilla JS using .querySelector, .querySelectorAll, addEventListener, etc., to give it interactivity or some functionality. I just want to understand why I should start using the API, since in my opinion (personally) the traditional way is more readable without using all those HTML "data-attributes" in the code. Or am I simply not understanding how it works?
Thank you very much for your content!
You're welcome, thanks for the kind words! That's a good question; I'm not sure that the new API accomplishes anything that vanilla progressive enhancement JS can't do. But I suppose that's true for React, Vue, or any JS system, and it's more about does it save us time or make our lives as developers easier. In the case of complex blocks and having interactive logic based on block attributes I think the API does make things significantly easier. Previously, if there was a block attribute that you weren't going to output to a DOM element, but that you needed to access in your JS logic you'd have to reinvent the wheel in terms of finding a way to feed that value from PHP to JS. And then not having to (1) select dom elements (2) add event listeners (3) update dom values may not sound like much, but I think if you have 3 or 5 or 10 or 20 different UI details that you're waiting for clicks and updating, that would result in significantly cleaner, easier to manage code.
Really it comes down to a personal preference of what do you want your source of truth to be? The DOM (imperative) or raw JS data (declarative).
Having said all of that, I do think the main excitement around the new API was it's single page application routing / navigation features which haven't been officially added / supported yet, but I've heard that those will be added in WP 6.6 or 6.7 - and I'm very excited to check those out.
@@LearnWebCode Thank you very much for your explanation, it's much clearer to me now. I didn't know that SPA routing/navigation features would be added, that sounds very interesting!
Thanks for the updates 👍 always looking forward to your videos
silly question, does interactivity api available to be used through gutenberg editor only or we could use it as developers through bricks builder even by tricky ways? or manual development without editor or builders?
This is the proof that WordPress will stay forever!
What a great catch and directions. Love you 🥰
hi brad. what about static blocks and the interactivity API? this new API makes total sense in dynamic blocks where the font end code already was in (render.)php. but what about static blocks where the front end is in React?
nice. Where/how did the $attributes variable got declared?
Has the dogname value also been changed to Woof on the server side at the button click? Or just client side?
Good question. Just client side. We wouldn't want just any public visitor guest to be able to change values server-side. However, in the same view.js "action" function where we change the context.dogname value, we could also use JS to send off a POST request to an a custom endpoint that we create, and that endpoint could check the current user's cookie / session and if they should have permission to update data we could update anything in the DB that we needed to there.
@@LearnWebCode Thanks, I understand. I am trying to compare this technique with Laravel Livewire, that will do the POST request for you automatically (I guess Livewire has some 'permission challenges' but that is out of scope for this video ;-) )
I Finished your Wordpres Course few days ago, I really recommend it for anyone who is wondering.
| have a question that I can't seem to find an answer to, I see that the attributes object is always renders as an attribute in the outer div, What if I don't want that ?
let's have the quiz block we built in the course as an example, What if I don't want the user to know the correct answer by inspecting the HTML?
in short Can I prevent the attributes object from getting rendered in my HTML ?
Thanks, I'm glad the course has been helpful! Good question; I think the only way to not have the answer in the HTML that we send over would be to create a new custom REST API endpoint that you send guesses to onClick and it returns back either true or false for correct or not. So we'd be careful to not send the answer at all in our render.php file, and then handle the guess/answer comparison server side. To answer your question; we can prevent the attributes object from being included on the outer div by not including it in the context PHP array that we're building and giving to the outer div. But do you need the attributes?
also u got PPP / country based pricing for your courses? I am from India and country parity pricing will help us take your courses or membership at affordable cost... Thanks! Vishal
I hear you loud and clear. From what I've researched Teachable doesn't have an intuitive way to setup PPP, but as of September 2024, all 9 of my courses are also available on Udemy which runs regular sales and I believe offers PPP.
@@LearnWebCode A coupon code would be nice in teachable. I read somewhere udemy courses are not updated (or outdated) so not sure, they may be cheaper but dated? Thanks
@@LearnWebCode any coupon code? Udemy courses I hear r not updated.... I prefer your site with one time bundle deal. Will u be having any BFCM sale? Thx!
@@LearnWebCode Udemy courses aren't usually updated... I'd like to get the lifetime membership directly from your site teachable. Some discount would be nice if possible. Thanks Vishal.
still i dont understand WHy use this interactive api.
- When i can do the toggle using jQuery.
- also i can change server data: dogName to 'woof' using jquery.
Please help me understand with real time usage
Thanks
Hello sir,
Is next js full course in your list?
Hello! Yes it is, but I do want to make updates to my WP Beginner course, Full-Stack JS course, and Laravel course before I can dedicate enough time to finish the Next.js course.
@@LearnWebCode that's awesome 👍 are you make changes in full stack javascript course? What are the changes?
what editor font is that?
I'm using the Monaco font in my editor.
Sorry brad, surely is my fault,but i don't have so clear the actual benefit or benefits of the Interactivity API than Vanilla JS or React/Vue.
The main benefit is that is easier to achive and that the value you changed (like the dogName in the latest example) is changed everywhere is called in the Context like we're using a Store in React/Vue etc?
Thanks
I think the main benefits are (1) the ease with which the block attributes (like skycolor and grasscolor) coming from PHP are handed over to JS. With vanilla JS / React you'd need to manage that yourself and (2) the seamless server rendering + client side hydration. We have one common language/template system (the Interactivity API) that can create dynamic HTML server side and client-side and it's already setup / configured for us. It's just nice to have an "official" WP solution as opposed to needing to reinvent a wheel ourselves. I do think the IAPI is lacking the excitement it was supposed to have because they removed the "Interactivity Router" but it should be added into WP and officially documented in the next version or two of WP! That will let us create SPA / navigation / routing all with official WP APIs; no React-Router or any outside code / configuration setup.
Where is the react , and theming with wordpress?
I love PhP but whoah, convoluted.
Looks like less elegant Livewire.
nice - look like HTMX a bit
I thought the same thing!
In the 1990s we didn't use PHP. We used Perl and command line utilities.
Don't knock PHP. A true dev wouldn't lean on frameworks and no code. I code solely in plain vanilla ES6, PHP, and if necessary Python and C. I don't even use jquery. most people only "need" one or two things with jquery, so instead of just figuring out how to do those few things with a few lines of code, they strap an entire library of solutions for everyone else's problem onto every page on their site.
And don't get me started on React. Those devs just want to be regular office staff using regular office tools, not devs. They want to drag and drop their way to a mindless office job instead of understanding code.
I definitely wasn't knocking PHP, I'm a huge fan of PHP. My primary platforms are WordPress and Laravel. I was saying "good old 1990s PHP" to try and distinguish between the new/scary Interactivity API that was released in the last 2 or 3 months, and the timeless (great) act of echoing strings with PHP server-side. My bad if that was unclear.
Companies use frameworks like React bc know it all devs, that think the way that you do,p actually end up writing unmaintainable, fragile and untested code.
rameworks follow common programming patterns and everyone can read publicly accessible documentation. Why reinvent the wheel?