[wp-trac] [WordPress Trac] #49601: layout width bugfix for img_caption_shortcode()

[WordPress Trac]

#49601: layout width bugfix for img_caption_shortcode()
--------------------------+------------------------------------
 Reporter:  joelhardi     |      Owner:  (none)
     Type:  defect (bug)  |     Status:  new
 Priority:  normal        |  Milestone:  Awaiting Review
Component:  Media         |    Version:  trunk
 Severity:  normal        |   Keywords:  has-patch dev-feedback
  Focuses:                |
--------------------------+------------------------------------
 `img_caption_shortcode()` in `wp-includes/media.php` is hardcoding an
 inline `style="width:"` attribute on the outer `<figure>` or `<div>`
 element that contains the image and image caption, which it sets to the
 pixel width of the image. This is so the image caption is the same width
 as the image.

 The problem is that on mobile (narrow width) layouts this hardcoded
 figure/div element width will cause the entire container element to expand
 to this width, which makes the entire main content column overflow the
 window/viewport, so the page content overflows the screen and can't be
 read. Google search console also flags this issue. Here's what it looks
 like:



 Normally in CSS, themes have something simple like `img { max-width: 100%;
 }` to prevent images from overflowing the container element. But since
 WordPress is hardcoding the element width with an inline style, this takes
 precedence and clobbers whatever in in CSS. So it is not possible for a
 theme to fix this issue.

 The fix is simple, just use `max-width` instead of `width`. The caption
 text still stretches to whatever the width of the image is, but the
 element no longer overflows the page. Patch is attached but all it is
 doing is using `max-width instead of `width`.

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/49601>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform