Create a Slider Block with ACF
3.7 هزار بار بازدید -
10 ماه پیش
-
Building custom WordPress blocks can
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...
- https://www.advancedcustomfields.com/...
- https://happyprime.github.io/wphtml-c...
- https://developer.wordpress.org/block...
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...
- https://www.advancedcustomfields.com/...
- https://happyprime.github.io/wphtml-c...
- https://developer.wordpress.org/block...
10 ماه پیش
در تاریخ 1402/08/25 منتشر شده
است.
3,704
بـار بازدید شده