Image Block: Text Over Image feature behaves unexpectedly (the opacity on the Cover block bumped to 100%)

[retnonindya]

Quick summary

When activating Text over Image feature in Image block, the block suddenly turned to Cover block (at this point, I feel this is part of the workaround/expected) and the block turned to black color (which causing confusion)

Steps to reproduce

1. Create a page/post, add Image block and upload/insert image

2. Click "Text over Image" on the block toolbar
   

3. Notice how the block suddenly switched to Cover block and the block suddenly turns black

(I'm trying to add GIF screen recording but the size is > 10 MB, so I hope screenshots will suffice)

This happens:

Notice the Cover block on the block toolbar, the black box, yet the Cover block still displaying the image on the block toolbar (on Focal point area)

Scroll down the block toolbar a bit more, and you'll see this:

Opacity is maxed to 100%, with overlay color set to black, hence the black box 😅

What you expected to happen

I actually hope:

• The block stays as an Image block (but I don't think this is possible?)
• The image is still visible/the overlay opacity does not suddenly get maxed up to 100% -- this is to avoid confusion

The reason why I ask about keeping the block stays as Image block is because a user wanted to have the capability of adjusting the width and the height of the image -- while in Cover block, it's only possible to adjust the height of the image.

What actually happened

The block switched to Cover block and the overlay opacity on the block was set as 100%.

Context

Customer report (32591274-hc) and I'm able to replicate it on my test site (simple site and AT site)

Operating System

No response

Browser

No response

Simple, Atomic or both?

Simple, Atomic

Theme-specific issue?

No response

Other notes

No response

Reproducibility

Consistent

Severity

All

Available workarounds?

No but the platform is still usable

Workaround details

Not exactly a disruptive bug, but definitely confusing. Once you know what's going on (opacity maxed up), you can adjust the opacity level.

[Greatdane]

@retnonindya I think this might be related to this issue; WordPress/gutenberg#36312 - which should be fixed in Gutenburg 11.9.0

I will leave it open for now, and we can close if the update fixes it.

BTW, you can upload .mp4 videos up to 100mb on GitHub, to get around the GIF 10mb limit :)

[retnonindya]

Another report/confusion here:
4453643-zd-woothemes

[WunderBart]

@retnonindya I think this might be related to this issue; WordPress/gutenberg#36312 - which should be fixed in Gutenburg 11.9.0

I will leave it open for now, and we can close if the update fixes it.

This regression will actually be fixed via another PR: WordPress/gutenberg#36406. It will most probably be included in a v11.9.x patch release as the 11.9.0 has already been relased. We're currently in the middle of the v11.9 upgrade in WPCOM, so please follow the tracking issue for more info. /cc @fullofcaffeine @chad1008 @glendaviesnz

[dpasque]

I believe that the existing behavior is that the image block will always get converted to a cover when text is added (it's just a limitation of the image block unfortunately!) I think we should use this current issue at hand to track the regression with the opacity. @retnonindya -- if you want, would you be able to spin up a separate feature request to track the suggestions you had to make the cover block more comparable to the image block?

[retnonindya]

Thank you for looking into this, folks!

@dpasque yep, I can do that. I'm personally okay with having the Image block converted to Cover block (as I see that it's the expected behavior with text-over-image feature) but if we can have additional feature on Cover block, it would be awesome 🙏 I'm going to open GH issue for feature request

[WunderBart]

@retnonindya I think this might be related to this issue; WordPress/gutenberg#36312 - which should be fixed in Gutenburg 11.9.0
I will leave it open for now, and we can close if the update fixes it.

This regression will actually be fixed via another PR: WordPress/gutenberg#36406. It will most probably be included in a v11.9.x patch release as the 11.9.0 has already been relased. We're currently in the middle of the v11.9 upgrade in WPCOM, so please follow the tracking issue for more info. /cc @fullofcaffeine @chad1008 @glendaviesnz

The fix was included in the v11.9.1 patch release and it should be deployed to Simple and Atomic sites later today.

[retnonindya]

@WunderBart thank you so much! 🎉

[Robertght]

I cannot replicate this anymore so closing it. Thank you @WunderBart !