Embed Blocks (YouTube, Vimeo): Extra space on top

[laurelfulford]

Bug Description

If you embed a YouTube, Vimeo etc. block, it has a large gap at the top when "Resize for smaller devices" is turned on.

It looks like this was previously fixed in #1683; best I can tell, the issue is that similar styles are now attached to wp-has-aspect-ratio class, as of Gutenberg 8.2:

.wp-embed-responsive .wp-has-aspect-ratio .wp-block-embed__wrapper::before {
   content: "";
   display: block;
   padding-top: 50%; 
}

Expected Behaviour

That the gap wouldn't be there.

This can be worked around for now by toggling off "Resize for smaller devices", but since it's the default and the preview looks correct in the editor, it can be easy to miss.

Steps to reproduce

1. Start with a site running the Gutenberg plugin, minimum version 8.2.
2. Add a YouTube or Vimeo block; leave "Resize for smaller devices" on.
3. Publish and view on the front-end.

Screenshots

Additional context

• WordPress version:
• Plugin version: AMP 1.5.3
• Gutenberg plugin version (if applicable): 8.2, 8.2.1
• AMP plugin template mode: Standard
• PHP version:
• OS: OSX
• Browser: Firefox, Chrome
• Device: Mac laptop

---

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

Implementation brief

QA testing instructions

Demo

Changelog entry

[westonruter]

@laurelfulford Would you please test #4813 to confirm it fixes the issue for you?

[laurelfulford]

I can confirm that it fixes the issue for me -- thanks for checking! 🙌