Make WordPress Core

Opened 2 years ago

Closed 2 years ago

#53111 closed defect (bug) (worksforme)

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

Reported by: hage's profile hage Owned by:
Milestone: Priority: normal
Severity: normal Version:
Component: Editor Keywords:
Focuses: Cc:

Description

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

Attachments (2)

twenty_twenty_gutenberg_image_issue.jpg (86.6 KB) - added by hage 2 years ago.
Gutenberg activated
twenty_twenty_without_gutenberg_activated.jpg (85.6 KB) - added by hage 2 years ago.
Gutenberg deactivated

Download all attachments as: .zip

Change History (9)

@hage
2 years ago

Gutenberg activated

@hage
2 years ago

Gutenberg deactivated

#2 @sabernhardt
2 years ago

  • Component changed from General to Editor

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.

#3 @hage
2 years ago

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

Last edited 2 years ago by hage (previous) (diff)

#4 @youknowriad
2 years ago

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?

#5 @sabernhardt
2 years ago

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.

#6 @hage
2 years ago

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

https://i.imgur.com/eIM9TNk.png

#7 @sabernhardt
2 years ago

  • Milestone Awaiting Review deleted
  • Resolution set to worksforme
  • Status changed from new to closed

Thanks for confirming that it works!

Note: See TracTickets for help on using tickets.