Try to add a min-width to embeds.

[jasmussen]

Embeds are increasingly responsive (as they should be). This branch is very much a "try" branch, in that it simply zeroes out the minimum width of embeds to make the Amazon book embed be responsive. This allows us to create a nice book recommendation grid like this.

However, Amazon themselves include a "Share" modal inside, which is 320px wide and is opacity: 0; (until invoked) instead of display: none;. So even though the embed itself is smart enough to not even show the Share button when there isn't room, that zero opacity share sheet still causes a horizontal scrollbar, which due to the sandboxing of iframes, we cannot fix.

So this PR is more of a discussion point: what can we do with these embeds? I'm not sure we can do that much. Notably Instagram widgets can't be smaller than 326px, so we can't do this in a blanket way either, or it'll just mess up other embeds.

What are your thoughts?

[youknowriad]

One option could be to define a minimum width for each embed (or globally) ourselves, which means if there's not enough space, we'll have horizontal sidebars but outside the iframe.

[jasmussen]

Yes, that would be an option, but like the oembeds, and the icons for each, it means we have to maintain the service for third parties that may change these things at any time. The Amazon share sheet bug might be fixed tomorrow. I could probably take a stab, but are we sure this is something WordPress should take responsibility for?

[kjellr]

Yes, that would be an option, but like the oembeds, and the icons for each, it means we have to maintain the service for third parties that may change these things at any time. The Amazon share sheet bug might be fixed tomorrow. I could probably take a stab, but are we sure this is something WordPress should take responsibility for?

I don't think it is. With the wide range of uncontrollable iframe behavior, we're not going to be able to get this right for everyone. 😕

I think this PR is pretty solid for now. I tested this out with some other embeds, and (while it still appears broken) it seems less broken this way. This also appears to fix problems with the placeholder state:

Before

After

[jasmussen]

Thank you Kjell, appreciate those thoughts.

The placeholder state should ABSOLUTELY have the min-width applied. But I'm increasingly unsure what to do here. I remember us actually adding this min-width because a right-floated Instagram embed would be broken otherwise. So before we merge this, I think we do need some additional thinking around what we can do. Probably some min-width should be present, because people using this won't know it's the vendors fault and not ours, that their floated instagram image is cropped.

I'm waffling, in other words. Not sure how to approach this.

[kjellr]

I remember us actually adding this min-width because a right-floated Instagram embed would be broken otherwise.

Blargh. Yeah, you're right about that. This PR breaks left/right alignment for those:

Maybe for now, we use this PR to apply the min-width to placeholders only, and punt the rest to a future world in which everybody makes their embeds responsive?

[jasmussen]

I think that's a great micro improvement we can do, regardless of any subsequent embed challenges. Great thought Kjell, thanks.

Pushed a fix:

It uses :not — are we okay with that? Otherwise we have to add the min-width: 0; to the placeholder with a great deal of specificity, which I feel is worse.

[kjellr]

Adding the specificity to the placeholder feels okay to me — especially if we're doing it alongside adding the min-width:

@include break-small() {
	min-width: 360px;

	&.components-placeholder {
		min-width: 0;
	}
}

Alternatively: all embeds are assigned a second class that's prefixed with wp-block-embed-* (wp-block-embed-intagram, wp-block-embed-youtube, etc.), so we could do something like this:

@include break-small() {
	&[class^="wp-block-embed-"] {
		min-width: 360px;
	}
}

This avoids :not, but replaces it with a wildcard, so I'm not sure that's better. 😄

I don't have a strong opinion on which of the three options is better, so I'll approve this as is. If you think one of those other options is stronger, feel free to swap it in.

This is a solid, small improvement. Thanks for getting it sorted out. 🙂

[jasmussen]

I like your suggested fix. Let's go with that: