Index
Gutenberg, which entered our lives with the WordPress 5.8 version, brought many innovations to websites. With the introduction of Full Site Editing options, WordPress paved the way for users to create block-based websites using Gutenberg.
In this article, we will examine how to create a Gutenberg Block using Advanced Custom Fields and create our custom block structure. All we need to do is to apply the solutions step by step to the question of How to Create a Gutenberg Block with Advanced Custom Fields. Let’s explore our article on How to Create a Gutenberg Block with Advanced Custom Fields together.
How to set up Advanced Custom Fields?
With the updated versions of WordPress, we see that it now focuses on the concept of full site editing. With the announcement of Gutenberg, WordPress developed the concept of Full Site Editing and made it possible for users to create their own custom fields using Advanced Custom Fields with its new versions. These custom fields allow users to easily make the changes they want on their sites. Gutenberg, using these block features, allowed users to create their blocks and create their custom areas.
Now, let’s start the steps to create a Gutenberg Block with Advanced Custom Fields. We need to download the Advanced Custom Fields plugin and enter our plugin page on our WordPress site. As I mentioned in the image below, we add the ACF plugin that appears by clicking the Add New button to the right of the Plugins heading and typing Advanced Custom Fields in the search field in the window that appears.
We install and activate our plugin by clicking the Install Now button on the screen that appears as shown in the picture above. With this, we have completed the first step of creating a Gutenberg Block with Advanced Custom Fields by installing the Advanced Custom Fields plugin on our site. Now let’s move on to how we can create a customized block through Advanced Custom Fields.
How to Create a Custom Block Using Advanced Custom Fields?
After successfully installing the Advanced Custom Fields plugin, we can move on to our next step of creating a Custom Block with Advanced Custom Fields. First of all, what we need to do is to click on the ACF text from our WordPress admin Panel. Then, in the window that opens, you will see a screen as in the photo.
- First, click the Add Field Group button to name your block. I will use Custom Block as a general name. You can also create a Fields Group with your custom name. Naming the block according to its function and using global names will make it easier for us later.
- After determining the block name, we need to add the variables we will create in the block. For this, we need to determine the types of variables we will use and name them. For my own block, I will use a title, description text, image and button for the block I created. You can create and name variables according to the needs of your own block. While creating your variables, you can determine the type of the field you created with the Field Type variable and the name of the variable you created with the Field Label. For example, when creating the image variable, image should be selected as the Field Type. The Field Name is automatically added the same as the label, but you can change it if you wish.
- After creating our title, we will create the Fields we want to create by clicking the Add Field button.
- I created the fields that I will use in my own block structure as shown in the picture. You can customize your own block by creating the fields you need as in the picture.
One of the most important aspects to pay attention to when performing these operations is the type property of the fields you create. Each field should reflect its own property so that when we later add these special blocks to the page, fields will come according to the selected field type. For example, if we choose text when we want to add a link, this link will only be displayed as a text.
After creating our custom block as above, let’s take a look at how we can use our custom block structure in Gutenberg.
How to Create Advanced Custom Block Within Theme?
We must create a folder within the theme to call the blocks we created with Advanced Custom Block. We open this folder in our active theme. You can determine the name of the folder according to your own structure. I will create a folder named blocks to make it clarity. You can create a folder with any name you want.
I will keep the blocks I created by Advanced Custom Fields in the folder I created under the name Blocks.
After creating the folder we need to keep the blocks we created, we open a folder named block that you created within the folder. Since the name of the block I created is Custom Block, I open a folder named custom. We will add the PHP and JSON files of the block structure to this folder. The PHP file we created allows us to call the variables we created in our block structure and create our HTML structure. Our JSON file is the file used by Gutenberg to introduce our block and contains the name, icon and properties of our block structure. Below you can examine the JSON file I created.
{
"name": "acf/custom-block", // Block Name
"title": "Custom Block", // Block Title
"description": "Custom block exercise", // Block Description
"category": "formatting", // Block Category
"icon": "ellipsis", // Block Icon
"keywords": [ // Keywords of Our Block Structure
"custom",
"block",
"exercise"
],
"acf": {
"mode": "preview",
"renderTemplate": "custom-block.php"
},
"align": "full", // Full Alignment
"supports": {
"anchor": true
}
}After the JSON file we created, we create our HTML structure. As in the example, I have an HTML structure that I have designed for myself, you can create your own HTML structure and apply your own design to your HTML structure and write it in this PHP file. In our code structure below, it is important to know; the WordPress function is called as get_field($selector, [$post_id], [$format_value]). get_field(“field_name”) in this way, you print the custom block variables you created inside html with echo. What you need to pay attention to is that the get(“field_name”)takes the name property that we will edit on the page, do not confuse it with the field label name.
<?php
$title = get_field('title');
$description = get_field('description');
$link = get_field('button')
$image = get_field('image');
?>
<div class="custom-block-container">
<div class="custom-block">
<div class="custom-block-left-side">
<div class="custom-block-title">
<?php echo esc_html($title); ?>
</div>
<div class="custom-block-description">
<?php echo esc_html($description); ?>
</div>
<a class="custom-block-button"
href="<?php echo esc_attr($link['url']); ?>"
target="<?php echo esc_attr($link['target']) ?>">
<?php echo esc_html($link['title']); ?>
</a>
</div>
<div class="custom-block-right-side">
<div class="custom-block-image">
<?php echo esc_html(wp_get_attachment_image($image)); ?>
</div>
</div>
</div>
</div>As noted above, get_field(‘button’) returns an array because it contains multiple pieces of information. You can find out the data inside your variable and its type by writing
<?php var_dump(variableName) ?> the code to find out the type of the variable you are calling.
How to Add Custom Block into Theme?
The JSON and PHP files we wrote need to be import into our theme.. However, ACF automatically creates JSON files in our theme. Therefore, there is no need to do anything for JSON. These automatically created files will store special block variables like the Custom Block we created in Advanced Custom Fields.
As long as the JSON file automatically created by ACF is not deleted, it can be imported by other users and used in the same way. For this, you can download and use blocks that can be imported in the synchronization tab on the Fields Group page in ACF.
You need to import the Custom Blocks we have created in order for them to be defined by ACF. To do this, we need to create a file within the theme in which we want to use the following function and write it there. I created this file named acf.php, you can also create it by choosing the name yourself.
After creating our acf.php file, you can change the name of acf.php as I mentioned above.
<?php
function custom_register_acf_blocks() {
register_block_type(get_template_directory() . '/blocks/custom');
}
add_action( 'init', 'custom_register_acf_blocks' );After writing our codes as above, you can see that our ACF JSON file is automatically created when we enter the Advanced Custom Fields plugin we added, click on the Block we created and press the Save Changes Button at the top right.
How to Add a Custom Block to Gutenberg with Advanced Custom Fields?
In our last step, the code we need to add to use the block structure we created with Advanced Custom Fields is below. The function of this code imports the files called in acf.php with custom_includes= array(./acf.php) into our page. I am adding this code to the function.php located in the theme we use.
$custom_inc_dir = get_template_directory();
// Array of files to include.
$custom_includes = array(
'/acf.php'
);
// Include files.
foreach ( $custom_includes as $file ) {
require_once $custom_inc_dir . $file;
}After doing this, we need to select the type of Custom Block structure we created in Advanced Custom Fields. To do this, we need to synchronize the custom block structure we created in the Settings section of the Edit Field Group in the picture below with the Custom Block folder we created under the name blocks folder.
In this way, it is transferred into the block structure we created with our Custom Block folder. It gives you the opportunity to use the variables you create. If you do not do this synchronization, you will not use the Block structure you created on your page.
How to Use Advanced Custom Block in Gutenberg Block?
After following the steps above, all our operations are completed, now we just need to call the custom block structure we created. Let’s go to our page to call this structure in Gutenberg.
We select the structure we want to create by pressing the +New button at the top of the WordPress panel. After choosing our structure, we need to call the block structure we created with Advanced Custom Fields in Gutenberg. For this, when we press the +New button, we can add the block structure we created to our page by pressing the + button at the top of the post or page we opened.
After pressing the + button, a Search box appears. In this section, we call the block structure we added by typing the special block name we created with Advanced Custom Fields. After doing this, there is only one action left. We need to write the variables of the block structure we are calling. Let’s complete the last operation together and call the special blocks we created on our page.
We created the Custom Block structure we created on our page. Now let’s enter our variables. After entering my variables, we see the block we created. The block structure we added looks like this on the Gutenberg Editor page. Now let’s take a look at how it looks on our page.
Our page looks like the image below. Now let’s edit our image a little by writing our CSS codes.
You can also edit your CSS codes to suit the image you want.
Gutenberg editor does not import the CSS codes you write. Therefore, you can’t see it in the Gutenberg Editor as it appears on the page. To edit it, you need to import the css file you wrote in the Gutenberg Editor into your folder. For this, you need to use the wp_enqueue_style function from WordPress functions. You can import css files into Gutenberg Editor by adding the code below to your function.php file. Since the css file I added is custom-block.css, I wrote the extension of my own folder with get_theme_file_uri, you can also write your own folder extension.
function enqueue_editor_styles() {
wp_enqueue_style(
'mytheme-block-editor-styles',
get_theme_file_uri('assets/css/custom-block.css')
);
}
add_action( 'enqueue_block_editor_assets', 'enqueue_editor_styles' );In our above article on How to Create Gutenberg Blocks with Advanced Custom Fields, by following the steps one by one, you can also use Advanced Custom Fields to create your own custom block, and thus edit your pages, posts, and any areas you want to use. Feel free to leave any questions you have in the comments below.
