Cover Block: Overlay is only possible in 10-steps instead of 1 - Disable Rounding

[hanneslsm]

Description

I want to add a grid to a cover block. For that I have png with black lines.
On top I am adding a gradient as overlay, to make the black lines more subtle. However, it's not possible to add custom values such as 95 or 98, it automatically rounds down or up to 90 or 100 instead.

Step-by-step reproduction instructions

1. Add a cover block with a background
2. Try to add an overlay with 95%

Screenshots, screen recording, code snippet

Screen.Recording.2023-06-18.at.16.24.56.mp4

Environment info

• WP 6.2.2
• GB 19.1
• Custom theme

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

[t-hamano]

@hanneslsm
Thanks for the report.

As for the number of steps for the cover block overlay, it seems that this has been changed several times over the years.

• Cover Image: Add range slider for background dim #2815:
  For the first time, a setting regarding background dim was added and the number of steps is 10
• Lower spacer and cover block step values #22320:
  number of steps removed (i.e., number of steps changed from 10 to 1)
• Cover block: improve overlay opacity handling #26133:
  Steps added (i.e., number of steps changed from 1 to 10)

I believe the current step number is limited to 10 because the CSS selector (has-background-dim-{number}) is generated from this step number and the opacity is applied individually:

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

Lines 75 to 81 in 7f2ea04

	@for $i from 0 through 10 {
	// Keep .wp-block-cover__gradient-background for v8 deprecation
	.wp-block-cover__gradient-background.has-background-dim.has-background-dim-#{ $i * 10 },
	.wp-block-cover__background.has-background-dim.has-background-dim-#{ $i * 10 } {
	opacity: $i * 0.1;
	}
	}

If this for statement is rewritten for all steps, i.e., to loop 100 times, the number of steps may be able to set back to 1.
However, I am concerned that the generated CSS capacity will increase.

Perhaps this could be solved by outputting the opacity inline, independent of the CSS selector.

For that reason, I would like to mark this issue as Enhancement.

[akasunil]

@t-hamano I have created PR based on your suggestion for this issue. #59891