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.com/736abefe6221

Should that be adjusted manually?

  • 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. May 5, 2019 at 6:38

1 Answer 1


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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.