Changeset 56690 for trunk/src/wp-includes/media.php

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.

File:

• trunk/src/wp-includes/media.php (modified) (8 diffs)

trunk/src/wp-includes/media.php

@@ -1061 +1061 @@
 
                 $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 ) ) ),
-                        'decoding' => 'async',
+                        'src'   => $src,
+                        'class' => "attachment-$size_class size-$size_class",
+                        'alt'   => trim( strip_tags( get_post_meta( $attachment_id, '_wp_attachment_image_alt', true ) ) ),
                 );
 
@@ -1893 +1892 @@
                         $filtered_image = wp_img_tag_add_loading_optimization_attrs( $filtered_image, $context );
 
-                        // Add 'decoding=async' attribute unless a 'decoding' attribute is already present.
-                        if ( ! str_contains( $filtered_image, ' decoding=' ) ) {
-                                $filtered_image = wp_img_tag_add_decoding_attr( $filtered_image, $context );
-                        }
-
                         /**
                          * Filters an img tag within the content for a given context.
@@ -1958 +1952 @@
         $loading_val       = preg_match( '/ loading=["\']([A-Za-z]+)["\']/', $image, $match_loading ) ? $match_loading[1] : null;
         $fetchpriority_val = preg_match( '/ fetchpriority=["\']([A-Za-z]+)["\']/', $image, $match_fetchpriority ) ? $match_fetchpriority[1] : null;
+        $decoding_val      = preg_match( '/ decoding=["\']([A-Za-z]+)["\']/', $image, $match_decoding ) ? $match_decoding[1] : null;
 
         /*
@@ -1971 +1966 @@
                         'loading'       => $loading_val,
                         'fetchpriority' => $fetchpriority_val,
+                        'decoding'      => $decoding_val,
                 ),
                 $context
         );
 
-        // Images should have source and dimension attributes for the loading optimization attributes to be added.
-        if ( ! str_contains( $image, ' src="' ) || ! str_contains( $image, ' width="' ) || ! str_contains( $image, ' height="' ) ) {
+        // Images should have source for the loading optimization attributes to be added.
+        if ( ! str_contains( $image, ' src="' ) ) {
+                return $image;
+        }
+
+        if ( empty( $decoding_val ) ) {
+                /**
+                 * Filters the `decoding` attribute value to add to an image. Default `async`.
+                 *
+                 * Returning a falsey value will omit the attribute.
+                 *
+                 * @since 6.1.0
+                 *
+                 * @param string|false|null $value      The `decoding` attribute value. Returning a falsey value
+                 *                                      will result in the attribute being omitted for the image.
+                 *                                      Otherwise, it may be: 'async', 'sync', or 'auto'. Defaults to false.
+                 * @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.
+                 */
+                $filtered_decoding_attr = apply_filters(
+                        'wp_img_tag_add_decoding_attr',
+                        isset( $optimization_attrs['decoding'] ) ? $optimization_attrs['decoding'] : false,
+                        $image,
+                        $context
+                );
+
+                // Validate the values after filtering.
+                if ( isset( $optimization_attrs['decoding'] ) && ! $filtered_decoding_attr ) {
+                        // Unset `decoding` attribute if `$filtered_decoding_attr` is set to `false`.
+                        unset( $optimization_attrs['decoding'] );
+                } elseif ( in_array( $filtered_decoding_attr, array( 'async', 'sync', 'auto' ), true ) ) {
+                        $optimization_attrs['decoding'] = $filtered_decoding_attr;
+                }
+
+                if ( ! empty( $optimization_attrs['decoding'] ) ) {
+                        $image = str_replace( '<img', '<img decoding="' . esc_attr( $optimization_attrs['decoding'] ) . '"', $image );
+                }
+        }
+
+        // Images should have dimension attributes for the 'loading' and 'fetchpriority' attributes to be added.
+        if ( ! str_contains( $image, ' width="' ) || ! str_contains( $image, ' height="' ) ) {
                 return $image;
         }
@@ -2039 +2075 @@
         if ( empty( $fetchpriority_val ) && ! empty( $optimization_attrs['fetchpriority'] ) ) {
                 $image = str_replace( '<img', '<img fetchpriority="' . esc_attr( $optimization_attrs['fetchpriority'] ) . '"', $image );
-        }
-
-        return $image;
-}
-
-/**
- * Adds `decoding` attribute to an `img` HTML tag.
- *
- * The `decoding` attribute allows developers to indicate whether the
- * browser can decode the image off the main thread (`async`), on the
- * main thread (`sync`) or as determined by the browser (`auto`).
- *
- * By default WordPress adds `decoding="async"` to images but developers
- * can use the {@see 'wp_img_tag_add_decoding_attr'} filter to modify this
- * to remove the attribute or set it to another accepted value.
- *
- * @since 6.1.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 `decoding` attribute added.
- */
-function wp_img_tag_add_decoding_attr( $image, $context ) {
-        /*
-         * Only apply the decoding attribute to images that have a src attribute that
-         * starts with a double quote, ensuring escaped JSON is also excluded.
-         */
-        if ( ! str_contains( $image, ' src="' ) ) {
-                return $image;
-        }
-
-        /**
-         * Filters the `decoding` attribute value to add to an image. Default `async`.
-         *
-         * Returning a falsey value will omit the attribute.
-         *
-         * @since 6.1.0
-         *
-         * @param string|false|null $value   The `decoding` attribute value. Returning a falsey value
-         *                                   will result in the attribute being omitted for the image.
-         *                                   Otherwise, it may be: 'async' (default), 'sync', or 'auto'.
-         * @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_decoding_attr', 'async', $image, $context );
-
-        if ( in_array( $value, array( 'async', 'sync', 'auto' ), true ) ) {
-                $image = str_replace( '<img ', '<img decoding="' . esc_attr( $value ) . '" ', $image );
         }
 
@@ -5609 +5595 @@
  * - `loading` attribute with a value of "lazy"
  * - `fetchpriority` attribute with a value of "high"
+ * - `decoding` attribute with a value of "async"
  *
  * If any of these attributes are already present in the given attributes, they will not be modified. Note that no
@@ -5658 +5645 @@
         // For now this function only supports images and iframes.
         if ( 'img' !== $tag_name && 'iframe' !== $tag_name ) {
-                /** This filter is documented in wp-includes/media.php */
-                return apply_filters( 'wp_get_loading_optimization_attributes', $loading_attrs, $tag_name, $attr, $context );
-        }
-
-        // For any resources, width and height must be provided, to avoid layout shifts.
-        if ( ! isset( $attr['width'], $attr['height'] ) ) {
                 /** This filter is documented in wp-includes/media.php */
                 return apply_filters( 'wp_get_loading_optimization_attributes', $loading_attrs, $tag_name, $attr, $context );
@@ -5677 +5658 @@
         // TODO: Handle shortcode images together with the content (see https://core.trac.wordpress.org/ticket/58853).
         if ( 'the_content' !== $context && 'do_shortcode' !== $context && doing_filter( 'the_content' ) ) {
+                /** This filter is documented in wp-includes/media.php */
+                return apply_filters( 'wp_get_loading_optimization_attributes', $loading_attrs, $tag_name, $attr, $context );
+        }
+
+        /*
+         * Add `decoding` with a value of "async" for every image unless it has a
+         * conflicting `decoding` attribute already present.
+         */
+        if ( 'img' === $tag_name ) {
+                if ( isset( $attr['decoding'] ) ) {
+                        $loading_attrs['decoding'] = $attr['decoding'];
+                } else {
+                        $loading_attrs['decoding'] = 'async';
+                }
+        }
+
+        // For any resources, width and height must be provided, to avoid layout shifts.
+        if ( ! isset( $attr['width'], $attr['height'] ) ) {
                 /** This filter is documented in wp-includes/media.php */
                 return apply_filters( 'wp_get_loading_optimization_attributes', $loading_attrs, $tag_name, $attr, $context );