Dara: Images centered in Gutenberg display are aligned to the left

[jamiepalatnik]

Steps to replicate

1. Center an image with a caption in Gutenberg.
2. Preview or publish the page.

Result

When you preview the page, the image appears aligned to the left with a very narrow caption: https://cld.wthms.co/UiQqTv

Expected

The image should display aligned to center as it appears in the editor.

• User report: #7303077-hc
• Follow-up ticket: #1583213-zen

[laurelfulford]

Thanks for reporting this, @jamiepalatnik!

I can't quite reproduce this issue exactly as described - were you able to? This is what I've done:

1. Create an image block
2. Use a smaller image (which is what appears to be happening in the screenshot).
3. Add a caption.
4. Centre the block.

Both in the preview and in the published page, the image is left aligned (which needs to be fixed) but the caption is full-width:

Just let. me know if I'm missing a step to get the narrow caption - thanks!

[laurelfulford]

I've deployed a fix that addresses the image not being centred in #377, and r51549-wpcom-themes. Once I can reproduce the caption issue, I can take care of that too!

[jamiepalatnik]

I'm still seeing the caption issue when I test. I tried:

1. Create an image block.
2. Use a smaller image.
3. Add a caption.
4. Center the block.

I also tried changing the order:

1. Create an image block.
2. Use a smaller image.
3. Center the block.
4. Add a caption.

In both tries the caption still shows aligned to the left in a narrow column: https://cld.wthms.co/hBO7MT
Test site: https://wpjcp20170718.wordpress.com/center-caption/

[laurelfulford]

Thanks @jamiepalatnik! It was my bad -- it's not happening in Firefox, but once I switch to Chrome, I get it! :) Looking at a fix now!

[laurelfulford]

This should now be fully fixed, and committed in r51550-wpcom-themes! Thanks again for the extra deets, @jamiepalatnik!

[jamiepalatnik]

Awesome, seems to be working for me too. Thanks!