Wordpress 自定义 Gutenberg 块 render_callback 不呈现

Question

我正在尝试构建一个自定义 Gutenberg 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');

test-block.js：

const { registerBlockType } = wp.blocks;


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

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

有谁知道为什么我的块没有渲染？谢谢！

Answer 1

非常感谢您的帮助，S.Walsh！ 清理浏览器缓存或重新输入块并没有真正帮助。然后我重新排列了一些文件，更改了一些函数名，突然就可以了。 这是我当前的 js（如果有人遇到同样的问题）：

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

const { Fragment } = wp.element;

registerBlockType('abc/dynamicblock', {
    title: 'dynamicblock',
    description: 'dynamicblock',
    icon: (<svg version="1.1" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24"><rect width="24" height="24" style={{fill:'rgb(0,121,200)'}} /></svg>),
    category: 'abc',
    edit: props => {
        return <Fragment>
            <p>serverSideRender should appear here:</p>
            <ServerSideRender
                block={ "abc/dynamicblock" } />
        </Fragment>;
    },
    save: props => {
        return null; // Nothing to save here..
    }
});

这是php部分：

function register_dynamicblock(){

    wp_register_script('dynamicblock',
        get_template_directory_uri().'/js/dynamicblock.js',
        array('wp-blocks', 'wp-element'),
        time() );

    $re = register_block_type('abc/dynamicblock', array(
        'render_callback' => 'dynamicblock_renderer',
        'title' => 'dynamicblock',
        'editor_script' => 'dynamicblock'
    ));

}
add_action('init', 'register_dynamicblock');

function dynamicblock_renderer(){
    return '<div>success!</div>';
}

Answer 2

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

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

functions.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 组件中还有许多有用的属性，用于构建动态块，但是：它是一个遗留组件，如果您正在为 Gutenberg 构建一个新的数据驱动块，最好看看是否您可以通过REST API endpoints 尽可能实现您的目标。