WordPress.org

Make WordPress Core

Opened 4 months ago

Last modified 4 months ago

#50376 reopened defect (bug)

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

Reported by: pevogam Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version:
Component: Bundled Theme Keywords: has-patch needs-testing
Focuses: css Cc:

Description

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?

Attachments (2)

50376.patch (1.4 KB) - added by sabernhardt 4 months ago.
Employ the child combinator for non-gallery caption styles, to avoid applying them to gallery image captions within other blocks
50376.2010-2011-2017.patch (4.6 KB) - added by sabernhardt 4 months ago.
making the same selector change for Twenty Ten and Twenty Eleven (including Twenty Seventeen)

Download all attachments as: .zip

Change History (10)

#1 @sabernhardt
4 months ago

  • Component changed from General to Bundled Theme
  • Focuses css added
  • Keywords needs-patch added
  • Summary changed from Gallery captions are not at the bottom of images of some sizes to Twenty Seventeen: Gallery captions are not at the bottom of images of some sizes

@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
4 months ago

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

#2 @sabernhardt
4 months ago

  • Keywords has-patch needs-testing added; needs-patch removed

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
4 months ago

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

#3 @sabernhardt
4 months ago

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.

#4 @pevogam
4 months ago

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.

#5 @pevogam
4 months ago

  • Resolution set to worksforme
  • Status changed from new to closed

#6 @sabernhardt
4 months ago

  • Resolution worksforme deleted
  • Status changed from closed to reopened

Reopening ticket so the changes can be made for others

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

#7 @pevogam
4 months ago

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

This ticket was mentioned in Slack in #core-themes by sabernhardt. View the logs.


4 months ago

Note: See TracTickets for help on using tickets.