Wp-calypso: Gutenberg: Cannot center-align image on certain themes

[KokkieH]

Steps to reproduce

1. Starting at URL: SITE_URL/wp-admin/post-new.php
2. Add an image block and add an image
3. If the image is full-width, resize it to a smaller size
4. Set alignment to Center-aligned and publish post

What I expected

For the image to be center-aligned in the post

What happened instead

The image is left-aligned. Right-aligning the image works as expected, but selecting center-alignment causes the image to display left-aligned; or more accurate non-aligned as text from a succeeding paragraph block doesn't wrap as it does if the image is set to left-aligned.

Editing the post in the classic editor also indicates the image as non-aligned.

Screenshot / Video

Image in the editor:

Published post:

What I see if I edit the post in the classic editor in WP-Admin:

Viewing the block in HTML mode the class="aligncenter is applied to the image.

I'm not able to replicate this on a self-hosted site, so it appears to be an issue specifically with WordPress.com.

Context / Source

User report in the support forums

[KokkieH]

If I set the image to centered in the classic editor and update, it's correctly centered in the published version, but if I then edit the post in Gutenberg again it gives an invalid content warning:

[supernovia]

Another instance here, and few notes:

• My own Gutenberg instance centers properly
• If I copy the exact code from my Gutenberg instance to .com, it is misaligned on .com
• Old wp-admin gives the figure a width; Gutenberg isn't. If I add a width to the figure, it centers.

Looks like we also add a display: block to the figure, so if we don't give it a width then it's gonna default to 100% and margin: auto won't really apply.

[laurelfulford]

I _think_ the display issues here may both be theme-related.

We've had a couple other reports, with Dara, Baskerville 2, and Manifest, where the issue is that the class .aligncenter has the style display: block, and that messes up the image block. The image block uses display: table, so once display: block overrides that, the styles that handle the centring no longer work.

@KokkieH the user that reported the issue in that thread was using Dara, which we've fixed. Do you happen to remember the other themes you recreated this with?

@supernovia Looking at https://silverwilderness.wordpress.com/2018/11/28/romance-in-ya-is-not-realistic/, I think the issue is coming from these styles in the theme: https://github.com/Automattic/themes/blob/master/libre-2/css/blocks.css#L78-L83. I'm going to make a new issue for that, for us to investigate.

If we can confirm all the themes used for reproducing this issue include some kind of problem styles instead of them coming from WP.com, we can close this issue :)

[KokkieH]

@laurelfulford, my test site where I confirmed this is coincidentally also on Dara, so I did not think to try this on different themes.

In that case, I've had a report in the WordPress.org forums as well, though I wasn't able to replicate this on a self-hosted site with Dara.

[laurelfulford]

Thanks @KokkieH!

In that case, I've had a report in the WordPress.org forums as well, though I wasn't able to replicate this on a self-hosted site with Dara.

Okay, I _think_ that's a good sign (or at least a sign in favour of the problem being a theme thing). The problem code in Dara's case was added with some other Gutenberg-related styles. We've been holding off submitting those updates to WP.org, at least until 5.0 is officially released, to see if we can catch some bugs (like this!) in advance.

[ghost]

In Wordpress 5.01, this happens to me on all my sites where I use Gutenberg. Before upgrading to 5.0, it worked fine. Buttons and images simply do not center.

[desnum]

Another case, on a site with the Baskerville 2 theme:

• When the image is resized and centered in the editor, it shows as left-aligned in the frontend.
• We added display:block; to the CSS as a temporary workaround.
• hc-9976478

[spencerberry]

Attache also has this issue:
https://wordpress.com/theme/attache

This fixes it, but probably not the best route:

.aligncenter{
  text-align: center;
}

[automattic-ian]

Also an issue in https://wordpress.com/theme/professional-business

investigating CSS workaround for now.

[Aurorum]

@automattic-ian I'm not able to reproduce an issue with centre image alignment at any screen ratio with that theme.

By any chance, are you referring to the Sophisticated Business theme? I've proposed a fix for that one at Automattic/themes#648, and it's being tracked at Automattic/themes#646.

[automattic-ian]

@torres126 it appears that I may have been mistaken and that this is a separate issue, it seems to only impact image galleries, not single images, as seen here:

Where you can see the class .aligncenter however the gallery is still pushed to the left.

[Aurorum]

Thanks @automattic-ian! I can reproduce, PR for that issue in Automattic/themes#660.

[katinthehatsite]

Another site that was affected #1885592-zd

[mikeicode]

Another on #1847494-zen with tiled galleries, I provided this CSS to resolve it:

.entry .entry-content > .wp-block-jetpack-tiled-gallery.aligncenter, 
.entry .entry-summary > .wp-block-jetpack-tiled-gallery.aligncenter {
    margin: 0 auto;
}

[Aurorum]

@katinthehatsite @mikeicode Just out of curiosity, which theme(s)?

[mikeicode]

@torres126

Just out of curiosity, which theme(s)?

Professional Business

[katinthehatsite]

@torres126 For my case, it was theme Veni: https://wordpress.com/theme/veni

[reginabally]

Another issue reported in 1988165-zen for [Port theme](https://wordpress.com/theme/port].

[carinapilar]

I had another report on 12365791-hc where class="size-full wp-image-902 aligncenter" wasn't working on the Classic Editor. I had to add a p tag for the center alignment to work. Site uses the Boardwalk theme.

[aleone89]

Another report in #13689395-hc

Theme - Baskerville 2.

I employed temp solution seen in GH-403

[nathalieflower]

I seem to be having this issue in the October theme. from playing with the css the only way I can get images to centre is at row level and by removing the display:flex, which isn't ideal

[KokkieH]

@nathalieflower I think you might be in the wrong repository. This issue is specifically regarding an issue with the block editor and some specific themes on WordPress.com, and October is not a theme offered on WordPress.com.

It would probably be best to contact support for your theme directly about this, as if it's a theme issue, a fix we apply on WordPress.com won't have any effect on your theme.

[carinapilar]

Another report for the Veni theme, on 15730086-hc.

[michaelswengel]

Same issue here with Sydney.

[michaelswengel]

Just tested on two of my sites running the same versions of everything. Same issue. This needs to be fixed.

[michaelswengel]

Testing further with various themes, this does appear to be a Gutenberg issue, not a theme issue. I can set an image to align right, and it does. Aligning center does nothing. Please fix this.

[Aurorum]

Unless something has changed recently (which I'm pretty sure it hasn't), then this is still a theme issue that generally needs fixing in individual themes. Sydney isn't a theme available on WordPress.com though, and it's probably best to contact the developer of that theme, since any changes to WordPress.com won't have an impact on that.

[michaelswengel]

As I said, I tested multiple themes. Which theme are you using without problems?

[michaelswengel]

I should also specify, this is on a self hosted installation. Two self hosted installations actually.

[Aurorum]

I use the Harmonic theme on WordPress.com. I can test Sydney on a self-hosted site at some point tomorrow to see if I can reproduce it, but for now, virtually no theme seems to still have this issue.

[michaelswengel]

@Aurorum, I don't think it's a theme issue.

I just tested with Twenty Nineteen, SmartTheme, Sydney, Twenty Fifteen, Twenty Seventeen, Twenty Sixteen, OceanWP.

It's not a theme problem.

This is across multiple WP installations. Everything up to date. Various themes.

[michaelswengel]

This is the code of an image that will not center:

<div class="wp-block-image"><figure class="aligncenter"><img src="https://listbootcamp.com/wp-content/uploads/2019/10/email-click-through-rate.png" alt="Example email CTR in GetResponse" class="wp-image-707"/><figcaption>Example email CTR in GetResponse</figcaption></figure></div>

Now, if I add <center></center> tags, it centers. Gutenberg does not center.

[michaelswengel]

Ok. Update. It's not a theme issue, but for me at least it was an Elementor issue. It appears Elementor is overriding Gutenberg's alignment. So I added this CSS:

.elementor .elementor-widget .wp-block-image .aligncenter { margin-left: auto; margin-right: auto; }

That seems to have fixed it for me. So it looks like something Elementor needs to fix.

[carinapilar]

Got another report on 2602696-zen with the Cubic theme.

[italocjs]

Ok. Update. It's not a theme issue, but for me at least it was an Elementor issue. It appears Elementor is overriding Gutenberg's alignment. So I added this CSS:

.elementor .elementor-widget .wp-block-image .aligncenter { margin-left: auto; margin-right: auto; }

That seems to have fixed it for me. So it looks like something Elementor needs to fix.

This has fixed for me too, add this line into "Appearance > Customize > Additional CSS"
i'm using JupiterX theme

[carinapilar]

Got another report on 17773353-hc with the Didi theme, now on a Video block.

[lancewillett]

I've run into this a few times on internal Automattic P2 sites; where the P2 Breathe theme existing CSS doesn't seem to correctly center the image as expected — and also the image caption itself wasn't centered; which should be a basic theme style.

[ianstewart]

@lancewillett I reviewed all our free themes on WP.com and found these issues …

https://github.com/Automattic/themes/issues/1856

[sourourn]

Another one reported here: #15799442-hc
User has a third party theme: logpixiecassidy

When you center align an image, it looks left aligned in the editor but it does display as center align on the front end.

[thesacredpath]

There is a related issue happening in the editor. Reported on site with Independent Publisher 2 and also with Canard. Both are simple sites.

Steps to reproduce

1. Starting at URL: Site > Pages > Add New
2. Add an image block and add an image
3. Set image to medium size
4. Set image for center alignment
5. Resize image larger or smaller using resize handle

What I expect

Image to remain center aligned in editor window and at new size

What happened

Image jumps to left aligned in editor, but if you preview the page or post, it will show correctly as center aligned.

Independent Publisher 2 ticket: 2867721-zen
Canard ticket: 2859492-zen