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!

[artemiomorales]

Thank you @aaronrobertshaw for the guidance and ideas!

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

This sounds good to me. As a user, I would want and expect captions to be able to show up underneath my image if I had configured it to have a large border radius. Empowering users to toggle the position of captions seems like the right approach.

I can take all of the feedback and ideas so far and try to get something workable so we have something to look at. Would also love to hear further ideas and suggestions!

[artemiomorales]

So I was speaking with @mtias about this issue, and we think that giving users the option to modify this style globally would probably be the best move. However, global block styles are not something that have been implemented on the dev side yet.

On the design side, there has been some initial exploration on what global block style variations might look like here: #44417

With all of this in mind, I don't believe there's a simple CSS fix for this unfortunately, which would just introduce different bugs.

The right approach seems to me to figure out how we might introduce preset styles for gallery captions at the global level, which appears to me to need a bit more design exploration.

I'm going to unassign this issue from myself and close the related in-progress pull request, and perhaps revisit this issue in the future.

[jasmussen]

Landing randomly on this one today, I noticed something had changed. Specifically, if you create a gallery, where images do not have a border radius, add captions, and then proceed to add a border radius, the caption is now bumped outside, below:

While I'm a fan of the option to show captions outside (see also #56587), it's not clear to me whether this behavior is intentional or not. I'd tend to echo another commenter, that the corner here should likely involve overflow handling of the caption style.

[t-hamano]

if you create a gallery, where images do not have a border radius, add captions, and then proceed to add a border radius, the caption is now bumped outside, below:

From what I can tell, this is the intended behavior and is related to #31366. With this change, it looks like the caption will now be moved below the image when it has a border in addition to the Rounded style.

@aaronrobertshaw might know more about this.

[aaronrobertshaw]

Thanks for the ping 👍

From what I can tell, this is the intended behavior and is related to #31366.

Yes, it was intended and has been this way since the addition of border support for images back in 2022. My earlier comment on this issue provides a more detailed explanation on some of the edge cases with image borders against the gallery block's overlay caption styles.

The only suggestions I had then for quick wins (but not proper solutions) were:

1. Add a block style variation for galleries that reposition the overlaid captions
2. Add a toggle to the gallery block to manually control displaying the captions beneath the image

I'd tend to echo another commenter, that the corner here should likely involve overflow handling of the caption style.

This tended to result in caption text getting clipped and led to the gallery refactor landing on relocating the caption. If the radius was also applied to the caption element itself, due to different dimensions the radius diverged from the image's.