How to build ACF Blocks With block json

Discover how to create ACF blocks with block json in WordPress. This guide covers everything from setup to advanced usage, ensuring your blocks are optimized and compatible.WordPress Development

WordPress developers can now build custom ACF blocks with block json. This new method, aligned with WordPress core’s preferred approach, streamlines the block creation process and enhances compatibility with new features. This guide will walk you through the steps of creating ACF blocks using block.json.

Introduction

Advanced Custom Fields (ACF) is a popular tool for extending WordPress functionality. With the introduction of block.json, the process of building custom blocks has become more efficient and standardized. This guide will help you leverage block.json to create ACF blocks that are compatible with WordPress core features and optimized for SEO.

Understanding block.json

block.json is a configuration file that defines a block’s properties in a JSON format. It simplifies block registration by allowing you to declare settings and attributes without writing extensive PHP code. This approach ensures consistency and easier management of blocks.

Setting Up ACF Blocks

Before creating a custom block, ensure you have the necessary tools:

1. WordPress: Make sure your WordPress installation is up to date.
2. ACF Pro: Install and activate the Advanced Custom Fields Pro plugin.
3. Theme or Plugin: Decide whether you will add the block to your theme or create a custom plugin.

Most of this will line up with settings for acf_register_block_type(), but there are some important things to note:

Creating the block.json File

Create a block.json file in your theme or plugin directory. This file will define the block’s basic properties.

{
  "apiVersion": 2,
  "name": "my-plugin/my-custom-block",
  "title": "My Custom Block",
  "category": "common",
  "icon": "admin-comments",
  "keywords": ["acf", "custom block", "my block"],
  "acf": {
    "mode": "edit",
    "renderTemplate": "template-parts/blocks/my-custom-block.php"
  },
  "supports":

Advanced Usage of ACF Blocks with block.json

While the basic setup of ACF blocks using block.json is straightforward, there are advanced techniques that can enhance the functionality and performance of your custom blocks. These techniques involve registering multiple blocks, optimizing loading times, and integrating additional features.

Register Multiple Blocks Efficiently

If you have multiple custom blocks, you can automate the registration process. Create a PHP function that scans your blocks directory and registers each block found. This method improves maintainability and reduces redundancy.

function register_all_acf_blocks() {
    // Define the directory containing your blocks
    $blocks_dir = get_template_directory() . '/blocks/';
    
    // Check if the directory exists
    if ( !is_dir( $blocks_dir ) ) {
        return;
    }
    // Scan the directory for block folders
    $block_folders = array_filter(glob($blocks_dir . '*'), 'is_dir');
    
    // Loop through each block folder and register the block
    foreach ( $block_folders as $block_folder ) {
        $block_json = $block_folder . '/block.json';
        // Check if block.json exists in the folder
        if ( file_exists( $block_json ) ) {
            register_block_type( $block_json );
        }
    }
}
add_action( 'init', 'register_all_acf_blocks' );

Optimize Block Asset Loading

To ensure your custom blocks load efficiently, it’s important to manage how CSS and JavaScript files are enqueued. You can use conditional logic to only load assets when necessary, reducing overall page load times.

function enqueue_block_assets() {
    $current_block = get_post_meta( get_the_ID(), '_wp_block_type', true );
    // Check if the current post contains the specific block
    if ( has_block('my-plugin/my-custom-block') ) {
        wp_enqueue_style( 'my-custom-block-style', get_template_directory_uri() . '/blocks/my-custom-block/style.css', array(), '1.0.0' );
        wp_enqueue_script( 'my-custom-block-script', get_template_directory_uri() . '/blocks/my-custom-block/script.js', array( 'jquery' ), '1.0.0', true );
    }
}
add_action( 'wp_enqueue_scripts', 'enqueue_block_assets' );

Integrate Additional Features

You can enhance your custom blocks by integrating additional ACF features, such as custom field groups, or by using third-party plugins for extended functionality.

Example: Adding Custom Field Groups

Create a JSON file for your custom field groups and load them alongside your block.

function load_acf_field_groups() {
    $acf_json_dir = get_template_directory() . '/acf-json/';
    
    if ( is_dir( $acf_json_dir ) ) {
        $acf_field_groups = array_filter(glob($acf_json_dir . '*.json'), 'is_file');
        
        foreach ( $acf_field_groups as $acf_field_group ) {
            $field_group = json_decode( file_get_contents( $acf_field_group ), true );
            acf_add_local_field_group( $field_group );
        }
    }
}
add_action( 'acf/init', 'load_acf_field_groups' );

Testing and Debugging

Before deploying your custom blocks, thoroughly test them to ensure they work as expected across different browsers and devices. Use the following tips for effective testing and debugging:

1. Validate JSON: Use a JSON validator to check your block.json files for syntax errors.
2. Browser Developer Tools: Inspect elements and console logs to identify any issues with your block’s markup and scripts.
3. Cross-Browser Testing: Test your blocks in different browsers to ensure compatibility.

Icon

You can specify a Dashicons icon to use, or include an actual SVG:

"icon": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22.5 22.5'><defs><style>.a{fill:#222;}.b{fill:#1fa8af;}</style></defs><path class='a' d='M20.17,4a10.17,10.17,0,0,0-7-3.5L11.91.38h-.18a.64.64,0,0,0-.47.13A.68.68,0,0,0,11,.93L10.6,3.79a.48.48,0,0,0,.12.43.54.54,0,0,0,.44.18h.11l1.44.17c3.94.45,6.12,2.69,5.84,6a8.37,8.37,0,0,1-2.49,5.12A8.14,8.14,0,0,1,10,18.06l-.65,0H9.15a.8.8,0,0,0-.5.17.68.68,0,0,0-.25.44L8,21.5a.49.49,0,0,0,.12.42.57.57,0,0,0,.45.18h.17l1,0h.34a11.61,11.61,0,0,0,8.21-3.39,12.76,12.76,0,0,0,3.77-7.92A9.49,9.49,0,0,0,20.17,4Z'/><path class='b' d='M9.2,17h.15L10,17a7.61,7.61,0,0,0,3.64-.77L15,6.15a8.65,8.65,0,0,0-2.33-.57l-1-.12-1,7.35L9.23,7c-.11-.45-.33-.67-.65-.67H7.16c-.29,0-.5.22-.65.67L5.1,12.81,3.82,3a.55.55,0,0,0-.61-.55H.78a.36.36,0,0,0-.29.16A.6.6,0,0,0,.37,3a.5.5,0,0,0,0,.18L2.53,19.22a1.07,1.07,0,0,0,.23.6.64.64,0,0,0,.53.23H5.16c.37,0,.61-.21.73-.65l2-7.19Z'/></svg>",

Conclusion

Creating custom ACF Blocks built using acf_register_block_type() is a powerful way to enhance your WordPress site’s functionality and performance. By following the steps outlined in this guide, you can create blocks that are well-structured, efficient, and optimized for SEO. These blocks will not only meet the needs of your users but also comply with best practices for Google AdSense approval.

Implementing advanced techniques, such as automating block registration and optimizing asset loading, will further improve the maintainability and performance of your custom blocks. Remember to thoroughly test your blocks and continuously optimize them to ensure they provide the best possible experience for your users. By leveraging the capabilities of ACF and block.json, you can create dynamic, custom blocks that enhance your site’s functionality, improve user engagement, and boost your search engine rankings.