HostForge-Systems/wordpress
Template
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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.

Built from https://develop.svn.wordpress.org/trunk@60910


git-svn-id: http://core.svn.wordpress.org/trunk@60246 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Weston Ruter
2025-10-07 06:24:43 +00:00
parent 8dc4b2a207
commit 6ccbb42f7c
4 changed files with 50 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
wp-includes/default-filters.php
View File

@@ -628,7 +628,8 @@ add_action( 'wp_footer', 'wp_enqueue_stored_styles', 1 );
add_action( 'wp_default_styles', 'wp_default_styles' );
add_filter( 'style_loader_src', 'wp_style_loader_src', 10, 2 );
add_action( 'wp_head', 'wp_print_auto_sizes_contain_css_fix', 1 );
add_action( 'wp_head', 'wp_enqueue_img_auto_sizes_contain_css_fix', 0 ); // Must run before wp_print_auto_sizes_contain_css_fix().
add_action( 'wp_head', 'wp_print_auto_sizes_contain_css_fix', 1 ); // Retained for backwards-compatibility. Unhooked by wp_enqueue_img_auto_sizes_contain_css_fix().
add_action( 'wp_head', 'wp_maybe_inline_styles', 1 ); // Run for styles enqueued in <head>.
add_action( 'wp_footer', 'wp_maybe_inline_styles', 1 ); // Run for late-loaded styles in the footer.

30
wp-includes/deprecated.php
View File

@@ -6460,4 +6460,32 @@ function wp_add_editor_classic_theme_styles( $editor_settings ) {
array_unshift( $editor_settings['styles'], $classic_theme_styles_settings );
return $editor_settings;
}
}
/**
* 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
* @deprecated 6.9.0 Use wp_enqueue_img_auto_sizes_contain_css_fix() instead.
* @see wp_enqueue_img_auto_sizes_contain_css_fix()
*
* @see https://html.spec.whatwg.org/multipage/rendering.html#img-contain-size
* @see https://core.trac.wordpress.org/ticket/62413
* @see https://core.trac.wordpress.org/ticket/62731
*/
function wp_print_auto_sizes_contain_css_fix() {
_deprecated_function( __FUNCTION__, '6.9.0', 'wp_enqueue_img_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
}

24
wp-includes/media.php
View File

@@ -2081,25 +2081,37 @@ function wp_sizes_attribute_includes_valid_auto( string $sizes_attr ): bool {
}
/**
* 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
* @see https://core.trac.wordpress.org/ticket/62731
*/
function wp_print_auto_sizes_contain_css_fix() {
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 );
if ( ! $add_auto_sizes ) {
return;
}
?>
<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 );
}
/**

2
wp-includes/version.php
View File

@@ -16,7 +16,7 @@
*
* @global string $wp_version
*/
$wp_version = '6.9-alpha-60909';
$wp_version = '6.9-alpha-60910';
/**
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.