Add centering style also to the theme style output

[jasmussen]

Fixes comment in #5209 (comment).

Previous implementation assumed the theme would handle centering, just like it's traditionally handled alignleft and alignright classes, but since the aligncenter is now applied to the figure element, any theme that uses code like img.aligncenter won't work. Hence this PR.

[aduth]

For images which are resized, the explicit width is assigned to the figcaption, so it won't be properly centered by text-align: center; (since the width of the container itself is restricted). In the theme I'm using (Astra), .aligncenter is styled with display: block; margin-left: auto; margin-right: auto;

It's a bit of a slippery slope to start making these fixes on behalf of themes. How far do we take this? What about themes which have their own .aligncenter (not img-filtered) styles which conflict with the ones we define as the compatibility styles?

[jasmussen]

In general I'd be okay with closing this PR as a "wontfix" and let themes do the work.

However the change to add a figure around an img is somewhat big, and given how basic an element images are, it would be nice if images, floats and centering did not require theme updates. So far we've noted that you don't have to change your theme at all, to make it Gutenberg compatible, though you can opt in to wide alignments.

As such, I'd prefer to update this PR with the suggested code you noted, for images specifically. But regardless, I'm pinging @karmatosed for a decision & thoughts.

[karmatosed]

However the change to add a figure around an img is somewhat big, and given how basic an element images are, it would be nice if images, floats and centering did not require theme updates. So far we've noted that you don't have to change your theme at all, to make it Gutenberg compatible, though you can opt in to wide alignments.

I agree with this and whatever we can do to ease we should. I also agree we don't want to bring too much burden into Gutenberg, it's a balance. However, in this case I feel it's important to add this.

[jasmussen]

@aduth I don't disagree with you — it feels slightly like overstepping, to add these styles. However in stock Twenty Sixteen using Gutenberg, it feels like centering this image, unresized, in Gutenberg should just work:

If I apply your suggested styles, (display: block; margin-left: auto; margin-right: auto;), I get this in the editor:

and thijs on the frontend:

If I add the "text-align center", it works:

It even works if I resize the image:

It also works with resized and unresized floats:

I understand your concern, and pushed your suggested code from Astra as well. I share some of those concerns myself in #5209 (comment), I even created this PR to address the float+caption issue in a different way: #5460

What are your thoughts on how best to proceed?

[aduth]

Let's merge this as-is. I agree figcaption wrapper changes warrant some transitional defaults, also at least scoped to the block.

[jasmussen]

👍 👍 thanks Andrew.