Media: Use max-width for default captions.

This alters the HTML output of the image caption shortcode to use
`max-width` instead of `width` to improve compatibility with
flexible layouts.

Props aaronrutley, desrosj.
Fixes #33981.


git-svn-id: https://develop.svn.wordpress.org/trunk@41724 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Joe McGill 2017-10-04 02:49:19 +00:00
parent 156c8ec5c6
commit fa43ebdefd
3 changed files with 78 additions and 7 deletions

View File

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

View File

@ -28,6 +28,7 @@ class Tests_Media extends WP_UnitTestCase {
function setUp() { function setUp() {
parent::setUp(); parent::setUp();
$this->caption = 'A simple caption.'; $this->caption = 'A simple caption.';
$this->alternate_caption = 'Alternate caption.';
$this->html_content = <<<CAP $this->html_content = <<<CAP
A <strong class='classy'>bolded</strong> <em>caption</em> with a <a href="#">link</a>. A <strong class='classy'>bolded</strong> <em>caption</em> with a <a href="#">link</a>.
CAP; CAP;
@ -51,9 +52,67 @@ CAP;
$this->assertNull( $result ); $this->assertNull( $result );
} }
function test_img_caption_shortcode_with_bad_attr() { /**
$result = img_caption_shortcode( array(), 'content' ); * @ticket 33981
$this->assertEquals( 'content', 'content' ); */
function test_img_caption_shortcode_with_empty_params_but_content() {
$result = img_caption_shortcode( array(), $this->caption );
$this->assertEquals( $this->caption, $result );
}
/**
* @ticket 33981
*/
function test_img_caption_shortcode_short_circuit_filter() {
add_filter( 'img_caption_shortcode', array( $this, '_return_alt_caption' ) );
$result = img_caption_shortcode( array(), $this->caption );
$this->assertEquals( $this->alternate_caption, $result );
}
/**
* Filter used in test_img_caption_shortcode_short_circuit_filter()
*/
function _return_alt_caption() {
return $this->alternate_caption;
}
/**
* @ticket 33981
*/
function test_img_caption_shortcode_empty_width() {
$result = img_caption_shortcode(
array(
'width' => 0,
),
$this->caption
);
$this->assertEquals( $this->caption, $result );
}
/**
* @ticket 33981
*/
function test_img_caption_shortcode_empty_caption() {
$result = img_caption_shortcode(
array(
'caption' => '',
)
);
$this->assertNull( $result );
}
/**
* @ticket 33981
*/
function test_img_caption_shortcode_empty_caption_and_content() {
$result = img_caption_shortcode(
array(
'caption' => '',
),
$this->caption
);
$this->assertEquals( $this->caption, $result );
} }
function test_img_caption_shortcode_with_old_format() { function test_img_caption_shortcode_with_old_format() {
@ -66,9 +125,9 @@ CAP;
$this->assertEquals( 1, preg_match_all( "/{$this->caption}/", $result, $_r ) ); $this->assertEquals( 1, preg_match_all( "/{$this->caption}/", $result, $_r ) );
if ( current_theme_supports( 'html5', 'caption' ) ) { if ( current_theme_supports( 'html5', 'caption' ) ) {
$this->assertEquals( 1, preg_match_all( "/width: 20/", $result, $_r ) ); $this->assertEquals( 1, preg_match_all( "/max-width: 20/", $result, $_r ) );
} else { } else {
$this->assertEquals( 1, preg_match_all( "/width: 30/", $result, $_r ) ); $this->assertEquals( 1, preg_match_all( "/max-width: 30/", $result, $_r ) );
} }
} }
@ -86,6 +145,18 @@ CAP;
$this->assertEquals( 1, preg_match_all( "/{$this->caption}/", $result, $_r ) ); $this->assertEquals( 1, preg_match_all( "/{$this->caption}/", $result, $_r ) );
} }
function test_img_caption_shortcode_with_old_format_and_class() {
$result = img_caption_shortcode(
array(
'width' => 20,
'class' => 'some-class another-class',
'caption' => $this->caption,
)
);
$this->assertEquals( 1, preg_match_all( '/wp-caption alignnone some-class another-class/', $result, $_r ) );
}
function test_new_img_caption_shortcode_with_html_caption() { function test_new_img_caption_shortcode_with_html_caption() {
$result = img_caption_shortcode( $result = img_caption_shortcode(
array( 'width' => 20, 'caption' => $this->html_content ) array( 'width' => 20, 'caption' => $this->html_content )

View File

@ -477,7 +477,7 @@ EOF;
), ),
array( array(
'[caption caption="test" width="2"]<div>hello</div>[/caption]', '[caption caption="test" width="2"]<div>hello</div>[/caption]',
'<div style="width: 12px" class="wp-caption alignnone"><div>hello</div><p class="wp-caption-text">test</p></div>', '<div style="max-width: 12px" class="wp-caption alignnone"><div>hello</div><p class="wp-caption-text">test</p></div>',
), ),
array( array(
'<div [gallery]>', '<div [gallery]>',