Bug: wrong class name has-background-dim-0 with opacity 0.5

[vHeemstra]

Description
When you set the transparency on a cover block to 1 through 4 in the editor, this will be rounded to 0 but is not ignored by the ! ratio check. So it ends up with a class name of has-background-dim-0 which has no styling, but defaults to opacity 0.5 because of the .wp-block-cover__gradient-background class default opacity. This happens in the editor WYSIWYG as well as on the front-end.

Possible solution 1

gutenberg/packages/block-library/src/cover/shared.js

Lines 58 to 62 in 5cd71f4

	export function dimRatioToClass( ratio ) {
	return ratio === 0 || ratio === 50 || ! ratio
	? null
	: 'has-background-dim-' + 10 * Math.round( ratio / 10 );
	}

Let line #59 also check on the rounded opacity value by adding || 0 === Math.round( ratio / 10 ) or similar.

Possible solution 2

gutenberg/packages/block-library/src/cover/style.scss

Lines 68 to 75 in 5cd71f4

	@for $i from 1 through 10 {
	&.has-background-dim.has-background-dim-#{ $i * 10 } {
	&:not(.has-background-gradient)::before,
	.wp-block-cover__gradient-background {
	opacity: $i * 0.1;
	}
	}
	}

Have the SCSS file include a has-background-dim-0 class definition with opacity: 0 by starting the @for on 0.

NB:
I'm not sure if this the only place where this bug occurs. (Not that familiar with the code base ;) )

[ramonjd]

I can't reproduce this. I think it might have been addressed by #35065 or an earlier PR.

Feel free to reopen if the problem persists. Thank you!