Aligning Instagram and Twitter embeds to center does not center the embed

[susanjanec]

Steps to reproduce

1. Starting at URL: https://susanjanewptestsite12345.blog/testing-centerting-ig-twitter/
2. When centering the Instagram and Twitter links as an Instagram and Twitter block, it does not center. You will see on my test post the alignment of each block Left, Center, Right.
3. The left and right alignment for the block appears to work fine, but the Center alignment does not seem to work - it is still aligned to the Left but looks a bit larger than the Left and Right aligned blocks.

What I expected

The Instagram and Twitter blocks would align in the center.

What happened instead

The Instagram and Twitter blocks aligned to the left and looks slightly larger

Browser / OS version

Chrome / Mac OS High Sierra v 10.13.6

Screenshot / Video

N/A

Context / Source

Reported in 2562009-zen

[kriskarkoski]

I can confirm this issue is still present on Gutenberg 7.7.1 that we're prepping to release. I tested on .org elsewhere and centered was the only alignment to work there, with left and right causing the embeds to be overlayed by the comment area. I've added this to the Gutenberg board though to hopefully get it some attention.

[tbradsha]

Same issue in 17765340-hc/2880367-zen.

A CSS fix for Twitter blocks (h/t @scosgro):

.twitter-tweet {
    margin: 0 auto;
}

[philnick206]

Another report here: #21323357-hc

[cathymcbride]

This is core issue: WordPress/gutenberg#20515

[druesome]

Another report: #24335419-hc

[synora]

@cathymcbride 👋 This comment says the functionality has been removed in core and also suggested a plugin that resolved this issue.

Since that issue is closed, can we close this one as well?

[cathymcbride]

@synora Yes. Let's.

[carinapilar]

I'm not sure why this was closed, it also happens with Twitter embeds, which isn't related to the other GH issue.

The Center alignment option isn't working, and it seems that the only workaround is using CSS, which won't be available on Free and Personal sites. To replicate this, you can add a Twitter link to a page, and try to change its alignment using the following options on the block:

I got a new report here: https://wordpress.com/pt-br/forums/topic/publicacoes-5

[jartes]

Had the same issue with a WordPress embed on 34345967-hc

The following CSS code fixed the issue:

.wp-block-embed.is-type-wp-embed {
  width: fit-content;
}

[Greatdane]

Confirmed. Aligning right causes more issues;

[xavibenjamin]

Tackling this issue first 😄

[carinapilar]

Another case on the forums here: https://wordpress.com/pt-br/forums/topic/redes-sociais-2

[github-actions]

Support References

This comment is automatically generated. Please do not edit it.

• 2562009-zen
• 2880367-zen
• 7366108-zen

[cecilearkay]

Another report in 7366108-zen