Create a Slider Block with ACF

Building custom WordPress blocks can be a daunting learning curve. Do I need to learn React? How do I offer an intuitive editing experience without adding the overhead to create it? Join Damon Cook as he walks you through building a custom ACF Slider Block. We'll cover: ✅ Setting up a WordPress plugin ✅ Install and set up Swiper 3rd-party dependency for slider interactivity ✅ Nesting multiple ACF Blocks with InnerBlocks ✅ Setting up ACF fields and assigning to an ACF Block 👉 Final ACF Slider Block GitHub repository 👈 🔗 https://wpeng.in/acf-slider/ 🔗 00:29 Overview of steps 03:05 Overview of SwiperJS 04:14 WordPress Local development site setup 06:53 Final plugin project on GitHub w/ link 07:07 Start creating our WordPress plugin 08:28 Register Slider and Slide blocks 10:27 Overview of block.json 12:36 Adding in empty template.php files 15:59 Activate the plugin and check the progress 17:10 Create ACF fields and assign them to ACF Block 20:13 Export field info and register programmatically 24:37 Extending the Slider block.json definitions 31:25 Extending the Slide block.json definitions 33:24 Check progress in the editor 34:42 Hook up markup and logic for Slide block in template.php 40:08 Hook up markup and logic for Slider block in template.php 40:50 Overview of InnerBlocks usage in Slider 46:37 Check progress in the editor with Slider 47:45 Hook up SwiperJS into the block 49:22 Working with JavaScript Modules in WordPress blocks 54:02 Initialization code for Swiper in the editor 58:07 Add editor.css for Swiper 58:52 Check progress in the editor (again) 01:03:35 Initialization code for Swiper on the front end 01:06:39 Adding Block Styles: Default and Complex 01:09:09 Wrapping up Dive Deeper & Related Resources: - Slides: https://wpeng.in/eed894/ - WPE DevRel newsletter - Please subscribe: https://wpeng.in/newsletter/ - https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/ - https://www.advancedcustomfields.com/resources/blocks/ - https://happyprime.github.io/wphtml-converter/ - https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/