WordPress 自定义古腾堡 block render_callback 不渲染

Question

我正在尝试构建一个自定义古腾堡 block ，它将动态呈现(从 PHP)。 我花了大量时间寻找不同的解决方案，将代码最小化到绝对必要的程度，但仍然不起作用。

我的主要引用是这个页面:https://developer.wordpress.org/block-editor/tutorials/block-tutorial/creating-dynamic-blocks/

这是我的代码: PHP(函数.php):

function register_test_block(){

    wp_register_script('test-block',
        get_template_directory_uri().'/js/test-block.js',
        array('wp-blocks') );

    register_block_type('test/testblock', array(
            'render_callback' => function( $block_attributes, $content ) {
                return '<p>OMG SUCCESS!</p>';
            },
            'editor_script' => 'test-block' )
    );
}

add_action('init', 'register_test_block');

测试 block .js:

const { registerBlockType } = wp.blocks;


registerBlockType('test/testblock', {
    title: 'test block',
    edit: props => {
        return (<p>test</p>);
    },
    save: props => {
        return null;
    }
});

我真的不知道为什么这没有按预期工作，在前端，该 block 根本没有呈现，甚至没有评论或任何东西。哦，我当前的 WP 版本是 5.5.3，PHP 7.3，如果这有帮助的话..

有谁知道为什么我的 block 没有渲染？谢谢!

Answer 1

您的代码位于正确的路径上，因为您确实需要在 JavaScript 和 PHP 中注册该 block 。使其工作的缺失环节是，在 JavaScript edit() 函数中，PHP 回调函数的实际渲染是通过 <ServerSideRender> 完成的。组件，例如:

测试 block .js:

const { registerBlockType } = wp.blocks;
const { serverSideRender: ServerSideRender } = wp;

registerBlockType('test/testblock', {
    title: 'test block',
    edit: () => {
        return (
            <>
                <ServerSideRender
                    block="test/testblock"
                />
            </>
        );
    },
    save() {
        return null; // Nothing to save here..
    }
});

函数.php

function register_test_block(){
    wp_register_script('test-block', get_template_directory_uri() . '/js/test-block.js', array(
        'wp-blocks',
        'wp'
    ));

    register_block_type('test/testblock', array(
        'render_callback' => 'test_testblock_renderer'
        'editor_script' => 'test-block' //re-added, see comment below
    ));
}

// Optional: Moved render callback to separate function to keep logic clear
function test_testblock_renderer($block_attributes, $content){
    return '<p>OMG SUCCESS!</p>';
}

add_action('init', 'register_test_block');

ServerSideRender 中还有许多更有用的属性。然而，用于构建动态 block 的组件:它是一个遗留组件，如果您正在为古腾堡构建新的数据驱动 block ，最好看看您是否能够通过 REST API endpoints 实现您的目标。在可能的情况下。