Custom WP Block using Inner Blocks crashes editor, doesn’t save content

Question

I’ve finally gotten around to building a custom Gutenberg/WP Block for a project and it’s basically kicking my ass. Working with React, Node, WebPack, Gulp is all new enough to me so there’s a learning curve I have to deal with but the incomplete and inaccurate documentation from WP is making things substantially worse. (Their documentation still says to use wp.editor but reading through tickets in GitHub I learned that was deprecated and should instead be wp.blockEditor, as an example.)

As of right now, I’ve got a custom block loading in my editor that is supposed to accept InnerBlocks. The process of adding a block and adding blocks into it works just fine.

Where things go wrong is after the page/post is ‘Updated’. I get a bunch of different errors and a white screen of death. One of the errors that sometimes comes up is a React Minification #321 error. But there’s others as well and not always the same errors.

Here is the code used to register my block:

const { __, setLocaleData } = wp.i18n;
const { registerBlockType } = wp.blocks;
const { InnerBlocks } = wp.blockEditor; //was wp.editor

const blockStyle = {
    backgroundColor: '#777',
    color: '#FFF',
    padding: '24px 2.5% 24px 2.5%',
};

registerBlockType( 'custom-layout-blocks/custom-stripe-rows', {
    title: __( 'Striped Block Row', 'custom-layout-blocks' ),
    icon: 'tide',
    category: 'layout',
    styles: [
        {
            name: 'magenta-stripes',
            label: 'Magenta',
            isDefault: true
        },
        {
            name: 'teal-stripes',
            label: 'Teal'
        },
        {
            name: 'evergreen-stripes',
            label: 'Evergreen'
        },
    ],
    edit() {
        return (
            <div style={blockStyle}><InnerBlocks /></div>
        );
    },
    save() {
        return (
            <div style={blockStyle}><InnerBlocks /></div>
        );
    }
} );

Now here’s the relevant PHP:

defined( 'ABSPATH' ) || exit;
    function custom_layoutblocks_load_textdomain() {
        load_plugin_textdomain( 'custom-layout-blocks', false, basename( __DIR__ ) . '/languages' );
    }
    add_action( 'init', 'custom_layoutblocks_load_textdomain' );

    function custom_layoutblocks_register_block() {
        if( !function_exists( 'register_block_type' ) ) {
            // Gutenberg is not active.
            return;
        }
        wp_register_script(
            'custom-striped-rows',
            plugins_url( 'build/index.js', __FILE__ ),
            array( 'wp-blocks', 'wp-i18n', 'wp-element', 'wp-block-editor' ),
            filemtime( plugin_dir_path( __FILE__ ) . 'build/index.js' )
        );
        wp_register_style(
            'custom-editor',
            plugins_url( 'css/custom-editor.css', __FILE__ ),
            array( 'wp-edit-blocks' ),
            filemtime( plugin_dir_path( __FILE__ ) . 'css/custom-editor.css' )
        );
        wp_register_style(
            'custom-style',
            plugins_url( 'css/custom-front.css', __FILE__ ),
            array(),
            filemtime( plugin_dir_path( __FILE__ ) . 'css/custom-front.css' )
        );
        wp_style_add_data( 'custom-style', 'path', dirname( __FILE__ ) . '/css/custom-front.css' );
        register_block_type( 'custom-layout-blocks/custom-stripe-rows', array(
            'api_version'   => 2,
            'style'         => 'custom-style',
            'editor_style'  => 'custom-editor',
            'editor_script' => 'custom-striped-rows',
        ) );
        if( function_exists( 'wp_set_script_translations' ) ) {
            wp_set_script_translations( 'custom-striped-rows', 'custom-layout-blocks' );
        }
    }
    add_action( 'init', 'custom_layoutblocks_register_block' );

** I’ve changed all the prefixes to ‘custom’ to keep this generic and applicable to anyone else that comes across this.

WebPack is tracking changes and the files are all being updated, I can run the plugin in my dev environment and on a staging site. Where it all falls apart is when I update an entry with my custom block in it. Everything seems to go haywire from there and the content doesn’t show up in the front end, not even in the source.

Update:

Here’s the error I get on the edit screen after I’ve added the block and added a paragraph block to it.

TypeError: null is not an object (evaluating '(e.target.getAttribute("data-block")?e.target:e.target.closest("[data-block]")).getAttribute')

0
Tony Djukic 5 months 2021-06-02T20:15:27-05:00 0 Answers 0 views 0

Leave an answer

Browse
Browse