Converting old wordpress shortcode plugin to block

Question

I have an old wordpress plugin built to show latest posts of choice. The plugin uses a shortcode with options. Now I am converting the plugin little bit so that it can be used as a gutenberg block. I kept the php code intact and trying to create a block which will have some settings (right side setting box for block). I don't want to show the posts in block editor like other blocks instead I will just show the data in frontend. So in admin, nothing will be visible rather than a placeholder text and the settings. In plugin's init.php I have this code (Please ignore coding mistakes here, I just put some part to get the idea):

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
    }
}

This works fine. If I add the block, it shows the posts front-end. But I get an error message in admin:
"Updating failed. The response is not a valid JSON response."
while saving the page with the block; and also the shortcode executes in admin. How can I prevent this? Is this the right approach I am on? Please give me some idea.

Answer 1

The error message "Updating failed. The response is not a valid JSON response." occurs when your render_callback function returns different content than the Gutenberg Edit() function. For dynamic blocks, the save() function should return null.

The ServerSideRender block is ideal for migrating/integrating existing PHP functions into a Gutenberg block.

You are on the right path with registering your block dc/block-dcposts in PHP. Next, add a ServerSideRender component in the Edit function of your block declaration in JavaScript, eg:

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 (simplified example)

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

Once you have the basic setup working, the next step could be migrating any attributes your PHP function requires. The attributes need to be defined in the block setup and then passed in via the ServerSideRender component to be recieved by your PHP function.