Twenty Seventeen: Gallery captions are not at the bottom of images of some sizes

[pevogam]

I am using a default gallery block and adding some captions to this WordPress-powered page:

​https://krasnogor.eu/?page_id=17

And you can see how the captions look in the top gallery. For comparison, I have add a caption to one image in the second gallery block underneath and you can see it displays properly.

I have tried changing the size of the images as well as number of columns but adding the captions always looks like this, cutting across the middle of the images of this shape.

Am I doing something wrong? Aren't captions expected to display properly on all image shapes, especially if the images are cropped automatically by WP?

[sabernhardt]

@pevogam Hi and thanks for the report!

It seems that the margin specified in the Twenty Seventeen blocks.css stylesheet causes the problem when a gallery is placed inside another block type (Group in this case).

[class^="wp-block-"]:not(.wp-block-gallery) figcaption {
	font-style: italic;
	margin-bottom: 1.5em;
	text-align: left;
}

It might work to include the child combinator to the selector, though then the caption would not be aligned left anymore.
[class^="wp-block-"]:not(.wp-block-gallery) > figcaption

So instead, I like the idea of specifically declaring that gallery block captions have no bottom margin:

[class^="wp-block-"].wp-block-gallery figcaption {
    margin-bottom: 0;
}

[sabernhardt]

Employ the child combinator for non-gallery caption styles, to avoid applying them to gallery image captions within other blocks

[sabernhardt]

I made a mistake earlier: the caption is normally centered and probably should stay centered when inside another block.

So the first option is likely preferable, and it's in the attached patch.
[class^="wp-block-"]:not(.wp-block-gallery) > figcaption

[sabernhardt]

making the same selector change for Twenty Ten and Twenty Eleven (including Twenty Seventeen)

[sabernhardt]

The same selector was used in Twenty Ten and Twenty Eleven.

I uploaded another patch to include those. If it's better to have the other themes on separate tickets, I could re-upload those pieces there. Otherwise, the summary for this ticket could be edited again.

[pevogam]

Hi @sabernhardt, thanks for the patch!

I have applied it to our case to the link above used to visualize the problem might now be outdated but I guess the problem (and therefore fix) was clear. Hopefully the patch makes it upstream in the next months so that other people could benefit from the fix too.

[sabernhardt]

Reopening ticket so the changes can be made for others

(Closing tickets as "worksforme" is for issues that cannot be reproduced)

[pevogam]

Alright, then I assume I can leave it as is and you could keep commenting here or close it at your wish.

[karmatosed]

I am going to test this to look to get this in, thank you everyone.

[karmatosed]

Noting this is fixed in WordPress commit r58634 so closing now. Thank you everyone.

In r58634:

Twenty Seventeen and Twenty Ten: Fixes gallery captions being at the bottom of images.

The margin specified in this theme caused issues when the gallery was placed in another block. This fix covers both themes as the selector is used within both.

Props pevogam, sabernhardt.