custom gutenberg block - your site doesn't include support for the block

Question

I want to create a block with editable fields, but I can't find out why I keep getting this error: 'Your site doesn't include support for the block. You can leave this block intact, convert its content to a Custom HTML block, or remove it entirely'. Does anyone know what might be producing such an error? Am I doing something wrong?

PHP code:

function protex_contact_gutenberg_block_enqueue_scripts(){
    $required_js_files = array(
        'wp-blocks',
        'wp-i18n',
        'wp-element',
        'wp-editor'
    );
    wp_enqueue_script( 'react', 'https://unpkg.com/react@16/umd/react.development.js', $required_js_files );
    $required_js_files[] = 'react';
    wp_enqueue_script( 'react-dom', 'https://unpkg.com/react-dom@16/umd/react-dom.development.js', $required_js_files );
    wp_enqueue_script( 'babel', 'https://unpkg.com/babel-standalone@6/babel.min.js', $required_js_files );
    $required_js_files[] = 'babel';
    wp_register_script( 'protex_contact_gutenberg_block_gutenberg_js', plugin_dir_url( __FILE__ ) . 'assets/prtx_contact.js', $required_js_files );

    register_block_type('protex-contact/block', array(
        'editor_script' => 'protex_contact_gutenberg_block_gutenberg_js',
        'editor_script' => 'babel',
        'editor_script' => 'react',
        'editor_script' => 'react-dom',
    ));
}
add_action( 'init', 'protex_contact_gutenberg_block_enqueue_scripts' );
function protex_contact_gutenberg_block_gutenberg_modify_jsx_tag( $tag, $handle, $src ) {
    if ( 'my_custom_gutenberg_block_gutenberg_js' == $handle ) {
        $tag = str_replace( "<script type='text/javascript'", "<script type='text/babel'", $tag );
    }
    return $tag;
}
add_filter( 'script_loader_tag', 'protex_contact_gutenberg_block_gutenberg_modify_jsx_tag', 10, 3 );

JS code:

const { __ } = wp.i18n;
const { registerBlockType } = wp.blocks;
const { RichText } = wp.editor;

registerBlockType( 'protex-contact/block', {
    title: __( 'Protex konakt', 'protex-contact' ),
    icon: 'id',
    category: 'common',
    attributes: {
    content: {
        type: 'string',
        source: 'html',
        selector: 'p',
    },
},

    edit({ attributes, className, setAttributes }) {
        const { content } = attributes;
        function onChangeContent( newContent ) {
            setAttributes( { content: newContent } );
        }
        return (
            <div className={ className }>
                <RichText
                    tagName="p"
                    className="prtx_contact_input"
                    value={ content }
                    onChange={ onChangeContent } />
            </div>
        );
    },
    save({ attributes }) {
        let { content } = attributes;
        return (
            <RichText.Content
                tagName="p"
                value={ content }
            />
        );
    },
} );

Slicktrick Slicktrick · Accepted Answer · 2019-04-30T15:17:29

Check your path when registering this script:

wp_register_script( 'protex_contact_gutenberg_block_gutenberg_js', plugin_dir_url( __FILE__ ) . 'assets/prtx_contact.js', $required_js_files );

If you are calling plugin_dir_url( __FILE__ ) from a subdirectory, then the url will include that subdirectory. For example, if I call plugin_dir_url( __FILE__ ) from a file in the directory path 'plugins/my-custom-plugin/library', the url will end with '/my-custom-plugin/library/' which may not be the path you want.

If calling from a subdirectory, I would use

wp_register_script( 'protex_contact_gutenberg_block_gutenberg_js', plugins_url( 'assets/prtx_contact.js', dirname( __FILE__ ) ), $required_js_files );

If calling from many levels deep, then you may need to addjust dirname( __FILE__ ) to something like dirname( __FILE__ , 2 ) to traverse back up however far you need to go (or consider passing in the path to the "assets" folder so you don't have to calculate it on the fly).

I had a similar issue as you, and the problem was that the script was not being loaded due to an incorrect path. Outside of that, given the number of script dependencies you are registering, I would check that all the other scripts are being loaded correctly and not creating any issues.

custom gutenberg block - your site doesn't include support for the block

1 Answers