0

I've pulling pulling my hair for the last 2 days with this and searching did not result in any solution to the issue I am having.

I wanted to use <serverSideRender /> to load dynamic content in the front-end as well as see the generated content in the Gutenberg editor. I tested it with the simple example given on the Gutenberg doc page.

Here is the JS code:

const { registerBlockType }                 = wp.blocks;
const { serverSideRender }                  = wp.serverSideRender

registerBlockType( 'gutenberg-examples/example-dynamic', {
    title: 'Example: last post',
    icon: 'megaphone',
    category: 'widgets',

    edit: function( props ) {

        return [

            <p>serverSideRender should appear here:</p>,
            <serverSideRender
                block="gutenberg-examples/example-dynamic"
                attributes={ props.attributes }
            />
        ];
    },
} );

PHP Code:

function gutenberg_examples_dynamic_render_callback( $attributes, $content ) {
    $recent_posts = wp_get_recent_posts( array(
        'numberposts' => 1,
        'post_status' => 'publish',
    ) );
    if ( count( $recent_posts ) === 0 ) {
        return 'No posts';
    }
    $post = $recent_posts[ 0 ];
    $post_id = $post['ID'];
    return sprintf(
        '<a class="wp-block-my-plugin-latest-post" href="%1$s">%2$s</a>',
        esc_url( get_permalink( $post_id ) ),
        esc_html( get_the_title( $post_id ) )
    );
}

function gutenberg_examples_dynamic() {

    register_block_type( 'gutenberg-examples/example-dynamic', array(
        'render_callback' => 'gutenberg_examples_dynamic_render_callback'
    ) );

}
add_action( 'init', 'gutenberg_examples_dynamic' );

The front-end displays the post as intended. Screenshot below:

enter image description here

But in Gutenberg the block does not show the dynamic content. In theory I should see the same thing as the front-end right? Or am I missing something?

This is what I see in Gutenberg:

enter image description here

As you can see, none of the dynamic content is rendered and there aren't any errors in the console either.

What am I doing wrong? Any help would be much appreciated.

Thanks in advance

1

Ok, after spending the whole day searching and reading I found the solution. It seems that ServerSideRender should be de-structured from wp.components and NOT from wp.serverSideRender

After replacing

const { serverSiderRender: ServerSideRender }   = wp.serverSideRender;

with

const { ServerSideRender } = wp.components;

And

// <serverSideRender
<ServerSideRender 
    block="gutenberg-examples/example-dynamic"
    attributes={ props.attributes }
/>

All works fine now

enter image description here

Hope this helps someone. Thanks

0

You’ll have to alias serverSideRender to use it in JSX.

const { serverSiderRender: ServerSideRender } = wp.serverSideRender
1
  • Hi @Welcher, thanks for replying, appreciate it. I change the line in the JS file to what you suggested but that did not make any difference. Still works fine in front-end but nothing happens in the editor. I removed the block and added it again. Still no luck. I also changed the <serverSideRender /> to <ServerSideRender /> like I've seen in many tutorials but that throws an error "Error: Minified React error #130;" – Woody Jun 13 '20 at 13:31

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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