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;
}

[muhammadfaizanhaidar]

@sabernhardt I would love to contribute to this ticket.
I would have to replace following css
.wp-block-image.is-resized {

margin-right: auto;
margin-left: auto;

}
in wp-content/themes/twentytwenty/style.css:1252
& in wp-content/themes/twentytwenty/style-rtl.css:1245
With
body .wp-block-image,
.wp-block-image.is-resized {

margin-left: auto;
margin-right: auto;

}

Thanks for help.

[sabernhardt]

@muhammadfaizanhaidar Thanks for offering to help! I noticed you already know how to ​create a pull request.

The margin properties can stay in their current sequence, but yes, the selector change would need to be made in the RTL stylesheet as well.

I think we still need to determine whether that proposed edit is a good way to handle this, and having a PR/patch to test it could help.

Updated selector in wp-content/themes/twentytwenty/style.css:1251
wp-content/themes/twentytwenty/style-rtl.css:1245 to center images.

Trac ticket: https://core.trac.wordpress.org/ticket/54076

[muhammadfaizanhaidar]

center block image css

[themearts]

Replying to damienaa:

Hello,

I looked at the ​https://damien.cool/un-cheesecake-facile. I don't see the image being uncentered. Can you please tell me more about it? Thanks.

[audrasjb]

Hello,

I tried to reproduce the issue but it looks like it works fine on my side.
In the following video, I inserted an image, then I resized it to a small one, then I make it centered. Result: the image is centered on front-end.
​https://gyazo.com/e07cdac04583b9a2a1529277fbed5194

Could you please clarify how to reproduce the issue?
Thanks

[sabernhardt]

I do not think I have been able to reproduce this without a plugin. So it's probably not a core bug, though it may be worth fixing anyway because it involves core styles.

In this case, the problem apparently is caused by the Ecwid Shopping Cart plugin listing the parent stylesheet as a dependency of their theme-specific styles. This puts the Twenty Twenty style.css before the wp-block-library stylesheet.

(I don't recommend making the block stylesheet a dependency for the main theme stylesheet, since sites using the Classic Editor may dequeue the block styles.)

[audrasjb]

@sabernhardt Is there anything we can do for this kind of use case (making block stylesheet a dependency of the theme main style.css file)? I don't see any way to prevent this _doing_it_wrong behavior…

[meteor1ecwid]

Hi there!

Ilnur from Ecwid team here.

Thanks for your research and comment. I reproduce the problem with our plugin.

@damienaa We will try to fix this issue in the next release. Feel free to ask me if you have any questions.

Appreciate it!

[sabernhardt]

@meteor1ecwid Thanks for your feedback!

I think the 'wp-block-library' margin could cause a similar problem in another way, but I'm inclined to close the Twenty Twenty bug since the plugin will be changed and I am not aware of any other situations with the theme.

Twenty Twenty can work with Classic Editor, so sites should be able to dequeue the 'wp-block-library' styles when they are not using it. However, adding that stylesheet as a dependency for blocks.css in Twenty Twelve to Twenty Seventeen might help with those themes (#45741).

[meteor1ecwid]

Hi @damienaa!

Thank you for your report about this problem. We've released a new version 6.10.16 of our plugin with a fix for this issue.

Regards,