Size Change: -35 B (0%)

Total Size: 1.15 MB

_{compressed-size-action}

Thanks, Joen, for the quick follow-up.

Do you remember if any core themes have manually inserted images?

I'm also going to ping @kjellr and @MaggieCabrera.

I think wp-image- won't affect images like the featured image, but that block already has that rule built-in, so I think this is ok to do this way

Small comment:

Just realized that the proposed selector would only work for images where the first class is the wp-image-{attachment ID} one. This is not usually the case, as seen here, where the alignnone class comes first.

Therefore, it might be better to change the rule to this:

html :where(img[class*="wp-image-"]) {
	height: auto;
	max-width: 50%;
}

Notice the ˆ has been changed to a * so as to look for that string anywhere in the class attribute value instead of just at the beginning of the value.

Good call, fixed 👍 👍

Note that :where doesn't have support in IE, I know we no longer support this browser, but I'm noting this since the CSS here is also used in the published page.

Outside of official support, I'd think it fine to keep as is. It's an extra guard-rail for responsive images, and it's one that many themes keep as part of their reset styles regardless.

@Mamaduka should we land this one? It might be good to start with this one, then we can see if we need to employ the revert instead.

I have a question, when we create block patterns, we usually remove everything related to the image ID since we don't know what it will be for the particular install of each person that will insert the pattern, and that prevents this rule from applying. What would be the best way to go about in those cases?

That's a really good question, @MaggieCabrera. I found this pattern which does so:

<!-- wp:group {"align":"wide"} -->
<div class="wp-block-group alignwide"><!-- wp:image {"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="http://local-wordpress.local/wp-content/themes/twentytwentytwo/assets/images/flight-path-on-gray-a.jpg" alt="Illustration of a bird flying."/></figure>
<!-- /wp:image -->

<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column {"verticalAlignment":"bottom"} -->
<div class="wp-block-column is-vertically-aligned-bottom"><!-- wp:heading {"style":{"typography":{"fontSize":"clamp(3.25rem, 8vw, 6.25rem)","lineHeight":"1.15"}}} -->
<h2 style="font-size:clamp(3.25rem, 8vw, 6.25rem);line-height:1.15"><em>Welcome to<br>the Aviary</em></h2>
<!-- /wp:heading --></div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"bottom","style":{"spacing":{"padding":{"bottom":"6rem"}}}} -->
<div class="wp-block-column is-vertically-aligned-bottom" style="padding-bottom:6rem"><!-- wp:paragraph -->
<p>A film about hobbyist bird watchers, a catalog of different birds, paired with the noises they make. Each bird is listed by their scientific name so things seem more official.</p>
<!-- /wp:paragraph -->

<!-- wp:spacer {"height":"20px"} -->
<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"className":"is-style-outline"} -->
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link">Learn More</a></div>
<!-- /wp:button -->

<!-- wp:button {"className":"is-style-outline"} -->
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link">Buy Tickets</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->

Here's comparative markup for the Image as manually inserted:

<!-- wp:image {"id":654,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="http://local-wordpress.local/wp-content/uploads/2022/01/Photo-1024x768.png" alt="" class="wp-image-654"/></figure>
<!-- /wp:image -->

Would you say the above two examples are representative of the problem or are there other markup types we need to account for?

If the above is representative, instead of this:

html :where(img[class*="wp-image-"]) {
	height: auto;
	max-width: 100%;
}

— we could maybe do this:

html :where(.wp-block-image img),
html :where(img[class*="wp-image-"]) {
	height: auto;
	max-width: 100%;
}

or we could restore this rule, so a duplicate rule exists for the Image Block specifically? If you think that'd work, I'd happy to make a PR for either.

Thanks for having a look @jasmussen ! That's exactly the case I was facing myself. I think both solutions work fine and I don't have a preference. It makes sense to me that the rule is on the block I suppose. That case also has less selectors in play.

Hey, just to add in that I ran into issues with this on a site just now and I think it's relevant to your proposed fix here. The presence of this CSS declaration meant that I was relying on it in a newly-written theme to resize my images to max-width, but that use of the relatively new :where selector does not work on older iOS Safari, so images overflowed the page on those browsers.

I think of this rule as a progressive enhancement, a very soft fallback for when the theme itself doesn't output these rules. That comes with the downside of older browsers not necessarily supporting it.

The problem is, we can't increase the specificity or it has side effects, meaning the main alternative is to remove the fallback and let themes handle this entirely.

In my case - as a theme developer working on a theme this week - I saw the declaration and said "looks like Wordpress does this for me now, neat". Didn't add my own. And then got broken on older browsers.

Yep, unfortunate situation.