InnerBlocks adds any block and saves, but the editor doesn't show child blocks on reload

So I've got my custom block and it has InnerBlocks which accepts any block. It defaults to a single paragraph block.

wp.blocks.registerBlockType('accordion/child', {
apiVersion: 2,
title: 'Accordion Child',
category: 'design',
parent: [ "accordion/child" ],
attributes: {
    title: {
        type: 'string',
        default: 'This is an accordion'
    },
},
edit({ attributes, setAttributes }) {
    const { title } = attributes;
    const { createElement, Fragment } = wp.element;
    const { PanelBody, TextareaControl } = wpponents;
    const { InnerBlocks, InspectorControls } = wp.blockEditor;
    let blockProps = wp.blockEditor.useBlockProps();
    
    return createElement(Fragment, {},
        createElement(InspectorControls, null,
            createElement(PanelBody, { title: 'Settings' },
                createElement(TextareaControl, {
                    label: 'Title',
                    value: title,
                    onChange: function (newTitle) {
                        setAttributes({ 'title': newTitle });
                    },
                })
            ),
        ),
        createElement('div',
            {  ...blockProps  },
            createElement('div', {className:'accordion-child-content'},
                createElement('div', {
                    className: 'accordion-child-title', 
                }, 
                title
                ),
                createElement(InnerBlocks,
                    {template: ["core/paragraph",{content:'This is the accordion content'}],
                    templateLock: false
                }),
            ),
        )
    );
},
save: function ({ attributes }) {
    const { createElement } = wp.element;
    const { InnerBlocks } = wp.blockEditor;
    const { title } = attributes;
    
    return createElement('div',{className: 'accordion-child'},
        createElement('div', {className: 'accordion-child-title',tabIndex: 0}, 
        title
        ),
        createElement('div', {className: 'accordion-child-content'},
            createElement(InnerBlocks.Content)
        )
    );
}

});

It adds any one or more blocks and saves it fine. On the front end it's rendered exactly as expected. But when I reload the editor, it's defaulted back to a single paragraph block.

How do I get the editor to show the saved blocks?

So I've got my custom block and it has InnerBlocks which accepts any block. It defaults to a single paragraph block.

wp.blocks.registerBlockType('accordion/child', {
apiVersion: 2,
title: 'Accordion Child',
category: 'design',
parent: [ "accordion/child" ],
attributes: {
    title: {
        type: 'string',
        default: 'This is an accordion'
    },
},
edit({ attributes, setAttributes }) {
    const { title } = attributes;
    const { createElement, Fragment } = wp.element;
    const { PanelBody, TextareaControl } = wp.components;
    const { InnerBlocks, InspectorControls } = wp.blockEditor;
    let blockProps = wp.blockEditor.useBlockProps();
    
    return createElement(Fragment, {},
        createElement(InspectorControls, null,
            createElement(PanelBody, { title: 'Settings' },
                createElement(TextareaControl, {
                    label: 'Title',
                    value: title,
                    onChange: function (newTitle) {
                        setAttributes({ 'title': newTitle });
                    },
                })
            ),
        ),
        createElement('div',
            {  ...blockProps  },
            createElement('div', {className:'accordion-child-content'},
                createElement('div', {
                    className: 'accordion-child-title', 
                }, 
                title
                ),
                createElement(InnerBlocks,
                    {template: ["core/paragraph",{content:'This is the accordion content'}],
                    templateLock: false
                }),
            ),
        )
    );
},
save: function ({ attributes }) {
    const { createElement } = wp.element;
    const { InnerBlocks } = wp.blockEditor;
    const { title } = attributes;
    
    return createElement('div',{className: 'accordion-child'},
        createElement('div', {className: 'accordion-child-title',tabIndex: 0}, 
        title
        ),
        createElement('div', {className: 'accordion-child-content'},
            createElement(InnerBlocks.Content)
        )
    );
}

});

It adds any one or more blocks and saves it fine. On the front end it's rendered exactly as expected. But when I reload the editor, it's defaulted back to a single paragraph block.

How do I get the editor to show the saved blocks?

• block-editor

Share Improve this question asked yesterday CoomieCoomie 14166 bronze badges 1

• You seemed to have forgotten to include useBlockProps.save() in your save function - perhaps that could be the cause? – Wongjn Commented yesterday

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

Turns out the parent block was locking the template. I added some code to lock InnerBlocks only when we a new child block is added.

for (let i = 1; i <= parseInt(numChildren); i++) {
        defaultChildren.push(
                ["accordion/child",
                    {
                        className: 'accordion-' + i
                    }, [["core/paragraph",{content:'Accordion ' + i,}]]
                ]
        );
    }
    
    const onChangeNumChildren = (newNumChildren) => {
        setAttributes({ numChildren: newNumChildren });
    };
    
    let forceTemplateLock = false;
    let childrenInThisAccordion = jQuery('.wp-block-accordion.is-selected .accordion-child').length;

    if (childrenInThisAccordion > 0 && childrenInThisAccordion != numChildren){
        forceTemplateLock = true;
    }

    return (
        ...
            createElement('div', { ...blockProps },
                createElement(InnerBlocks, {
                    template: defaultChildren,
                    defaultBlock: defaultChildren,
                    templateLock: forceTemplateLock ? "all" : false
                }),