Hi can anyone tell me how to combine the styles applied via block supports with a custom defined style. For example I have a block that has \_\_experimentalBorder configured, and the following code to show a simple block where i configure the height and width (these will eventually be configurable by the user)
export default function Edit({attributes}) {
const cardStyle = {
width: attributes.width,
height: attributes.height,
};
return (
<>
<InspectorControls>
<PanelBody title=”Dimensions”>
</PanelBody>
</InspectorControls>
<Card { …useBlockProps() } isRounded={false} style={cardStyle}>
<CardBody>
{ __(
‘This is my category Image Card Editor’,
‘category-image-card’
) }
</CardBody>
<CardFooter >
Category
</CardFooter>
</Card>
</>
);
}
The issue i have with this is that with the style={cardStyle} applied to the card none of the border settings are applied. If i remove style={cardStyle} they do, but obviously the height and width do not apply.
[ad_2]