tl;dr - If a user left- or right-aligns an image, the editor should assume they want text flowing around it. Therefore, the image needs to be significantly smaller than the content width.

One of the worst experiences of the editor, even going back to the Classic Editor, has be right- and left-aligned images.

In any situation using a large image, applying left- or right-alignment to an image inserted into the editor is a very poor default experience. When the image is as large or almost as large as the content area, the impact of left/right alignment is minimal or nothing.

I suspect many users assume it's a bug. I can't think of any scenario where a user would want to left/right-align an image but not have it be small enough for text to meaningfully flow around it.

Themes can generally fix this with some CSS, but it feels like this needs to be better out of the box.

Here's the image summarized in a GIF. This is WordPress 5.4 with Twenty Nineteen:

Describe the solution you'd like

Here are three ideas:

1. Automatically set an image to size "Medium" when it is right- or left-aligned.
   • Pros: Would work more often than the current behavior. Even if user had to change the image size again, they normally have to change it now anyway.
   • Cons: May surprise user. Still won't work all the time when Medium size is close to content width.
2. Apply some default easy-to-override CSS, that limits width of right- and left-aligned images.*
   • Pros: Pretty much guaranteed to work. Not any harder to override than it is to fix the current bad default experience.
   • Cons: Visual image size decoupled from selected image size. Adds more default CSS. Does not change the src attribute of the image so could lead to increased filesize downloads in some browsers.
3. Apply inline width and height attributes to the img that are based on something like 45% of $content_width.
   • Pros: Easy to override with CSS. width/height attributes are good for responsive images and providing aspect ratio info for browsers to improve layout performance.
   • Cons: Visual image size decoupled from selected image size.

In an ideal world, probably all three of these options are combined into one where:

• CSS ensures a good visual image size
• width/height attributes are provided for better browser and network performance
• The closest-to-visually-displayed size (rounding up) is automatically set in the Image Size field.

* Example CSS:

@media (min-width: 768px) {
    .wp-block-image .alignright,
    .wp-block-image .alignleft {
        max-width: 45%;
    }
}

This gets a little hairy with nested image blocks—for instance an image in one of 3+ columns. However, I still think the assumed user expectation is right: right/left alignment is for text-wrapping. If that is true, then I think this proposal would still work and would be drastically better than the current experience.

Other relevant image size + alignment tickets: #6131, #6177, #12044