Block Template using InnerBlocks (3 flexible columns containing custom block)

[sm]

I am trying to create a block template using InnerBlocks – it has a ‘columns’ block containing 3 variable-width columns as follows:

1. Custom Block
2. Paragraph Block with custom style
3. Custom Block

If I don’t use the a custom block in columns 1 & 3, it works fine. However, it does not work if I use a custom block in any one of the columns.

Here is my code so far:

/**
 * Block dependencies
 */
import classnames from 'classnames';
import './style.scss';
import './editor.scss';

/**
 * Internal block libraries
 */
const { __ } = wp.i18n;
const {
    registerBlockType,
} = wp.blocks;
const {
    InnerBlocks,
} = wp.editor;
const {
    Dashicon,
} = wp.components;

/**
 * Block template
 */
const MY_CUSTOM_BLOCK_TEMPLATE = [
    [ 'core/columns', { columns: 3 }, [
            [ 'core/column', {}, [
                [ 'custom-block/custom-block']
            ] ],
            [ 'core/column', {}, [
                [ 'core/paragraph', { placeholder: 'Enter heading...', className: 'is-style-custom-style'} ]
            ] ],
            [ 'core/column', {}, [
                [ 'custom-block/custom-block']
            ] ],
        ]
    ]
];

/**
  * Register block
 */
export default registerBlockType(
    'custom-blocks/custom-block-template',
    {
        title: __( 'Custom-Block-Template', 'custom-blocks' ),
        description: __( 'Add custom block template', 'custom-blocks'),
        category: 'layout',
        icon: {
            background: 'rgba(0, 133, 66)',
            src: 'align-none',
        },                 
        keywords: [
            __( 'Custom', 'custom-blocks' ),
            __( 'Template', 'custom-blocks' ),
        ],
        edit: props => {
            const { className, setAttributes } = props;
            
            return [
                <div
                    className={ classnames(
                        className,
                    ) }
                >
                    <InnerBlocks
                        template={MY_CUSTOM_BLOCK_TEMPLATE}
                    />

                </div>
            ];
        },
        save: props => {

            return (
                <div
                    className={ classnames(
                        props.className,
                    ) }
                >
                    <InnerBlocks.Content />
                </div>
            );
        },

    },
);

Also the folder/file structure is:
– custom-blocks
— custom-block (contains index.js, editor.scss, styles.scss etc.)
— custom-block-template (contains index.js, editor.scss, styles.scss etc.)
— index.js

import “./i18n.js”;

/**
* Import custom blocks
*/
import “./custom-block”;
import “./custom-block-template”;

Any help is appreciated. Thank you!

[sm]

Removed comment – added more details in original question.

[sm]

I figured out the issue – the custom block namespace was not correct. I had mistakenly assumed that the custom block name in the template is “folder_name/block_name” instead of “namespace/block_name”. After I made the change, it works correctly now.

[Author]

Posts