set allowedBlocks to a specific variant

First: It is impossible

allowedBlocks only accepts block names as strings — not specific variations or object definitions.

Second: What’s the correct approach?

Use the base block name, then define the variation via className or attributes in the template.

How to find a variation’s className?
Insert the block (e.g., core/group) and select the desired variation.

Go to the sidebar → Advanced → copy the className it uses.

Enter the className in the code

    <div {...blockProps}>
        <InnerBlocks
            allowedBlocks={['core/group']}
            template={[
                [
                    'core/group',
                    { className: 'is-style-boxed-1' }
                ]
            ]}
        />
    </div>

Example of application in your code.

const innerBlockProps = useInnerBlocksProps(blockProps, {
    allowedBlocks: ['core/group'],
    template: [['core/group', { className: 'is-style-boxed-1' }]],
});

Replace core/group and is-style-boxed-1 with your desired block and variation class.

Not only className, but other attributes like spacing, margin, padding, etc. can also be added. Since I don’t know the content of woocommerce/product-collection, I only show className, and className is also an attribute that defines the variation.

Related Posts: