[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:  reopened
 Priority:  normal                  |   Milestone:
Component:  Media                   |     Version:  trunk
 Severity:  normal                  |  Resolution:
 Keywords:  has-patch dev-feedback  |     Focuses:
------------------------------------+-----------------------
Changes (by joelhardi):

 * keywords:  has-patch => has-patch dev-feedback
 * status:  closed => reopened
 * version:   => trunk
 * resolution:  duplicate =>


Comment:

 Hi @ocean90 thanks for the feedback. I read those ticket threads, what a
 painful history for a silly problem!

 I understand the issue (WordPress inline style overriding `max-width`
 values set in themes) and the reason for the revert. Sure, it's no problem
 for me to add a filter like that.

 BUT ... I think it's a bad behavior for WordPress to break mobile layouts
 by default. Especially now that Google has gone to mobile-first crawling
 and this will get flagged as an issue.

 So I have another suggestion (new patch), please let me know what you
 think. It seems a lot better to me and should have no (or at least fewer)
 impacts on existing themes. It would definitely not create the conflict
 that was identified in #43123.

 What it does is remove the `width` inline style on the container
 `figure/div` element, and instead put a `max-width` on the `figcaption/p`
 element. Which is probably better anyway, since this is the element that
 should stretch to the same width as the image (not the `figure`
 container). So the output HTML looks like this:


 {{{
 <figure class="wp-caption alignnone">     <!-- or alignleft or alignright
 -->
     <a><img></a>
     <figcaption style="max-width: 500px" class="wp-caption-
 text">Caption</figcaption>
 </figure>
 }}}

 And in the example @smerriman uses in #43123 where he has got `.alignleft,
 .alignright {max-width:50%;}` in this theme, that will still work (the
 outer container `<figure>` element shrinks to 50% container width). I
 tested it out.

 The only negative theme impact would now be if a theme has got a `max-
 width` set on `.wp-caption-text`. I don't know if the core dev team has
 any idea about whether or how often that might be happening. But even in
 that case the theme developer could just update their theme by adding for
 example `.wp-caption { max-width: 50%; }` to their theme.

 This seems like a much better overall solution.

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