Front End JS for Blocks | WordPress Tutorial | Custom Block Development скачать в хорошем качестве

Front End JS for Blocks | WordPress Tutorial | Custom Block Development

In this video, originally streamed on July 14, 2022, we look at how to load some JS on the front end of a custom Gutenberg block that only runs when the block is in view. We also learn a lot about how to use useEffect correctly and explore SWR for loading data. 00:00 Intro 01:11 Scaffold the plugin using @wordpress/create-block 07:25 Adding a viewScript property 11:00 Manually enqueueing the viewScript file in the render_callback function. 13:52 Figuring out how to know when the block is in view. 18:28 Setting up a React application for the front end of the block. 28:00 Adding an IntersectionObserver 36:39 Adding a useEffect for a counter ( and getting schooled on how useEffect works ) 55:00 Adding a message prop to be displayed. 59:08 Changing opacity based on intersectionRatio. 1:02 Passing the ratio value to the component. 1:04 Do something based on when the block is in view. 1:05 Quick look at mutationObserver 1:07 Adding the Ajax call to the useEffect ( and why you shouldn’t run an Ajax call in a useEffect ) 1:13 Using SWR to fetch external data instead of the useEffect. 1:19 Explaining why our bundle sizes are so small when using the @wordpress packages. Resources: @wordpress/scripts - https://developer.wordpress.org/block... @wordpress/create-block - https://developer.wordpress.org/block... intersectionObserver - https://developer.mozilla.org/en-US/d...