Javascript 将旧wordpress短代码插件转换为块

我有一个旧的wordpress插件，用来显示最新的帖子。该插件使用带有选项的短代码。现在我正在对插件进行一点转换，以便它可以用作古腾堡块。我保持了php代码的完整性，并试图创建一个具有一些设置的块（块的右侧设置框）。我不想像其他块一样在块编辑器中显示文章，而是在前端显示数据。因此，在管理中，除了占位符文本和设置之外，什么都看不见。在plugin的init.php中，我有以下代码（请忽略这里的编码错误，我只是放了一些部分来理解）：

这个很好用。如果我添加块，它将显示前端的立柱。但是我在admin中收到一条错误消息：
“更新失败。响应不是有效的JSON响应。”
在保存带有块的页面时；短代码也在admin中执行。我怎样才能防止这种情况？这是我的正确方法吗？请告诉我一些想法。

当

render\u回调函数返回与Gutenberg Edit（）函数不同的内容时，会出现错误消息“更新失败。响应不是有效的JSON响应”。对于动态块

该块非常适合将现有PHP函数迁移/集成到Gutenberg块中

在PHP中注册block
dc/block-dcposts
是正确的。接下来，在JavaScript中块声明的编辑函数中添加一个
ServerSideRender
组件，例如：

index.js

import { registerBlockType } from '@wordpress/blocks';
import { __ } from '@wordpress/i18n';
import ServerSideRender from '@wordpress/server-side-render';

/**
* Registering our block in JavaScript
*/
registerBlockType('dc/block-dcposts', {
    title: __('DCPosts', 'dc'),
    description: __(
        'What DCPosts does..',
        'dc'
    ),
    category: 'layout',
    icon: 'star-filled',
    edit: () => {
        return (
            <ServerSideRender
                block="dc/block-dcposts"
            />
        );
    },
    save: () => { return null } // Dynamic blocks should return null to avoid validation error.
});

从'@wordpress/blocks'导入{registerBlockType}；
从'@wordpress/i18n'导入{{uu}；
从“@wordpress/server-side-render”导入ServerSideRender；
/**
*在JavaScript中注册我们的块
*/
registerBlockType（'dc/块DCPOST'{
标题：u uu（'DCPosts'，'dc'），
说明：__(
“DCPosts做什么…”，
“dc”
),
类别：'布局'，
图标：“星满”，
编辑：（）=>{
返回(
);
},
save:（）=>{return null}//动态块应返回null以避免验证错误。
});

plugin.php（简化示例）

函数dc\u块dcposts（$attributes）{
返回“动态呈现内容”；
}
函数dc_block_dcposts_init（）{
寄存器块类型（'dc/block dcposts'，数组(
“render\u callback”=>“dc\u块\u dcposts”，
) );
};
添加动作（'init'，'dc_block'u dcposts'u init'）；

一旦基本设置开始工作，下一步可能是迁移PHP函数所需的任何属性。这些属性需要定义，然后通过传递给PHP函数才能接收

import { registerBlockType } from '@wordpress/blocks';
import { __ } from '@wordpress/i18n';
import ServerSideRender from '@wordpress/server-side-render';

/**
* Registering our block in JavaScript
*/
registerBlockType('dc/block-dcposts', {
    title: __('DCPosts', 'dc'),
    description: __(
        'What DCPosts does..',
        'dc'
    ),
    category: 'layout',
    icon: 'star-filled',
    edit: () => {
        return (
            <ServerSideRender
                block="dc/block-dcposts"
            />
        );
    },
    save: () => { return null } // Dynamic blocks should return null to avoid validation error.
});

function dc_block_dcposts($attributes){
    return '<div>Dynamically rendered content</div>';
}

function dc_block_dcposts_init(){
    register_block_type( 'dc/block-dcposts', array(
        'render_callback' => 'dc_block_dcposts',
    ) );
};

add_action( 'init', 'dc_block_dcposts_init' );