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

Timestamp:

11/18/2024 07:50:06 PM (13 days ago)

Author:

flixos90

Message:

Media: Avoid images with sizes=auto to be displayed downsized in supporting browsers.

Based on the user agent stylesheet rules outlined in ​https://html.spec.whatwg.org/multipage/rendering.html#img-contain-size, images that have sizes=auto while applying width: auto or width: fit-content would be constrained to only 300px width.

This changeset overrides said user agent stylesheet rule with a much larger constraint, to avoid the problem.

Additionally, it introduces a filter wp_img_tag_add_auto_sizes which can be used to opt out of the functionality, as an additional measure.

Props joemcgill, flixos90, dooperweb, SirLouen, azaozz, mukesh27, apermo.
Fixes #62413.
See #61847, #62345.

File:

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

trunk/src/wp-includes/media.php

@@ -1138 +1138 @@
         }
 
+        /** This filter is documented in wp-includes/media.php */
+        $add_auto_sizes = apply_filters( 'wp_img_tag_add_auto_sizes', true );
+
         // Adds 'auto' to the sizes attribute if applicable.
         if (
+            $add_auto_sizes &&
             isset( $attr['loading'] ) &&
             'lazy' === $attr['loading'] &&
@@ -1986 +1990 @@
  */
 function wp_img_tag_add_auto_sizes( string $image ): string {
+    /**
+     * Filters whether auto-sizes for lazy loaded images is enabled.
+     *
+     * @since 6.7.1
+     *
+     * @param boolean $enabled Whether auto-sizes for lazy loaded images is enabled.
+     */
+    if ( ! apply_filters( 'wp_img_tag_add_auto_sizes', true ) ) {
+        return $image;
+    }
+
     $processor = new WP_HTML_Tag_Processor( $image );
 
@@ -1994 +2009 @@
 
     // Bail early if the image is not lazy-loaded.
-    $value = $processor->get_attribute( 'loading' );
-    if ( ! is_string( $value ) || 'lazy' !== strtolower( trim( $value, " \t\f\r\n" ) ) ) {
+    $loading = $processor->get_attribute( 'loading' );
+    if ( ! is_string( $loading ) || 'lazy' !== strtolower( trim( $loading, " \t\f\r\n" ) ) ) {
+        return $image;
+    }
+
+    /*
+     * Bail early if the image doesn't have a width attribute.
+     * Per WordPress Core itself, lazy-loaded images should always have a width attribute.
+     * However, it is possible that lazy-loading could be added by a plugin, where we don't have that guarantee.
+     * As such, it still makes sense to ensure presence of a width attribute here in order to use `sizes=auto`.
+     */
+    $width = $processor->get_attribute( 'width' );
+    if ( ! is_string( $width ) || '' === $width ) {
         return $image;
     }
@@ -2028 +2054 @@
     list( $first_size ) = explode( ',', $sizes_attr, 2 );
     return 'auto' === strtolower( trim( $first_size, " \t\f\r\n" ) );
+}
+
+/**
+ * Prints a CSS rule to fix potential visual issues with images using `sizes=auto`.
+ *
+ * This rule overrides the similar rule in the default user agent stylesheet, to avoid images that use e.g.
+ * `width: auto` or `width: fit-content` to appear smaller.
+ *
+ * @since 6.7.1
+ * @see https://html.spec.whatwg.org/multipage/rendering.html#img-contain-size
+ * @see https://core.trac.wordpress.org/ticket/62413
+ */
+function wp_print_auto_sizes_contain_css_fix() {
+    /** This filter is documented in wp-includes/media.php */
+    $add_auto_sizes = apply_filters( 'wp_img_tag_add_auto_sizes', true );
+    if ( ! $add_auto_sizes ) {
+        return;
+    }
+
+    ?>
+    <style>img:is([sizes="auto" i], [sizes^="auto," i]) { contain-intrinsic-size: 3000px 1500px }</style>
+    <?php
 }