0

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

初始化.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 );
    }

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

但是，如果我想渲染这部分，我会edit在 Chrome 的 Quirks-Mode 中的 -function 中遇到一个错误。

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

有谁知道我做错了什么？

4

1 回答 1

1

您的块注册设置很好。问题是您的函数没有返回要渲染mmu_block_render()的有效值。<ServerSideRender>

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

下面是两个示例，第一个重现了看到的错误，第二个显示了相同的函数已更正以呈现有效结果。我选择了该函数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 的值，回调函数按预期呈现，例如：

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

如果您替换您的函数并运行上面的两个示例，您将能够处理模板文件的关键部分并确保它们返回一个值值并正确呈现。

于 2021-07-25T06:43:46.523 回答