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

Timestamp:

10/07/2025 06:22:02 AM (2 months ago)

Author:

westonruter

Message:

Media: Switch to enqueueing contain-intrinsic-size CSS fix for IMG tags having sizes=auto.

This deprecates the wp_print_auto_sizes_contain_css_fix() function running at wp_head priority 1, in favor of a wp_enqueue_img_auto_sizes_contain_css_fix() function which runs just before at wp_head priority 0. The latter function unhooks the former while also enqueueing an inline style to be printed with all other styles but up front to preserve the cascade. This eliminates directly printing the STYLE tag, which was a change done similarly before for the emoji styles. See #58775.

For backwards compatibility, the CSS can still be prevented from being enqueued/printed via:

remove_action( 'wp_head', 'wp_print_auto_sizes_contain_css_fix', 1 );

This change ensures that all styles are printed together using the correct API for emitting styles.

Developed in ​https://github.com/WordPress/wordpress-develop/pull/8954.

Follow-up to [59435].

Props westonruter, sabernhardt, SirLouen, flixos90, joemcgill, SergeyBiryukov, superpoincare.
See #62413.
Fixes #62731.

File:

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

trunk/src/wp-includes/media.php

@@ -2082 +2082 @@
 
 /**
- * Prints a CSS rule to fix potential visual issues with images using `sizes=auto`.
+ * Enqueues 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
+ * @since 6.9.0
+ *
  * @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() {
+ * @see https://core.trac.wordpress.org/ticket/62731
+ */
+function wp_enqueue_img_auto_sizes_contain_css_fix(): void {
+    // Back-compat for plugins that disable functionality by unhooking this action.
+    $priority = has_action( 'wp_head', 'wp_print_auto_sizes_contain_css_fix' );
+    if ( false === $priority ) {
+        return;
+    }
+    remove_action( 'wp_head', 'wp_print_auto_sizes_contain_css_fix', $priority );
+
     /** This filter is documented in wp-includes/media.php */
     $add_auto_sizes = apply_filters( 'wp_img_tag_add_auto_sizes', true );
@@ -2098 +2107 @@
     }
 
-    ?>
-    <style>img:is([sizes="auto" i], [sizes^="auto," i]) { contain-intrinsic-size: 3000px 1500px }</style>
-    <?php
+    $handle = 'wp-img-auto-sizes-contain';
+    wp_register_style( $handle, false );
+    wp_add_inline_style( $handle, 'img:is([sizes=auto i],[sizes^="auto," i]){contain-intrinsic-size:3000px 1500px}' );
+
+    // Make sure inline style is printed first since it was previously printed at wp_head priority 1 and this preserves the CSS cascade.
+    array_unshift( wp_styles()->queue, $handle );
 }