Print `IMG` auto-sizes contain CSS fix by enqueueing inline style by westonruter · Pull Request #8954 · WordPress/wordpress-develop

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;
+			}
+			/*# sourceURL=wp-img-auto-sizes-contain-inline-css */
+		</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

+ * @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.

Update: The wp_img_tag_add_auto_sizes filter doesn't just prevent the style from being printed. It also omits sizes=auto from the IMG tags as well. See #8954 (comment)

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

Use correct mechanism to disable auto-sizes CSS fix szepeviktor/zero-bytes-theme#3 (Revert "Use correct mechanism to disable auto-sizes CSS fix" szepeviktor/zero-bytes-theme#4)

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.

@felixarntz I believe your concerns are addressed by introducing a separate function here. If so, please approve the PR.

After re-examining the purpose of the wp_img_tag_add_auto_sizes filter, I realize I was wrong to suggest that it was the right way to prevent the style from being printed. See #8954 (comment)

This reverts commit e7144a3.

src/wp-includes/media.php

src/wp-includes/deprecated.php

…into fix/trac-62731

westonruter · 2025-09-30T00:21:35Z

I just merged in the latest from trunk. Note there is now a sourceURL comment present:

<style id='wp-img-auto-sizes-contain-inline-css'>
img:is([sizes="auto" i], [sizes^="auto," i]) { contain-intrinsic-size: 3000px 1500px }
/*# sourceURL=wp-img-auto-sizes-contain-inline-css */
</style>

felixarntz · 2025-10-02T23:07:18Z

src/wp-includes/media.php

 * @see https://core.trac.wordpress.org/ticket/62413
 */
-function wp_print_auto_sizes_contain_css_fix() {
+function wp_enqueue_img_auto_sizes_contain_css_fix(): void {


Shouldn't we, either within this function, or in some other logic that runs on a hook shortly before this, check for has_action( 'wp_head', 'wp_print_auto_sizes_contain_css_fix' ), and only remove the deprecated action at the point that we know it wasn't intentionally removed by any 3P code?

I think we should include this for BC, to make sure sites that removed the original hook don't see adverse effects now because we changed the hook. This is similar to how we did it elsewhere before I think.

@felixarntz Thanks for raising this again. After re-examining the purpose of the wp_img_tag_add_auto_sizes filter, I realize I was wrong to suggest that it was the right way to prevent the style from being printed. See #8954 (comment)

Co-authored-by: Felix Arntz <flixos90@git.wordpress.org>

westonruter · 2025-10-03T03:21:54Z

In 67d527c I've addressed the concerns with backwards-compatibility with themes/plugins that have intended to prevent this style from being printed by unhooking the action via:

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

In looking at this further, I realize I was mistaken in thinking that the wp_img_tag_add_auto_sizes was how this style was actually supposed to be omitted. In reality, this filter does much more, as it prevents sizes=auto from being added to all images as well. Therefore, I was wrong to suggest the proper way to simply omit this style was to do add_filter( 'wp_img_tag_add_auto_sizes', '__return_false' ).

In order to maintain backwards-compatibility, the now-deprecated wp_print_auto_sizes_contain_css_fix() function now remains hooked at wp_head with a priority 1, and now the wp_enqueue_img_auto_sizes_contain_css_fix() function is hooked at wp_head with priority 0, just before wp_print_auto_sizes_contain_css_fix() is slated to run. The first thing that wp_print_auto_sizes_contain_css_fix() does is it checks to see if has_action( 'wp_head', 'wp_print_auto_sizes_contain_css_fix' ). If not, then it short-circuits. Otherwise, it goes ahead and removes the action to prevent the deprecation notice, while also proceeding with enqueueing the CSS fix.

I've added tests for these various scenarios.

felixarntz

@westonruter Thank you for the updates, looks good to go IMO!

…` 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 #8954. Follow-up to [59435]. Props westonruter, sabernhardt, SirLouen, flixos90, joemcgill, SergeyBiryukov, superpoincare. See #62413. Fixes #62731. git-svn-id: https://develop.svn.wordpress.org/trunk@60910 602fd350-edb4-49c9-b593-d223f7449a82

github-actions · 2025-10-07T06:23:16Z

A commit was made that fixes the Trac ticket referenced in the description of this pull request.

SVN changeset: 60910
GitHub commit: 2ffca40

This PR will be closed, but please confirm the accuracy of this and reopen if there is more work to be done.

…` 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 WordPress/wordpress-develop#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

…` 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 WordPress/wordpress-develop#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: https://core.svn.wordpress.org/trunk@60246 1a063a9b-81f0-0310-95a4-ce76da25c4cd

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

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

westonruter commented Jun 13, 2025

View reviewed changes

src/wp-includes/deprecated.php Show resolved Hide resolved

Merge branch 'trunk' of https://github.com/WordPress/wordpress-develop …

b84f858

…into fix/trac-62731

westonruter requested a review from joemcgill September 30, 2025 00:30

felixarntz reviewed Oct 2, 2025

View reviewed changes

westonruter and others added 2 commits October 2, 2025 20:06

Allow removal of original print action to prevent enqueueing

67d527c

Co-authored-by: Felix Arntz <flixos90@git.wordpress.org>

Minify CSS

decc5b0

westonruter requested a review from felixarntz October 3, 2025 03:24

Make test_wp_enqueue_img_auto_sizes_contain_css_fix less brittle

81043d1

westonruter mentioned this pull request Oct 3, 2025

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

Closed

felixarntz approved these changes Oct 7, 2025

View reviewed changes

github-actions bot closed this Oct 7, 2025

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!

joemcgill Jun 11, 2025

Choose a reason for hiding this comment

Uh oh!

westonruter Jun 11, 2025

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!

westonruter Jun 12, 2025

Choose a reason for hiding this comment

Uh oh!

westonruter Jun 12, 2025

Choose a reason for hiding this comment

Uh oh!

westonruter Jun 12, 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!

westonruter Jun 12, 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!

westonruter Sep 30, 2025

Choose a reason for hiding this comment

Uh oh!

westonruter Oct 3, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

westonruter commented Sep 30, 2025

Uh oh!

felixarntz Oct 2, 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!

westonruter Oct 3, 2025

Choose a reason for hiding this comment

Uh oh!

westonruter commented Oct 3, 2025

Uh oh!

felixarntz left a comment

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Oct 7, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

westonruter commented Jun 10, 2025 •

edited

Loading

github-actions bot commented Jun 10, 2025 •

edited

Loading

felixarntz Jun 11, 2025 •

edited

Loading

westonruter Jun 12, 2025 •

edited

Loading

westonruter Jun 12, 2025 •

edited

Loading

felixarntz Oct 2, 2025 •

edited

Loading