Gutenberg: Update ServerSideRender dependencies in the dynamic blocks documentation

[pojke]

There seems to be some issue with documentation and recent update. It works in v.4.4.0 but not since 4.5.0

Here's proof of concept. It either needs documentation improvement or it's a bug.

Following: https://wordpress.org/gutenberg/handbook/blocks/creating-dynamic-blocks/ you should be able to create a simple block.

index.php

/*
  Plugin Name:  TEST
  Plugin URI:   www.google.com
  Description:  Demo
  Version:      1
  Author:       Ralf Klis
  Author URI:
  License:      GPL2
  License URI:  https://www.gnu.org/licenses/gpl-2.0.html
  Text Domain:
 */

function my_plugin_render_block_latest_post($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_boilerplate_block() {
    wp_register_script(
            'latest-post', plugins_url('latest-post/block.js', __FILE__), array('wp-blocks', 'wp-element')
    );
//    echo plugins_url('latest-post/block.js', __FILE__);exit();
    register_block_type('my-plugin/latest-post', array(
        'editor_script'   => 'latest-post',
        'render_callback' => 'my_plugin_render_block_latest_post'
    ));
}

add_action('init', 'gutenberg_boilerplate_block');

latest-post/block.js

var el = wp.element.createElement,
    registerBlockType = wp.blocks.registerBlockType,
    ServerSideRender = wp.components.ServerSideRender;

registerBlockType( 'my-plugin/latest-post', {
    title: 'Latest Post TEST',
    icon: 'megaphone',
    category: 'widgets',

    edit: function( props ) {
        // ensure the block attributes matches this plugin's name
        return (
            el(ServerSideRender, {
                block: "my-plugin/latest-post",
                attributes:  props.attributes
            })
        );
    },

    save: function() {
        // Rendering in PHP
        return null;
    },
} );

This worked in 4.4 but now produces block.js?ver=4.9.8:5 Uncaught TypeError: Cannot read property 'ServerSideRender' of undefined

There's something missing in documentation what's changed between versions.

A quick workaround, which is silly, is to attach the empty JS file dependent on block. This fixes the problem if added on the very bottom of index.php file

function load_gutenberg_scripts() {
    wp_enqueue_script(
            'random-error', plugins_url('/latest-post/empty.js', __FILE__), ['wp-i18n', 'wp-blocks', 'wp-edit-post', 'wp-element', 'wp-editor', 'wp-components', 'wp-data', 'wp-plugins', 'wp-edit-post', 'wp-api'], '0.1'
    );
}

add_action('enqueue_block_assets', 'load_gutenberg_scripts');

[pojke]

It is most likely related to #12057

[adekherry]

Hi,

I also have a similar issue, but I'm using es6. Previously i need to replace const { ServerSideRender } = wp.components; with import { ServerSideRender } from '@wordpress/components';.

But I get an error on the console log that saying the API endpoint for my custom block not registered (error 404). It's related to #12057. Then I notice there's something wrong on the API endpoint. I get something like this http://localhost/wp/v2/block-renderer/. With v3 I get something like this http://localhost/project/wp-json/wp/v2/block-renderer/ which is working fine.

Anyone, please help. Thx

[swissspidy]

Your script is missing the wp-components dependency. That‘s why wp.components is undefined.

Your workaround only works because it loads all sorts of dependencies, including wp-components.

The rule of thumb is: if you want to access wp.* in JS, add wp-* as a dependency to your JS.

[pojke]

Thanks, but the key is that the code is copy and paste from an official handbook.

[swissspidy]

https://wordpress.org/gutenberg/handbook/blocks/creating-dynamic-blocks/ doesn‘t show how to register/enqueue the JS, so which page do you feel should be improved?

[pojke]

Exactly the one you quoted that starts with “The following code example shows how to create the latest post block dynamic block.”
Then you copy and paste the “following code” and it does work. And then 4.5 update comes in and it doesn’t anymore.

[Otshelnik-Fm]

https://wordpress.org/gutenberg/handbook/blocks/creating-dynamic-blocks/ doesn‘t show how to register/enqueue the JS, so which page do you feel should be improved?

Oops! That page can’t be found

[chrisvanpatten]

@Otshelnik-Fm https://github.com/WordPress/gutenberg/blob/master/docs/designers-developers/developers/tutorials/block-tutorial/creating-dynamic-blocks.md

The block tutorial got mistakenly removed from the handbook on WordPress.org so there's the direct link. Working on getting it back :)

[roguewdesign]

As @swissspidy mentioned, you need to include the 'wp-components' dependency:

wp_register_script('your-custom-block-js', 'your-file-directory/blocks.js', array( 'wp-blocks', 'wp-element', 'wp-components' ) );

Make sure to include the 'wp-components' when registering your block.js file.

This fixed the issue, but the documentation page does need updating.

[bobbingwide]

Since PR 8720 ServerSideRender comes from wp.editor not wp.components. Docs need updating.