Stewart: no spacing between text and right-aligned Youtube embed

[KokkieH]

Quick summary

When right-aligning a Youtube embed, text that wraps around it is completely against the video, making it appear as if the video is obscuring some of the text.

Steps to reproduce

1. Add a Youtube embed block, and set it to right-aligned
2. Add some paragraph blocks below the video. To best observe the issue, set their alignment to Justified

What you expected to happen

For there to be some space between the text content and the video. For example:

What actually happened

There's no space at all between the text and the video:

Context

Reported in the WordPress.org forums at https://wordpress.org/support/topic/youtube-block-overlaps-text/

This appears to be caused by inline CSS targeting a class that's being added dynamically:

If I toggle off that margin-left declaration, there's an appropriate margin between the text and the video.

I'm able to replicate this on a self-hosted site and an Atomic site, but not a simple site. On a simple site, even though that same inline CSS is there, it's a bit different:

So it appears we're doing something on WordPress.com to prevent this issue that's not happening on non-wpcom sites.

I can also replicate the issue on Twenty Twenty-Two, so this doesn't appear to be theme-specific, but reporting it anyway in case there's anything we can do from our end to compensate, at least for our own themes that are affected by this issue:

Searching the Gutenberg repo I found WordPress/gutenberg#39339 which might also help to address this.

Simple, Atomic or both?

Atomic

Theme-specific issue?

It appears to be a Gutenberg issue rather than a theme issue, but from all our block theme I checked only Stewart seems to be affected.

Browser, operating system and other notes

No response

Reproducibility

Consistent

Severity

No response

Available workarounds?

No but the platform is still usable

Workaround details

Because the inline CSS that's being generated uses !important there's no way to override it. It also doesn't appear to work to add custom CSS to change padding or margins on the wrapping paragraph blocks either.

[Robertght]

I cannot replicate this issue anymore and with Twenty Twenty-Two it seems there are other issues going on:

I'm closing this for now, but please reopen if other reports emerge.

[KokkieH]

@Robertght I can still replicate. See https://coresandbox.mystagingwebsite.com/2022/04/06/youtube-embed/

I can also still replicate on my Atomic site at https://atomic.kokkieh.blog/2022/04/06/youtube-embed/

Did you make sure to test the self-hosted version of the theme?

[KokkieH]

BTW, I'd managed to figure out a workaround - adding the video embed inside a group block mitigates the issue, but that shouldn't be necessary, as we've clearly figured out a way to prevent this on WordPress.com Simple sites.

[Robertght]

Thank you for the ping!

It looks like this is a situation when Gutenberg is disabled. This is why the issue is not present on a Simple site or an AT site with the plugin active.