CODEWITHSUNDEEP
javascriptwordpressreactjswordpress-gutenberggutenberg-blocks
GetRiot
GetRiot

Reputation: 31

Wordpress Gutenberg InnerBlock.Content is not being saved or rendered

I am creating a custom block in Gutenberg via custom plugin. My custom block contains InnerBlocks. The edit function appears to be working correctly, as I can add the block to the page, and place new block elements inside the block as intended. The issue arrises when I reload the page. After I update the page and reload the editor, all of the InnerBlock elements are gone. They are not being saved, and not being rendered on the frontend either. Unless I'm crazy, my save function is not built correctly. Any help would be great. I am well versed in Wordpress and JS, but new to React and Gutenberg. Thanks for any help!

( function( blocks, element, editor ) {

    const el = element.createElement;
    const { registerBlockType } = blocks;
    const InnerBlocks = editor.InnerBlocks;

    registerBlockType( 'dab/nest', { 
        title: 'Disruptive Nest',
        icon: 'layout',
        category: 'disruptive-blocks', 
        keywords: [ 'base', 'build', 'custom' ], 

        edit: function( props ) {
            return (
                el( 'div', {className: props.className + ' dab-full'},
                    el( 'div', {className: 'dab-content'},
                        el( InnerBlocks )
                    )
                )
            );
        },

        save: function( props ) {
            return (
                el( 'div',
                    el( 'div',
                        el( InnerBlocks.Content, null )
                    )
                )
            );
        },
    });
})( window.wp.blocks, 
    window.wp.element, 
    window.wp.blockEditor
);

Upvotes: 0

Views: 2161

Answers (1)

GetRiot
GetRiot

Reputation: 31

I found this in the Block Editor Handbook ([https://developer.wordpress.org/block-editor/developers/block-api/block-edit-save/#classname):

"This is automatically added in the save method, but not on edit" [on the topic of props.className]. That is why I didn't have the classes mirrored initially. Reading it again led me to realize that mirroring the classNames on the "save" function isn't what fixed it, but just having the {} in there after each of the parent el( 'div',, even if you don't specify anything, is what fixed the function.

So, it works like this, and the className is automatically added to the first el( 'div',:

save: function( props ) {
    return (
       el( 'div', {},
           el( 'div', {},
               el( InnerBlocks.Content )
            )
       )
    );
},

Thanks, @niklas for helping me realize this.

Upvotes: 2

Related Questions