Build Custom Gutenberg Blocks with Advanced Custom Fields (ACF) for WordPress Block Editor
Welcome to this tutorial on building a Travel Itinerary Block using Advanced Custom Fields. I know that for many of you WordPress developers out there, learning Javascript just to build blocks for the WordPress Block editor can be a challenge. But, fear not! With ACF, you can build blocks using PHP, HTML and CSS without the need to learn heavy Javascript.
In this tutorial, we'll start by explaining why we chose to build a block using ACF. Then, we'll guide you through the process of setting up the ACF Pro plugin, creating block fields, making a custom block plugin, writing your first block HTML, and styling the block on the admin side. You'll also learn how to add dynamic ACF fields to the content section, and save your block field settings using PHP.
Each step is broken down into chapters, so you can easily follow along. We've got you covered, from setting up ACF Pro, to writing your first Block HTML and styling the block on the admin side.
So, if you're ready to simplify your block-building process and learn the ins and outs of creating blocks using ACF, hit the play button and let's get started!
CHAPTERS
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
Code sample: https://github.com/yttechiepress/trav...
=============================================
HOW TO SUPPORT THE CHANNEL
=============================================
Do you like what I am doing?
Join channel membership to get access to perks: / @techiepress Buy me a coffee through https://www.buymeacoffee.com/techiepress
Give via PayPal: https://paypal.me/laurencebahiirwa
Visit https://omukiguy.com/support-my-work/
I am social too:
Facebook: / techiepress-100149655032583
Twitter: / omukiguy
Blog & Newsletter: https://omukiguy.com
Github: https://github.com/yttechiepress
-------------------------------------------------------------------------------
LEARN MORE IN THE WELL CURATED PLAYLISTS BELOW
--------------------------------------------------------------------------------
Learn how to build a plugin from scratch: • Plugins Vs Functions.php - Where shou...
WooCommerce E-Commerce customizations
== Build Free Custom E-commerce Online Shop using WooCommerce - • WooCommerce customizations - Free Wor...
== Build Free Custom Theme for E-commerce Online Shop using WooCommerce -
• Woocommerce Restaurant Shop - Custom ...
====== Build Dynamic Websites with Elementor ======
== Learn the Elementor basics - • Elementor Beginner Tutorials
== Build a custom Elementor Widget from Scratch - • Build Custom Elementor Widgets from s...
====== How to use WordPress Gutenberg Block Editor ======
WordPress 5.4 Gutenberg Blocks Updates
== • WordPress 5.4 Gutenberg Blocks Updates
WordPress Gutenberg blocks for Designers
== • WordPress Basics Training: Gutenberg ...
Gutenberg WordPress Block Editor tutorials for beginners
== • WordPress Basics Training: WordPress ...
Custom WooCommerce Gateway Development from Scratch
== • Build Custom WooCommerce Payment Gateway
WordPress Custom REST API Namespaces, Endpoints and Examples from Scratch
== • Create Custom WordPress REST API POST...
Watch video Build Custom Gutenberg Blocks with Advanced Custom Fields (ACF) for WordPress Block Editor online without registration, duration hours minute second in high quality. This video was added by user TechiePress 19 July 2021, don't forget to share it with your friends and acquaintances, it has been viewed on our site 16,954 once and liked it 291 people.