Gutenberg InnerBlocks predefined block supports

Question

I am using a template for InnerBlocks and adding predefined attributes like heading level and paragraph placeholder:

const MY_TEMPLATE = [
    [ 'core/image', {} ],
    [ 'core/heading', { level: 3 } ],
    [ 'core/paragraph', { placeholder: 'Summary' } ],
];
 
//...
 
    edit: () => {
        return (
            <InnerBlocks
                template={ MY_TEMPLATE }
                templateLock="all"
            />
        );
    },

This works well but how can we add predefined values for block supports?

For example when registering a block I can set support values:

supports: {      
    className: false // Remove the support for the generated className.
    color: { // Text UI control is enabled.
        background: false, // Disable background UI control.
        gradients: true // Enable gradients UI control.
    }
}

How can I set values for supports through InnerBlocks templates? For example I want to remove the default wp-block- class name from a block. I tried:

const MY_TEMPLATE = [
  [ 'my-block/icon', { supports: { classname: false } } ],
  [ 'core/heading', {} ]
];

The supports is not passed to the block. How can I make this work? Or is there another way.

Answer 1

Your template for InnerBlocks has a small typo in supports: { classname: false } (it's case-sensitive) and should be className:

const MY_TEMPLATE = [
  [ 'my-block/icon', { supports: { className: false } } ],
  ...
];

The supports definition is correct in your my-block/icon block registration. Assuming your save() function handles <InnerBlocks.Content>correctly, with the className typo fixed, it should work.

When in the Editor view and inspecting the classes applied to your block, there will still be many more classes (eg. "wp-block-my-block etc") applied to your block - they are needed to enable the Editors functionality. To confirm if the supports on the inner blocks are working, check the classes applied on the frontend once the post/page is published.