Thank god for this tutorial. So much easier to understand than the docs.

@LearnWebCode

16 күн бұрын

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.

Thanks for the updates 👍 always looking forward to your videos

What a great catch and directions. Love you 🥰

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!

@LearnWebCode

21 күн бұрын

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.

@srwerbeagenten7412

19 күн бұрын

@@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!

I love PhP but whoah, convoluted.

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?

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 ?

@LearnWebCode

19 күн бұрын

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?

Has the dogname value also been changed to Woof on the server side at the button click? Or just client side?

@LearnWebCode

21 күн бұрын

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.

@leonvanrijswijk8409

21 күн бұрын

@@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 ;-) )

Hello sir, Is next js full course in your list?

@LearnWebCode

21 күн бұрын

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.

@iambhavinpatel

21 күн бұрын

@@LearnWebCode that's awesome 👍 are you make changes in full stack javascript course? What are the changes?

what editor font is that?

@LearnWebCode

21 күн бұрын

I'm using the Monaco font in my editor.

nice - look like HTMX a bit

@LearnWebCode

20 күн бұрын

I thought the same thing!

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

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

@LearnWebCode

18 күн бұрын

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?

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.

@LearnWebCode

22 күн бұрын

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.

@Anony584

21 күн бұрын

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?