I jumped into an existing project that uses custom Gutenberg blocks (with block.json) turbocharged by ACF.
I read online that when it comes to native blocks, the page will only load the needed CSS/JS files, but in my project, all CSS and JS files are loaded in all pages which is far from ideal.
Anyone with experience in that issue can share some light on the problem?
My block registry:
<?php
// REGISTER ACF BLOCKS AUTOMATICALLY
add_action('init',
function
() {
$block_json_files = glob( get_template_directory() . '/blocks/**/block.json' );
foreach ( $block_json_files as $block_json_file ) {
register_block_type( $block_json_file );
};
});
// ALLOW ONLY OUR ACF BLOCKS
add_filter( 'allowed_block_types_all',
function
( $allowed_blocks, $editor_context ) {
$block_json_files = glob( get_template_directory() . '/blocks/**/block.json' );
$allowed_blocks = [];
foreach ( $block_json_files as $block_json_file ) {
$block_slug = explode('/', $block_json_file)[count(explode('/', $block_json_file)) - 2];
array_push($allowed_blocks, "acf/$block_slug");
};
array_push($allowed_blocks, 'core/freeform');
return $allowed_blocks;
}, 25, 2 );
Here's how my blocks look like:
{
"name"
: "acf/calendar-download",
"title"
: "Calendar Download Block",
"description"
: "A custom contact form block that uses ACF fields.",
"style"
: ["file:./calendar-download.css"],
"category"
: "formatting",
"icon"
: "format-chat",
"keywords"
: ["calendar", "download"],
"acf"
: {
"mode"
: "edit",
"renderTemplate"
: "calendar-download.php"
}
}