How to connect Gutenberg block templates to a page

Question

I have a page for which I create blocks using Gutenberg and ACF. First I create a block template, then I create it in ACF and add it to the page using the Gutenberg editor.

Now the problem is that the blocks are not displayed on the page after being added in the Gutenberg editor. How can I connect blocks to a page? I need to take blocks from template-parts/block. Each block in the folder with the block has its own css and js. The structure is shown in the screenshot: Block folder structure

<?php

/**
 * Template Name: Home
 *
 */

get_header(); ?>


<?php
get_footer();

Answer 1

Just read through the official ACF blocks documentation, it's pretty clear and straightforward.

Based on your screenshots, there might be a problem with your block registration and configuration:

1. There's no block.json file in your block folder;
2. You also need to register your blocks with the register_block_type() function.

E.g.:

add_action( 'init', 'register_acf_blocks' );
function register_acf_blocks() {
    register_block_type( get_template_directory() . '/blocks/banner' );
}

If you follow the process by the book, and your post/page/cpt templates are correct as well, your ACF blocks should show up on the frontend together with the core blocks, just as expected.