Revert img, iframe styles to block editor container scope (#18287)

* Revert img, iframe styles to block editor container scope

* Block Library: Remove all vanilla styles

* Block Library: Restore non-theme front-end margins for figcaption

assets/stylesheets/_mixins.scss

@@ -332,6 +332,11 @@
  */
 
 // These are additional styles for all captions, when the theme opts in to block styles.
+@mixin caption-style() {
+	margin-top: 0.5em;
+	margin-bottom: 1em;
+}
+
 @mixin caption-style-theme() {
 	color: $dark-gray-500;
 	font-size: $default-font-size;

packages/block-library/src/audio/style.scss

@@ -1,4 +1,11 @@
 .wp-block-audio {
+	// Supply caption styles to audio blocks, 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,
+	// so we supply the styles so as to not appear broken or unstyled in those themes.
+	figcaption {
+		@include caption-style();
+	}
+
 	// Show full-width when not aligned.
 	audio {
 		width: 100%;

packages/block-library/src/embed/style.scss

@@ -9,6 +9,12 @@
 }
 
 .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,
+	// so we supply the styles so as to not appear broken or unstyled in those.
+	figcaption {
+		@include caption-style();
+	}
 	// The embed block is in a `figure` element, and many themes zero this out.
 	// This rule explicitly sets it, to ensure at least some bottom-margin in the flow.
 	margin-bottom: 1em;

packages/block-library/src/image/style.scss

@@ -54,6 +54,13 @@
 		margin-left: auto;
 		margin-right: auto;
 	}
+
+	// Supply caption styles to images, 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,
+	// so we supply the styles so as to not appear broken or unstyled in those themes.
+	figcaption {
+		@include caption-style();
+	}
 }
 
 // Variations

packages/block-library/src/style.scss

@@ -170,27 +170,3 @@
 	/*rtl:ignore*/
 	text-align: right;
 }
-
-/**
- * Vanilla Block Styles
- * These are base styles that apply across blocks, meant to provide a baseline.
- * They are applied both to the editor and the theme, so we should have as few of these as possible.
- * Please note that some styles are stored in packages/editor/src/editor-styles.scss, as they pertain to CSS bleed for the editor only.
- */
-
-// Caption styles.
-// Supply these even if the theme hasn't opted in, because the figcaption element is not likely to be styled in the majority of existing themes.
-// By providing a minimum of margin styles, we ensure it doesn't look broken or unstyled in those themes.
-figcaption {
-	margin-top: 0.5em;
-}
-
-// Apply some base styles to blocks that need them.
-img {
-	max-width: 100%;
-	height: auto;
-}
-
-iframe {
-	width: 100%;
-}

packages/block-library/src/video/style.scss

@@ -16,4 +16,11 @@
 	&.aligncenter {
 		text-align: center;
 	}
+
+	// Supply caption styles to videos, 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,
+	// so we supply the styles so as to not appear broken or unstyled in those themes.
+	figcaption {
+		@include caption-style();
+	}
 }

packages/edit-post/src/style.scss

@@ -81,6 +81,15 @@ body.block-editor-page {
 		}
 	}
 
+	img {
+		max-width: 100%;
+		height: auto;
+	}
+
+	iframe {
+		width: 100%;
+	}
+
 	.components-navigate-regions {
 		height: 100%;
 	}