mirror_php/wordpress
1
0
Fork 0
mirror of git://develop.git.wordpress.org/ synced 2025-01-17 12:58:25 +01:00
Code Issues Actions 98 Packages Projects Releases Wiki Activity

Media: Enable lazy-loading of iframes by adding the loading="lazy" attribute to iframe tags on the front-end.

Browse Source 
* Expands the capabilities of `wp_filter_content_tags()` to add the attribute to iframe tags if enabled.
* Modifies the default behavior of `wp_lazy_loading_enabled()` so that it returns `true` for `iframe` tags.
* Introduces a `wp_iframe_tag_add_loading_attr()` function.
* Introduces a `wp_iframe_tag_add_loading_attr` filter.

Like for images, the attribute is only added to iframes which have both `width` and `height` specified (see related #50367).

Props azaozz, flixos90, westonruter.
Fixes #50756.


git-svn-id: https://develop.svn.wordpress.org/trunk@49808 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Felix Arntz 2020-12-16 21:17:24 +00:00
parent 3f12f0e77c
commit 8505c99a1b
2 changed files with 171 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

111
src/wp-includes/media.php
View File

@ -1703,6 +1703,7 @@ function wp_image_add_srcset_and_sizes( $image, $image_meta, $attachment_id ) {
* Determines whether to add the `loading` attribute to the specified tag in the specified context.
*
* @since 5.5.0
* @since 5.7.0 Now returns `true` by default for `iframe` tags.
*
* @param string $tag_name The tag name.
* @param string $context Additional context, like the current filter name
@ -1710,9 +1711,10 @@ function wp_image_add_srcset_and_sizes( $image, $image_meta, $attachment_id ) {
* @return bool Whether to add the attribute.
*/
function wp_lazy_loading_enabled( $tag_name, $context ) {
// By default add to all 'img' tags.
// By default add to all 'img' and 'iframe' tags.
// See https://html.spec.whatwg.org/multipage/embedded-content.html#attr-img-loading
$default = ( 'img' === $tag_name );
// See https://html.spec.whatwg.org/multipage/iframe-embed-object.html#attr-iframe-loading
$default = ( 'img' === $tag_name || 'iframe' === $tag_name );
/**
* Filters whether to add the `loading` attribute to the specified tag in the specified context.
@ -1732,14 +1734,17 @@ function wp_lazy_loading_enabled( $tag_name, $context ) {
*
* Modifies HTML tags in post content to include new browser and HTML technologies
* that may not have existed at the time of post creation. These modifications currently
* include adding `srcset`, `sizes`, and `loading` attributes to `img` HTML tags.
* include adding `srcset`, `sizes`, and `loading` attributes to `img` HTML tags, as well
* as adding `loading` attributes to `iframe` HTML tags.
* Future similar optimizations should be added/expected here.
*
* @since 5.5.0
* @since 5.7.0 Now supports adding `loading` attributes to `iframe` tags.
*
* @see wp_img_tag_add_width_and_height_attr()
* @see wp_img_tag_add_srcset_and_sizes_attr()
* @see wp_img_tag_add_loading_attr()
* @see wp_iframe_tag_add_loading_attr()
*
* @param string $content The HTML content to be filtered.
* @param string $context Optional. Additional context to pass to the filters.
@ -1751,32 +1756,40 @@ function wp_filter_content_tags( $content, $context = null ) {
$context = current_filter();
}
$add_loading_attr = wp_lazy_loading_enabled( 'img', $context );
$add_img_loading_attr = wp_lazy_loading_enabled( 'img', $context );
$add_iframe_loading_attr = wp_lazy_loading_enabled( 'iframe', $context );
if ( false === strpos( $content, '<img' ) ) {
return $content;
}
if ( ! preg_match_all( '/<img\s[^>]+>/', $content, $matches ) ) {
if ( ! preg_match_all( '/<(img|iframe)\s[^>]+>/', $content, $matches, PREG_SET_ORDER ) ) {
return $content;
}
// List of the unique `img` tags found in $content.
$images = array();
foreach ( $matches[0] as $image ) {
if ( preg_match( '/wp-image-([0-9]+)/i', $image, $class_id ) ) {
$attachment_id = absint( $class_id[1] );
// List of the unique `iframe` tags found in $content.
$iframes = array();
if ( $attachment_id ) {
// If exactly the same image tag is used more than once, overwrite it.
// All identical tags will be replaced later with 'str_replace()'.
$images[ $image ] = $attachment_id;
continue;
}
foreach ( $matches as $match ) {
list( $tag, $tag_name ) = $match;
switch ( $tag_name ) {
case 'img':
if ( preg_match( '/wp-image-([0-9]+)/i', $tag, $class_id ) ) {
$attachment_id = absint( $class_id[1] );
if ( $attachment_id ) {
// If exactly the same image tag is used more than once, overwrite it.
// All identical tags will be replaced later with 'str_replace()'.
$images[ $tag ] = $attachment_id;
break;
}
}
$images[ $tag ] = 0;
break;
case 'iframe':
$iframes[ $tag ] = 0;
break;
}
$images[ $image ] = 0;
}
// Reduce the array to unique attachment IDs.
@ -1804,7 +1817,7 @@ function wp_filter_content_tags( $content, $context = null ) {
}
// Add 'loading' attribute if applicable.
if ( $add_loading_attr && false === strpos( $filtered_image, ' loading=' ) ) {
if ( $add_img_loading_attr && false === strpos( $filtered_image, ' loading=' ) ) {
$filtered_image = wp_img_tag_add_loading_attr( $filtered_image, $context );
}
@ -1813,6 +1826,19 @@ function wp_filter_content_tags( $content, $context = null ) {
}
}
foreach ( $iframes as $iframe => $attachment_id ) {
$filtered_iframe = $iframe;
// Add 'loading' attribute if applicable.
if ( $add_iframe_loading_attr && false === strpos( $filtered_iframe, ' loading=' ) ) {
$filtered_iframe = wp_iframe_tag_add_loading_attr( $filtered_iframe, $context );
}
if ( $filtered_iframe !== $iframe ) {
$content = str_replace( $iframe, $filtered_iframe, $content );
}
}
return $content;
}
@ -1827,7 +1853,7 @@ function wp_filter_content_tags( $content, $context = null ) {
*/
function wp_img_tag_add_loading_attr( $image, $context ) {
/**
* Filters the `loading` attribute value. Default `lazy`.
* Filters the `loading` attribute value to add to an image. Default `lazy`.
*
* Returning `false` or an empty string will not add the attribute.
* Returning `true` will add the default value.
@ -1936,6 +1962,47 @@ function wp_img_tag_add_srcset_and_sizes_attr( $image, $context, $attachment_id
return $image;
}
/**
* Adds `loading` attribute to an `iframe` HTML tag.
*
* @since 5.7.0
*
* @param string $iframe The HTML `iframe` tag where the attribute should be added.
* @param string $context Additional context to pass to the filters.
* @return string Converted `iframe` tag with `loading` attribute added.
*/
function wp_iframe_tag_add_loading_attr( $iframe, $context ) {
/**
* Filters the `loading` attribute value to add to an iframe. Default `lazy`.
*
* Returning `false` or an empty string will not add the attribute.
* Returning `true` will add the default value.
*
* @since 5.7.0
*
* @param string|bool $value The `loading` attribute value. Returning a falsey value will result in
* the attribute being omitted for the iframe. Default 'lazy'.
* @param string $iframe The HTML `iframe` tag to be filtered.
* @param string $context Additional context about how the function was called or where the iframe tag is.
*/
$value = apply_filters( 'wp_iframe_tag_add_loading_attr', 'lazy', $iframe, $context );
if ( $value ) {
if ( ! in_array( $value, array( 'lazy', 'eager' ), true ) ) {
$value = 'lazy';
}
// Iframes should have source and dimension attributes for the `loading` attribute to be added.
if ( false === strpos( $iframe, ' src="' ) || false === strpos( $iframe, ' width="' ) || false === strpos( $iframe, ' height="' ) ) {
return $iframe;
}
return str_replace( '<iframe', '<iframe loading="' . esc_attr( $value ) . '"', $iframe );
}
return $iframe;
}
/**
* Adds a 'wp-post-image' class to post thumbnails. Internal use only.
*

102
tests/phpunit/tests/media.php
View File

@ -2736,25 +2736,29 @@ EOF;
/**
* @ticket 44427
* @ticket 50367
* @ticket 50756
* @requires function imagejpeg
*/
function test_wp_filter_content_tags_loading_lazy() {
$image_meta = wp_get_attachment_metadata( self::$large_id );
$size_array = $this->_get_image_size_array_from_meta( $image_meta, 'medium' );
$img = get_image_tag( self::$large_id, '', '', '', 'medium' );
$img_xhtml = str_replace( ' />', '/>', $img );
$img_html5 = str_replace( ' />', '>', $img );
$img_no_width_height = str_replace( ' width="' . $size_array[0] . '"', '', $img );
$img_no_width_height = str_replace( ' height="' . $size_array[1] . '"', '', $img_no_width_height );
$iframe = '<iframe src="https://www.example.com"></iframe>';
$img = get_image_tag( self::$large_id, '', '', '', 'medium' );
$img_xhtml = str_replace( ' />', '/>', $img );
$img_html5 = str_replace( ' />', '>', $img );
$img_no_width_height = str_replace( ' width="' . $size_array[0] . '"', '', $img );
$img_no_width_height = str_replace( ' height="' . $size_array[1] . '"', '', $img_no_width_height );
$iframe = '<iframe src="https://www.example.com" width="640" height="360"></iframe>';
$iframe_no_width_height = '<iframe src="https://www.example.com"></iframe>';
$lazy_img = wp_img_tag_add_loading_attr( $img, 'test' );
$lazy_img_xhtml = wp_img_tag_add_loading_attr( $img_xhtml, 'test' );
$lazy_img_html5 = wp_img_tag_add_loading_attr( $img_html5, 'test' );
$lazy_iframe = wp_iframe_tag_add_loading_attr( $iframe, 'test' );
// The following should not be modified because there already is a 'loading' attribute.
$img_eager = str_replace( ' />', ' loading="eager" />', $img );
$img_eager = str_replace( ' />', ' loading="eager" />', $img );
$iframe_eager = str_replace( '">', '" loading="eager">', $iframe );
$content = '
<p>Image, standard.</p>
@ -2767,11 +2771,15 @@ EOF;
%4$s
<p>Image, without dimension attributes. Should not be modified.</p>
%5$s
<p>Iframe, standard. Should not be modified.</p>
%6$s';
<p>Iframe, standard.</p>
%6$s
<p>Iframe, with pre-existing "loading" attribute. Should not be modified.</p>
%7$s
<p>Iframe, without dimension attributes. Should not be modified.</p>
%8$s';
$content_unfiltered = sprintf( $content, $img, $img_xhtml, $img_html5, $img_eager, $img_no_width_height, $iframe );
$content_filtered = sprintf( $content, $lazy_img, $lazy_img_xhtml, $lazy_img_html5, $img_eager, $img_no_width_height, $iframe );
$content_unfiltered = sprintf( $content, $img, $img_xhtml, $img_html5, $img_eager, $img_no_width_height, $iframe, $iframe_eager, $iframe_no_width_height );
$content_filtered = sprintf( $content, $lazy_img, $lazy_img_xhtml, $lazy_img_html5, $img_eager, $img_no_width_height, $lazy_iframe, $iframe_eager, $iframe_no_width_height );
// Do not add width, height, srcset, and sizes.
add_filter( 'wp_img_tag_add_width_and_height_attr', '__return_false' );
@ -2785,17 +2793,22 @@ EOF;
/**
* @ticket 44427
* @ticket 50756
*/
function test_wp_filter_content_tags_loading_lazy_opted_in() {
$img = get_image_tag( self::$large_id, '', '', '', 'medium' );
$lazy_img = wp_img_tag_add_loading_attr( $img, 'test' );
$img = get_image_tag( self::$large_id, '', '', '', 'medium' );
$lazy_img = wp_img_tag_add_loading_attr( $img, 'test' );
$iframe = '<iframe src="https://www.example.com" width="640" height="360"></iframe>';
$lazy_iframe = wp_iframe_tag_add_loading_attr( $iframe, 'test' );
$content = '
<p>Image, standard.</p>
%1$s';
%1$s
<p>Iframe, standard.</p>
%2$s';
$content_unfiltered = sprintf( $content, $img );
$content_filtered = sprintf( $content, $lazy_img );
$content_unfiltered = sprintf( $content, $img, $iframe );
$content_filtered = sprintf( $content, $lazy_img, $lazy_iframe );
// Do not add srcset and sizes while testing.
add_filter( 'wp_img_tag_add_srcset_and_sizes_attr', '__return_false' );
@ -2810,14 +2823,18 @@ EOF;
/**
* @ticket 44427
* @ticket 50756
*/
function test_wp_filter_content_tags_loading_lazy_opted_out() {
$img = get_image_tag( self::$large_id, '', '', '', 'medium' );
$img = get_image_tag( self::$large_id, '', '', '', 'medium' );
$iframe = '<iframe src="https://www.example.com" width="640" height="360"></iframe>';
$content = '
<p>Image, standard.</p>
%1$s';
$content = sprintf( $content, $img );
%1$s
<p>Iframe, standard.</p>
%2$s';
$content = sprintf( $content, $img, $iframe );
// Do not add srcset and sizes while testing.
add_filter( 'wp_img_tag_add_srcset_and_sizes_attr', '__return_false' );
@ -2878,6 +2895,50 @@ EOF;
$this->assertNotContains( ' loading=', $img );
}
/**
* @ticket 50756
*/
function test_wp_iframe_tag_add_loading_attr() {
$iframe = '<iframe src="https://www.example.com" width="640" height="360"></iframe>';
$iframe = wp_iframe_tag_add_loading_attr( $iframe, 'test' );
$this->assertContains( ' loading="lazy"', $iframe );
}
/**
* @ticket 50756
*/
function test_wp_iframe_tag_add_loading_attr_without_src() {
$iframe = '<iframe width="640" height="360"></iframe>';
$iframe = wp_iframe_tag_add_loading_attr( $iframe, 'test' );
$this->assertNotContains( ' loading=', $iframe );
}
/**
* @ticket 50756
*/
function test_wp_iframe_tag_add_loading_attr_with_single_quotes() {
$iframe = "<iframe src='https://www.example.com' width='640' height='360'></iframe>";
$iframe = wp_iframe_tag_add_loading_attr( $iframe, 'test' );
$this->assertNotContains( ' loading=', $iframe );
// Test specifically that the attribute is not there with double-quotes,
// to avoid regressions.
$this->assertNotContains( ' loading="lazy"', $iframe );
}
/**
* @ticket 50756
*/
function test_wp_iframe_tag_add_loading_attr_opt_out() {
$iframe = '<iframe src="https://www.example.com" width="640" height="360"></iframe>';
add_filter( 'wp_iframe_tag_add_loading_attr', '__return_false' );
$this->assertNotContains( ' loading=', $iframe );
}
/**
* @ticket 44427
* @ticket 50425
@ -2918,6 +2979,7 @@ EOF;
/**
* @ticket 44427
* @ticket 50425
* @ticket 50756
* @dataProvider data_wp_lazy_loading_enabled_tag_name_defaults
*
* @param string $tag_name Tag name.
@ -2934,7 +2996,7 @@ EOF;
function data_wp_lazy_loading_enabled_tag_name_defaults() {
return array(
'img => true' => array( 'img', true ),
'iframe => false' => array( 'iframe', false ),
'iframe => true' => array( 'iframe', true ),
'arbitrary tag => false' => array( 'blink', false ),
);
}