After about an hour of trial and error, I found that the outmost <Fragment> was the culprit. But I still can’t figure out why! Replacing it with <div> fixed it.
So the code looks like this now:
edit: (props) => {
const {attributes, setAttributes} = props;
const headingBgOverlay = Util.getBgOverlay(attributes, 'heading');
const bodyBgOverlay = Util.getBgOverlay(attributes, 'body');
useEffect(() => {
setAttributes({blockId: Util.guidGenerator()});
}, []);
useEffect(() => {
console.log(props)
console.log(props.className)
console.log(attributes.className)
setAttributes({headingBgOverlay});
setAttributes({bodyBgOverlay});
}, [attributes]);
return (
<div>
<style>
{listIconCss(attributes)}
</style>
<div className={"atbs atbs-pricing-table " + props.className}
id={'atbs-pricing-table-' + attributes.blockId}>
<div className="plan"
style={{...planCss(attributes)}}>
<div className="head" style={{...titleCss(attributes)}}>
<RichText style={{...titleTypographyCss(attributes)}} tagName="h2" className={'m-0'}
value={attributes.title}
onChange={(title) => setAttributes({title})}
placeholder={__('Plan name', 'attire-blocks')}/>
</div>
<div className="atbs_pricing_table_body">
<RichText
style={{...descrCss(attributes)}}
className={'description'} tagName="p" value={attributes.description}
onChange={(description) => setAttributes({description})}
placeholder={__('Description...', 'attire-blocks')}/>
<div className="price" style={{...priceCss(attributes)}}>
<RichText style={{fontSize: (attributes.priceFontSize / 2) + 'px'}}
className={'symbol'}
tagName="span" value={attributes.symbol}
onChange={(symbol) => setAttributes({symbol})}
placeholder={__('$')}/>
<RichText className={'amount'}
tagName="span" value={attributes.price}
onChange={(price) => setAttributes({price})}
placeholder={__('99.99')}/>
{attributes.recurring && <RichText
style={{fontSize: `${attributes.descrFontSize}${attributes.descrFontSizeUnit}`}}
tagName="span" value={attributes.recurringTime}
className="recurring"
onChange={(value) => setAttributes({recurringTime: value})}
placeholder={__('/month', 'attire-blocks')}/>}
</div>
{attributes.showFeatures && <RichText
style={{...listCss(attributes)}}
multiline="li"
tagName="ul"
className="features"
onChange={(nextValues) => setAttributes({features: nextValues})}
value={attributes.features}
placeholder={__('Write list…', 'attire-blocks')}
/>}
<InnerBlocks allowedBlocks={['attire-blocks/buttons']}
template={[['attire-blocks/buttons', {
buttonAlignment: 'center'
}]]}
templateLock="all"/>
</div>
</div>
</div>
</div>
);
},
save: ({attributes, className}) => {
//const {attributes} = props;
return (
<div>
<style>
{listIconCss(attributes)}
</style>
<div className={"atbs atbs-pricing-table " + className}
id={'atbs-pricing-table-' + attributes.blockId}>
<div className="plan"
style={{...planCss(attributes)}}>
{attributes.title &&
<div className="head" style={{...titleCss(attributes)}}>
<RichText.Content style={{...titleTypographyCss(attributes)}} tagName="h2" className={'m-0'}
value={attributes.title}/>
</div>}
<div className="atbs_pricing_table_body">
{attributes.description &&
<RichText.Content
style={{...descrCss(attributes)}}
className={'description'} tagName="p" value={attributes.description}/>}
<div className="price" style={{...priceCss(attributes)}}>
<RichText.Content style={{fontSize: (attributes.priceFontSize / 2) + 'px'}}
className={'symbol'} tagName="span" value={attributes.symbol}/>
<RichText.Content
style={{
color: attributes.bodyTextColor,
fontSize: (attributes.priceFontSize) + 'px'
}}
className={'amount'}
tagName="span" value={attributes.price}/>
{attributes.recurring && <RichText.Content
style={{fontSize: `${attributes.descrFontSize}${attributes.descrFontSizeUnit}`}}
className="recurring"
tagName="span" value={attributes.recurringTime}/>}
</div>
</div>
{attributes.showFeatures && <RichText.Content
style={{...listCss(attributes)}}
className={'features'}
tagName="ul" value={attributes.features}/>}
<InnerBlocks.Content/>
</div>
</div>
</div>
);
}
});