Image caption blur overlay affects large portion of images

[iamtakashi]

Description

Image captions using the wp-block-gallery layout apply a blur effect to a large vertical area of tall images, rather than just behind the caption. This causes the blur overlay to extend across a significant portion of the image rather than being limited to the figcaption.

This CSS is in question.

.wp-block-gallery.has-nested-images figure.wp-block-image:has(figcaption):before {
    backdrop-filter: blur(3px);
    content: "";
    height: 100%;
    -webkit-mask-image: linear-gradient(0deg, #000 20%, #0000);
    mask-image: linear-gradient(0deg, #000 20%, #0000);
    max-height: 40%;
    pointer-events: none;
}

For the max-height, we could use min() function or apply the blur effect to figcaption.

Step-by-step reproduction instructions

1. Add a long image, like a screenshot of a webpage, using a gallery block
2. Add a caption
3. See the blur effect

Screenshots, screen recording, code snippet

No response

Environment info

WP 6.9
Gutenberg trunk

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

Please confirm which theme type you used for testing.

• Block
• Classic
• Hybrid (e.g. classic with theme.json)
• Not sure

[Vrishabhsk]

Hi @iamtakashi 👋

• I have addressed the fix for this issue in this PR : Fix : Image caption blur in Gallery block #74063
• I have removed the pseudo styles and directly added the backdrop-filter to the figcaption

Let me know your thoughts on this. Thanks