Improve User Experience of Left/Right-Aligning Images

[mrwweb]

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

[paaljoachim]

Hi @mrwweb Mark

Could you recheck and update this issue?
Thanks!

[mrwweb]

@paaljoachim Yes. This issue has not changed at all unless a theme explicitly fixes it with a custom solution. The GIF in the original post is still valid.

Tested: Seedlet Theme, WordPress 5.6, Gutenberg 9.8.1

All the related image alignment issues listed in the original post are still open. Other related tickets: #26642, #23974

[paaljoachim]

Hi @mrwweb Mark

Let's see I believe @jasmussen Joen, @tellthemachines Isabel and @youknowriad Riad might want to address this issue.

Thanks!

[jasmussen]

Thanks for the ticket. Here's a fresh GIF:

I think the initial assessment is valid insofar as I'm pretty sure we used to have a max-width at some point exactly to make it more clear that something changed.

But I also believe we moved away from this because it was a very opinionated change to provide out of the box, to simply apply a max-width just because an image is floated. And generally, adjacent efforts have focused on reducing the amount of CSS that the block editor provides by default to as little as possible, so that themes have less to override or change if they don't like that behavior. Here's an example: #15574.

Another response to that, though, is the advent of a separate stylesheet for "opinionated styles", which themers can explicitly opt into, using add_theme_support( 'wp-block-styles' ); in their functions.php file. When a theme opts into that, block styles registered in theme.scss are loaded.

If you like, I could add a max-width for images in that style? To me that feels like the right place to store such a rule as it does provide a good default, but implicitly allows opt out for themes that want to do this themselves. Happy to make such a PR, let me know.

[mrwweb]

If you like, I could add a max-width for images in that style? To me that feels like the right place to store such a rule as it does provide a good default, but implicitly allows opt out for themes that want to do this themselves. Happy to make such a PR, let me know.

That seems like a reasonable way to address this. While custom sites probably will implement their own styles (hopefully carrying straight over from front-end styles some day!), the less block-editor-optimized themes would greatly benefit from the inclusion of this with other opinionated styles. It's a big enough change that a few more voices probably should chime in, but I vote yes.

[jasmussen]

So I took a quick stab at it this morning, assuming it was going to be as easy as it seemed in my head when I wrote the response yesterday. However due to a few things, it turned out to be slightly gnarly.

Primarily, the image block still unfortunately differs a fair bit in the editor, compared to the frontend, markup wise. This is due in part to the fact that we use a ResizableBox component to make it easy to resize the image. That means even the basic CSS I pictured does not affect the editor:

.wp-block-image .align-left {
	max-width: 75%;
}

I could write editor specific CSS in editor.scss, but then it would also load even if you hadn't opted in to opinionated styles. We could make an exception and add some editor specific CSS in the theme.scss — generally bad form as that would also output on the frontend and just be redundant, but theoretically it would work:

.wp-block[data-align=right] > .wp-block-image,
.wp-block[data-align=left] > .wp-block-image,
.wp-block-image .alignright,
.wp-block-image .alignleft {
	max-width: 75%;
}

However due to how the image block is marked up, this in turn was nontrivial. Here's an example:

<div class="wp-block-image">
   <figure class="alignright is-resized">
      <img loading="lazy" src="https://cldup.com/cXyG__fTLN.jpg" alt="Beautiful landscape" width="726" height="484">
      <figcaption>If your theme supports it, you’ll see the “wide” button on the image toolbar. Give it a try.</figcaption>
   </figure>
</div>

For the max-width to make sense, it has to be applied to the figure, else the figcaption will not be centered. But we also allow the image to be manually resized, as you can see above with is-resized. The inner workings of how those widths battle it out are a little fuzzy to me right this morning, but it's one of specificity, and the end result is that if you have both the max-width on the figure, and resized the image manually, the image might break out of the boundaries of the figure, and even overlap text.

All that is to say: this should all still be solvable. But it's a fair bit more difficult to accomplish than I had assumed (sorry!). Which means we kind of have to want it.

Let's leave the ticket open to gather opinions, as you say — I think there's an opportunity to refactor the image block to simplify some of the inner workings, that might also make it easier to address this stuff.