WordPress.org

Make WordPress Core

Opened 8 months ago

Closed 6 months ago

#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:

Description

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 8 months ago.
Removes left and right margin: auto; to fix alignment in the editor.

Download all attachments as: .zip

Change History (8)

#1 @ianbelanger
8 months ago

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

@ianbelanger
8 months ago

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

#2 @ianbelanger
8 months ago

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

#3 @JavierCasares
6 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

.wp-block-image.is-resized
  display: table;

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

#4 @ianbelanger
6 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
6 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)

https://i.ibb.co/h26jtVk/Screenshot-210.png

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

https://i.ibb.co/sj85NGN/Screenshot-211.png

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

https://i.ibb.co/WGcmc7H/Screenshot-212.png

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

https://i.ibb.co/d0n4xWm/Screenshot-213.png

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

#6 @ianbelanger
6 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
6 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.