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 );