古腾堡渲染 locate_template

Question

我想用带有 create-guten-block 的 gutenberg 服务器端渲染一个简单的模板。

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;
    },
} );

但是如果我想渲染这部分，我会在 Chrome.

的 Quirks-Mode 中的 edit-函数中遇到一个错误

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

有人知道我做错了什么吗？

Answer 1

您的区块注册设置没问题。问题是您的函数 mmu_block_render() 没有 return 为要呈现的 <ServerSideRender> 设置有效值。

<ServerSideRender> 用于在块编辑器中呈现动态内容的预览。它不打算像您的函数试图做的那样加载完整的模板文件。因此 locate_template 将不是 return 有效值。

下面是两个示例，第一个重现了看到的错误，第二个显示了已更正以呈现有效结果的相同功能。我选择函数 the_title() 因为它在头文件模板文件中最常见：

无效

<?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>";
}
?>

有效 the_title 的值是 returned 并且回调函数按预期呈现，例如：

<?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>";
}
?>

如果您替换您的函数和运行上面的两个示例，您将能够继续获取模板文件的密钥 part/s 并确保它们 return值并正确呈现。

古腾堡渲染 locate_template

Gutenberg render locate_template

wordpress

wordpress-gutenberg

gutenberg-blocks

wordpress-plugin-creation

project-gutenberg