WordPress.org

Make WordPress Core

Opened 8 weeks ago

Closed 5 weeks ago

Last modified 5 weeks ago

#42700 closed defect (bug) (worksforme)

Figure captions not inheriting max-width from figures

Reported by: bahead Owned by: desrosj
Milestone: Priority: normal
Severity: normal Version: 4.9
Component: Media Keywords:
Focuses: Cc:

Description (last modified by desrosj)

This is a follow-up to #33981.

The "width" attribute in figure has been changed to "max-width". However, while figcaption would inherit "width", it does not inherit "max-width". As a result, a figcaption that exceeds the max-width attribute in figure breaks left/right alignment of the figure (i.e., the caption does not wrap under the image). Proposed fix is to modify media.php to insert max-width into figcaption as well as in figure.

I am attaching some screenshots of what I am seeing when testing in Twenty Seventeen.

Attachments (4)

Screen Shot 2017-12-10 at 8.59.55 PM.png (1.1 MB) - added by desrosj 6 weeks ago.
Screenshot of left aligned and centered image with a caption in Twenty Seventeen.
Screen Shot 2017-12-10 at 9.07.04 PM.png (674.6 KB) - added by desrosj 6 weeks ago.
Screenshot of a centered and right aligned image with caption with really long word.
Screen Shot 2017-12-10 at 9.08.33 PM.png (855.4 KB) - added by desrosj 6 weeks ago.
Screenshot of a gallery with long captions respecting max-width.
alignment-01.png (326.7 KB) - added by bahead 6 weeks ago.
Right image alignment with large caption in Newspaper theme

Change History (10)

#1 @desrosj
6 weeks ago

  • Keywords needs-patch needs-screenshots added
  • Owner set to desrosj
  • Status changed from new to assigned

#2 @desrosj
6 weeks ago

  • Description modified (diff)
  • Keywords reporter-feedback added

Hi @bahead, welcome to Trac! Thanks for making the ticket.

I tried to reproduce the issue you described, but I could not get the text to bleed out of the <figcaption> element. Can you please provide more details to reproduce? If you could attach some screenshots, that would help as well.

I tried with the default Twenty Seventeen theme, the Underscores theme, and with no theme styles at all (all in Firefox). Even though the max-width property was not actually inherited, the text seemed to respect the <figures>'s max-width each time.

@desrosj
6 weeks ago

Screenshot of left aligned and centered image with a caption in Twenty Seventeen.

@desrosj
6 weeks ago

Screenshot of a centered and right aligned image with caption with really long word.

@desrosj
6 weeks ago

Screenshot of a gallery with long captions respecting max-width.

#3 @desrosj
6 weeks ago

  • Keywords needs-patch removed

@bahead
6 weeks ago

Right image alignment with large caption in Newspaper theme

#4 @bahead
6 weeks ago

It appears this "bug" is theme or plugin related, not to WP core, so this ticket should be withdrawn. While multiple users have reported this issue with their sites after upgrading to v4.9, I was unable to replicate the issue using Twenty Seventeen. I can only reproduce this issue using the Newspaper theme (see screenshot) when right-aligning images with long captions, and the problem only started happening with WP v4.9. I fixed this by modifying line 1586 in media.php to include the caption width:

. do_shortcode( $content ) . '<figcaption class="wp-caption-text" ' . $style . '>' . $atts['caption'] . '</figcaption></figure>';

This fix is probably unnecessary; I'm assuming there's a collision with theme CSS or a plug-in. I will need to do more investigation and troubleshooting on what element of the theme or plug-in is creating the problem, but I am withdrawing this ticket.

#5 @desrosj
5 weeks ago

  • Milestone Awaiting Review deleted
  • Resolution set to worksforme
  • Status changed from assigned to closed

Thanks for the additional details, @bahead.

Since this is a bug with a non-default theme, I am going to close this out.

#6 @desrosj
5 weeks ago

  • Keywords needs-screenshots reporter-feedback removed
Note: See TracTickets for help on using tickets.