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

编程问答 2022-05-31

问题描述

我正在尝试构建一个自定义的古腾堡块，它将动态呈现（来自 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');

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，如果这有帮助的话..

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

解决方法

您的代码在正确的路径上，因为您确实需要在 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 尽可能实现您的目标。

,

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