How to pass attributes to child Gutenberg blocks in InnerBlocks template?

Question

I'm trying to build a custom set of column blocks using InnerBlocks and am having trouble passing attributes to block templates. To start, I scaffolded a new plugin using Create-Guten-Block. I then created two blocks, one to serve as a row container, and one for individual columns.

Here is a simplified version of how I'm creating the main container (with two columns hard-coded for testing):

registerBlockType( 'wabe/multi-column-block', {
    title: __( 'Multi-Column' ),
    icon: 'columns',
    category: 'common',
    keywords: [
        __( 'columns' ),
        __( 'grid' ),
    ],
    attributes: {
        layout: {
            type: 'string',
        },
    },

    edit: () => {
        return (
            <div>
                { /* inspector controls for choosing a layout will go here */ }
                <InnerBlocks
                    template={ [
                        [ 'wabe/multi-column-column', { columnwidth: '6' }, [
                            [ 'core/paragraph', { content: 'Insert column content here.' } ],
                        ],
                        ],
                        [ 'wabe/multi-column-column', { columnwidth: '6' }, [
                            [ 'core/paragraph', { content: 'Insert column content here.' } ],
                        ],
                        ],
                    ] }
                />
            </div>
        );
    },

    save: () => {
        // This is a dynamic block
        return (
            <InnerBlocks.Content />
        );
    },
} );

... and how I'm creating the individual column block:

registerBlockType( 'wabe/multi-column-column', {
    title: __( 'Multi-Column Column' ),
    icon: 'columns',
    category: 'common',
    keywords: [
        __( 'columns' ),
        __( 'grid' ),
    ],
    attributes: {
        columnwidth: {
            type: 'string',
            default: '',
        },
    },
    edit: ( props ) => {
        return (
            <div>
                <p>Width: { props.attributes.columnwidth }</p>
                <InnerBlocks />
            </div>
        );
    },
    save: () => {
        return (
            <InnerBlocks.Content />
        );
    },
} );

I'll have a custom select for users to choose a column layout, and using that, will determine how many columns to include, and pass the "columnwidth" attribute to each column block. This will tell each column what CSS class to use.

The problem is no matter what I try, that "columnwidth" attribute just will not be passed to the column block. In fact, I can't get it to pass anything, even "className".

I've looked at the code for core columns/column blocks, and can't see what I'm doing wrong. Everything has gone great up until this giant roadblock. Any tips are appreciated.

Answer 1

The block code example you have provided shows you are setting up the InnerBlocks fine. The issue may be a simple oversight that you have missed importing the required dependancy of <InnerBlocks>.

I was able to build your block code successfully once I added the required imports:

import { registerBlockType } from '@wordpress/blocks';
import { __ } from '@wordpress/i18n';
import { InnerBlocks} from '@wordpress/block-editor';

Here is the result:

The code editor shows that your attributes are being passed and being saved.

If you are still encountering an issue, double check that you are clearing your browser cache before retesting and also check the browser console to see if any errors are present.

As you mentioned you have already reviewed the Gutenberg code for Columns/Column, a tip would be to look at how they do variations for creating the options in your Inspector Control. Hope this gets you back on track with creating your block.