将旧的wordpress shortcode插件转换为块

如何解决将旧的wordpress shortcode插件转换为块

我有一个旧的wordpress 插件，可以显示所选的最新帖子。该插件使用带选项的简码。现在，我将一点点转换插件，以便可以将其用作gutenberg块。我保持PHP 代码完整无缺，并尝试创建一个具有一些设置的块（块的右侧设置框）。我不想像其他块一样在块编辑器中显示帖子，而是仅在前端显示数据。因此，在管理员中，除了占位符文本和设置之外，什么都不可见。在插件的 init.PHP 中，我有以下代码（请忽略此处的编码错误，我只是介绍了部分内容）：

final class Dcposts {

function dcposts_block_assets() {
    register_block_type(
                'dc/block-dcposts',array(
                    'style'         => 'dcposts-style-css','editor_script' => 'dcposts-block-js','editor_style'  => 'dcposts-block-editor-css','render_callback' => array($this,'mytest')
                )
            );
}

public function mytest($attributes) {
        return '[some_shortcode]'; // I will generate a dynamic shortcode with $attributes
    }
}

这很好。如果我添加块，它将显示帖子的前端。但是我在admin中收到一条错误消息：
“ 更新失败。响应不是有效的JSON响应。”
，同时使用该块保存页面；并且短代码也将在admin中执行。我该如何预防？这是我采用的正确方法吗？请给我一些想法。

解决方法

当您的render_callback函数返回的内容不同于Gutenberg Edit（）函数的内容时，会出现错误消息“更新失败。该响应不是有效的JSON响应。” 。对于动态块，请the save() function should return null。

ServerSideRender块是将现有PHP函数迁移/集成到Gutenberg块的理想选择。

在PHP中注册块dc/block-dcposts的方向正确。接下来，在JavaScript的块声明的Edit函数中添加一个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.
});

plugin.php（简化示例）

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' );

完成基本设置后，下一步可能是迁移PHP函数所需的所有属性。需要先定义in the block setup属性，然后通过ServerSideRender component传递这些属性，以供您的PHP函数接收。