web-stories-wp: Embed Block Responsiveness

Feature Description

We received a report on Twitter that the embed block wasn’t fully responsive.

WordPress and the WordPress block editor handle responsive embeds in various way.

First of all, they require themes to opt in. But even without that, there is some responsiveness for embeds.

Then there are differences between iframes like the WordPress embeds and embeds with a fixed aspect ratio like YouTube videos.

They do it with this ol’ trick using padding and pseudo elements.

Some code references:

https://github.com/WordPress/gutenberg/blob/4fe937c2188e0677b03e6eb5d2c54292705f6c45/packages/block-library/src/embed/style.scss#L37-L84 https://github.com/WordPress/gutenberg/blob/4857ad58c1241b3d63d21a6880c989b85746c3dc/packages/block-library/src/embed/util.js#L132-L185

Our embed block has one big difference to that: users can set width & height to their liking, so we have to do the aspect ratio calculation on the fly.

This is not really an issue with the embed block itself, but more of a question about how to style the player correctly.

Possible solution

1. Add a new div with the class name wp-block-embed__wrapper around <amp-story-player>
2. Give the player itself the following inline style:

   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   

3. Give the wp-block-embed__wrapper element the following inline style:

   position: relative;
   overflow: hidden;
   padding-top: calc(600 / 360 * 100%);
   height: 0;
   

   where 600 and 360 are the user provided numbers, hence the calc()

This is basically the Gutenberg solution but with support for arbitrary aspect ratios. That’s why we cannot use a pseudo element here, since pseudo elements cannot be styled via inline styling.

Using custom properties for the aspect ratio could be an alternative.

Alternatives Considered

a) Don’t let users edit the height, maintain a fixed aspect ratio b) Solve this in the <amp-story-player> component

Additional Context

Player docs: https://github.com/ampproject/amphtml/blob/master/spec/amp-story-player.md

---

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

Acceptance Criteria

Implementation Brief

• Add new wrapper elements to markup
• Add new external stylesheet for embed block styling -> the only inline style will be for max-width and setting --aspect-ratio
• Use the new Embed class in Admin.php to generate markup for embed block.