[wp-trac] [WordPress Trac] #43185: #42700 is causing issue with caption and narrow layouts

[WordPress Trac]

#43185: #42700 is causing issue with caption and narrow layouts
---------------------------+-----------------------------
 Reporter:  brunochartier  |      Owner:
     Type:  defect (bug)   |     Status:  new
 Priority:  normal         |  Milestone:  Awaiting Review
Component:  Shortcodes     |    Version:  4.9.1
 Severity:  normal         |   Keywords:
  Focuses:  ui             |
---------------------------+-----------------------------
 wp-includes/media.php was modified in 4.9.1 (see below). 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.1:
 [[Image(https://lh3.googleusercontent.com/p_DCrbp1XuYpot9wCb1oLh5MoRrP-
 LfFdfx_emOALBki8inhh9wA5e9Kx9w6vdcKEr970YBFwNeWXFcjKXChjm2_js_-Y27_-
 qJesSdCQxwA0taPi1Jdxe4EKPRmqqDfROMvm5ewn3gHdHmCoeW0r8MzJWNppIVcLnD3XZCZnKn8q6
 -zZivxzlX7vcvyUv7ZYWkN9tYgL4doKesoSqAfWwpcAUdThdmgG2CJZuoewMRborqG6jzF8HueORESCQQ-
 Eu3umOBec0nExg0II3LVyVVMAIzgkLB8PwkEoDSu5J-Ogy585r-
 GxIRofCKowlXZUPNdf4jW2HbhK5ztNT065kYlI0G9Uf6RFoR9fy-
 IwtGQU94YM7y5UYbp83FMlfu_f9vfbGycNFemYLBuqxFzEV1lGmCYjTI2p6oJ7wyzwmRmfNVa6uq-
 HsdX_ontf39kQnGec4UoQ9KoK8z_kSDAtI_HcMYOD9GZpUey7z9Oh7QeEP2A1Jye5x_8ZDWo-
 Sd8L_EqzmGWPKHoqnK0d7Jz9gx9bPmh17DKsdsOz4A9iuVpduJU9S7YQ7rqzpf8BpohOmPMtaZdXfneiVEK5jWFI7RRdaZnQDWPUKyb0Ul1=w3110-h1980-no)]]

 After 4.9.1 and changes to media.php:

 [[Image(https://lh3.googleusercontent.com/BRTRsTdvSUkgurlwhVNTFvd4WK-
 rwjnXoAdFAdyCBy3UpGiifoDsG3SgjQe5qjiwIM-S9eK1TNidys53-fKgqGqHojdJ46nz-
 mEuL5JlWBSQb6nEf-ZLHCQQUNUac_mXkoqpPLp_vXVD6x-
 hEwU66PeQdSjamOa6v4TfRKKPVYKIwiXLIRc1pkHdafHPUhpVME3851bzYx4kPyDFQjRN7BFHZgYGOFlt_0kFNjG8_3s8GSUM5tVW_9FTYrMz8CMqBTotw6Xygqbgm72FoSD_Hq0N2gNeV2uYAUYvB6hQL8tMgkYNyGvh4Q-
 YZOAi34_FuE13sTzB1Ij9yQzKCV9Rvr5UVNSNOFfvOCFLHduxWTBqxTubUH3SaeMc6ocNZpZfpGB-
 3t3iTb79z8_sZs9eLwEzlFXr8BIYl-
 Lv2MAt26o5nlAOLspcbz52rglWW1HJPPVQc5YJQaUK6LRh9gNgPKG-
 SfhT8Cg_1ABMLusXQLLnOC7Co0_AmT2FrpyVUE470KedPwxF4JzF1_2JsAGRL5JF7zw5T8FPu18m4oByk9kSvD1W2oaw4s0BGs8Blzk-
 N88KMs9qPVK0FBYzV2R9KXkg7fydqkL9EWIVDiJO=w3110-h1980-no)]]


 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

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