Print `IMG` auto-sizes contain CSS fix by enqueueing inline style #8954

westonruter · 2025-06-10T23:33:19Z

Trac ticket: https://core.trac.wordpress.org/ticket/62731

Instead of manually printing the STYLE tag to fix sizes=auto issue with images, this enqueues the inline style via WP_Styles. This ensures the styles are printed with other styles as opposed to being printed very early, even before the TITLE tag. This also allows plugins to do additional processing of the stylesheet prior to it being printed. Note that array_unshift( wp_scripts()->queue, $handle ) is used instead of wp_enqueue_style( $handle ) in order to ensure that the stylesheet is printed before any others, preserving the existing cascade.

This is very similar to the change that was made to replace print_emoji_styles() with wp_enqueue_emoji_styles() in Core-58775.

Determine whether extreme back-compat is warranted.
Add tests.

Diff on rendered page (after Prettier formatting):

--- /tmp/before.html	2025-06-10 16:25:19
+++ /tmp/after.html	2025-06-10 16:25:39
@@ -4,11 +4,6 @@
 		<meta charset="UTF-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		<meta name="robots" content="max-image-preview:large" />
-		<style>
-			img:is([sizes='auto' i], [sizes^='auto,' i]) {
-				contain-intrinsic-size: 3000px 1500px;
-			}
-		</style>
 		<title>WordPress Develop</title>
 		<link
 			rel="alternate"
@@ -544,6 +539,11 @@
 				}
 			)(window, document, window._wpemojiSettings);
 		</script>
+		<style id="wp-img-auto-sizes-contain-inline-css">
+			img:is([sizes='auto' i], [sizes^='auto,' i]) {
+				contain-intrinsic-size: 3000px 1500px;
+			}
+		</style>
 		<style id="wp-block-site-title-inline-css">
 			.wp-block-site-title {
 				box-sizing: border-box;

This Pull Request is for code review only. Please keep all other discussion in the Trac ticket. Do not merge this Pull Request. See GitHub Pull Requests for Code Review in the Core Handbook for more details.

github-actions · 2025-06-10T23:33:32Z

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

Core Committers: Use this line as a base for the props when committing in SVN:

Props westonruter, joemcgill, flixos90.

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

github-actions · 2025-06-10T23:46:41Z

Test using WordPress Playground

The changes in this pull request can previewed and tested using a WordPress Playground instance.

WordPress Playground is an experimental project that creates a full WordPress instance entirely within the browser.

Some things to be aware of

The Plugin and Theme Directories cannot be accessed within Playground.
All changes will be lost when closing a tab with a Playground instance.
All changes will be lost when refreshing the page.
A fresh instance is created each time the link below is clicked.
Every time this pull request is updated, a new ZIP file containing all changes is created. If changes are not reflected in the Playground instance,
it's possible that the most recent build failed, or has not completed. Check the list of workflow runs to be sure.

For more details about these limitations and more, check out the Limitations page in the WordPress Playground documentation.

Test this pull request with WordPress Playground.

src/wp-includes/media.php

joemcgill · 2025-06-11T01:40:17Z

src/wp-includes/media.php

+	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.
+	array_unshift( wp_styles()->queue, $handle );


This seems a bit hacky to me, but I understand the purpose. I assume there's not a better way to control the order of registered styles besides maybe making sure that the wp_register_style() call is made on an earlier hook, like init, correct?

felixarntz · 2025-06-11T18:30:42Z

src/wp-includes/media.php

+ * @since 6.9.0 The style is now enqueued as opposed to being printed.
+ *
+ * @link https://html.spec.whatwg.org/multipage/rendering.html#img-contain-size
+ * @link https://core.trac.wordpress.org/ticket/62413
 */
 function wp_print_auto_sizes_contain_css_fix() {


I don't love this name now, since it's implying this function does something that it doesn't.

We could potentially deprecate (effectively rename) it, though let's discuss how reasonable that would be.

Obviously there's a BC risk if people expect this function to be hooked into wp_head and want to remove it to disable the snippet.

However, there's also a BC risk if we just change what this function does, in case someone calls it manually somewhere else.

If someone unhooks this function to disable the snippet, and we wanted to replace it with a new function, we could still add the hook first, see if it is removed, and only before the function would be called ensure it is not invoked. This way we know whether it was removed, and could "forward" this removal to the new function.

I believe we did something like that in Core somewhere else before, but I can't recall where exactly.

A nice side-effect of deprecating / replacing would be that we could also use the proper hook wp_enqueue_scripts for the new function.

@felixarntz see e7144a3 for that which was the original approach I took.

I believe we did something like that in Core somewhere else before, but I can't recall where exactly.

Yes. We did it with printing the emoji styles in Core-58775.

See also https://core.trac.wordpress.org/ticket/62731#comment:7

If we go with the function rename and move from wp_head to wp_enqueue_scripts, since this function was introduced with the wp_img_tag_add_auto_sizes filter to disable the style, it seems overkill to also retain back-compat to see if someone removed the action on wp_head. If they had done this, they were essentially doing it wrong. There are only 4 examples of this being done on GitHub.

I've opened pull requests to use the filter instead:

Use correct mechanism to disable auto-sizes CSS fix szepeviktor/zero-bytes-theme#3

Use correct mechanism to disable auto-sizes CSS fix yuupiyo/MyPortfolio#1

Use correct mechanism to disable auto-sizes CSS fix pavelleonenko007/Utopia-wordpress-theme#1

Use correct mechanism to disable auto-sizes CSS fix conedevelopment/base-starter-theme#4

In any case, if someone doesn't update the hook, the risk of breakage is very low, as it will just mean an additional STYLE is output unexpectedly.

This reverts commit e7144a3.

westonruter · 2025-06-13T00:36:11Z

src/wp-includes/media.php

 *
 * 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


This could be 6.8.2 if we want.

Suggested change

* @since 6.9.0

* @since 6.8.2

westonruter · 2025-06-13T00:36:39Z

src/wp-includes/deprecated.php

+ *
+ * @since 6.7.1
+ * @deprecated 6.9.0 Use wp_enqueue_img_auto_sizes_contain_css_fix() instead.


Per below, if we want to target the next minor release:

Suggested change

* @deprecated 6.9.0 Use wp_enqueue_img_auto_sizes_contain_css_fix() instead.

* @deprecated 6.8.2 Use wp_enqueue_img_auto_sizes_contain_css_fix() instead.

Print IMG auto-sizes contain CSS fix by enqueueing inline style

c99d5fd

westonruter marked this pull request as draft June 10, 2025 23:33

westonruter requested review from felixarntz and joemcgill June 10, 2025 23:39

Do enqueueing in existing function

e7144a3

westonruter commented Jun 11, 2025

View reviewed changes

src/wp-includes/media.php Outdated Show resolved Hide resolved

joemcgill reviewed Jun 11, 2025

View reviewed changes

felixarntz reviewed Jun 11, 2025

View reviewed changes

westonruter and others added 3 commits June 12, 2025 12:07

Revert "Do enqueueing in existing function"

41d68bf

This reverts commit e7144a3.

Add tests for wp_enqueue_img_auto_sizes_contain_css_fix

5540458

Add clarifying comment

92c5985

westonruter marked this pull request as ready for review June 12, 2025 19:42

fixup! Add tests for wp_enqueue_img_auto_sizes_contain_css_fix

631feac

westonruter requested a review from felixarntz June 13, 2025 00:35

westonruter commented Jun 13, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Print `IMG` auto-sizes contain CSS fix by enqueueing inline style #8954

Print `IMG` auto-sizes contain CSS fix by enqueueing inline style #8954

Uh oh!

westonruter commented Jun 10, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Jun 10, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Jun 10, 2025

Uh oh!

Uh oh!

joemcgill Jun 11, 2025

Uh oh!

westonruter Jun 11, 2025

Uh oh!

felixarntz Jun 11, 2025 •

edited

Loading

Uh oh!

westonruter Jun 12, 2025

Uh oh!

westonruter Jun 12, 2025

Uh oh!

westonruter Jun 12, 2025

Uh oh!

westonruter Jun 12, 2025

Uh oh!

westonruter Jun 13, 2025

Uh oh!

westonruter Jun 13, 2025

Uh oh!

Uh oh!

	* @deprecated 6.9.0 Use wp_enqueue_img_auto_sizes_contain_css_fix() instead.
	* @deprecated 6.8.2 Use wp_enqueue_img_auto_sizes_contain_css_fix() instead.

Print IMG auto-sizes contain CSS fix by enqueueing inline style #8954

Are you sure you want to change the base?

Print IMG auto-sizes contain CSS fix by enqueueing inline style #8954

Uh oh!

Conversation

westonruter commented Jun 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Jun 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Jun 10, 2025

Test using WordPress Playground

Some things to be aware of

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

felixarntz Jun 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Print `IMG` auto-sizes contain CSS fix by enqueueing inline style #8954

Print `IMG` auto-sizes contain CSS fix by enqueueing inline style #8954

westonruter commented Jun 10, 2025 •

edited

Loading

github-actions bot commented Jun 10, 2025 •

edited

Loading

felixarntz Jun 11, 2025 •

edited

Loading