Make WordPress Core

Changeset 56690


Ignore:
Timestamp:
09/25/2023 10:37:00 PM (3 years ago)
Author:
flixos90
Message:

Media: Rely on wp_get_loading_optimization_attributes() to add decoding="async" to images.

The wp_get_loading_optimization_attributes() function was introduced in 6.3, as a single centralized place to control loading optimization attributes for various tags, most importantly images.

This changeset consolidates the decoding="async" optimization, which was added in 6.1, to occur solely as part of wp_get_loading_optimization_attributes(), removing duplicate code and allowing centralized filtering based on [56651].

As part of the change, the wp_img_tag_add_decoding_attr() function has been deprecated. The filter of the same name continues to be maintained for backward compatibility, as before covering only images that are part of a content blob such as post content (the_content).

Props pereirinha, mukesh27, joemcgill, flixos90.
Fixes #58892.
See #53232.

Location:
trunk
Files:
7 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-includes/deprecated.php

    r56682 r56690  
    59955995        update_option( 'https_detection_errors', $support_errors );
    59965996}
     5997
     5998/**
     5999 * Adds `decoding` attribute to an `img` HTML tag.
     6000 *
     6001 * The `decoding` attribute allows developers to indicate whether the
     6002 * browser can decode the image off the main thread (`async`), on the
     6003 * main thread (`sync`) or as determined by the browser (`auto`).
     6004 *
     6005 * By default WordPress adds `decoding="async"` to images but developers
     6006 * can use the {@see 'wp_img_tag_add_decoding_attr'} filter to modify this
     6007 * to remove the attribute or set it to another accepted value.
     6008 *
     6009 * @since 6.1.0
     6010 * @deprecated 6.4.0 Use wp_img_tag_add_loading_optimization_attrs() instead.
     6011 * @see wp_img_tag_add_loading_optimization_attrs()
     6012 *
     6013 * @param string $image   The HTML `img` tag where the attribute should be added.
     6014 * @param string $context Additional context to pass to the filters.
     6015 * @return string Converted `img` tag with `decoding` attribute added.
     6016 */
     6017function wp_img_tag_add_decoding_attr( $image, $context ) {
     6018        _deprecated_function( __FUNCTION__, '6.4.0', 'wp_img_tag_add_loading_optimization_attrs()' );
     6019
     6020        /*
     6021         * Only apply the decoding attribute to images that have a src attribute that
     6022         * starts with a double quote, ensuring escaped JSON is also excluded.
     6023         */
     6024        if ( ! str_contains( $image, ' src="' ) ) {
     6025                return $image;
     6026        }
     6027
     6028        /** This action is documented in wp-includes/media.php */
     6029        $value = apply_filters( 'wp_img_tag_add_decoding_attr', 'async', $image, $context );
     6030
     6031        if ( in_array( $value, array( 'async', 'sync', 'auto' ), true ) ) {
     6032                $image = str_replace( '<img ', '<img decoding="' . esc_attr( $value ) . '" ', $image );
     6033        }
     6034
     6035        return $image;
     6036}
  • trunk/src/wp-includes/media.php

    r56680 r56690  
    10611061
    10621062                $default_attr = array(
    1063                         'src'      => $src,
    1064                         'class'    => "attachment-$size_class size-$size_class",
    1065                         'alt'      => trim( strip_tags( get_post_meta( $attachment_id, '_wp_attachment_image_alt', true ) ) ),
    1066                         'decoding' => 'async',
     1063                        'src'   => $src,
     1064                        'class' => "attachment-$size_class size-$size_class",
     1065                        'alt'   => trim( strip_tags( get_post_meta( $attachment_id, '_wp_attachment_image_alt', true ) ) ),
    10671066                );
    10681067
     
    18931892                        $filtered_image = wp_img_tag_add_loading_optimization_attrs( $filtered_image, $context );
    18941893
    1895                         // Add 'decoding=async' attribute unless a 'decoding' attribute is already present.
    1896                         if ( ! str_contains( $filtered_image, ' decoding=' ) ) {
    1897                                 $filtered_image = wp_img_tag_add_decoding_attr( $filtered_image, $context );
    1898                         }
    1899 
    19001894                        /**
    19011895                         * Filters an img tag within the content for a given context.
     
    19581952        $loading_val       = preg_match( '/ loading=["\']([A-Za-z]+)["\']/', $image, $match_loading ) ? $match_loading[1] : null;
    19591953        $fetchpriority_val = preg_match( '/ fetchpriority=["\']([A-Za-z]+)["\']/', $image, $match_fetchpriority ) ? $match_fetchpriority[1] : null;
     1954        $decoding_val      = preg_match( '/ decoding=["\']([A-Za-z]+)["\']/', $image, $match_decoding ) ? $match_decoding[1] : null;
    19601955
    19611956        /*
     
    19711966                        'loading'       => $loading_val,
    19721967                        'fetchpriority' => $fetchpriority_val,
     1968                        'decoding'      => $decoding_val,
    19731969                ),
    19741970                $context
    19751971        );
    19761972
    1977         // Images should have source and dimension attributes for the loading optimization attributes to be added.
    1978         if ( ! str_contains( $image, ' src="' ) || ! str_contains( $image, ' width="' ) || ! str_contains( $image, ' height="' ) ) {
     1973        // Images should have source for the loading optimization attributes to be added.
     1974        if ( ! str_contains( $image, ' src="' ) ) {
     1975                return $image;
     1976        }
     1977
     1978        if ( empty( $decoding_val ) ) {
     1979                /**
     1980                 * Filters the `decoding` attribute value to add to an image. Default `async`.
     1981                 *
     1982                 * Returning a falsey value will omit the attribute.
     1983                 *
     1984                 * @since 6.1.0
     1985                 *
     1986                 * @param string|false|null $value      The `decoding` attribute value. Returning a falsey value
     1987                 *                                      will result in the attribute being omitted for the image.
     1988                 *                                      Otherwise, it may be: 'async', 'sync', or 'auto'. Defaults to false.
     1989                 * @param string            $image      The HTML `img` tag to be filtered.
     1990                 * @param string            $context    Additional context about how the function was called
     1991                 *                                      or where the img tag is.
     1992                 */
     1993                $filtered_decoding_attr = apply_filters(
     1994                        'wp_img_tag_add_decoding_attr',
     1995                        isset( $optimization_attrs['decoding'] ) ? $optimization_attrs['decoding'] : false,
     1996                        $image,
     1997                        $context
     1998                );
     1999
     2000                // Validate the values after filtering.
     2001                if ( isset( $optimization_attrs['decoding'] ) && ! $filtered_decoding_attr ) {
     2002                        // Unset `decoding` attribute if `$filtered_decoding_attr` is set to `false`.
     2003                        unset( $optimization_attrs['decoding'] );
     2004                } elseif ( in_array( $filtered_decoding_attr, array( 'async', 'sync', 'auto' ), true ) ) {
     2005                        $optimization_attrs['decoding'] = $filtered_decoding_attr;
     2006                }
     2007
     2008                if ( ! empty( $optimization_attrs['decoding'] ) ) {
     2009                        $image = str_replace( '<img', '<img decoding="' . esc_attr( $optimization_attrs['decoding'] ) . '"', $image );
     2010                }
     2011        }
     2012
     2013        // Images should have dimension attributes for the 'loading' and 'fetchpriority' attributes to be added.
     2014        if ( ! str_contains( $image, ' width="' ) || ! str_contains( $image, ' height="' ) ) {
    19792015                return $image;
    19802016        }
     
    20392075        if ( empty( $fetchpriority_val ) && ! empty( $optimization_attrs['fetchpriority'] ) ) {
    20402076                $image = str_replace( '<img', '<img fetchpriority="' . esc_attr( $optimization_attrs['fetchpriority'] ) . '"', $image );
    2041         }
    2042 
    2043         return $image;
    2044 }
    2045 
    2046 /**
    2047  * Adds `decoding` attribute to an `img` HTML tag.
    2048  *
    2049  * The `decoding` attribute allows developers to indicate whether the
    2050  * browser can decode the image off the main thread (`async`), on the
    2051  * main thread (`sync`) or as determined by the browser (`auto`).
    2052  *
    2053  * By default WordPress adds `decoding="async"` to images but developers
    2054  * can use the {@see 'wp_img_tag_add_decoding_attr'} filter to modify this
    2055  * to remove the attribute or set it to another accepted value.
    2056  *
    2057  * @since 6.1.0
    2058  *
    2059  * @param string $image   The HTML `img` tag where the attribute should be added.
    2060  * @param string $context Additional context to pass to the filters.
    2061  *
    2062  * @return string Converted `img` tag with `decoding` attribute added.
    2063  */
    2064 function wp_img_tag_add_decoding_attr( $image, $context ) {
    2065         /*
    2066          * Only apply the decoding attribute to images that have a src attribute that
    2067          * starts with a double quote, ensuring escaped JSON is also excluded.
    2068          */
    2069         if ( ! str_contains( $image, ' src="' ) ) {
    2070                 return $image;
    2071         }
    2072 
    2073         /**
    2074          * Filters the `decoding` attribute value to add to an image. Default `async`.
    2075          *
    2076          * Returning a falsey value will omit the attribute.
    2077          *
    2078          * @since 6.1.0
    2079          *
    2080          * @param string|false|null $value   The `decoding` attribute value. Returning a falsey value
    2081          *                                   will result in the attribute being omitted for the image.
    2082          *                                   Otherwise, it may be: 'async' (default), 'sync', or 'auto'.
    2083          * @param string            $image   The HTML `img` tag to be filtered.
    2084          * @param string            $context Additional context about how the function was called
    2085          *                                   or where the img tag is.
    2086          */
    2087         $value = apply_filters( 'wp_img_tag_add_decoding_attr', 'async', $image, $context );
    2088 
    2089         if ( in_array( $value, array( 'async', 'sync', 'auto' ), true ) ) {
    2090                 $image = str_replace( '<img ', '<img decoding="' . esc_attr( $value ) . '" ', $image );
    20912077        }
    20922078
     
    56095595 * - `loading` attribute with a value of "lazy"
    56105596 * - `fetchpriority` attribute with a value of "high"
     5597 * - `decoding` attribute with a value of "async"
    56115598 *
    56125599 * If any of these attributes are already present in the given attributes, they will not be modified. Note that no
     
    56585645        // For now this function only supports images and iframes.
    56595646        if ( 'img' !== $tag_name && 'iframe' !== $tag_name ) {
    5660                 /** This filter is documented in wp-includes/media.php */
    5661                 return apply_filters( 'wp_get_loading_optimization_attributes', $loading_attrs, $tag_name, $attr, $context );
    5662         }
    5663 
    5664         // For any resources, width and height must be provided, to avoid layout shifts.
    5665         if ( ! isset( $attr['width'], $attr['height'] ) ) {
    56665647                /** This filter is documented in wp-includes/media.php */
    56675648                return apply_filters( 'wp_get_loading_optimization_attributes', $loading_attrs, $tag_name, $attr, $context );
     
    56775658        // TODO: Handle shortcode images together with the content (see https://core.trac.wordpress.org/ticket/58853).
    56785659        if ( 'the_content' !== $context && 'do_shortcode' !== $context && doing_filter( 'the_content' ) ) {
     5660                /** This filter is documented in wp-includes/media.php */
     5661                return apply_filters( 'wp_get_loading_optimization_attributes', $loading_attrs, $tag_name, $attr, $context );
     5662        }
     5663
     5664        /*
     5665         * Add `decoding` with a value of "async" for every image unless it has a
     5666         * conflicting `decoding` attribute already present.
     5667         */
     5668        if ( 'img' === $tag_name ) {
     5669                if ( isset( $attr['decoding'] ) ) {
     5670                        $loading_attrs['decoding'] = $attr['decoding'];
     5671                } else {
     5672                        $loading_attrs['decoding'] = 'async';
     5673                }
     5674        }
     5675
     5676        // For any resources, width and height must be provided, to avoid layout shifts.
     5677        if ( ! isset( $attr['width'], $attr['height'] ) ) {
    56795678                /** This filter is documented in wp-includes/media.php */
    56805679                return apply_filters( 'wp_get_loading_optimization_attributes', $loading_attrs, $tag_name, $attr, $context );
  • trunk/src/wp-includes/pluggable.php

    r56245 r56690  
    28462846                        'fetchpriority' => null,
    28472847                        'extra_attr'    => '',
    2848                         'decoding'      => 'async',
    28492848                );
    28502849
  • trunk/src/wp-includes/theme.php

    r56687 r56690  
    12891289                $attr,
    12901290                array(
    1291                         'src'      => $header->url,
    1292                         'width'    => $width,
    1293                         'height'   => $height,
    1294                         'alt'      => $alt,
    1295                         'decoding' => 'async',
     1291                        'src'    => $header->url,
     1292                        'width'  => $width,
     1293                        'height' => $height,
     1294                        'alt'    => $alt,
    12961295                )
    12971296        );
  • trunk/src/wp-includes/widgets/class-wp-widget-media-image.php

    r56597 r56690  
    241241
    242242                        $attr = array(
    243                                 'class'    => $classes,
    244                                 'src'      => $instance['url'],
    245                                 'alt'      => $instance['alt'],
    246                                 'width'    => $instance['width'],
    247                                 'height'   => $instance['height'],
    248                                 'decoding' => 'async',
     243                                'class'  => $classes,
     244                                'src'    => $instance['url'],
     245                                'alt'    => $instance['alt'],
     246                                'width'  => $instance['width'],
     247                                'height' => $instance['height'],
    249248                        );
    250249
  • trunk/tests/phpunit/tests/media.php

    r56680 r56690  
    22642264                        $respimg_html5
    22652265                );
    2266                 $content_filtered = wp_img_tag_add_decoding_attr( $content_filtered, 'the_content' );
    22672266
    22682267                // Do not add width, height, and loading.
    22692268                add_filter( 'wp_img_tag_add_width_and_height_attr', '__return_false' );
    22702269                add_filter( 'wp_img_tag_add_loading_attr', '__return_false' );
     2270                add_filter( 'wp_img_tag_add_decoding_attr', '__return_false' );
    22712271
    22722272                $this->assertSame( $content_filtered, wp_filter_content_tags( $content_unfiltered ) );
     
    22742274                remove_filter( 'wp_img_tag_add_width_and_height_attr', '__return_false' );
    22752275                remove_filter( 'wp_img_tag_add_loading_attr', '__return_false' );
     2276                remove_filter( 'wp_img_tag_add_decoding_attr', '__return_false' );
    22762277        }
    22772278
     
    22902291                $img = get_image_tag( self::$large_id, '', '', '', 'medium' );
    22912292                $img = wp_img_tag_add_loading_optimization_attrs( $img, 'test' );
    2292                 $img = wp_img_tag_add_decoding_attr( $img, 'the_content' );
    22932293
    22942294                // Replace the src URL.
     
    23052305                $img = get_image_tag( self::$large_id, '', '', '', 'medium' );
    23062306                $img = wp_img_tag_add_loading_optimization_attrs( $img, 'test' );
    2307                 $img = wp_img_tag_add_decoding_attr( $img, 'the_content' );
    23082307                $img = preg_replace( '|<img ([^>]+) />|', '<img $1 ' . 'srcset="image2x.jpg 2x" />', $img );
    23092308
     
    24812480                        $respimg_relative
    24822481                );
    2483                 $expected = wp_img_tag_add_decoding_attr( $expected, 'the_content' );
    24842482
    24852483                $actual = wp_filter_content_tags( $unfiltered );
     
    29742972                        $img_no_height
    29752973                );
    2976                 $content_filtered = wp_img_tag_add_decoding_attr( $content_filtered, 'the_content' );
    29772974
    29782975                // Do not add loading, srcset, and sizes.
    29792976                add_filter( 'wp_img_tag_add_loading_attr', '__return_false' );
    29802977                add_filter( 'wp_img_tag_add_srcset_and_sizes_attr', '__return_false' );
     2978                add_filter( 'wp_img_tag_add_decoding_attr', '__return_false' );
    29812979
    29822980                $this->assertSame( $content_filtered, wp_filter_content_tags( $content_unfiltered ) );
     
    29842982                remove_filter( 'wp_img_tag_add_loading_attr', '__return_false' );
    29852983                remove_filter( 'wp_img_tag_add_srcset_and_sizes_attr', '__return_false' );
     2984                remove_filter( 'wp_img_tag_add_decoding_attr', '__return_false' );
    29862985        }
    29872986
     
    30043003                $iframe                 = '<iframe src="https://www.example.com" width="640" height="360"></iframe>';
    30053004                $iframe_no_width_height = '<iframe src="https://www.example.com"></iframe>';
     3005
     3006                add_filter( 'wp_img_tag_add_decoding_attr', '__return_false' );
    30063007
    30073008                $lazy_img       = wp_img_tag_add_loading_optimization_attrs( $img, 'test' );
     
    30553056                        $iframe_no_width_height
    30563057                );
    3057                 $content_filtered = wp_img_tag_add_decoding_attr( $content_filtered, 'the_content' );
    30583058
    30593059                // Do not add width, height, srcset, and sizes.
     
    30653065                remove_filter( 'wp_img_tag_add_width_and_height_attr', '__return_false' );
    30663066                remove_filter( 'wp_img_tag_add_srcset_and_sizes_attr', '__return_false' );
     3067                remove_filter( 'wp_img_tag_add_decoding_attr', '__return_false' );
    30673068        }
    30683069
     
    30753076                $img         = get_image_tag( self::$large_id, '', '', '', 'medium' );
    30763077                $lazy_img    = wp_img_tag_add_loading_optimization_attrs( $img, 'test' );
    3077                 $lazy_img    = wp_img_tag_add_decoding_attr( $lazy_img, 'the_content' );
    30783078                $iframe      = '<iframe src="https://www.example.com" width="640" height="360"></iframe>';
    30793079                $lazy_iframe = wp_iframe_tag_add_loading_attr( $iframe, 'test' );
     
    31053105        public function test_wp_filter_content_tags_loading_lazy_opted_out() {
    31063106                $img    = get_image_tag( self::$large_id, '', '', '', 'medium' );
    3107                 $img    = wp_img_tag_add_decoding_attr( $img, 'the_content' );
    31083107                $iframe = '<iframe src="https://www.example.com" width="640" height="360"></iframe>';
    31093108
     
    31203119                // Disable globally for all tags.
    31213120                add_filter( 'wp_lazy_loading_enabled', '__return_false' );
     3121                add_filter( 'wp_img_tag_add_decoding_attr', '__return_false' );
    31223122
    31233123                $this->assertSame( $content, wp_filter_content_tags( $content ) );
    31243124                remove_filter( 'wp_lazy_loading_enabled', '__return_false' );
    31253125                remove_filter( 'wp_img_tag_add_srcset_and_sizes_attr', '__return_false' );
     3126                remove_filter( 'wp_img_tag_add_decoding_attr', '__return_false' );
    31263127        }
    31273128
     
    31873188         *
    31883189         * @ticket 56969
     3190         *
     3191         * @expectedDeprecated wp_img_tag_add_decoding_attr
    31893192         */
    31903193        public function test_wp_img_tag_add_decoding_attr_with_single_quotes() {
     
    34363439                        'false'       => array(
    34373440                                'decoding' => false,
    3438                                 'expected' => 'no value',
    3439                         ),
    3440                         'null'        => array(
    3441                                 'decoding' => null,
    34423441                                'expected' => 'no value',
    34433442                        ),
     
    37203719         * @ticket 53675
    37213720         * @ticket 58235
     3721         * @ticket 58892
    37223722         */
    37233723        public function test_wp_omit_loading_attr_threshold_filter() {
     
    37393739                        // Due to the filter, now the first five elements should not be lazy-loaded, i.e. return `false`.
    37403740                        for ( $i = 0; $i < 5; $i++ ) {
    3741                                 $this->assertEmpty(
     3741                                $this->assertSameSetsWithIndex(
     3742                                        array(
     3743                                                'decoding' => 'async',
     3744                                        ),
    37423745                                        wp_get_loading_optimization_attributes( 'img', $attr, 'the_content' ),
    37433746                                        'Expected second image to not be lazy-loaded.'
     
    37463749
    37473750                        // For following elements, lazy-load them again.
    3748                         $this->assertSame(
    3749                                 array( 'loading' => 'lazy' ),
     3751                        $this->assertSameSetsWithIndex(
     3752                                array(
     3753                                        'decoding' => 'async',
     3754                                        'loading'  => 'lazy',
     3755                                ),
    37503756                                wp_get_loading_optimization_attributes( 'img', $attr, 'the_content' )
    37513757                        );
     
    37623768         */
    37633769        public function test_wp_filter_content_tags_with_loading_optimization_attrs() {
     3770                add_filter( 'wp_img_tag_add_decoding_attr', '__return_false' );
    37643771                $img1         = get_image_tag( self::$large_id, '', '', '', 'large' );
    37653772                $iframe1      = '<iframe src="https://www.example.com" width="640" height="360"></iframe>';
     
    37783785                $content_unfiltered = $img1 . $iframe1 . $img2 . $img3 . $iframe2;
    37793786                $content_expected   = $prio_img1 . $iframe1 . $lazy_img2 . $lazy_img3 . $lazy_iframe2;
    3780                 $content_expected   = wp_img_tag_add_decoding_attr( $content_expected, 'the_content' );
    37813787
    37823788                $query = $this->get_new_wp_query_for_published_post();
     
    37903796                        remove_filter( 'wp_img_tag_add_srcset_and_sizes_attr', '__return_false' );
    37913797                }
     3798                remove_filter( 'wp_img_tag_add_decoding_attr', '__return_false' );
    37923799
    37933800                // After filtering, the first image should not be lazy-loaded while the other ones should be.
     
    41294136         * @ticket 58089
    41304137         * @ticket 58235
     4138         * @ticket 58892
    41314139         *
    41324140         * @covers ::wp_filter_content_tags
     
    41444152                                'loading'       => false,
    41454153                                'fetchpriority' => false,
     4154                                'decoding'      => false,
    41464155                        )
    41474156                );
     
    41824191
    41834192                // Ensure that parsed content has the image with fetchpriority as it is the first large image.
    4184                 $expected_content = wpautop( str_replace( '<img ', '<img fetchpriority="high" ', $expected_image ) );
     4193                $expected_content = wpautop( str_replace( '<img ', '<img fetchpriority="high" decoding="async" ', $expected_image ) );
    41854194                $this->assertSame( $expected_content, $content, 'Post content with programmatically injected image is missing loading optimization attributes' );
    41864195        }
     
    42624271         * @ticket 56930
    42634272         * @ticket 58235
     4273         * @ticket 58892
    42644274         *
    42654275         * @covers ::wp_get_loading_optimization_attributes
     
    42734283
    42744284                // Return 'lazy' by default.
    4275                 $this->assertSame(
    4276                         array( 'loading' => 'lazy' ),
     4285                $this->assertSameSetsWithIndex(
     4286                        array(
     4287                                'decoding' => 'async',
     4288                                'loading'  => 'lazy',
     4289                        ),
    42774290                        wp_get_loading_optimization_attributes( 'img', $attr, 'test' )
    42784291                );
    4279                 $this->assertSame(
    4280                         array( 'loading' => 'lazy' ),
     4292                $this->assertSameSetsWithIndex(
     4293                        array(
     4294                                'decoding' => 'async',
     4295                                'loading'  => 'lazy',
     4296                        ),
    42814297                        wp_get_loading_optimization_attributes( 'img', $attr, 'wp_get_attachment_image' )
    42824298                );
    42834299
    42844300                // Return 'lazy' if not in the loop or the main query.
    4285                 $this->assertSame(
    4286                         array( 'loading' => 'lazy' ),
     4301                $this->assertSameSetsWithIndex(
     4302                        array(
     4303                                'decoding' => 'async',
     4304                                'loading'  => 'lazy',
     4305                        ),
    42874306                        wp_get_loading_optimization_attributes( 'img', $attr, $context )
    42884307                );
     
    42944313
    42954314                        // Return 'lazy' if in the loop but not in the main query.
    4296                         $this->assertSame(
    4297                                 array( 'loading' => 'lazy' ),
     4315                        $this->assertSameSetsWithIndex(
     4316                                array(
     4317                                        'decoding' => 'async',
     4318                                        'loading'  => 'lazy',
     4319                                ),
    42984320                                wp_get_loading_optimization_attributes( 'img', $attr, $context )
    42994321                        );
     
    43034325
    43044326                        // First three element are not lazy loaded. However, first image is loaded with fetchpriority high.
    4305                         $this->assertSame(
    4306                                 array( 'fetchpriority' => 'high' ),
     4327                        $this->assertSameSetsWithIndex(
     4328                                array(
     4329                                        'decoding'      => 'async',
     4330                                        'fetchpriority' => 'high',
     4331                                ),
    43074332                                wp_get_loading_optimization_attributes( 'img', $attr, $context ),
    43084333                                "Expected first image to not be lazy-loaded. First large image get's high fetchpriority."
    43094334                        );
    4310                         $this->assertEmpty(
     4335                        $this->assertSameSetsWithIndex(
     4336                                array(
     4337                                        'decoding' => 'async',
     4338                                ),
    43114339                                wp_get_loading_optimization_attributes( 'img', $attr, $context ),
    43124340                                'Expected second image to not be lazy-loaded.'
    43134341                        );
    4314                         $this->assertEmpty(
     4342                        $this->assertSameSetsWithIndex(
     4343                                array(
     4344                                        'decoding' => 'async',
     4345                                ),
    43154346                                wp_get_loading_optimization_attributes( 'img', $attr, $context ),
    43164347                                'Expected third image to not be lazy-loaded.'
     
    43184349
    43194350                        // Return 'lazy' if in the loop and in the main query for any subsequent elements.
    4320                         $this->assertSame(
    4321                                 array( 'loading' => 'lazy' ),
     4351                        $this->assertSameSetsWithIndex(
     4352                                array(
     4353                                        'decoding' => 'async',
     4354                                        'loading'  => 'lazy',
     4355                                ),
    43224356                                wp_get_loading_optimization_attributes( 'img', $attr, $context )
    43234357                        );
    43244358
    43254359                        // Yes, for all subsequent elements.
    4326                         $this->assertSame(
    4327                                 array( 'loading' => 'lazy' ),
     4360                        $this->assertSameSetsWithIndex(
     4361                                array(
     4362                                        'decoding' => 'async',
     4363                                        'loading'  => 'lazy',
     4364                                ),
    43284365                                wp_get_loading_optimization_attributes( 'img', $attr, $context )
    43294366                        );
     
    43454382                $attr = $this->get_width_height_for_high_priority();
    43464383
    4347                 $this->assertSame(
    4348                         array( 'loading' => 'lazy' ),
     4384                $this->assertSameSetsWithIndex(
     4385                        array(
     4386                                'decoding' => 'async',
     4387                                'loading'  => 'lazy',
     4388                        ),
    43494389                        wp_get_loading_optimization_attributes( 'img', $attr, $context ),
    43504390                        'The "loading" attribute should be "lazy" when not in the loop or the main query.'
     
    43594399                        the_post();
    43604400
    4361                         $this->assertSame(
    4362                                 array( 'fetchpriority' => 'high' ),
     4401                        $this->assertSameSetsWithIndex(
     4402                                array(
     4403                                        'decoding'      => 'async',
     4404                                        'fetchpriority' => 'high',
     4405                                ),
    43634406                                wp_get_loading_optimization_attributes( 'img', $attr, $context ),
    43644407                                'The "fetchpriority" attribute should be "high" while in the loop and the main query.'
     
    43894432                $this->set_main_query( $query );
    43904433
    4391                 $this->assertSame(
    4392                         array( 'loading' => 'lazy' ),
     4434                $this->assertSameSetsWithIndex(
     4435                        array(
     4436                                'decoding' => 'async',
     4437                                'loading'  => 'lazy',
     4438                        ),
    43934439                        wp_get_loading_optimization_attributes( 'img', $attr, $context ),
    43944440                        'The "loading" attribute should be "lazy" before the main query loop.'
     
    43984444                        the_post();
    43994445
    4400                         $this->assertSame(
    4401                                 array( 'fetchpriority' => 'high' ),
     4446                        $this->assertSameSetsWithIndex(
     4447                                array(
     4448                                        'decoding'      => 'async',
     4449                                        'fetchpriority' => 'high',
     4450                                ),
    44024451                                wp_get_loading_optimization_attributes( 'img', $attr, $context ),
    44034452                                'The "fetchpriority" attribute should be "high" while in the loop and the main query.'
     
    44684517                add_filter( 'wp_loading_optimization_force_header_contexts', '__return_empty_array' );
    44694518
    4470                 $this->assertSame(
    4471                         array( 'loading' => 'lazy' ),
     4519                $this->assertSameSetsWithIndex(
     4520                        array(
     4521                                'decoding' => 'async',
     4522                                'loading'  => 'lazy',
     4523                        ),
    44724524                        wp_get_loading_optimization_attributes( 'img', $attr, $context ),
    44734525                        'Images in the header context should get lazy-loaded after the wp_loading_optimization_force_header_contexts filter.'
     
    45034555                );
    45044556
    4505                 $this->assertSame(
    4506                         array( 'fetchpriority' => 'high' ),
     4557                $this->assertSameSetsWithIndex(
     4558                        array(
     4559                                'decoding'      => 'async',
     4560                                'fetchpriority' => 'high',
     4561                        ),
    45074562                        wp_get_loading_optimization_attributes( 'img', $attr, 'something_completely_arbitrary' )
    45084563                );
     
    45144569         * @ticket 58211
    45154570         * @ticket 58235
     4571         * @ticket 58892
    45164572         *
    45174573         * @covers ::wp_get_loading_optimization_attributes
     
    45314587
    45324588                // Lazy if not main query.
    4533                 $this->assertSame(
    4534                         array( 'loading' => 'lazy' ),
     4589                $this->assertSameSetsWithIndex(
     4590                        array(
     4591                                'decoding' => 'async',
     4592                                'loading'  => 'lazy',
     4593                        ),
    45354594                        wp_get_loading_optimization_attributes( 'img', $attr, $context )
    45364595                );
     
    45424601         * @ticket 58211
    45434602         * @ticket 58235
     4603         * @ticket 58892
    45444604         *
    45454605         * @covers ::wp_get_loading_optimization_attributes
     
    45584618
    45594619                // Lazy if header not called.
    4560                 $this->assertSame(
    4561                         array( 'loading' => 'lazy' ),
     4620                $this->assertSameSetsWithIndex(
     4621                        array(
     4622                                'decoding' => 'async',
     4623                                'loading'  => 'lazy',
     4624                        ),
    45624625                        wp_get_loading_optimization_attributes( 'img', $attr, $context )
    45634626                );
     
    45864649
    45874650                // First image is loaded with high fetchpriority.
    4588                 $this->assertSame(
    4589                         array( 'fetchpriority' => 'high' ),
     4651                $this->assertSameSetsWithIndex(
     4652                        array(
     4653                                'decoding'      => 'async',
     4654                                'fetchpriority' => 'high',
     4655                        ),
    45904656                        wp_get_loading_optimization_attributes( 'img', $attr, $context ),
    45914657                        'Expected first image to not be lazy-loaded. First large image is loaded with high fetchpriority.'
     
    45984664         * @ticket 58211
    45994665         * @ticket 58235
     4666         * @ticket 58892
    46004667         *
    46014668         * @covers ::wp_get_loading_optimization_attributes
     
    46184685
    46194686                $attr = $this->get_width_height_for_high_priority();
    4620                 $this->assertSame(
    4621                         array( 'loading' => 'lazy' ),
     4687                $this->assertSameSetsWithIndex(
     4688                        array(
     4689                                'decoding' => 'async',
     4690                                'loading'  => 'lazy',
     4691                        ),
    46224692                        wp_get_loading_optimization_attributes( 'img', $attr, $context )
    46234693                );
     
    46294699         * @ticket 58211
    46304700         * @ticket 58235
     4701         * @ticket 58892
    46314702         *
    46324703         * @covers ::wp_get_loading_optimization_attributes
     
    46494720
    46504721                // Load lazy if the there is no loop and footer was called.
    4651                 $this->assertSame(
    4652                         array( 'loading' => 'lazy' ),
     4722                $this->assertSameSetsWithIndex(
     4723                        array(
     4724                                'decoding' => 'async',
     4725                                'loading'  => 'lazy',
     4726                        ),
    46534727                        wp_get_loading_optimization_attributes( 'img', $attr, $context )
    46544728                );
     
    46604734         * @ticket 58089
    46614735         * @ticket 58235
     4736         * @ticket 58892
    46624737         *
    46634738         * @covers ::wp_get_loading_optimization_attributes
     
    46694744        public function test_wp_get_loading_optimization_attributes_should_return_lazy_for_special_contexts_outside_of_the_content( $context ) {
    46704745                $attr = $this->get_width_height_for_high_priority();
    4671                 $this->assertSame(
    4672                         array( 'loading' => 'lazy' ),
     4746                $this->assertSameSetsWithIndex(
     4747                        array(
     4748                                'decoding' => 'async',
     4749                                'loading'  => 'lazy',
     4750                        ),
    46734751                        wp_get_loading_optimization_attributes( 'img', $attr, $context )
    46744752                );
     
    47054783
    47064784        /**
     4785         * Tests to cover the decoding attribute within wp_get_loading_optimization_attributes().
     4786         *
     4787         * @ticket 58892
     4788         *
     4789         * @covers ::wp_get_loading_optimization_attributes
     4790         */
     4791        public function test_wp_get_loading_optimization_attributes_decoding_attribute() {
     4792
     4793                $this->assertSameSetsWithIndex(
     4794                        array(
     4795                                'decoding' => 'async',
     4796                        ),
     4797                        wp_get_loading_optimization_attributes( 'img', array(), 'the_content' ),
     4798                        'Expected decoding attribute to be async.'
     4799                );
     4800
     4801                $this->assertSameSetsWithIndex(
     4802                        array(
     4803                                'decoding' => 'auto',
     4804                        ),
     4805                        wp_get_loading_optimization_attributes( 'img', array( 'decoding' => 'auto' ), 'the_content' ),
     4806                        'Expected decoding attribute to be auto.'
     4807                );
     4808
     4809                $result = null;
     4810                add_filter(
     4811                        'the_content',
     4812                        static function ( $content ) use ( &$result ) {
     4813                                $result = wp_get_loading_optimization_attributes( 'img', array(), 'something_completely_arbitrary' );
     4814                                return $content;
     4815                        }
     4816                );
     4817                apply_filters( 'the_content', '' );
     4818
     4819                $this->assertSameSetsWithIndex(
     4820                        array(),
     4821                        $result,
     4822                        'Expected decoding attribute to be empty for img on arbitrary context, while running the_content.'
     4823                );
     4824
     4825                $this->assertSameSetsWithIndex(
     4826                        array(),
     4827                        wp_get_loading_optimization_attributes( 'iframe', array(), 'the_content' ),
     4828                        'Expected decoding attribute to be empty for iframe.'
     4829                );
     4830        }
     4831
     4832        /**
    47074833         * @ticket 44427
    47084834         * @ticket 50367
     
    48104936                        array(
    48114937                                'loading'       => false,
     4938                                'decoding'      => 'async',
    48124939                                'fetchpriority' => 'high',
    48134940                        )
     
    50165143                                        'height' => 100,
    50175144                                ),
    5018                                 array( 'loading' => 'lazy' ),
    5019                                 'Expected default `loading="lazy"`.',
     5145                                array(
     5146                                        'decoding' => 'async',
     5147                                        'loading'  => 'lazy',
     5148                                ),
     5149                                'Expected default `decoding="async"` and `loading="lazy"`.',
    50205150                        ),
    50215151                        'img_without_height' => array(
    50225152                                'img',
    50235153                                array( 'width' => 100 ),
    5024                                 array(),
    5025                                 'Expected blank array as height is required.',
     5154                                array(
     5155                                        'decoding' => 'async',
     5156                                ),
     5157                                'Only `decoding` is set as height is required for `loading` attribute.',
    50265158                        ),
    50275159                        'img_without_width'  => array(
    50285160                                'img',
    50295161                                array( 'height' => 100 ),
    5030                                 array(),
    5031                                 'Expected blank array as width is required.',
     5162                                array(
     5163                                        'decoding' => 'async',
     5164                                ),
     5165                                'Only `decoding` is set as width is required for `loading` attribute.',
    50325166                        ),
    50335167                );
     
    50625196                        'img'    => array(
    50635197                                'img',
    5064                                 array( 'loading' => 'lazy' ),
    5065                                 'Expected `loading="lazy"` for the img.',
     5198                                array(
     5199                                        'decoding' => 'async',
     5200                                        'loading'  => 'lazy',
     5201                                ),
     5202                                'Expected `decoding="async"` and `loading="lazy"` and `decoding="async"` for the img.',
    50665203                        ),
    50675204                        'iframe' => array(
     
    51065243
    51075244                // Skip logic if context is `template`.
    5108                 $this->assertSame(
    5109                         array( 'fetchpriority' => 'high' ),
     5245                $this->assertSameSetsWithIndex(
     5246                        array(
     5247                                'decoding'      => 'async',
     5248                                'fetchpriority' => 'high',
     5249                        ),
    51105250                        wp_get_loading_optimization_attributes( 'img', $attr, 'template_part_' . WP_TEMPLATE_PART_AREA_HEADER ),
    51115251                        'Images in the header block template part should not be lazy-loaded and first large image is set high fetchpriority.'
     
    51155255        /**
    51165256         * @ticket 58235
     5257         * @ticket 58892
    51175258         *
    51185259         * @covers ::wp_get_loading_optimization_attributes
     
    51265267                $this->assertEqualSetsWithIndex(
    51275268                        array(
     5269                                'decoding'      => 'async',
    51285270                                'loading'       => 'lazy',
    51295271                                'fetchpriority' => 'high',
     
    51445286
    51455287                // Check fetchpriority high logic if loading attribute is present.
    5146                 $this->assertSame(
    5147                         array(
     5288                $this->assertSameSetsWithIndex(
     5289                        array(
     5290                                'decoding'      => 'async',
    51485291                                'fetchpriority' => 'high',
    51495292                        ),
     
    51675310                // fetchpriority not set as image is of lower resolution.
    51685311                $this->assertSame(
    5169                         array(),
     5312                        array(
     5313                                'decoding' => 'async',
     5314                        ),
    51705315                        wp_get_loading_optimization_attributes( 'img', $attr, 'test' ),
    51715316                        'loading optimization attr array should be empty.'
     
    51835328
    51845329                // The first image processed in a shortcode should have fetchpriority set to high.
    5185                 $this->assertSame(
     5330                $this->assertSameSetsWithIndex(
    51865331                        $expected,
    51875332                        wp_get_loading_optimization_attributes( 'img', $attr, 'do_shortcode' ),
     
    52015346                                },
    52025347                                'expected' => array(
     5348                                        'decoding'      => 'async',
    52035349                                        'fetchpriority' => 'high',
    52045350                                ),
     
    52185364                                },
    52195365                                'expected' => array(
    5220                                         'loading' => 'lazy',
     5366                                        'decoding' => 'async',
     5367                                        'loading'  => 'lazy',
    52215368                                ),
    5222                                 'message'  => 'Lazy-loading not applied to during shortcode rendering.',
     5369                                'message'  => 'Lazy-loading or decoding not applied to during shortcode rendering.',
    52235370                        ),
    52245371                        'shortcode_image_outside_of_the_loop_are_loaded_lazy'  => array(
     
    52285375                                },
    52295376                                'expected' => array(
    5230                                         'loading' => 'lazy',
     5377                                        'decoding' => 'async',
     5378                                        'loading'  => 'lazy',
    52315379                                ),
    5232                                 'message'  => 'Lazy-loading not applied to shortcodes outside the loop.',
     5380                                'message'  => 'Lazy-loading or decoding not applied to shortcodes outside the loop.',
    52335381                        ),
    52345382                );
     
    53275475                        ),
    53285476                        'image with loading=lazy'       => array(
    5329                                 array( 'loading' => 'lazy' ),
     5477                                array(
     5478                                        'loading'  => 'lazy',
     5479                                        'decoding' => 'async',
     5480                                ),
    53305481                                'img',
    53315482                                $this->get_width_height_for_high_priority(),
     
    54645615                $attr = $this->get_width_height_for_high_priority();
    54655616
    5466                 $this->assertSame(
     5617                $this->assertSameSetsWithIndex(
    54675618                        array( 'fetchpriority' => 'high' ),
    54685619                        wp_get_loading_optimization_attributes( 'img', $attr, 'the_content' ),
     
    54735624                add_filter( 'pre_wp_get_loading_optimization_attributes', '__return_false' );
    54745625
    5475                 $this->assertSameSets(
    5476                         array( 'loading' => 'lazy' ),
     5626                $this->assertSameSetsWithIndex(
     5627                        array(
     5628                                'decoding' => 'async',
     5629                                'loading'  => 'lazy',
     5630                        ),
    54775631                        wp_get_loading_optimization_attributes( 'img', $attr, 'the_content' ),
    54785632                        'The filter did not return the default attributes.'
     
    54825636                add_filter( 'pre_wp_get_loading_optimization_attributes', '__return_empty_array' );
    54835637
    5484                 $this->assertSameSets(
     5638                $this->assertSameSetsWithIndex(
    54855639                        array(),
    54865640                        wp_get_loading_optimization_attributes( 'img', $attr, 'the_content' ),
     
    55045658                );
    55055659
    5506                 $this->assertSameSets(
     5660                $this->assertSameSetsWithIndex(
    55075661                        array( 'custom_attr' => 'custom_value' ),
    55085662                        wp_get_loading_optimization_attributes( 'img', $attr, 'the_content' ),
     
    55195673                $attr = $this->get_width_height_for_high_priority();
    55205674
    5521                 $this->assertSameSets(
    5522                         array( 'loading' => 'lazy' ),
     5675                $this->assertSameSetsWithIndex(
     5676                        array(
     5677                                'decoding' => 'async',
     5678                                'loading'  => 'lazy',
     5679                        ),
    55235680                        wp_get_loading_optimization_attributes( 'img', $attr, 'the_content' ),
    55245681                        'Before the filter it will not return the loading attribute.'
     
    55375694                );
    55385695
    5539                 $this->assertSameSets(
    5540                         array( 'fetchpriority' => 'high' ),
     5696                $this->assertSameSetsWithIndex(
     5697                        array(
     5698                                'decoding'      => 'async',
     5699                                'fetchpriority' => 'high',
     5700                        ),
    55415701                        wp_get_loading_optimization_attributes( 'img', $attr, 'the_content' ),
    55425702                        'After the filter it will not return the fetchpriority attribute.'
  • trunk/tests/phpunit/tests/media/wpImageTagAddDecodingAttr.php

    r56559 r56690  
    2020         * @param string $decoding The value for the 'decoding' attribute. 'no value' for default.
    2121         * @param string $expected The expected `img` tag.
     22         *
     23         * @expectedDeprecated wp_img_tag_add_decoding_attr
    2224         */
    2325        public function test_should_add_decoding_attr( $image, $context, $decoding, $expected ) {
     
    8183         * @param mixed  $decoding The value for the 'decoding' attribute. 'no value' for default.
    8284         * @param string $expected The expected `img` tag.
     85         *
     86         * @expectedDeprecated wp_img_tag_add_decoding_attr
    8387         */
    8488        public function test_should_not_add_decoding_attr( $image, $context, $decoding, $expected ) {
Note: See TracChangeset for help on using the changeset viewer.