Make WordPress Core

#49600 closed defect (bug) (fixed)

Twenty Twenty: Resized images are centered inside the editor (with no alignment set) since WordPress 5.4

Reported by: dianeco Owned by: ianbelanger
Milestone: 5.5 Priority: normal
Severity: normal Version: 5.3
Component: Bundled Theme Keywords: has-patch good-first-bug commit
Focuses: css Cc:


Until WordPress 5.3.2, resized images were left-aligned in the editor when no alignment was set. In WP 5.4 (tested with RC1), resized images in the editor are centered while they are correctly left-aligned on the front-end. The following lines in editor-style-block.css are causing this issue: https://github.com/WordPress/WordPress/blob/master/wp-content/themes/twentytwenty/assets/css/editor-style-block.css#L1063-L1065

.editor-styles-wrapper .wp-block-image.is-resized {
	margin-left: auto;
	margin-right: auto;

I'm not sure what these lines are for. With WP 5.3, they were overridden by WordPress core, which is why it was working.

Attachments (1)

49600.diff (974 bytes) - added by ianbelanger 21 months ago.
Removes left and right margin: auto; to fix alignment in the editor.

Download all attachments as: .zip

Change History (8)

#1 @ianbelanger
21 months ago

  • Keywords needs-patch added
  • Version changed from trunk to 5.3.2

21 months ago

Removes left and right margin: auto; to fix alignment in the editor.

#2 @ianbelanger
21 months ago

  • Keywords has-patch needs-testing good-first-bug added; needs-patch removed
  • Milestone changed from Awaiting Review to 5.5

#3 @JavierCasares
20 months ago

I just tested and have the same problem... I get the image centered in the editor.

So, I just checked and find that the class adds a

  display: table;

when is resized, and this is what's causing the centered thing. If you disable this "display: table" works...

#4 @ianbelanger
20 months ago

  • Version changed from 5.3.2 to 5.3

Hey @JavierCasares, removing display: table causes the caption to no longer be the correct width. Could you test my patch and see if that fixes the issue for you? Thanks

#5 @JavierCasares
19 months ago

Hello @ianbelanger

I'm testing that patch, and I thing it does not what should do... :(

Block editor + text (WP 5.5 + 2020 1.2) (@ admin)


Block editor + text (WP 5.5 + 2020 1.2) (@ post)


Block editor w/o text (WP 5.5 + 2020 1.2) (@ admin)


Block editor w/o text (WP 5.5 + 2020 1.2) (@ post)


Also, I tried with Gutenberg plugin and also does strange things.

#6 @ianbelanger
19 months ago

  • Keywords commit added; needs-testing removed
  • Owner set to ianbelanger
  • Status changed from new to reviewing

Thanks for testing @JavierCasares. This patch is to fix images in the editor that have no alignment set and have been resized. In my testing, it does work as intended in the editor. The last image you show is a known issue.

#7 @ianbelanger
19 months ago

  • Resolution set to fixed
  • Status changed from reviewing to closed

In 47613:

Bundled Themes: Twenty Twenty resized images are centered inside the editor (with no alignment set) since WordPress 5.4.

Fixes the image alignment issue by removing margin-left: auto; and margin-right: auto; from .editor-styles-wrapper .wp-block-image.is-resized.

Props dianeco, JavierCasares.
Fixes #49600.

Note: See TracTickets for help on using tickets.