Using Alpine.js in Custom Blocks - Module 4-6 - Building a WordPress Classic Theme with Pinegrow

Enqueuing scripts and styles is a fundamental skill for building a theme. This lesson demonstrates it by loading the Alpine.js library and building an interactive tabs block.
📝 Note: This feature was in beta when I recorded the video. It's now been released to production.
🧰 Resources:
• Course Playlist: • Building a WordPress C...
• Course info and resources on GitHub: github.com/adamslowe/pinegrow...
• Download the course files: github.com/adamslowe/pinegrow...
🧭Course Navigation
• Module 1 - Prerequisite Information and Project Setup
• Module 2 - Creating the Theme Templates
• Module 3 - Custom Post Types and Custom Blocks
• Module 4 - The Kitchen Sink
Module 4-1 - Working with Custom Fields
Module 4-2 - Theme Internationalization
Module 4-3 - Create a Back to Top Button
Module 4-4 - Useful Code Snippets
Module 4-5 - Saving the Project and Theme
Module 4-6 - Using Alpine.js in Custom Blocks (You Are Here)
🌐 My Websites:
• adamlowe.io
• peakperformancedigital.com
✅ Connect with Me:
• Facebook: / peakperformancedigital
• LinkedIn: / adasmshawnlowe
• CZcams: / @adamloweio
• Twitter: / @adamslowe
⚙️Tools I Use:
• WordPress.org: wordpress.org/
• Pinegrow Website Editor: pinegrow.com/
⌚ Timestamps:
00:00 - Intro
02:41 Creating the WordPress Block
04:04 Enqueue script site-wide from the CDN
05:47 Enqueue script only for the block
06:37 Loading the script locally
08:06 Challenge 1: The x-on shorthand
10:12 Challenge 2: Arrow Functions
15:34 Challenge 3: Using Alpine.js plugins (multiple scripts)
18:11 Using WordPress actions to add dynamic data
📝 Note: I'm not affiliated with Pinegrow in any way. I'm just a happy, paying customer who wants to see the product continue to grow and thrive, and to help build a more active community around it.