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

Video Description

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/travel-it-block-acf ============================================= HOW TO SUPPORT THE CHANNEL ============================================= Do you like what I am doing? - Join channel membership to get access to perks: https://www.youtube.com/channel/UCk_CWbiRCi34etpks2KwNuQ/join- 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: https://web.facebook.com/TechiePress-100149655032583/ Twitter: https://twitter.com/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: https://youtu.be/9LtXEMRNln8?t=145 WooCommerce E-Commerce customizations == Build Free Custom E-commerce Online Shop using WooCommerce - https://www.youtube.com/playlist?list=PLNqG1qGUllk2qFmbexV2SikF8bXqvDW-H == Build Free Custom Theme for E-commerce Online Shop using WooCommerce - https://www.youtube.com/playlist?list=PLNqG1qGUllk0uFqUvFFIJ67dSNBKapd7Y ====== Build Dynamic Websites with Elementor ====== == Learn the Elementor basics - https://www.youtube.com/playlist?list=PLNqG1qGUllk27BK71LBJDw4auOl-aVOqG == Build a custom Elementor Widget from Scratch - https://www.youtube.com/playlist?list=PLNqG1qGUllk2pukgHP385ll0ENmRr9E_M ====== How to use WordPress Gutenberg Block Editor ====== WordPress 5.4 Gutenberg Blocks Updates == https://www.youtube.com/playlist?list=PLNqG1qGUllk0lI2Omhvp54Qn9-MIEhQzX WordPress Gutenberg blocks for Designers == https://www.youtube.com/playlist?list=PLNqG1qGUllk3DY91Bq_26L8meIXM_Uo4E Gutenberg WordPress Block Editor tutorials for beginners == https://www.youtube.com/playlist?list=PLNqG1qGUllk2xOKt79aI12GgX2DX0aNx- Custom WooCommerce Gateway Development from Scratch == https://www.youtube.com/playlist?list=PLNqG1qGUllk21IES6ZJ2WkX1BcbPQF4-7 WordPress Custom REST API Namespaces, Endpoints and Examples from Scratch == https://www.youtube.com/playlist?list=PLNqG1qGUllk0npc2ZGPU358Q6S1itFCYR