Opened 5 years ago
Closed 5 years 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: |
|
Owned by: |
|
---|---|---|---|
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)
Change History (8)
#2
@
5 years ago
- Keywords has-patch needs-testing good-first-bug added; needs-patch removed
- Milestone changed from Awaiting Review to 5.5
#3
@
5 years 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
@
5 years 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
@
5 years 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
@
5 years 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.
Removes left and right
margin: auto;
to fix alignment in the editor.