Build Custom Gutenberg Blocks with Advanced Custom Fields (ACF) for WordPress Block Editor

Build a Travel Itinerary Block using Advanced Custom Fields(ACF) from scratch. This tool allows you to use PHP, HTML and CSS without the need to learn heavy Javascript.

This tutorial is mainly for those WordPress developers who are struggling with learning Javascript but want to build Gutenberg Blocks or Blocks for the WordPress Block editor.

VIDEO BREAKDOWN
00:00 Explaining the build a Block Decision
01:53 Setup ACF Pro Plugin
02:26 Creating Block Fields in ACF Pro
07:34 Make Custom Blocks Plugin
09:42 Create our first ACF Pro Block with render_callback
15:29 Using render template to create ACF block
18:06 Re-adjust ACF Block Settings
20:01 Writing your first Block HTML
22:40 ACF Block Template Settings
26:09 Register ACF Block HTML attributes
27:15 Get ACF Fields stored data
29:08 Add Dynamic ACF fields to the Block HTML
35:23 Styling the block on admin side.
52:52 Styling the Available Services Buttons
59:52 Add dynamic ACF data fields to the content section
01:02:22 Add Dynamic ACF Available Services fields
01:09:18 Save your block field settings using PHP


Comments

Leave a Reply

Your email address will not be published. Required fields are marked *