Skip to content

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

Open

Description

@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

Activity

  1. t-hamano commented on Jun 19, 2023

    @t-hamano
    Contributor

    @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.

    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:

    @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.

  2. added
    [Block] CoverAffects the Cover Block - used to display content laid over a background image
    on Jun 19, 2023
  3. moved this to Needs development in Polishon Jul 19, 2023
  4. akasunil commented on Apr 19, 2024

    @akasunil
    Member

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

  5. talldan commented on Dec 19, 2025

    @talldan
    Contributor

    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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    [Block] CoverAffects the Cover Block - used to display content laid over a background image[Status] In ProgressTracking issues with work in progress[Type] EnhancementA suggestion for improvement.

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions