From 8505c99a1b75ee9b54cf0caafa2c9de6e16ef724 Mon Sep 17 00:00:00 2001 From: Felix Arntz Date: Wed, 16 Dec 2020 21:17:24 +0000 Subject: [PATCH] Media: Enable lazy-loading of iframes by adding the `loading="lazy"` attribute to iframe tags on the front-end. * 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 --- src/wp-includes/media.php | 111 +++++++++++++++++++++++++++------- tests/phpunit/tests/media.php | 102 +++++++++++++++++++++++++------ 2 files changed, 171 insertions(+), 42 deletions(-) diff --git a/src/wp-includes/media.php b/src/wp-includes/media.php index b219ab0ff2..561cdf3d4c 100644 --- a/src/wp-includes/media.php +++ b/src/wp-includes/media.php @@ -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, ']+>/', $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( '_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 = ''; + $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_no_width_height = ''; $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 = '

Image, standard.

@@ -2767,11 +2771,15 @@ EOF; %4$s

Image, without dimension attributes. Should not be modified.

%5$s -

Iframe, standard. Should not be modified.

- %6$s'; +

Iframe, standard.

+ %6$s +

Iframe, with pre-existing "loading" attribute. Should not be modified.

+ %7$s +

Iframe, without dimension attributes. Should not be modified.

+ %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 = ''; + $lazy_iframe = wp_iframe_tag_add_loading_attr( $iframe, 'test' ); $content = '

Image, standard.

- %1$s'; + %1$s +

Iframe, standard.

+ %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 = ''; $content = '

Image, standard.

- %1$s'; - $content = sprintf( $content, $img ); + %1$s +

Iframe, standard.

+ %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 = 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 = 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 = 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 = ''; + 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 ), ); }