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