Figure captions not inheriting max-width from figures

[bahead]

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.

[desrosj]

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]

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

[desrosj]

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

[desrosj]

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

[bahead]

Right image alignment with large caption in Newspaper theme

[bahead]

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.

[desrosj]

Thanks for the additional details, @bahead.

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

[bahead]

Just in case someone lands here, the issue I reported in this ticket is more elegantly explained at https://core.trac.wordpress.org/ticket/43123 and was fixed in 4.9.5.