Custom Gutenberg Blocks with Frontity (Kadence)

Hey all,

I am looking to begin working with Frontity and including it into our work flow at my company, currently we create custom WP Themes/Websites using Custom Gutenberg blocks with Gutenberg & Kadence.

I have looked around the files and done some peaking under the hood and found some good information and seen there has been movement in terms of seamless integration of Gutenberg with Frontity.

Upon investigation I have seen that there is a “specific” way that you guys are setting up the integration using the register_block_pattern() function.

Currently, on the WP websites we build we are using custom blocks that are registered using the acf_register_block() config - example below (functions.php),

function acf_faq_block()
            'name' => 'faq-block',
            'title' => __('FAQ Block'),
            'description' => __('A custom FAQ Block'),
            'render_template' => 'template-parts/blocks/home/faq-block.php',
            'category' => 'layout',
            'icon' => 'admin-multisite',
            'keywords' => array('FAQ Block', 'faq-block'),
            'mode' => 'preview',
            'align' => 'full',
    add_action('acf/init', 'acf_faq_block');

The render_template consists of the php/html that is outputted normally on the WordPress Frontend, when the_content() is called, each block generated will grab the corresponding template(s) required.

The main questions I have to ask are:

  • Is it possible to expose the existing structure to prevent re-writing blocks, even if this was retrieving the registered ACF fields and creating react components that consume the data stored within each ‘block’?

  • If the above is not possible, are there any good resources people have used to convert from a php template based Custom Gutenberg Block Pattern to the register_block_pattern()?

Any help or pointers would be greatly appreciated :slight_smile:

1 Like

Hi @oliverhewy

Welcome to the Frontity community.

Yes, it should be possible to expose the existing structure. Check out this blog post which addresses exposing Gutenberg blocks in the WP REST API.

Also take a look at this post on the Frontity blog which goes into quite a bit of detail on using Gutenberg blocks with Frontity.

Hope this helps.