Make WordPress Core

Opened 3 years ago

Closed 3 years ago

#53809 closed defect (bug) (fixed)

Twenty Twenty-One default image alignment in editor

Reported by: ashfame's profile ashfame Owned by: sergeybiryukov's profile SergeyBiryukov
Milestone: 5.9 Priority: normal
Severity: trivial Version:
Component: Bundled Theme Keywords: has-patch commit
Focuses: css Cc:


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)

patch-53809.diff (480 bytes) - added by ashfame 3 years ago.
53809.1.diff (71.3 KB) - added by sabernhardt 3 years ago.

Download all attachments as: .zip

Change History (12)

3 years ago

#1 @ashfame
3 years ago

  • Keywords has-patch dev-feedback needs-testing added; needs-patch removed

3 years ago

#2 @sabernhardt
3 years ago

  • Keywords dev-feedback removed
  • Milestone changed from Awaiting Review to 5.9

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.

.wp-block-image > div {
	text-align: center;

#3 @ashfame
3 years ago

Sure, sounds good!

#5 @annezazu
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:

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 @sabernhardt
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.)

#7 @sabernhardt
3 years ago

For testers: make sure the image is narrower than its container.

#8 @sabernhardt
3 years ago

Testing procedure

Before applying patch:

  1. Activate Twenty Twenty-One (this may seem obvious, but I needed to double-check that I'm talking about the correct theme here).
  2. Deactivate all plugins, unless you want to test with the latest Gutenberg.
  3. Create a new post.
  4. Add an image block.
  5. Upload or select an image that is narrower than the block container. The 80-pixel WordPress logo should fit.
  6. 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.
  7. 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.
  8. Save or publish the post.
  9. Visit the post (either published or draft preview) to notice how the image is centered there.

After confirming the discrepancy:

  1. Apply the patch and clear cache.
  2. Open the saved post in the editor.
  3. 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.

Last edited 3 years ago by sabernhardt (previous) (diff)

#9 @poena
3 years ago

  • Keywords commit added; needs-testing removed

I have followed the testing instructions and can confirm that the patch works. Both with and without Gutenberg 11.9. Tested in multiple browsers on Windows.

#10 @SergeyBiryukov
3 years ago

  • Owner set to SergeyBiryukov
  • Resolution set to fixed
  • Status changed from new to closed

In 52142:

Twenty Twenty-One: Correct default image alignment in the editor.

By default, the theme centers images on the front end when no alignment is selected. In the editor, however, images were aligned to the left side of the block.

This commit ensures that the alignment in the editor matches the one on the front end.

Props sabernhardt, ashfame, poena, annezazu.
Fixes #53809.

Note: See TracTickets for help on using tickets.