You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
Repository navigation
Cover Block: Overlay is only possible in 10-steps instead of 1 - Disable Rounding #51625
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
Add a cover block with a background
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.
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:
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.
The block still has the same behavior today. There's a lot of discussion in #59891. I don't think this needs any further technical feedback so removing the label.
Activity
t-hamano commentedon Jun 19, 2023
@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.
For the first time, a setting regarding background dim was added and the number of steps is 10
number of steps removed (i.e., number of steps changed from 10 to 1)
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
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
opacityinline, independent of the CSS selector.For that reason, I would like to mark this issue as Enhancement.
akasunil commentedon Apr 19, 2024
@t-hamano I have created PR based on your suggestion for this issue. #59891
talldan commentedon Dec 19, 2025
The block still has the same behavior today. There's a lot of discussion in #59891. I don't think this needs any further technical feedback so removing the label.