WordPress Interactivity API Tutorial & Explanation

Join the full course here learnwebcode.teachable.com/p/...
GitHub code reference for this video github.com/LearnWebCode/inter...
0:00 Intro
6:51 Creating Our Block
26:04 What Is Context?
40:17 Front-End Basics
53:46 Blending Server & Client
1:13:44 Sorry & Congrats Messages
1:30:12 Callbacks
1:39:21 When To Use State Instead of Context
Follow me for updates on new videos or projects:
Instagram: / javaschiff
Twitter: / learnwebcode
Facebook: / brad-schiff-1542576316...
Twitch: / learnwebcode

Пікірлер: 44

  • @ivanbarta2821
    @ivanbarta2821Ай бұрын

    If Brad didn't do these great tutorials, I really don't know where else to learn about the WordPress blocks and Interactivity API... I don't see many resources anywhere, other than simple overview videos. Before, I resisted the use of block themes. I'm still not sure if blocks are good enough for all kinds of projects. I still haven't created a single website with them. But maybe it is time...

  • @LearnWebCode

    @LearnWebCode

    Ай бұрын

    Thanks Ivan, you're always such an encouraging voice in the course announcements in Udemy. I'd only bother with block themes if the person who's going to be managing the posts/pages of a site will be needing a tiny bit of creative freedom in terms of composition / mixing matching certain page elements or creating landing pages etc... if someone is just entering h1 - h6 and paragraphs and lists and a featured image here and there, I think block themes are a lot of wasted effort as a developer. But for sites with more creative freedom to mix and match components during the page/post authoring process, it's actually pretty darn ideal. Thanks again! Brad

  • @spacebeetle
    @spacebeetleАй бұрын

    Started your WP course back in December. Right now I am halfway through the block themes section. Have learned a ton thanks to you man, great work!

  • @fvgoya
    @fvgoyaАй бұрын

    What I also love about your content is that the examples you do to teach us are always useful and different from others content creators.

  • @MarcelLeteriTech
    @MarcelLeteriTechАй бұрын

    Hey Brad, That is awesome! Thanks so much for updating the course! I'm really excited to go back and have a look at it again. I love the way you teach, and it's great to see you excited about WordPress again. I hope this is just the beginning of new updates to your excellent course✌🏻

  • @fvgoya
    @fvgoyaАй бұрын

    As always, AMAZING content!!!! This channel is GOLD!!!! Still waiting your FULL NextJS course. I wanna buy it!!!

  • @outpost31737
    @outpost31737Ай бұрын

    Thanks Brad. Another superb tutorial. Hope you're well dude.

  • @collinslagat3458
    @collinslagat345813 күн бұрын

    Watching man on 3x speed is a dream.

  • @khalidelgazzar
    @khalidelgazzarАй бұрын

    Great vidéo 😊 thanks Brad

  • @pfkellogg
    @pfkelloggАй бұрын

    You are the best.

  • @techietoons
    @techietoonsАй бұрын

    You are back

  • @dsbaileyfreelancer2179
    @dsbaileyfreelancer21795 күн бұрын

    At 24:00 changing "editorStyle" to array and adding "dashicons" is still needed in WordPress 6.5.5.

  • @ByeonginYoon
    @ByeonginYoonКүн бұрын

    Hi, thanks for your tutorial! `data-wp-text="state.solvedCount"` How to observe 'create-block' store's solvedCount value at view.js not at directive like this example ?

  • @josem3933
    @josem39333 күн бұрын

    I have an up to date wordpress and apparently in the new version you can not see get the block to appear in the block selector...

  • @streamx2
    @streamx2Ай бұрын

    Thank you for your videos. Is your udemy js course updated, can i still take it and everything will work?

  • @LearnWebCode

    @LearnWebCode

    Ай бұрын

    You're welcome! Yes, the "Learn JavaScript" course was just updated 3 months ago to use the newest NPM version of packages and MongoDB and is working nicely. In the future I'd like to further update it to no longer use any Promise syntax, and instead use async await exclusively; but that's an easy fix and is just a conceptual / syntax preference. ~Brad

  • @ivan.jeremic
    @ivan.jeremicАй бұрын

    Are there some api's to click for example a button in the frontend and add a new post to a custom-post-type? I mean every user should be able to click that button also logged out users?

  • @LearnWebCode

    @LearnWebCode

    Ай бұрын

    Sounds somewhat similar to the "My Notes" feature in my full course. We let "guest" users take up to 5 notes (a custom post type). However, those are at least registered "guest" users. It's just a matter of adding your own custom REST API endpoint, and then you can execute any PHP code you want. By letting a user that's completely logged out create a post I'd be worried about how I'd limit a malicious user from creating 100 new posts every second and flooding my database.

  • @thebilalafsar
    @thebilalafsarАй бұрын

    Hey Brad! Please create a detailed tutorial on WordPress speed optimization and Core Web Vitals using manual methods, not just by installing plugins. Cover everything from basic to advanced techniques, including advanced lazy loading, preloading above-the-fold images, advanced caching implementation, optimizing third-party scripts, fixing render-blocking scripts, reducing DOM size, and more. Thanks!

  • @LearnWebCode

    @LearnWebCode

    Ай бұрын

    That's a great idea for a micro-course or new chapter; I'll have to put together some notes and an outline at some point! Thanks!

  • @thebilalafsar

    @thebilalafsar

    Ай бұрын

    @@LearnWebCode Thanks a lot❣

  • @thebilalafsar

    @thebilalafsar

    Ай бұрын

    @@LearnWebCodePlease make sure not to rely solely on plugin installations. Prioritize manual methods instead. Cover advanced techniques, from server configuration to code optimization. Thanks again for your valuable response!

  • @sergey.gabrielyan1998
    @sergey.gabrielyan1998Ай бұрын

    Hi Brad, something I cannot understand well. If I create a Navbar or Slider block, which option is better to use, separate JS file with addEventListener, querySelector…. or the Interactivity API?

  • @LearnWebCode

    @LearnWebCode

    Ай бұрын

    I'm not sure that I'd say one way is better than the other, it's just nice to have an official WordPress "standardized" way of doing things. It's almost like the Interactivity API is its own JSX or HTMX; it eliminates the need for addEventListener / querySelector and just lets you declare things in your HTML and have a few raw JS functions run at the appropriate times. Personally, I'll be using the Interactivity API if I'm creating a feature that is specific to WordPress. If I'm importing / leveraging a component / feature that I've already written in plain JS for another project I'd use plain JS. But I think the main advantage of the Interactivity API is that it offers server-side rendering; it's not just client-side JS, it does both the old fashioned initial server-sent HTML AND it handles the client-side JS. So in situations where accessibility / SEO concerns are present, that's a huge advantage and another reason I'd use it.

  • @sergey.gabrielyan1998

    @sergey.gabrielyan1998

    Ай бұрын

    @@LearnWebCode Thank you for the answer Brad. I want to start to create WordPress project, but it’s hard to decide which one to use. I’m not sure, maybe I’ll use Interactivity API

  • @GR_WebDev
    @GR_WebDevАй бұрын

    Hi, Brad perfect video what do you feel about the rise of AI Concerning web development and what is your opinion about the recently launched Devin AI software engineer? Is Web Development Future Is In Trouble?

  • @LearnWebCode

    @LearnWebCode

    Ай бұрын

    Thanks! I'm not worried about AI at all. I think all jobs regardless of the industry are about being a "responsibility container." The executives and management positions of companies are still going to have developers implement features because if something breaks or goes wrong they need "someone" to be responsible for things. Imagine a CEO of a company talking into a microphone telling AI what to change on an app used by billions of people. Never going to happen! Sure AI can create code but when something goes wrong it's not "responsible" for getting things fixed ASAP. At some point there's just no substitute for human responsibility. Yes, it's definitely true that with AI assistance 1 developer can get the work done that used to take 3 or 4 or 5 developers, however, I still think that's only true during very early bootstrap stages of a project while creating version 1.0 or prototypes. In the real world, even as a developer, most of my time on the job was spent in meetings, trying to understand what the client or management team is actually asking for, having them test it and figure out what they're wanting again, fixing tiny bugs, making tiny tiny adjustments, testing, testing, testing... waiting to be assigned my next task... and percentage wise an actually much smaller amount of my time was spent actually programming. So I think the impact on needing less developers is greatly overhyped. I think the recent tech layoffs are more indicative of the global economy, inflation, interest rates, etc... than just AI.

  • @GR_WebDev

    @GR_WebDev

    Ай бұрын

    @@LearnWebCode Thank You!! You are a wonderful developer and the best instructor I have ever met👍👍 I have enrolled in your WordPress course and your teaching style encouraged me to purchase your new web development course. Because Instead of rushing things you explain to us what we are doing and why we are doing it. Never saw anyone explaining concepts this much clearly not even an instructor from bestseller and top-rated courses. Thank You for making an impactful change in education Have a great day sir 😀😀

  • @LearnWebCode

    @LearnWebCode

    Ай бұрын

    @@GR_WebDev Thank you so much for the support and kind words! I'm glad the courses are helpful; hearing that they're useful motivates me to keep making them; I really appreciate that 🙏

  • @GR_WebDev

    @GR_WebDev

    Ай бұрын

    ​@@LearnWebCode Again Thank you A lot for making wonderful courses Waiting for The Upcoming Updates and courses.​ @LearnWebCode All The Best.

  • @geelemo
    @geelemoАй бұрын

    Hello Brad, Will this work for a case where you are building an e-commerce web app that has an admin dashboard and will have to expose a rest API for mobile client

  • @LearnWebCode

    @LearnWebCode

    Ай бұрын

    Yes, but I might ask why are you wanting to consume data on the public front-end from the REST API instead of using PHP in your render.php file? Are you using client-side JS to power a single-page-application experience? If so, I'd stay away from the Interactivity API for now. Soon, WordPress will add the "Interactivity Router" into the core of WordPress and that's when this route could be the perfect solution.

  • @geelemo

    @geelemo

    Ай бұрын

    @LearnWebCode my use case will be that merchant populates and edits product data from a dashboard ui, which is exposed through a REST API. Then, SPA or multi page Web app and mobile app consume the data. Ok, I'll wait for the interactive routes. Thank you.

  • @collinslagat3458
    @collinslagat345813 күн бұрын

    Wait, this guy has a yt channel?

  • @xviewx
    @xviewxАй бұрын

    I'm on Udemy watching the new Section "Interactivity API". I have a question, do you think WordPress will allow us to create SPA and dynamically rewrite a web page with new data from the web server instead of loading entire new pages ?! If this happens, it will be a big revolution !

  • @LearnWebCode

    @LearnWebCode

    Ай бұрын

    Yes, you can google for "Interactivity Router" to find out more, but it hasn't been added to WordPress yet, there's no 100% official supported or "final" documentation as of today, but once it does get added, yes absolutely, we can create SPAs with WordPress.

  • @dsbaileyfreelancer2179
    @dsbaileyfreelancer21794 күн бұрын

    WordPress coding standards recommend NOT to close the php tag at the end of a php file. This prevents accidental whitespace or new lines after the closing tag. Just a reminder for those in the comments. It's a real time waster tracking down invisible errors caused by this.

  • @m.arslansarwar9449
    @m.arslansarwar9449Ай бұрын

    2nd

  • @BaxuzBgd
    @BaxuzBgdАй бұрын

    I'm the first here 🙃

  • @LearnWebCode

    @LearnWebCode

    Ай бұрын

    🏆

  • @proteus1
    @proteus1Ай бұрын

    I dislike wordpress as I don't like the speed it operates and the many facets it has...A lot to try to learn and then the plugins and themes are tiresome too. I have a good basics of css and html, but I don't use my skills everyday as I'm a tradesman, so have to do this , but trying to transion to web design. Do you offer any courses where I can either set up my own business or have a job that pays well doing web building. Thanks. P.s where's the cat?

  • @aglgaming5134
    @aglgaming5134Ай бұрын

    Hi sir is it possible to saw this content after login kind of login first then showing content to client?

  • @LearnWebCode

    @LearnWebCode

    Ай бұрын

    Yes! You could create a new piece of "user meta" and then once you've shown the content to the client you could set their "hasSeenIntroContent" (made up example meta name) to true instead of false, and have it set to only display based on that true/false condition, etc...