[Block Themes] By default, images inserted from the Classic editor flow offscreen

[kjellr]

By default, Images that are inserted by the Classic editor can easily flow offscreen. Traditional themes tend to have CSS that prevents this, but block themes don't by default.

To reproduce:

1. Activate a block theme (emptytheme or Twenty Twenty-Two for example)
2. Activate the Classic Editor plugin.
3. In a new post, add an image. Choose the "Large" (or Full) size.
4. Preview the post in the front end, note that the image is not bound by any max-width rules.

[jasmussen]

Great ticket, thank you, I've managed to reproduce, and here's some test content that doesn't require you to install the classic editor:

<!-- wp:paragraph -->
<p>Non clasic:</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":525,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="http://local-wordpress.local/wp-content/uploads/2021/12/flight-path-on-gray-a.jpeg" alt="" class="wp-image-525"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Classic:</p>
<!-- /wp:paragraph -->

<p><img class="alignnone wp-image-525 size-full" src="http://local-wordpress.local/wp-content/uploads/2021/12/flight-path-on-gray-a.jpeg" alt="" width="2100" height="994"></p>

This is the result:

It's a tricky one, because I'm not quite sure if we should do anything. Images inserted using the classic editor are not "blocks", and there's an argument to be made that because of this, the intent of the image isn't entirely clear, and therefore the domain of the theme to style. And yes, themes commonly provide something like this to handle that:

img {
	max-width: 100%;
	height: auto;
}

Right now we provide this for Image blocks, like so:

.wp-block-image {
	margin: 0 0 1em 0;

	img {
		height: auto;
		max-width: 100%;
		vertical-align: bottom;
	}
}

That logic scopes the rule very precisely, to only images in the image block. Writing a similar rule to scope a similar rule to a non-block image is not trivial.

The only other idea I have, for which there will be a PR below this comment in a moment, is to remove the responsiveness rule from the Image block, and move it to common.scss. That should target both objects with low specificity, so we avoid complex rules. But it does add more boilerplate CSS, which is not always wanted. Hopefully the PR is a great way to test this idea, though.