How to create Gutenberg blocks with ACF?
Optimize your WordPress development workflow with our checklist for building Gutenberg blocks using ACF. Get integration and increase your website’s performance.
Requirements and manual for working with Gutenberg blocks created using ACF
1. When initializing a block, the path to the preview must be specified, example:
/**
*
Information Block
*/
acf_register_block_type(array(
'name' => 'information-block',
'title' => __('Information Block'),
'render_template' => get_template_directory() . '/
template_parts/blocks/homepage/information/
information_block.php',
'category' => 'mi-blocks',
'icon' => 'flag',
'keywords' => array('info', 'tabs', 'content', 'text'),
'example' => array(
'attributes' => array(
'mode' => 'preview',
'data' => array(
'preview_img' => get_template_directory_uri() . '/
template_parts/blocks/homepage/information/preview.jpg',
'is_preview' => true
)
)
)
));
2. The block template must be created in the directory of the page on which it is shown in the layout, example:
3. In the block template, be sure to check for previews
<?php
if ( isset( $block['data']['preview_img'] ) ) {
echo MTDBlocks::get_block_preview( $block );
}else{
$title = get_field('title');
$button = get_field('button');
?>
<section class="section">
<div class="section_in">
</div>
</section>
<?php } ?>
4. Be sure to add a check for an empty ACF field
<?php if(!empty($title)){ ?>
<h3 class="get_started__title"><?php echo $title ?
></h3>
<?php } ?>
5. On all links, add the URL cleanup function
<a class="get_started__btn" href='<?php echo esc_url($button['url']) ?>'><?php echo $button['title'] ?></a>
6. On images, if they are connected from ACF fields, add a string cleanup function to the alt, title, etc. attributes
<img class="customer_stories__bg_img" src='<?php echo esc_url($image['url']) ?>' alt='<?php echo esc_attr($image['alt']) ?>' loading="eager">
7. We make the naming of variables with ACF fields as short as possible. In most cases, the scope of your variable will be only your block, an example of correct naming
$form_title = get_field( 'form_title' );
$form_subtitle = get_field( 'form_subtitle' );
$bg = get_field( 'background' );
no need to create variables of the $information_block_description_link type
8. If we work within the WP_Query class, we first of all use all the standard WP template tags, only when we do not have enough functionality, then we create additional ACF fields
Working with ACF fields in the admin panel
- Groups are named with the prefix of the type of element to which it will be added, if it is a Gutenberg block, the name should be “Block: Field Group Name” if it is a page, “Page: Field Group Name”, if it is a Custom Post Type, “CPT: Field Group Name”
- If the image is made using the picture tag, which contains a webp file, then we connect 2 fields for the image, the usual Image and Image Webp
- Icons, if they do not have a hover that changes the color of the SVG itself, are connected as a regular img tag so that the customer has the opportunity to upload their own picture (icon).
