Skip to content

Commit

Permalink
Try to add a min-width to embeds. (#13590)
Browse files Browse the repository at this point in the history
* Try to add a min-width to embeds.

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?

* Make min-width not affect placeholders.

* Change to suggested fix.
  • Loading branch information
jasmussen authored and youknowriad committed Mar 6, 2019
1 parent b892d6a commit 749d108
Showing 1 changed file with 5 additions and 0 deletions.
5 changes: 5 additions & 0 deletions packages/block-library/src/embed/editor.scss
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,11 @@
// Instagram widgets have a min-width of 326px, so go a bit beyond that.
@include break-small() {
min-width: 360px;

// The placeholder should not have this min-width.
&.components-placeholder {
min-width: 0;
}
}

&.is-loading {
Expand Down

0 comments on commit 749d108

Please sign in to comment.