Make WordPress Core

Opened 4 years ago

Closed 5 months ago

Last modified 4 months ago

#50376 closed defect (bug) (fixed)

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

Reported by: pevogam's profile pevogam Owned by: karmatosed's profile karmatosed
Milestone: 6.7 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 years 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 years ago.
making the same selector change for Twenty Ten and Twenty Eleven (including Twenty Seventeen)

Download all attachments as: .zip

Change History (15)

#1 @sabernhardt
4 years 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 years ago

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

#2 @sabernhardt
4 years 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 years ago

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

#3 @sabernhardt
4 years 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 years 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 years ago

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

#6 @sabernhardt
4 years 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 years 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 years ago

#9 @karmatosed
6 months ago

  • Milestone changed from Awaiting Review to Future Release

#10 @karmatosed
5 months ago

  • Owner set to karmatosed
  • Status changed from reopened to assigned

#11 @karmatosed
5 months ago

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

#12 @karmatosed
5 months ago

  • Milestone changed from Future Release to 6.7

#13 @karmatosed
5 months ago

  • Resolution set to fixed
  • Status changed from assigned to closed

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.

Last edited 4 months ago by sabernhardt (previous) (diff)
Note: See TracTickets for help on using tickets.