Description

I'm using a range slider to set a numeric value to control the opacity of a div.
Console.log shows a number when saving the attribute so no issue there.

When adding the number to block style using:

const { attributes } = props;
const { bgOpacity } = attributes;
let style = {}

console.log(bgOpacity); // shows 1

if (bgOpacity) {
    style["--opacity"] = (bgOpacity / 100);
}

console.log(style); // shows { "--opacity": 1 }
const blockProps = useBlockProps.save({
    style: style
});

console.log(blockProps); // shows style: { "--opacity": 1 }

return <div {...blockProps}>
	<div className="wrapper__inner">
		<InnerBlocks.Content />
	</div>
</div>;

Therefore, output of the above should be...

<div class="wp-block-name" style="--opacity: 1;">
<div className="wrapper__inner">
</div>
</div>

Instead, when the post is saved, the value of --opacity becomes 1px in the code.

<div style="--opacity:1px;" class="wp-block-name">

Step-by-step reproduction instructions

Add a custom CSS property to useBlockProps.save() where the value is an integer or float and a px unit is appended on save. The workaround is to typecast the value to a string and then no unit value is added.

Screenshots, screen recording, code snippet

const blockProps = useBlockProps.save({
	style: {
		"--customvar": 11
	}
});

Environment info

Wordpress: 5.8.2
Gutenberg plugin: 11.9.1

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes