Gutenberg render locate_template

Question

I wanna render a simple template with gutenberg serverside with create-guten-block.

init.php:

function melaniemueller_templateparts_block_cgb_block_assets() {  

register_block_type(
        'cgb/block-melaniemueller-templateparts-block', array(
            
            'render_callback' => 'mmu_block_render',
        )
    );
    }
}

// Hook: Block assets.
add_action( 'init', 'melaniemueller_templateparts_block_cgb_block_assets' );
    
function mmu_block_render($attr, $content) {
       locate_template( 'custom\php\templates\header\header_main_1.php', true );
    }

block.js:

registerBlockType( 'cgb/block-melaniemueller-templateparts-block', {
    // Block name. Block names must be string that contains a namespace prefix. Example: my-plugin/my-custom-block.
    title: __( 'melaniemueller-templateparts-block - CGB Block' ), // Block title.
    icon: 'shield', // Block icon from Dashicons → https://developer.wordpress.org/resource/dashicons/.
    category: 'common', // Block category — Group blocks together based on common traits E.g. common, formatting, layout widgets, embed.
    keywords: [
        __( 'melaniemueller-templateparts-block — CGB Block' ),
        __( 'CGB Example' ),
        __( 'create-guten-block' ),
    ],

    edit: function( { attributes } ) {
        return (
            <ServerSideRender
                block="cgb/block-melaniemueller-templateparts-block"
                attributes={ attributes }
            />
        );
    },

    save: function( { } ) {
        return null;
    },
} );

But if I wanna render this part I get a bug in the edit-function in Quirks-Mode in Chrome.

Error loading block: The response is not a valid JSON response.

Has anyone an idea what I did wrong?

Answer 1

The setup of your block registration is fine. The issue is your function mmu_block_render() not returning a valid value for the <ServerSideRender> to render.

The <ServerSideRender> is used to render a preview of dynamic content in the Block Editor. It is not intended to load complete template files as your function is attempting to do. As such locate_template will not return a valid value.

Below are two examples, the first reproduces the error seen and the second shows the same function corrected to render a valid result. I chose the function the_title() as it is most commonly in header template files:

Invalid

<?php
function mmu_block_render($attr, $content){
    // the_title echo is set to "true", printing the value 
    return "<header>". the_title('<h1>', '</h1>', true)."</header>";
}
?>

Valid The value of the_title is returned and the callback function renders as expected eg:

<?php
function mmu_block_render($attr, $content){
    // // the_title echo is set to "false", returning the value 
    return "<header>". the_title('<h1>', '</h1>', false)."</header>";
}
?>

If you replace your function and run the two examples above, you will be able to then work on taking the key part/s of your template file and ensuring that they return a value value and render correctly.