Center aligned image isn't centered in 0.90 (either in editor or on front of site)

[wpfangirl]

Issue Overview

I inserted an image and selected center align, but the image didn't center either in the editor or in the post previw.

Steps to Reproduce (for bugs)

1. Add an image block.
2. Click the button to center-align it.

Expected Behavior

The image should center, the same way it right-aligns and left-aligns (that is, the whole block resizes to fit the image, and centers).

Current Behavior

The block stays full-width, though the image resizes. The image shows inline inline even though the aligncenter class is added to the figure.

[aduth]

This is potentially theme-dependant, caused by the alignment class aligncenter being applied to the figure wrapping the img, not the img itself:

gutenberg/blocks/library/image/index.js

Lines 99 to 104 in 5cc934f

	return (
	<figure className={ align ? `align${ align }` : null }>
	{ href ? <a href={ href }>{ image }</a> : image }
	{ caption && caption.length > 0 && <figcaption>{ caption }</figcaption> }
	</figure>
	);

The recommended styles for .aligncenter perform centering by auto left-and-right margins:

https://codex.wordpress.org/CSS#WordPress_Generated_Classes

In the case of a figure, this will not work because as a block-level element, it already occupies the full width of its container:

When applied to the image though, since the image assigns its own width, it will center itself within:

Possible solutions:

• Avoid using the default aligncenter (and other align) class and instead assign custom classes with styles prescribed by the image block
• Assign aligncenter (and other align) to the img element
  • This may have repercussions on alignment of a caption, if applicable
• Assign width style to figure equal to that of the image

[wpfangirl]

Okay, that applies to the way it looks on the front of the site, but not, one presumes, to the way it looks in the editor. Also, the alignleft and alignright work on the front of the site (if you resize the image), but not the aligncenter. Yet presumably these classes are being applied to the figure rather than the image in all cases.

…

-----Original Message----- From: Andrew Duthie ***@***.*** Sent: Monday, August 28, 2017 12:50 PM To: WordPress/gutenberg ***@***.***> Cc: Sallie Goetsch ***@***.***>; Author ***@***.***> Subject: Re: [WordPress/gutenberg] Center aligned image isn't centered in 0.90 (either in editor or on front of site) (#2548) This is potentially theme-dependant, caused by the alignment class aligncenter being applied to the figure wrapping the img, not the img itself: https://github.com/WordPress/gutenberg/blob/5cc934f11d5ac28efed70d65 7fddda7d4c5cd759/blocks/library/image/index.js#L99-L104 The recommended styles for .aligncenter perform centering by auto left-and- right margins: https://codex.wordpress.org/CSS#WordPress_Generated_Classes In the case of a figure, this will not work because as a block-level element <https://developer.mozilla.org/en-US/docs/Web/HTML/Block- level_elements> , it already occupies the full width of its container: <https://user-images.githubusercontent.com/1779930/29790431-d480fd1c- 8c07-11e7-9563-3e7f17f65ac5.png> When applied to the image though, since the image assigns its own width, it will center itself within: <https://user-images.githubusercontent.com/1779930/29790524- 2e4f1d60-8c08-11e7-988a-10668114508b.png> Possible solutions: * Avoid using the default aligncenter (and other align) class and instead assign custom classes with styles prescribed by the image block * Assign aligncenter (and other align) to the img element * This may have repercussions on alignment of a caption, if applicable — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#2548 (comment)- 325459780> , or mute the thread <https://github.com/notifications/unsubscribe- auth/AOHBjsr71MxcCcQ7H8m_8z90qtcw4zxmks5scxnNgaJpZM4PD59v> . <https://github.com/notifications/beacon/AOHBjmt2pbKRoy5uiTXvqQLGaU 7b9i2Uks5scxnNgaJpZM4PD59v.gif>

[aduth]

Okay, that applies to the way it looks on the front of the site, but not, one presumes, to the way it looks in the editor.

The reason it's not aligned in the editor is because there appears to be nothing operating on the center align style. There are styles to handle the left/right (float) and wide/full (escape bounds) cases, but not center:

gutenberg/blocks/library/image/index.js

Lines 85 to 90 in e3bedc0

	getEditWrapperProps( attributes ) {
	const { align, width } = attributes;
	if ( 'left' === align || 'right' === align || 'wide' === align || 'full' === align ) {
	return { 'data-align': align, 'data-resized': !! width };
	}
	},

Also, the alignleft and alignright work on the front of the site (if you resize the image), but not the aligncenter. Yet presumably these classes are being applied to the figure rather than the image in all cases.

Yes, but left and right alignments use float, not the margins of auto like with center alignment. The floated figure will assume the width of the image.

This doesn't seem predictable though:

You should always set a width on floated items [...] If no width is set, the results can be unpredictable. Theoretically, a floated element with an undefined width should shrink to the widest element within it. This could be a word, a sentence or even a single character - and results can vary from browser to browser.

http://css.maxdesign.com.au/floatutorial/introduction.htm

[youknowriad]

With recent changes, this seems to work as intended in the editor. In the frontend it depends on the theme styles.

[aduth]

Fixed by #4801