diff --git a/src/wp-includes/default-filters.php b/src/wp-includes/default-filters.php
index 38655c5f7d..b18dbe7544 100644
--- a/src/wp-includes/default-filters.php
+++ b/src/wp-includes/default-filters.php
@@ -175,13 +175,14 @@ add_filter( 'the_content', 'convert_smilies', 20 );
add_filter( 'the_content', 'wpautop' );
add_filter( 'the_content', 'shortcode_unautop' );
add_filter( 'the_content', 'prepend_attachment' );
-add_filter( 'the_content', 'wp_make_content_images_responsive' );
+add_filter( 'the_content', 'wp_filter_content_tags' );
add_filter( 'the_excerpt', 'wptexturize' );
add_filter( 'the_excerpt', 'convert_smilies' );
add_filter( 'the_excerpt', 'convert_chars' );
add_filter( 'the_excerpt', 'wpautop' );
add_filter( 'the_excerpt', 'shortcode_unautop' );
+add_filter( 'the_excerpt', 'wp_filter_content_tags' );
add_filter( 'get_the_excerpt', 'wp_trim_excerpt', 10, 2 );
add_filter( 'the_post_thumbnail_caption', 'wptexturize' );
@@ -207,6 +208,7 @@ add_filter( 'widget_text_content', 'wptexturize' );
add_filter( 'widget_text_content', 'convert_smilies', 20 );
add_filter( 'widget_text_content', 'wpautop' );
add_filter( 'widget_text_content', 'shortcode_unautop' );
+add_filter( 'widget_text_content', 'wp_filter_content_tags' );
add_filter( 'widget_text_content', 'do_shortcode', 11 ); // Runs after wpautop(); note that $post global will be null when shortcodes run.
// RSS filters.
diff --git a/src/wp-includes/deprecated.php b/src/wp-includes/deprecated.php
index 7804c8efcb..625dee4ac5 100644
--- a/src/wp-includes/deprecated.php
+++ b/src/wp-includes/deprecated.php
@@ -2509,11 +2509,11 @@ function is_term( $term, $taxonomy = '', $parent = 0 ) {
* Determines whether the current admin page is generated by a plugin.
*
* Use global $plugin_page and/or get_plugin_page_hookname() hooks.
- *
+ *
* For more information on this and similar theme functions, check out
- * the {@link https://developer.wordpress.org/themes/basics/conditional-tags/
+ * the {@link https://developer.wordpress.org/themes/basics/conditional-tags/
* Conditional Tags} article in the Theme Developer Handbook.
- *
+ *
* @since 1.5.0
* @deprecated 3.1.0
*
@@ -3716,11 +3716,11 @@ function get_comments_popup_template() {
/**
* Determines whether the current URL is within the comments popup window.
- *
+ *
* For more information on this and similar theme functions, check out
- * the {@link https://developer.wordpress.org/themes/basics/conditional-tags/
+ * the {@link https://developer.wordpress.org/themes/basics/conditional-tags/
* Conditional Tags} article in the Theme Developer Handbook.
- *
+ *
* @since 1.5.0
* @deprecated 4.5.0
*
@@ -3950,3 +3950,21 @@ function wp_ajax_press_this_add_category() {
wp_send_json_error( array( 'errorMessage' => __( 'The Press This plugin is required.' ) ) );
}
}
+
+/**
+ * Filters 'img' elements in post content to add 'srcset' and 'sizes' attributes.
+ *
+ * @since 4.4.0
+ * @deprecated 5.5.0
+ *
+ * @see wp_image_add_srcset_and_sizes()
+ *
+ * @param string $content The raw post content to be filtered.
+ * @return string Converted content with 'srcset' and 'sizes' attributes added to images.
+ */
+function wp_make_content_images_responsive( $content ) {
+ _deprecated_function( __FUNCTION__, '5.5.0', 'wp_filter_content_tags()' );
+
+ // This will also add the `loading` attribute to `img` tags, if enabled.
+ return wp_filter_content_tags( $content );
+}
diff --git a/src/wp-includes/media.php b/src/wp-includes/media.php
index b5843e6af8..d1dfbc24a5 100644
--- a/src/wp-includes/media.php
+++ b/src/wp-includes/media.php
@@ -1021,20 +1021,29 @@ function wp_get_attachment_image_src( $attachment_id, $size = 'thumbnail', $icon
function wp_get_attachment_image( $attachment_id, $size = 'thumbnail', $icon = false, $attr = '' ) {
$html = '';
$image = wp_get_attachment_image_src( $attachment_id, $size, $icon );
+
if ( $image ) {
list( $src, $width, $height ) = $image;
- $hwstring = image_hwstring( $width, $height );
- $size_class = $size;
+
+ $attachment = get_post( $attachment_id );
+ $hwstring = image_hwstring( $width, $height );
+ $size_class = $size;
+
if ( is_array( $size_class ) ) {
$size_class = join( 'x', $size_class );
}
- $attachment = get_post( $attachment_id );
+
$default_attr = array(
'src' => $src,
'class' => "attachment-$size_class size-$size_class",
'alt' => trim( strip_tags( get_post_meta( $attachment_id, '_wp_attachment_image_alt', true ) ) ),
);
+ // Add `loading` attribute.
+ if ( wp_lazy_loading_enabled( 'img', 'wp_get_attachment_image' ) ) {
+ $default_attr['loading'] = 'lazy';
+ }
+
$attr = wp_parse_args( $attr, $default_attr );
// Generate 'srcset' and 'sizes' if not already present.
@@ -1061,18 +1070,21 @@ function wp_get_attachment_image( $attachment_id, $size = 'thumbnail', $icon = f
*
* @since 2.8.0
*
- * @param string[] $attr Array of attribute values for the image markup, keyed by attribute name.
+ * @param array $attr Array of attribute values for the image markup, keyed by attribute name.
* See wp_get_attachment_image().
* @param WP_Post $attachment Image attachment post.
* @param string|array $size Requested size. Image size or array of width and height values
* (in that order). Default 'thumbnail'.
*/
$attr = apply_filters( 'wp_get_attachment_image_attributes', $attr, $attachment, $size );
+
$attr = array_map( 'esc_attr', $attr );
$html = rtrim( " $value ) {
$html .= " $name=" . '"' . $value . '"';
}
+
$html .= ' />';
}
@@ -1477,56 +1489,6 @@ function wp_calculate_image_sizes( $size, $image_src = null, $image_meta = null,
return apply_filters( 'wp_calculate_image_sizes', $sizes, $size, $image_src, $image_meta, $attachment_id );
}
-/**
- * Filters 'img' elements in post content to add 'srcset' and 'sizes' attributes.
- *
- * @since 4.4.0
- *
- * @see wp_image_add_srcset_and_sizes()
- *
- * @param string $content The raw post content to be filtered.
- * @return string Converted content with 'srcset' and 'sizes' attributes added to images.
- */
-function wp_make_content_images_responsive( $content ) {
- if ( ! preg_match_all( '/
]+>/', $content, $matches ) ) {
- return $content;
- }
-
- $selected_images = array();
- $attachment_ids = array();
-
- foreach ( $matches[0] as $image ) {
- if ( false === strpos( $image, ' srcset=' ) && preg_match( '/wp-image-([0-9]+)/i', $image, $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()'.
- */
- $selected_images[ $image ] = $attachment_id;
- // Overwrite the ID when the same image is included more than once.
- $attachment_ids[ $attachment_id ] = true;
- }
- }
- }
-
- if ( count( $attachment_ids ) > 1 ) {
- /*
- * Warm the object cache with post and meta information for all found
- * images to avoid making individual database calls.
- */
- _prime_post_caches( array_keys( $attachment_ids ), false, true );
- }
-
- foreach ( $selected_images as $image => $attachment_id ) {
- $image_meta = wp_get_attachment_metadata( $attachment_id );
- $content = str_replace( $image, wp_image_add_srcset_and_sizes( $image, $image_meta, $attachment_id ), $content );
- }
-
- return $content;
-}
-
/**
* Adds 'srcset' and 'sizes' attributes to an existing 'img' element.
*
@@ -1616,6 +1578,193 @@ function wp_image_add_srcset_and_sizes( $image, $image_meta, $attachment_id ) {
return $image;
}
+/**
+ * Determine whether to add the `loading` attribute to the specified tag in the specified context.
+ *
+ * @since 5.5.0
+ *
+ * @param string $tag_name The tag name.
+ * @param string $context Additional context, like the current filter name or the function name from where this was called.
+ * @return bool Whether to add the attribute.
+ */
+function wp_lazy_loading_enabled( $tag_name, $context ) {
+ // By default add to all 'img' tags.
+ // See https://html.spec.whatwg.org/multipage/embedded-content.html#attr-img-loading
+ $default = ( 'img' === $tag_name );
+
+ /**
+ * Filters whether to add the `loading` attribute to the specified tag in the specified context.
+ *
+ * @since 5.5.0
+ *
+ * @param bool $default Default value.
+ * @param string $tag_name The tag name.
+ * @param string $context Additional context, like the current filter name or the function name from where this was called.
+ */
+ return (bool) apply_filters( 'wp_lazy_loading_enabled', $default, $tag_name, $context );
+}
+
+/**
+ * Filters specific tags in post content and modifies their markup.
+ *
+ * This function adds `srcset`, `sizes`, and `loading` attributes to `img` HTML tags.
+ *
+ * @since 5.5.0
+ *
+ * @see wp_img_tag_add_loading_attr()
+ * @see wp_img_tag_add_srcset_and_sizes_attr()
+ *
+ * @param string $content The HTML content to be filtered.
+ * @param string $context Optional. Additional context to pass to the filters. Defaults to `current_filter()` when not set.
+ * @return string Converted content with images modified.
+ */
+function wp_filter_content_tags( $content, $context = null ) {
+ if ( null === $context ) {
+ $context = current_filter();
+ }
+
+ $add_loading_attr = wp_lazy_loading_enabled( 'img', $context );
+
+ if ( false === strpos( $content, '
]+>/', $content, $matches ) ) {
+ 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] );
+
+ 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;
+ }
+ }
+
+ $images[ $image ] = 0;
+ }
+
+ // Reduce the array to unique attachment IDs.
+ $attachment_ids = array_unique( array_filter( array_values( $images ) ) );
+
+ if ( count( $attachment_ids ) > 1 ) {
+ /*
+ * Warm the object cache with post and meta information for all found
+ * images to avoid making individual database calls.
+ */
+ _prime_post_caches( $attachment_ids, false, true );
+ }
+
+ foreach ( $images as $image => $attachment_id ) {
+ $filtered_image = $image;
+
+ // Add 'srcset' and 'sizes' attributes if applicable.
+ if ( $attachment_id > 0 && false === strpos( $filtered_image, ' srcset=' ) ) {
+ $filtered_image = wp_img_tag_add_srcset_and_sizes_attr( $filtered_image, $context, $attachment_id );
+ }
+
+ // Add 'loading' attribute if applicable.
+ if ( $add_loading_attr && false === strpos( $filtered_image, ' loading=' ) ) {
+ $filtered_image = wp_img_tag_add_loading_attr( $filtered_image, $context );
+ }
+
+ if ( $filtered_image !== $image ) {
+ $content = str_replace( $image, $filtered_image, $content );
+ }
+ }
+
+ return $content;
+}
+
+/**
+ * Adds `loading` attribute to an `img` HTML tag.
+ *
+ * @since 5.5.0
+ *
+ * @param string $image The HTML `img` tag where the attribute should be added.
+ * @param string $context Additional context to pass to the filters.
+ * @return string Converted `img` tag with `loading` attribute added.
+ */
+function wp_img_tag_add_loading_attr( $image, $context ) {
+ /**
+ * Filters the `loading` attribute value. Default `lazy`.
+ *
+ * Returning `false` or an empty string will not add the attribute.
+ * Returning `true` will add the default value.
+ *
+ * @since 5.5.0
+ *
+ * @param string $value The `loading` attribute value, defaults to `lazy`.
+ * @param string $image The HTML `img` tag to be filtered.
+ * @param string $context Additional context about how the function was called or where the img tag is.
+ */
+ $value = apply_filters( 'wp_img_tag_add_loading_attr', 'lazy', $image, $context );
+
+ if ( $value ) {
+ if ( ! in_array( $value, array( 'lazy', 'eager' ), true ) ) {
+ $value = 'lazy';
+ }
+
+ $quote = null;
+
+ // Check if the img tag is valid (has `src` attribute) and get the quote character.
+ // In almost all cases it will have src and a double quote.
+ if ( false !== strpos( $image, ' src="' ) ) {
+ $quote = '"';
+ } elseif ( preg_match( '/\ssrc\s*=(["\'])/', $image, $matches ) ) {
+ $quote = $matches[1];
+ }
+
+ if ( $quote ) {
+ $loading = "loading={$quote}{$value}{$quote}";
+
+ return str_replace( '
` tag for the user's avatar. False on failure.
@@ -2623,9 +2625,14 @@ if ( ! function_exists( 'get_avatar' ) ) :
'alt' => '',
'class' => null,
'force_display' => false,
+ 'loading' => null,
'extra_attr' => '',
);
+ if ( wp_lazy_loading_enabled( 'img', 'get_avatar' ) ) {
+ $defaults['loading'] = 'lazy';
+ }
+
if ( empty( $args ) ) {
$args = array();
}
@@ -2695,6 +2702,18 @@ if ( ! function_exists( 'get_avatar' ) ) :
}
}
+ // Add `loading` attribute.
+ $extra_attr = $args['extra_attr'];
+ $loading = $args['loading'];
+
+ if ( in_array( $loading, array( 'lazy', 'eager' ), true ) && ! preg_match( '/\bloading\s*=/', $extra_attr ) ) {
+ if ( ! empty( $extra_attr ) ) {
+ $extra_attr .= ' ';
+ }
+
+ $extra_attr .= "loading='{$loading}'";
+ }
+
$avatar = sprintf(
"
",
esc_attr( $args['alt'] ),
@@ -2703,7 +2722,7 @@ if ( ! function_exists( 'get_avatar' ) ) :
esc_attr( join( ' ', $class ) ),
(int) $args['height'],
(int) $args['width'],
- $args['extra_attr']
+ $extra_attr
);
/**
diff --git a/tests/phpunit/tests/avatar.php b/tests/phpunit/tests/avatar.php
index 898c30f296..5649944230 100644
--- a/tests/phpunit/tests/avatar.php
+++ b/tests/phpunit/tests/avatar.php
@@ -169,7 +169,7 @@ class Tests_Avatar extends WP_UnitTestCase {
public function test_get_avatar() {
$img = get_avatar( 1 );
- $this->assertEquals( preg_match( "|^
$|", $img ), 1 );
+ $this->assertEquals( preg_match( "|^
$|", $img ), 1 );
}
public function test_get_avatar_size() {
diff --git a/tests/phpunit/tests/media.php b/tests/phpunit/tests/media.php
index e9dbd27db5..3621711749 100644
--- a/tests/phpunit/tests/media.php
+++ b/tests/phpunit/tests/media.php
@@ -1332,7 +1332,7 @@ EOF;
*/
function test_wp_get_attachment_image_defaults() {
$image = image_downsize( self::$large_id, 'thumbnail' );
- $expected = sprintf( '
', $image[1], $image[2], $image[0] );
+ $expected = sprintf( '
', $image[1], $image[2], $image[0] );
$this->assertEquals( $expected, wp_get_attachment_image( self::$large_id ) );
}
@@ -1347,7 +1347,7 @@ EOF;
update_post_meta( self::$large_id, '_wp_attachment_image_alt', 'Some very clever alt text', true );
$image = image_downsize( self::$large_id, 'thumbnail' );
- $expected = sprintf( '
', $image[1], $image[2], $image[0] );
+ $expected = sprintf( '
', $image[1], $image[2], $image[0] );
$this->assertEquals( $expected, wp_get_attachment_image( self::$large_id ) );
@@ -1964,7 +1964,7 @@ EOF;
/**
* @ticket 33641
*/
- function test_wp_make_content_images_responsive() {
+ function test_wp_filter_content_tags() {
$image_meta = wp_get_attachment_metadata( self::$large_id );
$size_array = $this->_get_image_size_array_from_meta( $image_meta, 'medium' );
@@ -1973,6 +1973,7 @@ EOF;
// Function used to build HTML for the editor.
$img = get_image_tag( self::$large_id, '', '', '', 'medium' );
+ $img = wp_img_tag_add_loading_attr( $img, 'test' );
$img_no_size_in_class = str_replace( 'size-', '', $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 );
@@ -2014,7 +2015,7 @@ EOF;
$content_unfiltered = sprintf( $content, $img, $img_no_size_in_class, $img_no_width_height, $img_no_size_id, $img_with_sizes_attr, $img_xhtml, $img_html5 );
$content_filtered = sprintf( $content, $respimg, $respimg_no_size_in_class, $respimg_no_width_height, $img_no_size_id, $respimg_with_sizes_attr, $respimg_xhtml, $respimg_html5 );
- $this->assertSame( $content_filtered, wp_make_content_images_responsive( $content_unfiltered ) );
+ $this->assertSame( $content_filtered, wp_filter_content_tags( $content_unfiltered ) );
}
/**
@@ -2028,25 +2029,27 @@ EOF;
* @ticket 34898
* @ticket 33641
*/
- function test_wp_make_content_images_responsive_wrong() {
- $image = get_image_tag( self::$large_id, '', '', '', 'medium' );
+ function test_wp_filter_content_tags_wrong() {
+ $img = get_image_tag( self::$large_id, '', '', '', 'medium' );
+ $img = wp_img_tag_add_loading_attr( $img, 'test' );
// Replace the src URL.
- $image_wrong_src = preg_replace( '|src="[^"]+"|', 'src="http://' . WP_TESTS_DOMAIN . '/wp-content/uploads/foo.jpg"', $image );
+ $image_wrong_src = preg_replace( '|src="[^"]+"|', 'src="http://' . WP_TESTS_DOMAIN . '/wp-content/uploads/foo.jpg"', $img );
- $this->assertSame( $image_wrong_src, wp_make_content_images_responsive( $image_wrong_src ) );
+ $this->assertSame( $image_wrong_src, wp_filter_content_tags( $image_wrong_src ) );
}
/**
* @ticket 33641
*/
- function test_wp_make_content_images_responsive_with_preexisting_srcset() {
+ function test_wp_filter_content_tags_with_preexisting_srcset() {
// Generate HTML and add a dummy srcset attribute.
- $image_html = get_image_tag( self::$large_id, '', '', '', 'medium' );
- $image_html = preg_replace( '|
]+) />|', '
', $image_html );
+ $img = get_image_tag( self::$large_id, '', '', '', 'medium' );
+ $img = wp_img_tag_add_loading_attr( $img, 'test' );
+ $img = preg_replace( '|
]+) />|', '
', $img );
// The content filter should return the image unchanged.
- $this->assertSame( $image_html, wp_make_content_images_responsive( $image_html ) );
+ $this->assertSame( $img, wp_filter_content_tags( $img ) );
}
/**
@@ -2097,7 +2100,7 @@ EOF;
* @ticket 35045
* @ticket 33641
*/
- function test_wp_make_content_images_responsive_schemes() {
+ function test_wp_filter_content_tags_schemes() {
$image_meta = wp_get_attachment_metadata( self::$large_id );
$size_array = $this->_get_image_size_array_from_meta( $image_meta, 'medium' );
@@ -2106,6 +2109,7 @@ EOF;
// Build HTML for the editor.
$img = get_image_tag( self::$large_id, '', '', '', 'medium' );
+ $img = wp_img_tag_add_loading_attr( $img, 'test' );
$img_https = str_replace( 'http://', 'https://', $img );
$img_relative = str_replace( 'http://', '//', $img );
@@ -2126,7 +2130,7 @@ EOF;
$unfiltered = sprintf( $content, $img, $img_https, $img_relative );
$expected = sprintf( $content, $respimg, $respimg_https, $respimg_relative );
- $actual = wp_make_content_images_responsive( $unfiltered );
+ $actual = wp_filter_content_tags( $unfiltered );
$this->assertSame( $expected, $actual );
}
@@ -2260,7 +2264,7 @@ EOF;
$month = gmdate( 'm' );
$expected = '
';
@@ -2523,6 +2527,102 @@ EOF;
$this->assertSame( $expected, $url );
}
+
+ /**
+ * @ticket 44427
+ */
+ function test_wp_lazy_load_content_media() {
+ $img = get_image_tag( self::$large_id, '', '', '', 'medium' );
+ $img_xhtml = str_replace( ' />', '/>', $img );
+ $img_html5 = str_replace( ' />', '>', $img );
+ $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' );
+
+ // The following should not be modified because there already is a 'loading' attribute.
+ $img_eager = str_replace( ' />', ' loading="eager" />', $img );
+
+ $content = '
+
Image, standard.
+ %1$s +Image, XHTML 1.0 style (no space before the closing slash).
+ %2$s +Image, HTML 5.0 style.
+ %3$s +Image, with pre-existing "loading" attribute.
+ %5$s +Iframe, standard. Should not be modified.
+ %4$s'; + + $content_unfiltered = sprintf( $content, $img, $img_xhtml, $img_html5, $iframe, $img_eager ); + $content_filtered = sprintf( $content, $lazy_img, $lazy_img_xhtml, $lazy_img_html5, $iframe, $img_eager ); + + // Do not add srcset and sizes. + add_filter( 'wp_img_tag_add_srcset_and_sizes_attr', '__return_false' ); + + $this->assertSame( $content_filtered, wp_filter_content_tags( $content_unfiltered ) ); + + remove_filter( 'wp_img_tag_add_srcset_and_sizes_attr', '__return_false' ); + } + + /** + * @ticket 44427 + */ + function test_wp_lazy_load_content_media_opted_in() { + $img = get_image_tag( self::$large_id, '', '', '', 'medium' ); + $lazy_img = wp_img_tag_add_loading_attr( $img, 'test' ); + + $content = ' +Image, standard.
+ %1$s'; + + $content_unfiltered = sprintf( $content, $img ); + $content_filtered = sprintf( $content, $lazy_img ); + + // Do not add srcset and sizes while testing. + add_filter( 'wp_img_tag_add_srcset_and_sizes_attr', '__return_false' ); + + // Enable globally for all tags. + add_filter( 'wp_lazy_loading_enabled', '__return_true' ); + + $this->assertSame( $content_filtered, wp_filter_content_tags( $content_unfiltered ) ); + remove_filter( 'wp_lazy_loading_enabled', '__return_true' ); + remove_filter( 'wp_img_tag_add_srcset_and_sizes_attr', '__return_false' ); + } + + /** + * @ticket 44427 + */ + function test_wp_lazy_load_content_media_opted_out() { + $img = get_image_tag( self::$large_id, '', '', '', 'medium' ); + + $content = ' +Image, standard.
+ %1$s'; + $content = sprintf( $content, $img ); + + // Do not add srcset and sizes while testing. + add_filter( 'wp_img_tag_add_srcset_and_sizes_attr', '__return_false' ); + + // Disable globally for all tags. + add_filter( 'wp_lazy_loading_enabled', '__return_false' ); + + $this->assertSame( $content, wp_filter_content_tags( $content ) ); + remove_filter( 'wp_lazy_loading_enabled', '__return_false' ); + remove_filter( 'wp_img_tag_add_srcset_and_sizes_attr', '__return_false' ); + } + + /** + * @ticket 44427 + */ + function test_wp_img_tag_add_loading_attr_single_quote() { + $img = "
";
+ $img = wp_img_tag_add_loading_attr( $img, 'test' );
+
+ $this->assertContains( " loading='lazy'", $img );
+ }
}
/**