Issue with centered images when using Gutenberg Plugin und theme twenty twenty

[hage]

On a development environment we have noticed after a message in the German support forum that when activating the plugin Gutenberg (version 10.5.0) a post with centered images are no longer displayed correctly. This also applies to videos. In both cases the images are shown on the left margin.
​https://i.imgur.com/EvArodc.png

[hage]

Gutenberg activated

[hage]

Gutenberg deactivated

[hage]

Please see here: ​https://de.wordpress.org/support/topic/ausrichtung-der-bild-bloecke-nach-gutenberg-update/

[sabernhardt]

Hi @hage and thanks for the report!

The Gutenberg plugin recently changed the image block margin from only the bottom to all directions:

.wp-block-image {
    margin: 0 0 1em;
}

Twenty Twenty-One has styles to override the zero side margins, but Twenty Twenty does not (perhaps similar themes would have the same problem).

We can move the report to GitHub if it's not there already.

[hage]

Hi @sabernhardt
thanks a lot - yes, feel free to move the report to github.

[youknowriad]

Hey there! tried reproducing the issue here, I haven't been able to get a broken state so far? Do you have an example markup to test with?

[sabernhardt]

Last month, I was able to reproduce with the image block, center aligned, with Gutenberg 10.5.2 and Twenty Twenty. However, it seems I have no problems with 10.5.3 or 10.5.4 today viewing the same post.

The image block was an immediate child of entry-content (not inside a group or column). So I don't know how the following could not override the .wp-block-image styles weeks ago because it properly applies today:

.entry-content > * {
    margin-left: auto;
    margin-right: auto;
}

In case this still is a problem somehow but I'm not testing it correctly now, the pull request that set zero side margins was ​29517.

[hage]

this also seems to work here now (Gutenberg Version 10.5.4 and WordPress 5.7.1) using Twenty Twenty:

[sabernhardt]

Thanks for confirming that it works!