Cover overlay opacity buggy behaviour

• 

  tomicakorac3509 · Member · Sep 3, 2023 at 1:58 pm

  • Copy link
  • Add topic to favorites

  I’m trying to add two Cover elements to a new empty WordPress page. On Both Cover elements I’m trying to modify the ‘Overlay Opacity’ property, but when I do, the two elements behave differently compared to each other, and consequently produce inconsistent and buggy outputs.

  When I set Overlay Opacity on both Covers to 50%, I get the following code:

  Cover 1:

  <!-- wp:cover {"url":"http://localhost/wp-content/uploads/thumb-449x286-1-1-2-2-1.jpg","id":157,"dimRatio":50,"isDark":false,"align":"full"} -->
  <div class="wp-block-cover alignfull is-light">
  	<span aria-hidden="true" class="wp-block-cover__background has-background-dim"></span>
  ...

  Cover 2:

  <!-- wp:cover {"url":"http://localhost/wp-content/uploads/photo-1433769778268-24b797c4fc9a-2-2-1.jpg","id":444,"dimRatio":50,"align":"full"} -->
  <div class="wp-block-cover alignfull">
  	<span aria-hidden="true" class="wp-block-cover__background has-background-dim"></span>
  ...

  And when I set Overlay Opacity on both Covers to 60%, I get the following code:

  Cover 1:

  <!-- wp:cover {"url":"http://localhost/wp-content/uploads/thumb-449x286-1-1-2-2-1.jpg","id":157,"dimRatio":60,"align":"full"} -->
  <div class="wp-block-cover alignfull">
  	<span aria-hidden="true" class="wp-block-cover__background has-background-dim-60 has-background-dim"></span>
  ...

  <!-- wp:cover {"url":"http://localhost/wp-content/uploads/photo-1433769778268-24b797c4fc9a-2-2-1.jpg","id":444,"dimRatio":60,"align":"full"} -->
  <div class="wp-block-cover alignfull">
  	<span aria-hidden="true" class="wp-block-cover__background has-background-dim-60 has-background-dim"></span>
  ...

  In other words, on 50% opacity, there are differences between the two elements’ properties, and on 60% those differences disappear.

  What is going on here? Why does one cover have “isDark”:false property and is-light class added to its div, while the other doesn’t? How can I ensure that my covers behave always the same way?

  The blog I need help with is: (visible only to logged in users)