The custom block I have created gets duplicate container elements in the editor. And the custom classes I set only gets applied to the inner container. On the front end the block output is as expected.
I've found one other thread on github about this, but it didn't have a solution.
blocks.registerBlockType( 'my-custom-blocks/section', {
title: 'Section',
category: 'design',
edit: function () {
var blockProps = useBlockProps({
className: 'section'
});
return el(
'section',
blockProps,
el(
InnerBlocks,
{
template: SECTION_TEMPLATE,
allowedBlocks: [
'my-custom-blocks/row'
]
}
)
);
},
save: function () {
var blockProps = useBlockProps.save({
className: 'section'
});
return el( 'section', blockProps, el( InnerBlocks.Content ) );
},
} );