WordPress.org

Make WordPress Core

Ticket #44427: 44427.8.diff

File 44427.8.diff, 10.8 KB (added by spacedmonkey, 10 months ago)
  • package-lock.json

     
    1073110731                        "integrity": "sha512-7T/BxH19zbcCTa8XkMlbK5lTo1WtgkFi3GvdWEyNuc4Vex7/9Dqbnpsf4JMydcfj9HCg4zUWFTL3Za6lapg5/w==",
    1073210732                        "dev": true
    1073310733                },
     10734                "hoverintent": {
     10735                        "version": "2.2.1",
     10736                        "resolved": "https://registry.npmjs.org/hoverintent/-/hoverintent-2.2.1.tgz",
     10737                        "integrity": "sha512-VyU54L1xW5rSqpsv/LJ6ecymGXsXXeGs9iVEKot4kKBCq5UodSAuy3DqX686LZxEpaMEfeCHPu4LndsMX5Q9eQ=="
     10738                },
    1073410739                "hpack.js": {
    1073510740                        "version": "2.1.6",
    1073610741                        "resolved": "https://registry.npmjs.org/hpack.js/-/hpack.js-2.1.6.tgz",
     
    1321713222                                "jquery": ">=1.7"
    1321813223                        }
    1321913224                },
    13220                 "hoverintent": {
    13221                         "version": "2.2.1",
    13222                         "resolved": "https://registry.npmjs.org/hoverintent/-/hoverintent-2.2.1.tgz",
    13223                         "integrity": "sha512-VyU54L1xW5rSqpsv/LJ6ecymGXsXXeGs9iVEKot4kKBCq5UodSAuy3DqX686LZxEpaMEfeCHPu4LndsMX5Q9eQ=="
    13224                 },
    1322513225                "jquery-hoverintent": {
    1322613226                        "version": "1.8.3",
    1322713227                        "resolved": "https://registry.npmjs.org/jquery-hoverintent/-/jquery-hoverintent-1.8.3.tgz",
  • src/wp-includes/default-filters.php

     
    261261add_filter( 'xmlrpc_pingback_error', 'xmlrpc_pingback_error' );
    262262add_filter( 'title_save_pre', 'trim' );
    263263
     264// Add lazy loading attributes to content.
     265foreach ( array( 'the_content', 'the_excerpt', 'comment_text', 'widget_text_content' ) as $filter ) {
     266        add_filter( $filter, 'wp_lazy_load_content_media', 8 );
     267}
     268
    264269add_action( 'transition_comment_status', '_clear_modified_cache_on_transition_comment_status', 10, 2 );
    265270
    266271add_filter( 'http_request_host_is_external', 'allowed_http_request_hosts', 10, 2 );
  • src/wp-includes/formatting.php

     
    33073307                return $img;
    33083308        }
    33093309
     3310        $loading = '';
     3311        if ( in_array( 'img', wp_get_lazy_load_tags(), true ) ) {
     3312                $loading = 'loading="lazy"';
     3313        }
     3314
    33103315        /**
    33113316         * Filters the Smiley image URL before it's used in the image element.
    33123317         *
     
    33183323         */
    33193324        $src_url = apply_filters( 'smilies_src', includes_url( "images/smilies/$img" ), $img, site_url() );
    33203325
    3321         return sprintf( '<img src="%s" alt="%s" class="wp-smiley" style="height: 1em; max-height: 1em;" />', esc_url( $src_url ), esc_attr( $smiley ) );
     3326        return sprintf(
     3327                '<img src="%s" alt="%s" class="wp-smiley" style="height: 1em; max-height: 1em;" %s />',
     3328                esc_url( $src_url ),
     3329                esc_attr( $smiley ),
     3330                $loading
     3331        );
    33223332}
    33233333
    33243334/**
  • src/wp-includes/media.php

     
    10131013                        'alt'   => trim( strip_tags( get_post_meta( $attachment_id, '_wp_attachment_image_alt', true ) ) ),
    10141014                );
    10151015
     1016                if ( in_array( 'img', wp_get_lazy_load_tags(), true ) ) {
     1017                        $default_attr['loading'] = 'lazy';
     1018                }
     1019
    10161020                $attr = wp_parse_args( $attr, $default_attr );
    10171021
    10181022                // Generate 'srcset' and 'sizes' if not already present.
     
    15941598}
    15951599
    15961600/**
     1601 * Gets the tags to lazy-load.
     1602 *
     1603 * @since 5.4.0
     1604 *
     1605 * @return array List of tags to add loading="lazy" attributes to.
     1606 */
     1607function wp_get_lazy_load_tags() {
     1608        $supported_tags = array( 'img', 'iframe' );
     1609
     1610        /**
     1611         * Filters which media should be lazy-loaded with loading="lazy" attributes.
     1612         *
     1613         * @since 5.4.0
     1614         *
     1615         * @param array $tags List of tags to add loading="lazy" attributes to. Default is an array with 'img'.
     1616         */
     1617        $tags = apply_filters( 'wp_lazy_load_content_media', array( 'img' ) );
     1618
     1619        // Support a boolean, just in case.
     1620        if ( ! is_array( $tags ) ) {
     1621                return $tags ? $supported_tags : array();
     1622        }
     1623
     1624        // Only allow supported tags to be included.
     1625        return array_values( array_intersect( $tags, $supported_tags ) );
     1626}
     1627
     1628/**
     1629 * Filters 'img' and 'iframe' elements in post content to add 'loading' attributes.
     1630 *
     1631 * @since 5.4.0
     1632 *
     1633 * @param string $content The raw post content to be filtered.
     1634 * @return string Converted content with 'loading' attributes added to images.
     1635 */
     1636function wp_lazy_load_content_media( $content ) {
     1637        $tags = wp_get_lazy_load_tags();
     1638        if ( empty( $tags ) ) {
     1639                return $content;
     1640        }
     1641
     1642        return preg_replace_callback(
     1643                '/<(' . implode( '|', $tags ) . ')(\s)[^>]+>/',
     1644                function( array $matches ) {
     1645                        if ( ! preg_match( '/\sloading\s*=/', $matches[0] ) ) {
     1646                                $tag   = $matches[1];
     1647                                $space = $matches[2];
     1648                                return str_replace( '<' . $tag . $space, '<' . $tag . $space . 'loading="lazy" ', $matches[0] );
     1649                        }
     1650                        return $matches[0];
     1651                },
     1652                $content
     1653        );
     1654}
     1655
     1656/**
    15971657 * Adds a 'wp-post-image' class to post thumbnails. Internal use only.
    15981658 *
    15991659 * Uses the {@see 'begin_fetch_post_thumbnail_html'} and {@see 'end_fetch_post_thumbnail_html'}
  • src/wp-includes/pluggable.php

     
    26002600                        'extra_attr'    => '',
    26012601                );
    26022602
     2603                if ( in_array( 'img', wp_get_lazy_load_tags(), true ) ) {
     2604                        $defaults['loading'] = 'lazy';
     2605                }
     2606
    26032607                if ( empty( $args ) ) {
    26042608                        $args = array();
    26052609                }
     
    26692673                        }
    26702674                }
    26712675
     2676                $extra_attr = $args['extra_attr'];
     2677                if ( ! empty( $args['loading'] ) ) {
     2678                        if ( ! empty( $extra_attr ) ) {
     2679                                $extra_attr = ' ' . $extra_attr;
     2680                        }
     2681                        $extra_attr = 'loading="' . esc_attr( $args['loading'] ) . '"' . $extra_attr;
     2682                }
     2683
    26722684                $avatar = sprintf(
    26732685                        "<img alt='%s' src='%s' srcset='%s' class='%s' height='%d' width='%d' %s/>",
    26742686                        esc_attr( $args['alt'] ),
     
    26772689                        esc_attr( join( ' ', $class ) ),
    26782690                        (int) $args['height'],
    26792691                        (int) $args['width'],
    2680                         $args['extra_attr']
     2692                        $extra_attr
    26812693                );
    26822694
    26832695                /**
  • tests/phpunit/tests/media.php

     
    13291329         * Tests the default output of `wp_get_attachment_image()`.
    13301330         *
    13311331         * @ticket 34635
     1332         * @ticket 44427
    13321333         */
    13331334        function test_wp_get_attachment_image_defaults() {
    13341335                $image    = image_downsize( self::$large_id, 'thumbnail' );
    13351336                $expected = sprintf( '<img width="%1$d" height="%2$d" src="%3$s" class="attachment-thumbnail size-thumbnail" alt="" />', $image[1], $image[2], $image[0] );
    13361337
     1338                add_filter( 'wp_lazy_load_content_media', '__return_false' );
     1339                $this->assertEquals( $expected, wp_get_attachment_image( self::$large_id ) );
     1340
     1341                $expected = str_replace( ' alt=""', ' alt="" loading="lazy"', $expected );
     1342
     1343                remove_filter( 'wp_lazy_load_content_media', '__return_false' );
    13371344                $this->assertEquals( $expected, wp_get_attachment_image( self::$large_id ) );
    13381345        }
    13391346
     
    13471354                update_post_meta( self::$large_id, '_wp_attachment_image_alt', 'Some very clever alt text', true );
    13481355
    13491356                $image    = image_downsize( self::$large_id, 'thumbnail' );
    1350                 $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] );
     1357                $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] );
    13511358
    13521359                $this->assertEquals( $expected, wp_get_attachment_image( self::$large_id ) );
    13531360
     
    22602267                $month  = gmdate( 'm' );
    22612268
    22622269                $expected = '<img width="999" height="999" src="http://' . WP_TESTS_DOMAIN . '/wp-content/uploads/' . $year . '/' . $month . '/test-image-testsize-999x999.png"' .
    2263                         ' class="attachment-testsize size-testsize" alt=""' .
     2270                        ' class="attachment-testsize size-testsize" alt="" loading="lazy"' .
    22642271                        ' srcset="http://' . WP_TESTS_DOMAIN . '/wp-content/uploads/' . $year . '/' . $month . '/test-image-testsize-999x999.png 999w,' .
    22652272                                ' http://' . WP_TESTS_DOMAIN . '/wp-content/uploads/' . $year . '/' . $month . '/test-image-large-150x150.png 150w"' .
    22662273                                ' sizes="(max-width: 999px) 100vw, 999px" />';
     
    25232530
    25242531                $this->assertSame( $expected, $url );
    25252532        }
     2533
     2534        /**
     2535         * @ticket 44427
     2536         */
     2537        function test_wp_lazy_load_content_media() {
     2538                $img       = get_image_tag( self::$large_id, '', '', '', 'medium' );
     2539                $img_xhtml = str_replace( ' />', '/>', $img );
     2540                $img_html5 = str_replace( ' />', '>', $img );
     2541                $iframe    = '<iframe src="https://www.example.com"></iframe>';
     2542
     2543                $lazy_img       = str_replace( '<img ', '<img loading="lazy" ', $img );
     2544                $lazy_img_xhtml = str_replace( '<img ', '<img loading="lazy" ', $img_xhtml );
     2545                $lazy_img_html5 = str_replace( '<img ', '<img loading="lazy" ', $img_html5 );
     2546
     2547                // The following should not be modified because there already is a 'loading' attribute.
     2548                $img_eager = str_replace( ' />', ' loading="eager" />', $img );
     2549
     2550                $content = '
     2551                        <p>Image, standard.</p>
     2552                        %1$s
     2553
     2554                        <p>Image, XHTML 1.0 style (no space before the closing slash).</p>
     2555                        %2$s
     2556
     2557                        <p>Image, HTML 5.0 style.</p>
     2558                        %3$s
     2559
     2560                        <p>Image, with pre-existing "loading" attribute.</p>
     2561                        %5$s
     2562
     2563                        <p>Iframe, standard. Should not be modified by default.</p>
     2564                        %4$s';
     2565
     2566                $content_unfiltered = sprintf( $content, $img, $img_xhtml, $img_html5, $iframe, $img_eager );
     2567                $content_filtered   = sprintf( $content, $lazy_img, $lazy_img_xhtml, $lazy_img_html5, $iframe, $img_eager );
     2568
     2569                $this->assertSame( $content_filtered, wp_lazy_load_content_media( $content_unfiltered ) );
     2570        }
     2571
     2572        /**
     2573         * @ticket 44427
     2574         */
     2575        function test_wp_lazy_load_content_media_opted_in() {
     2576                $img    = get_image_tag( self::$large_id, '', '', '', 'medium' );
     2577                $iframe = '<iframe src="https://www.example.com"></iframe>';
     2578
     2579                $lazy_img    = str_replace( '<img ', '<img loading="lazy" ', $img );
     2580                $lazy_iframe = str_replace( '<iframe ', '<iframe loading="lazy" ', $iframe );
     2581
     2582                $content = '
     2583                        <p>Image, standard.</p>
     2584                        %1$s
     2585
     2586                        <p>Iframe, standard.</p>
     2587                        %2$s';
     2588
     2589                $content_unfiltered = sprintf( $content, $img, $iframe );
     2590                $content_filtered   = sprintf( $content, $lazy_img, $lazy_iframe );
     2591
     2592                add_filter( 'wp_lazy_load_content_media', '__return_true' );
     2593                $this->assertSame( $content_filtered, wp_lazy_load_content_media( $content_unfiltered ) );
     2594        }
     2595
     2596        /**
     2597         * @ticket 44427
     2598         */
     2599        function test_wp_lazy_load_content_media_opted_out() {
     2600                $img = get_image_tag( self::$large_id, '', '', '', 'medium' );
     2601
     2602                $content = '
     2603                        <p>Image, standard.</p>
     2604                        %1$s';
     2605                $content = sprintf( $content, $img );
     2606
     2607                add_filter( 'wp_lazy_load_content_media', '__return_false' );
     2608                $this->assertSame( $content, wp_lazy_load_content_media( $content ) );
     2609        }
    25262610}
    25272611
    25282612/**