Opened 3 years ago
Closed 3 years ago
#53809 closed defect (bug) (fixed)
Twenty Twenty-One default image alignment in editor
Reported by: | ashfame | Owned by: | SergeyBiryukov |
---|---|---|---|
Milestone: | 5.9 | Priority: | normal |
Severity: | trivial | Version: | |
Component: | Bundled Theme | Keywords: | has-patch commit |
Focuses: | css | Cc: |
Description
The theme shows image as center aligned on a post/page by default, which is a fine choice to make, but in editor the default alignment is shown as left. It should reflect how its actually going to be.
When explicitly choosing left/right/center alignment it works accordingly as expected.
Attachments (2)
Change History (12)
#5
@
3 years ago
Hi all! While digging into this, I noticed that in Gutenberg 11.7 (one of the versions that will be included in 5.9) there's a new "none" alignment has been added: https://github.com/WordPress/gutenberg/pull/34710
When adding in an image, it's automatically set to "none" now. To me, this makes this patch no longer necessary but curious what you all think in case I missed something :)
#6
@
3 years ago
Twenty Twenty-One centers the image—on the front end—when no alignment is selected. ("None" was a silent default option before that pull request.)
#8
@
3 years ago
Testing procedure
Before applying patch:
- Activate Twenty Twenty-One (this may seem obvious, but I needed to double-check that I'm talking about the correct theme here).
- Deactivate all plugins, unless you want to test with the latest Gutenberg.
- Create a new post.
- Add an image block.
- Upload or select an image that is narrower than the block container. The 80-pixel WordPress logo should fit.
- Open the block alignment options from the block toolbar to view the choices, but do not select any of them. Without the Gutenberg plugin, the first option should have a focus outline but none of them selected (with inverted colors on the icon). Recent Gutenberg versions should have a "None" option focused and selected.
- Observe that the image aligns to the left side of the block (or to the right if you are using an RTL language). If the alignment is not obvious, try adding a caption.
- Save or publish the post.
- Visit the post (either published or draft preview) to notice how the image is centered there.
After confirming the discrepancy:
- Apply the patch and clear cache.
- Open the saved post in the editor.
- Observe that the image is now centered in the block, as it is on the front-end.
You could also test an image block in the widget editor.
Thanks for the report and patch!
Because
.wp-block-image > div
was necessary for an earlier version of the block editor (and might be again), I prefer adding the.wp-block-image
selector instead of replacing the other.