WordPress.org

Make WordPress Core

Opened 4 months ago

Closed 7 weeks ago

Last modified 6 weeks ago

#54076 closed defect (bug) (reported-upstream)

Twenty Twenty: image not centered

Reported by: damienaa Owned by:
Milestone: Priority: normal
Severity: normal Version: 5.8
Component: Bundled Theme Keywords: good-first-bug has-patch 2nd-opinion
Focuses: css, template Cc:

Description

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!

Attachments (1)

centered-image-2020.PNG (46.7 KB) - added by muhammadfaizanhaidar 4 months ago.
center block image css

Download all attachments as: .zip

Change History (21)

#1 @costdev
4 months ago

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?

Last edited 4 months ago by costdev (previous) (diff)

#2 @sabernhardt
4 months ago

  • Component changed from Themes to Bundled Theme
  • Keywords needs-patch good-first-bug added
  • Milestone changed from Awaiting Review to 5.8.2

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

#3 @costdev
4 months ago

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

#4 @mukesh27
4 months ago

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

#5 @sabernhardt
4 months ago

  • Milestone changed from 5.8.2 to 5.9

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

#6 @muhammadfaizanhaidar
4 months ago

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

#7 @sabernhardt
4 months ago

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

This ticket was mentioned in PR #1706 on WordPress/wordpress-develop by MuhammadFaizanHaidar.


4 months ago

  • Keywords has-patch added; needs-patch removed

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
4 months ago

center block image css

#9 in reply to: ↑ description @themearts
3 months ago

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.

#10 @audrasjb
8 weeks ago

  • Keywords needs-testing added

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

This ticket was mentioned in Slack in #core by audrasjb. View the logs.


8 weeks ago

#12 @audrasjb
8 weeks ago

  • Keywords reporter-feedback added

This ticket was mentioned in Slack in #core-test by boniu91. View the logs.


7 weeks ago

This ticket was mentioned in Slack in #core-test by dariak. View the logs.


7 weeks ago

#15 follow-up: @sabernhardt
7 weeks ago

  • Keywords 2nd-opinion added

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

#16 @audrasjb
7 weeks ago

@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…

#17 in reply to: ↑ 15 @meteor1ecwid
7 weeks ago

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!

This ticket was mentioned in Slack in #core-test by boniu91. View the logs.


7 weeks ago

#19 @sabernhardt
7 weeks ago

  • Keywords needs-testing reporter-feedback removed
  • Milestone 5.9 deleted
  • Resolution set to reported-upstream
  • Status changed from new to closed

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

#20 @meteor1ecwid
6 weeks ago

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,

Last edited 6 weeks ago by meteor1ecwid (previous) (diff)
Note: See TracTickets for help on using tickets.