Ticket #44427: 44427.5.diff

src/wp-includes/default-filters.php

@@ -176 +176 @@
 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_lazy_load_content_media' );
 
 add_filter( 'the_excerpt', 'wptexturize' );
 add_filter( 'the_excerpt', 'convert_smilies' );
+add_filter( 'the_excerpt', 'wp_lazy_load_content_media' );
 add_filter( 'the_excerpt', 'convert_chars' );
 add_filter( 'the_excerpt', 'wpautop' );
 add_filter( 'the_excerpt', 'shortcode_unautop' );
@@ -193 +195 @@
 add_filter( 'comment_text', 'make_clickable', 9 );
 add_filter( 'comment_text', 'force_balance_tags', 25 );
 add_filter( 'comment_text', 'convert_smilies', 20 );
+add_filter( 'comment_text', 'wp_lazy_load_content_media' );
 add_filter( 'comment_text', 'wpautop', 30 );
 
 add_filter( 'comment_excerpt', 'convert_chars' );

src/wp-includes/formatting.php

@@ -3296 +3296 @@
                 return $img;
         }
 
+        $loading = 'auto';
+        /** This filter is documented in wp-includes/media.php */
+        if ( apply_filters( 'wp_lazy_load_content_media', true ) ) {
+                $loading = 'lazy';
+        }
+
         /**
          * Filters the Smiley image URL before it's used in the image element.
          *
@@ -3307 +3313 @@
          */
         $src_url = apply_filters( 'smilies_src', includes_url( "images/smilies/$img" ), $img, site_url() );
 
-        return sprintf( '<img src="%s" alt="%s" class="wp-smiley" style="height: 1em; max-height: 1em;" />', esc_url( $src_url ), esc_attr( $smiley ) );
+        return sprintf( '<img src="%s" alt="%s" loading="%s" class="wp-smiley" style="height: 1em; max-height: 1em;" />', esc_url( $src_url ), esc_attr( $smiley ), esc_attr( $loading ) );
 }
 
 /**

src/wp-includes/media.php

@@ -1013 +1013 @@
                         'alt'   => trim( strip_tags( get_post_meta( $attachment_id, '_wp_attachment_image_alt', true ) ) ),
                 );
 
+                /** This filter is documented in wp-includes/media.php */
+                if ( apply_filters( 'wp_lazy_load_content_media', true ) ) {
+                        $default_attr['loading'] = 'lazy';
+                }
+
                 $attr = wp_parse_args( $attr, $default_attr );
 
                 // Generate 'srcset' and 'sizes' if not already present.
@@ -1593 +1598 @@
         return $image;
 }
 
+/**
+ * Filters 'img' and 'iframe' elements in post content to add 'loading' attributes.
+ *
+ * @since 5.4.0
+ *
+ * @param string $content The raw post content to be filtered.
+ * @return string Converted content with 'loading' attributes added to images.
+ */
+function wp_lazy_load_content_media( $content ) {
+        $tags = array( 'img', 'iframe' );
+
+        /**
+         * Filters whether media in post content should be lazy-loaded with 'loading' attributes.
+         *
+         * @since 5.4.0
+         *
+         * @param bool $enabled Whether to lazy-load content media. Default true.
+         */
+        if ( ! apply_filters( 'wp_lazy_load_content_media', true ) ) {
+                return $content;
+        }
+
+        return preg_replace_callback(
+                '/<(' . implode( '|', $tags ) . ') [^>]+>/',
+                function( array $matches ) {
+                        if ( false === strpos( $matches[0], ' loading=' ) ) {
+                                $tag = $matches[1];
+                                return str_replace( '<' . $tag . ' ', '<' . $tag . ' loading="lazy" ', $matches[0] );
+                        }
+                        return $matches[0];
+                },
+                $content
+        );
+}
+
 /**
  * Adds a 'wp-post-image' class to post thumbnails. Internal use only.
  *

src/wp-includes/pluggable.php

@@ -2596 +2596 @@
                         'extra_attr'    => '',
                 );
 
+                /** This filter is documented in wp-includes/media.php */
+                if ( apply_filters( 'wp_lazy_load_content_media', true ) ) {
+                        $defaults['loading'] = 'lazy';
+                }
+
                 if ( empty( $args ) ) {
                         $args = array();
                 }

tests/phpunit/tests/media.php

@@ -1301 +1301 @@
          * Tests the default output of `wp_get_attachment_image()`.
          *
          * @ticket 34635
+         * @ticket 44427
          */
         function test_wp_get_attachment_image_defaults() {
                 $image    = image_downsize( self::$large_id, 'thumbnail' );
                 $expected = sprintf( '<img width="%1$d" height="%2$d" src="%3$s" class="attachment-thumbnail size-thumbnail" alt="" />', $image[1], $image[2], $image[0] );
 
+                add_filter( 'wp_lazy_load_content_media', '__return_false' );
+                $this->assertEquals( $expected, wp_get_attachment_image( self::$large_id ) );
+
+                $expected = str_replace( ' alt=""', ' alt="" loading="lazy"', $expected );
+
+                remove_filter( 'wp_lazy_load_content_media', '__return_false' );
                 $this->assertEquals( $expected, wp_get_attachment_image( self::$large_id ) );
         }
 
@@ -1319 +1326 @@
                 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( '<img width="%1$d" height="%2$d" src="%3$s" class="attachment-thumbnail size-thumbnail" alt="Some very clever alt text" />', $image[1], $image[2], $image[0] );
+                $expected = sprintf( '<img width="%1$d" height="%2$d" src="%3$s" class="attachment-thumbnail size-thumbnail" alt="Some very clever alt text" loading="lazy" />', $image[1], $image[2], $image[0] );
 
                 $this->assertEquals( $expected, wp_get_attachment_image( self::$large_id ) );
 
@@ -2232 +2239 @@
                 $month  = gmdate( 'm' );
 
                 $expected = '<img width="999" height="999" src="http://' . WP_TESTS_DOMAIN . '/wp-content/uploads/' . $year . '/' . $month . '/test-image-testsize-999x999.png"' .
-                        ' class="attachment-testsize size-testsize" alt=""' .
+                        ' class="attachment-testsize size-testsize" alt="" loading="lazy"' .
                         ' srcset="http://' . WP_TESTS_DOMAIN . '/wp-content/uploads/' . $year . '/' . $month . '/test-image-testsize-999x999.png 999w,' .
                                 ' http://' . WP_TESTS_DOMAIN . '/wp-content/uploads/' . $year . '/' . $month . '/test-image-large-150x150.png 150w"' .
                                 ' sizes="(max-width: 999px) 100vw, 999px" />';
@@ -2495 +2502 @@
 
                 $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    = '<iframe src="https://www.example.com"></iframe>';
+
+                $lazy_img       = str_replace( '<img ', '<img loading="lazy" ', $img );
+                $lazy_img_xhtml = str_replace( '<img ', '<img loading="lazy" ', $img_xhtml );
+                $lazy_img_html5 = str_replace( '<img ', '<img loading="lazy" ', $img_html5 );
+                $lazy_iframe    = str_replace( '<iframe ', '<iframe loading="lazy" ', $iframe );
+
+                // The following should not be modified because there already is a 'loading' attribute.
+                $img_eager = str_replace( ' />', ' loading="eager" />', $img );
+
+                $content = '
+                        <p>Image, standard.</p>
+                        %1$s
+
+                        <p>Image, XHTML 1.0 style (no space before the closing slash).</p>
+                        %2$s
+
+                        <p>Image, HTML 5.0 style.</p>
+                        %3$s
+
+                        <p>Image, with pre-existing "loading" attribute.</p>
+                        %5$s
+
+                        <p>Iframe, standard.</p>
+                        %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, $lazy_iframe, $img_eager );
+
+                $this->assertSame( $content_filtered, wp_lazy_load_content_media( $content_unfiltered ) );
+        }
+
+        /**
+         * @ticket 44427
+         */
+        function test_wp_lazy_load_content_media_opted_out() {
+                $img = get_image_tag( self::$large_id, '', '', '', 'medium' );
+
+                $content = '
+                        <p>Image, standard.</p>
+                        %1$s';
+                $content = sprintf( $content, $img );
+
+                add_filter( 'wp_lazy_load_content_media', '__return_false' );
+                $this->assertSame( $content, wp_lazy_load_content_media( $content ) );
+        }
 }
 
 /**