Shah Alom
Shah Alom

Reputation: 1055

ServerSideRender components producing "Error loading block: No route was found matching the URL and request method" error

I am working for a Gutenberg block using create-guten-block foss. While trying to get output from a function written in a PHP file I am seeing Error loading block: No route was found matching the URL and request method error in my block in the Gutenberg editor.

Consider the following code in plugin.php:

function test_me_render_serverside_handler($args) {
    return "<p>testCategory: " . $args["testCategory"] . "</p>";
}

function test_me_register_block_type() {
    register_block_type(
        'test-me/test-to-block', array(
            'render_callback' => 'test_me_render_serberside_handler',
            'attributes' => array(
                'testCategory' => array(),
            ),
        )
    );
}

add_action( 'init', 'test_me_register_block_type' );

And the react code in block.js file is:

attributes: {
    adCategory: { // Required
        type: 'integer',
    },
},

edit: ( props ) => {
    const { className, setAttributes, attributes } = props;
    const { adCategory } = attributes;

    return (
        <div className={ className }>
        {
            createElement( ServerSideRender, {
                block: 'test-me/test-to-block',
                attributes: attributes,
            } )
        }
        </div>
    );
},

When trying to create the block in the gutenberg editor, I found error test-me/test-to-block which is a request to wp-json/wp/v2/block-renderer/test-me/test-to-block

Am I missing something to enable rest api routing for this block?

Upvotes: 0

Views: 734

Answers (1)

Shah Alom
Shah Alom

Reputation: 1055

Well, the problem was the typo in the function name which is 'test_me_render_serverside_handler' and test_me_render_serberside_handler. And we also need to maintain the same name and type of attributes in the php function and in the js attributes.

Upvotes: 0

Related Questions