Actually Understand The Interactivity API in WordPress (Boilerplate Starter) 

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.

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, 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?

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 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.

I thought the same thing!

I'm using the Monaco font in my editor.

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?

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?