Twenty Twenty: image not centered

[damienaa]

Hello,
I updated every theme, every pluggin and WP itself but I cannot fix the "uncentered image" on my website. Could you help?
Here is a link: ​https://damien.cool/un-cheesecake-facile

Thx very much!

[costdev]

Hi @damienaa, thanks for opening this ticket!

This does seem to be an issue with the bundled TwentyTwenty theme.

Linked to this:

wp-content/themes/twentytwenty/style.css:3589
wp-content/themes/twentytwenty/style-rtl.css:3567

.entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide) {
    max-width: 58rem;
    width: calc(100% - 4rem);
}

Adding margin-left: auto; and margin-right: auto; to this block appears to resolve this issue. - See below.

A good first bug perhaps?

[sabernhardt]

@hage reported this on #53111 while the problem was still in the Gutenberg plugin, and the margin seemed to be fixed in the editor.

Twenty Twenty already has auto margins on the left and right for entry-content elements:

.entry-content > * {
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1.25em;
}

However, the block editor (block-library styles) overrides that for image blocks:

.wp-block-image {
    margin: 0 0 1em;
}

​Twenty Twenty-One's selector avoids changing separators and WooCommerce content, so perhaps editing the margin on .wp-block-image would be safer than .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide).

In Twenty Twenty, the side margins are currently auto if the image is resized, and the selector could be adjusted to fit all image blocks:

.wp-block-image.is-resized {
	margin-left: auto;
	margin-right: auto;
}

[costdev]

Adjusting the .wp-block-image.is-resized selector is the safer way forward. Nice one @sabernhardt!

[mukesh27]

Hi there!

In Twenty Twenty, is-resized class added in figure so if we add margin on that element it will not centered the image. To make image as center we should use below CSS.

.wp-block-image.is-resized img {
	margin-left: auto;
	margin-right: auto;
}

[sabernhardt]

The full image block needs to be centered because that has the width and max-width. However, the aligncenter class is on the figure within a wp-block-image div element.

I am having trouble reproducing the lack of a margin on the image block within a fresh 5.8 installation. There, the Twenty Twenty styles are enqueued after the block-library stylesheet, and the auto side margins correctly override the zero. Damien's site enqueues the block-library styles later. So the problem may happen with a plugin.

With the stylesheet order like that, changing .wp-block-image.is-resized to .wp-block-image in Twenty Twenty would not work. Adding a selector with body (or a similar element) might help, if necessary:

body .wp-block-image,
.wp-block-image.is-resized {
	margin-left: auto;
	margin-right: auto;
}