From 418a8f64fef87c4b9915d5a9e3be36c3a7aaa97b Mon Sep 17 00:00:00 2001 From: Joen Asmussen Date: Thu, 14 Feb 2019 07:59:14 +0100 Subject: [PATCH] Try to add a min-width to embeds. (#13590) * 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. --- packages/block-library/src/embed/editor.scss | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/block-library/src/embed/editor.scss b/packages/block-library/src/embed/editor.scss index af0b050764ce77..d26b048b862eb4 100644 --- a/packages/block-library/src/embed/editor.scss +++ b/packages/block-library/src/embed/editor.scss @@ -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 {