Potential fix for embed space: move styles to theme.scss

This PR fixes #10109. But it does so in a semi-nuclear way, by removing the responsiveness by default, and making it something a theme author has to opt into by opting into Gutenberg "opinionated" styles. This might be the solution we go with, hence this PR, but I would love for us to consider it a "Plan B" while we explore better solutions.
WordPress · Sep 24, 2018 · a69b089 · a69b089
1 parent fd9bfa5
commit a69b089
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 55 deletions.
diff --git a/packages/block-library/src/embed/style.scss b/packages/block-library/src/embed/style.scss
@@ -14,59 +14,4 @@
 	figcaption {
 		@include caption-style();
 	}
-
-	// Add responsiveness to common aspect ratios.
-	&.wp-embed-aspect-21-9 .wp-block-embed__wrapper,
-	&.wp-embed-aspect-18-9 .wp-block-embed__wrapper,
-	&.wp-embed-aspect-16-9 .wp-block-embed__wrapper,
-	&.wp-embed-aspect-4-3 .wp-block-embed__wrapper,
-	&.wp-embed-aspect-1-1 .wp-block-embed__wrapper,
-	&.wp-embed-aspect-9-16 .wp-block-embed__wrapper,
-	&.wp-embed-aspect-1-2 .wp-block-embed__wrapper {
-		position: relative;
-
-		&::before {
-			content: "";
-			display: block;
-			padding-top: 50%; // Default to 2:1 aspect ratio.
-		}
-
-		iframe {
-			position: absolute;
-			top: 0;
-			right: 0;
-			bottom: 0;
-			left: 0;
-			width: 100%;
-			height: 100%;
-		}
-	}
-
-	&.wp-embed-aspect-21-9 .wp-block-embed__wrapper::before {
-		padding-top: 42.85%; // 9 / 21 * 100
-	}
-
-	&.wp-embed-aspect-18-9 .wp-block-embed__wrapper::before {
-		padding-top: 50%; // 9 / 18 * 100
-	}
-
-	&.wp-embed-aspect-16-9 .wp-block-embed__wrapper::before {
-		padding-top: 56.25%; // 9 / 16 * 100
-	}
-
-	&.wp-embed-aspect-4-3 .wp-block-embed__wrapper::before {
-		padding-top: 75%; // 3 / 4 * 100
-	}
-
-	&.wp-embed-aspect-1-1 .wp-block-embed__wrapper::before {
-		padding-top: 100%; // 1 / 1 * 100
-	}
-
-	&.wp-embed-aspect-9-6 .wp-block-embed__wrapper::before {
-		padding-top: 66.66%; // 6 / 9 * 100
-	}
-
-	&.wp-embed-aspect-1-2 .wp-block-embed__wrapper::before {
-		padding-top: 200%; // 2 / 1 * 100
-	}
 }
diff --git a/packages/block-library/src/embed/theme.scss b/packages/block-library/src/embed/theme.scss
@@ -0,0 +1,56 @@
+.wp-block-embed {
+	// Add responsiveness to common aspect ratios.
+	&.wp-embed-aspect-21-9 .wp-block-embed__wrapper,
+	&.wp-embed-aspect-18-9 .wp-block-embed__wrapper,
+	&.wp-embed-aspect-16-9 .wp-block-embed__wrapper,
+	&.wp-embed-aspect-4-3 .wp-block-embed__wrapper,
+	&.wp-embed-aspect-1-1 .wp-block-embed__wrapper,
+	&.wp-embed-aspect-9-16 .wp-block-embed__wrapper,
+	&.wp-embed-aspect-1-2 .wp-block-embed__wrapper {
+		position: relative;
+
+		&::before {
+			content: "";
+			display: block;
+			padding-top: 50%; // Default to 2:1 aspect ratio.
+		}
+
+		iframe {
+			position: absolute;
+			top: 0;
+			right: 0;
+			bottom: 0;
+			left: 0;
+			width: 100%;
+			height: 100%;
+		}
+	}
+
+	&.wp-embed-aspect-21-9 .wp-block-embed__wrapper::before {
+		padding-top: 42.85%; // 9 / 21 * 100
+	}
+
+	&.wp-embed-aspect-18-9 .wp-block-embed__wrapper::before {
+		padding-top: 50%; // 9 / 18 * 100
+	}
+
+	&.wp-embed-aspect-16-9 .wp-block-embed__wrapper::before {
+		padding-top: 56.25%; // 9 / 16 * 100
+	}
+
+	&.wp-embed-aspect-4-3 .wp-block-embed__wrapper::before {
+		padding-top: 75%; // 3 / 4 * 100
+	}
+
+	&.wp-embed-aspect-1-1 .wp-block-embed__wrapper::before {
+		padding-top: 100%; // 1 / 1 * 100
+	}
+
+	&.wp-embed-aspect-9-6 .wp-block-embed__wrapper::before {
+		padding-top: 66.66%; // 6 / 9 * 100
+	}
+
+	&.wp-embed-aspect-1-2 .wp-block-embed__wrapper::before {
+		padding-top: 200%; // 2 / 1 * 100
+	}
+}
diff --git a/packages/block-library/src/theme.scss b/packages/block-library/src/theme.scss
@@ -1,4 +1,5 @@
 @import "./code/theme.scss";
+@import "./embed/theme.scss";
 @import "./preformatted/theme.scss";
 @import "./pullquote/theme.scss";
 @import "./quote/theme.scss";