Skip to main content
GoodFirstPicks
DashboardIssuesReposLeaderboard

GoodFirstPicks by Leaveitblank © 2026

CreatorRequest a RepoPrivacy PolicyTerms of Service
Improve User Experience of Left/Right-Aligning Blocks | GoodFirstPicks

Improve User Experience of Left/Right-Aligning Blocks

WordPress/gutenberg 11 comments 1mo ago
View on GitHub
mediumopenScope: somewhat clearSkill match: maybeWordPressJavaScriptReact

Why this is a good first issue

Improving image alignment UX requires careful consideration of theme compatibility and user expectations.

AI Summary

The issue highlights a poor user experience with left/right-aligned images in the WordPress editor, where text does not flow around the image effectively. The proposed solutions involve either automatically resizing images or applying default CSS, but both approaches require careful handling to avoid unintended side effects and maintain theme flexibility. The main blocker is ensuring compatibility with various themes and user expectations.

Issue Description

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:

Image block inserted between two paragraphs. Right-aligning the image makes it marginally smaller, but no text wraps around the image.

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 cou

GitHub Labels

[Type] Enhancement[Block] Image[Status] In discussion

Want to work on this?

Claim this issue to let others know you're working on it. You'll earn 10 points when you complete it!

Risk Flags

  • potential theme compatibility issues
  • user experience impact
Loading labels...

Details

Points10 pts
Difficultymedium
Scopesomewhat clear
Skill Matchmaybe
Test Focusedno