max-width is causing issue with caption and narrow layouts

[brunochartier]

wp-includes/media.php was modified in 4.9 (see #33981). This results in messing up caption which are pushed to the right when using narrow window. Since the change is on element, not CSS, this is impossible to overwrite with CSS.

Github commit: ​https://github.com/WordPress/WordPress/commit/760f9fd3fd743a1de8dd46e61018b232bf38420a#diff-297bf46a572d5f80513d3fed476cd2a2

@@ -1578,7 +1578,7 @@ function img_caption_shortcode( $attr, $content = null ) {
 
 	$style = '';
 	if ( $caption_width ) {
-		$style = 'style="width: ' . (int) $caption_width . 'px" ';
+		$style = 'style="max-width: ' . (int) $caption_width . 'px" ';
 	}
 
 	if ( $html5 ) {

Before 4.9:

After 4.9.1 and changes to media.php:

I understand it has to use the shortcode caption width param so using CSS is complicated. Suggestion: please consider changing the caption width filter to a "style" filter so that is can be overwritten by the theme? ex:

diff --git a/wp-includes/media.php b/wp-includes/media.php
index e465e09..a2c6692 100755
--- a/wp-includes/media.php
+++ b/wp-includes/media.php
@@ -1578,8 +1578,20 @@ function img_caption_shortcode( $attr, $content = null ) {
 
  $style = '';
  if ( $caption_width ) {
    $style = 'style="max-width: ' . (int) $caption_width . 'px" ';
  }
+ /**
+  * Filters the style of an image's caption.
+  *
+  * @see img_caption_shortcode()
+  *
+  * @param string $style    the default style attribute
+  * @param int    $width    Width of the caption in pixels. To remove this inline style,
+  *                         return zero.
+  * @param array  $atts     Attributes of the caption shortcode.
+  * @param string $content  The image element, possibly wrapped in a hyperlink.
+  */
+ $style = apply_filters( 'img_caption_shortcode_style', $style, $width, $atts, $content );
 
  if ( $html5 ) {
    $html = '<figure ' . $atts['id'] . $style . 'class="' . esc_attr( $class ) . '">'

Thanks,

Bruno

[ocean90]

Related: #42700

[jakeqz]

See also #43123. I suggest also reverting the default behaviour so that existing themes are not broken, as well as adding the filter proposed here (so that anyone who really needs the new behaviour can use it).

[desrosj]

Thanks for the ticket, @brunochartier. I am going to close this as a duplicate and it will be addressed in #43123.