Building custom blocks with ACF and register them in the Gutenberg.
ACF (Advanced Custom fields) is a WordPress plugin used to create blocks that can be used as repeated or reusable blocks. In this blog, we are going to create a simple block with custom fields.
For creating the block with custom fields, you have to install the ACF plugin in your WordPress dump and activate it. This will create the custom field tab in your dashboard. Get into the custom field plugin dashboard, click on Add New next to the Field groups. Create a block with required fields, here I'm going to create a block with an image, heading, and paragraph. then, you will have to register the block in functions.php by below gist code.
After registering the block in functions.php, you will have to create a PHP file for getting the values from the fields we created with ACF. And, echo them into the div element to achieve the structure. Create your own PHP file and paste the below gist in it, save the file inside yourthemefolder>template-parts>block>yourphpfile.php
Go to the dashboard of your project, click on custom fields to create a common block with custom fields as we discussed above, the options for creating fields and assigning them to the content-acf-common-block.php is shown in the images below, and follow the steps.
Step-1: Create a field for uploading images to the common block.
Step-2: Create a field for entering the title of the common block.
Step-3: Create a field for entering the description of the common block.
Step-4: Under the location tab, update the created custom fields to the ACF block registered in functions.php and update the block, refer image below.
Update the acf block after saving it to the correct location. Now, go to the page you want to edit, click on the add block button and search for the custom block you registered. For example, I saved the block in the name of the common block, the block will show on the popup that shows all the block, select the block and click on the edit button and fill all the fields and preview the page after updating the page. Style the block as per your need with the class name provided on the content-acf-common-block.php file we created.
In my next blog, will create the same block, not with the custom fields of ACF, but with the InnerBlocks available on Gutenberg. ACF added this new feature in version 5.9. This allows you to insert any block (core or custom) inside your ACF block. Do read this article