Wordpress custom Gutenberg Block not reloading correctly

Question

I have a plugin that creates a Gutenberg block. The plugin includes react and babel js as described here and using the code below. The block adds just fine into a page and preview and viewing the page works but when I publish or update the page then refresh the edit page I get a message: "Your site doesn't include support for the "ka/block-test" block. I can't see anything obvious, any thoughts appreciated

<?php
/*
Plugin Name: blocktest
Plugin URI: http://www.kim-aldis.co.uk
Description: Testing Guttenberg Blocks
Version: 1.0
Author: kim aldis
Author URI: http://www.kim-aldis.co.uk
*/

add_action( 'init', function() {

    $required_js_files = array(
        'wp-blocks',
        'wp-element',
        'wp-editor'
    );

    // Use minified libraries if SCRIPT_DEBUG is turned off
    $suffix = ( defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ) ? '' : '.min';

    // Add React files
    wp_enqueue_script( 'react', 'https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react' . $suffix . '.js', $required_js_files, null );
    $required_js_files[] = 'react';

    wp_enqueue_script( 'react-dom', 'https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react-dom' . $suffix . '.js', $required_js_files, null );
    $required_js_files[] = 'react-dom';

    // Add Babel file
    wp_enqueue_script( 'babel', 'https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser' . $suffix . '.js', $required_js_files, null );
    $required_js_files[] = 'babel';


    wp_register_script( 'ka-block', plugins_url( 'block.js', __FILE__ ),    $required_js_files );

    register_block_type( 'ka/block-test', [
        'editor_script' => 'ka-block',
    ] );

} );

add_filter( 'script_loader_tag', function( $tag, $handle, $src ) {

    // Check that this is output of JSX file
    if ( 'ka-block' == $handle ) {
        $tag = str_replace( "<script type='text/javascript'", "<script type='text/babel'", $tag );
    }

    return $tag;
}, 10, 3 );

--

( function( blocks, element ) {

    var el = element.createElement;

    blocks.registerBlockType( 'ka/block-test', {
        title: 'KA Block Test',
        icon: 'lock',
        category: 'common',

        attributes: {
            gid       : {type: 'string'},
            thumb     : {type: 'string' },
            name     : {type: 'string' }
        },

        edit: function( props ) {
            return el( 'p', {}, "xxxxx")
        },
        save: function( props ) {
            return el( 'p', {}, "yyyyy" )
        },
    } );
}(
    window.wp.blocks,
    window.wp.element,
    window.wp.editor

) );

Vortac Vortac · Accepted Answer · 2019-10-16T20:44:48

In case you want to improve on your example, you might want to try to leave out the registerBlockType statement. I think it doubles the wp_register_script call that comes right before it.

Wordpress custom Gutenberg Block not reloading correctly

2 Answers