Image captions in galleries hide rounded border

[justintadlock]

Description

When an Image block within a Gallery has a border-radius, the caption background obscures the bottom corners of the Image. The <figcaption> element's bottom-border-left-radius and bottom-border-right-radius should inherit from the Image block.

Step-by-step reproduction instructions

Add a border radius to the Image block via theme.json:

{
	"styles": {
		"blocks": {
			"core/image": {
				"border": {
					"radius": "15px"
				}
			}
		}
	}
}

Test by adding a Gallery block with at least one image that has a caption.

Screenshots, screen recording, code snippet

Gallery shows an image with caption and one without:

Environment info

No response

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

[glendaviesnz]

I remember we struggled with this when we converted the Gallery to nested Image blocks, before you could set the border radius, but with the Rounded style, and the only solution we could find at the time was to move the caption when the rounded style was set:

Would be good to revisit this as that is not such a good solution when there is only a subtle radius.

[ramonjd]

It looks like this could be addressed by adding overflow:hidden to the image's surrounding <figure />. At least in devtools.

[sharukhkhanajm]

Hi, @ramonjd did overflow:hidden work for you?
It seems it is not working for me (please see the attached screenshot).

[ramonjd]

did overflow:hidden work for you?

Thanks for testing again @sharukhkhanajm

Sorry, I'm not sure what I was looking at before, but yeah, overflow:hidden doesn't work for me. I think I made a mistake.

I wonder if it's possible to always force the caption to sit under the image. Here's what I'm seeing when I apply border radius to the image in the block editor (and not via theme.json)

I'm not sure how to get around this. Maybe we could try to apply the border radius value to the bottom of the figcaption. So if the image's border radius is 15px then the figcaption would have border-radius: 0 0 15px 15px; ? That seems like a hack though.

[sharukhkhanajm]

Yes, that seems like a hack with current HTML.
I don't think we can change the HTML right? that would break the backward compatibility.

[vagelisp]

overflow: hidden seems to be working here when targeting .wp-block-gallery figure

overflow: initial

overflow: hidden

[CalebRorty]

overflow: hidden on .wp-block-gallery figure is working for me as well -

overflow: initial

overflow: hidden

I am not seeing any adverse side effects when keeping this on regardless of the captions content or border-radius status.

[dgwyer]

Just did some testing on this and couldn't get it to work with overflow: hidden on .wp-block-gallery figure. Not sure why when this worked recently for others. I'm running WP 6.03, and latest release version of TT2 theme.

However, when adding the border-radius: 15px and overflow: hidden to the wrapping figure this worked consistently well for me.

For this to be implemented we'd need to add the same border radius to the wrapping figure element around each image, as well as overflow: hidden.

[artemiomorales]

I can take a closer look into this.

[aaronrobertshaw]

Appreciate everyone jumping in to work through this issue 👍

After digging into this further today, I believe this issue is a touch more complex than it may appear.

The image block applies its global styles for borders (including radius) to the img element itself. This is so the border doesn't wrap the caption as well. It explains why people are noticing that overflow: hidden on the parent <figure> element doesn't work. It doesn't have any radius to clip by.

It's also worth noting that even if the overflow: hidden on the parent figure did work, it would potentially clip the caption text. You can see this in the screenshots below.

Before	After

When applying borders at the individual image block level (not via theme.json/global styles), an additional CSS class is applied to the image block so the gallery styles can hook onto that and move the caption below the image.

Captions have recently been added to the Elements API however, I don't believe they currently can alter the absolute positioning of the caption elements applied by the gallery styles.

Perhaps we could create a gallery block style or setting that toggles off the absolutely positioned/overlaid captions?

In earlier iterations of the gallery block refactor, it was tried to apply the border-radius to the bottom corners of a gallery image's caption. Unfortunately, this doesn't work well as the caption has different dimensions resulting in corner curves on the caption that don't match the image's.

It might be possible to make the caption take up the same dimensions as its related image. Then its radii would match the image's. This approach might introduce other issues, such as interfering with clicks if the image is a link etc, so needs testing. Note also that this wouldn't address the problem of clipping captions if there is a large border radius and the text goes close enough to the edge.

Applying the border-radius to the <figure> and clipping with overflow: hidden still suffers the same problem, but if the user or theme author could toggle overlaid captions on and off, we can still allow overlaid captions for minor border radii and offer an escape hatch when it wouldn't work.

Hopefully that helps or sparks some fresh ideas!