Wordpress 自定义古腾堡块 render_callback 不呈现

Question

我正在尝试构建一个自定义的古腾堡块，它将动态呈现（来自 PHP）。我花了很多时间寻找不同的解决方案，将我的代码最小化到绝对必要的程度，但仍然无法正常工作。

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

这是我的代码： PHP (functions.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;
    }
});

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

有谁知道为什么我的块没有呈现？谢谢！

Answer 1

您的代码是正确的，因为您确实需要在 JavaScript 和 PHP 中注册块。使它工作的缺少 link 是在 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..
    }
});

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 component for building dynamic blocks, however: its a legacy component and if you are building a new data-driven block for Gutenberg, it would be best to see if you are able to achieve your goals via the REST API endpoints 中还有更多有用的属性。

Answer 2

非常感谢您的帮助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>';
}

Wordpress 自定义古腾堡块 render_callback 不呈现

Wordpress Custom Gutenberg Block render_callback doesnt render

wordpress

wordpress-gutenberg

gutenberg-blocks