From 91aff355363dd19e5248f533338d1228678c9b1b Mon Sep 17 00:00:00 2001
From: Marty Helmick <info@martyhelmick.com>
Date: Tue, 26 Mar 2019 18:03:01 -0400
Subject: [PATCH] set max-width rather than width and reduce specificity

---
 packages/block-library/src/embed/editor.scss |  8 ------
 packages/block-library/src/embed/style.scss  | 29 ++++++++++++--------
 2 files changed, 18 insertions(+), 19 deletions(-)

diff --git a/packages/block-library/src/embed/editor.scss b/packages/block-library/src/embed/editor.scss
index f65a1dfb9b8d08..f84b5b886bd10d 100644
--- a/packages/block-library/src/embed/editor.scss
+++ b/packages/block-library/src/embed/editor.scss
@@ -1,11 +1,3 @@
-// Apply max-width to floated items that have no intrinsic width
-.block-editor-block-list__block[data-type^="core-embed"][data-align="left"] .block-editor-block-list__block-edit,
-.block-editor-block-list__block[data-type^="core-embed"][data-align="right"] .block-editor-block-list__block-edit {
-	// Instagram widgets have a min-width of 326px, so go a bit beyond that.
-	max-width: 360px;
-	width: 100%;
-}
-
 .wp-block-embed {
 	// Remove the left and right margin the figure is born with.
 	margin-left: 0;
diff --git a/packages/block-library/src/embed/style.scss b/packages/block-library/src/embed/style.scss
index c715b8fbb321e3..a9a6437fe4a3cb 100644
--- a/packages/block-library/src/embed/style.scss
+++ b/packages/block-library/src/embed/style.scss
@@ -1,3 +1,18 @@
+// Apply max-width to floated items that have no intrinsic width
+.wp-block[data-align="left"] > [data-type^="core-embed"],
+.wp-block[data-align="right"] > [data-type^="core-embed"],
+.wp-block-embed.alignleft,
+.wp-block-embed.alignright {
+	// Instagram widgets have a min-width of 326px, so go a bit beyond that.
+	max-width: 360px;
+	width: 100%;
+
+	// Unless these have a min-width, they collapse when floated.
+	.wp-block-embed__wrapper {
+		min-width: $break-zoomed-in;
+	}
+}
+
 .wp-block-embed {
 	// Supply caption styles to embeds, even if the theme hasn't opted in.
 	// Reason being: the new markup, figcaptions, are not likely to be styled in the majority of existing themes,
@@ -9,17 +24,9 @@
 	// This rule explicitly sets it, to ensure at least some bottom-margin in the flow.
 	margin-bottom: 1em;
 
-	// Apply max-width to floated items that have no intrinsic width.
-	&.alignleft,
-	&.alignright {
-		// Instagram widgets have a min-width of 326px, so go a bit beyond that.
-		max-width: 360px;
-		width: 100%;
-
-		// override the iframe's static width.
-		iframe {
-			width: 100%;
-		}
+	// Don't allow iframe to overflow it's container.
+	iframe {
+		max-width: 100%;
 	}
 }