I am trying to create a gutenberg block with server-side rendering. The problem is the block renders in the top left instead. In the frontend, it displays as expected.

const { __ } = wp.i18n;
const { registerBlockType } = wp.blocks;
const el = wp.element.createElement;


registerBlockType( 'wda-wda/wda-gutenberg-block', {
    title: __( 'My Block', 'wda-wda' ),
    icon: 'admin-users',
    category: 'common',
    attributes: {
        images : {
            default: [],
            type:   'array',

        }
    },
    edit( { attributes, setAttributes, className, focus, id } ) {
        // Put a user interface here.
        return null;

    },
    save( { attributes, className } ) {
        // Gutenberg will save attributes we can use in server-side callback
       return null;
    },
} );

and the PHP:

function wda_register_block() {

    register_block_type( 'wda-wda/wda-gutenberg-block', array(
        'editor_script'     => 'wda-gutenberg-block',
        'render_callback'   => array( $this, 'render_callback' ),
    ) );
}

function render_callback() {
    echo 'The Content';
}
add_action( 'init', 'wda_register_block');

The content is displayed on top left of the post editor:

Should that be adjusted manually?

I am trying to create a gutenberg block with server-side rendering. The problem is the block renders in the top left instead. In the frontend, it displays as expected.

const { __ } = wp.i18n;
const { registerBlockType } = wp.blocks;
const el = wp.element.createElement;


registerBlockType( 'wda-wda/wda-gutenberg-block', {
    title: __( 'My Block', 'wda-wda' ),
    icon: 'admin-users',
    category: 'common',
    attributes: {
        images : {
            default: [],
            type:   'array',

        }
    },
    edit( { attributes, setAttributes, className, focus, id } ) {
        // Put a user interface here.
        return null;

    },
    save( { attributes, className } ) {
        // Gutenberg will save attributes we can use in server-side callback
       return null;
    },
} );

and the PHP:

function wda_register_block() {

    register_block_type( 'wda-wda/wda-gutenberg-block', array(
        'editor_script'     => 'wda-gutenberg-block',
        'render_callback'   => array( $this, 'render_callback' ),
    ) );
}

function render_callback() {
    echo 'The Content';
}
add_action( 'init', 'wda_register_block');

The content is displayed on top left of the post editor: http://cloud.supportally/736abefe6221

Should that be adjusted manually?

• plugins
• plugin-development
• block-editor

• 1 I haven't made a server rendered block myself, but if they work anything like shortcodes then the cause of this issue would be the same as when it happens with Shortcodes: The callback function needs to return its output, not echo it. – Jacob Peattie Commented May 5, 2019 at 6:38

1 Answer 1

render_callback() should return the output just like shortcode. Instead of echoing it.