Try: Move color and font size from captions to theme

assets/stylesheets/_mixins.scss

@@ -310,12 +310,11 @@
  * Styles that are reused verbatim in a few places
  */
 
-@mixin caption-style() {
-	margin-top: 0.5em;
-	margin-bottom: 1em;
+// These are additional styles for all captions, when the theme opts in to block styles.
+@mixin caption-style-theme() {
 	color: $dark-gray-500;
-	text-align: center;
 	font-size: $default-font-size;
+	text-align: center;
 }
 
 @mixin dropdown-arrow() {

packages/block-editor/src/components/rich-text/style.scss

@@ -5,7 +5,6 @@
 }
 
 .block-editor-rich-text__editable {
-	margin: 0;
 	position: relative;
 	// In HTML, leading and trailing spaces are not visible, and multiple spaces
 	// elsewhere are visually reduced to one space. This rule prevents spaces

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

@@ -1,3 +1,5 @@
 .wp-block-audio {
-	margin: 0;
+	// Remove the left and right margin the figure is born with.
+	margin-left: 0;
+	margin-right: 0;
 }

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

@@ -1,11 +1,4 @@
 .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/audio/theme.scss

@@ -0,0 +1,3 @@
+.wp-block-audio figcaption {
+	@include caption-style-theme();
+}

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

@@ -1,5 +1,7 @@
 .wp-block-embed {
-	margin: 0;
+	// Remove the left and right margin the figure is born with.
+	margin-left: 0;
+	margin-right: 0;
 
 	// Necessary because we use responsive trickery to set width/height,
 	// therefore the video doesn't intrinsically clear floats like an image does.

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

@@ -9,12 +9,6 @@
 }
 
 .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/embed/theme.scss

@@ -0,0 +1,3 @@
+.wp-block-embed figcaption {
+	@include caption-style-theme();
+}

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

@@ -58,11 +58,4 @@
 		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();
-	}
 }

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

@@ -0,0 +1,3 @@
+.wp-block-image figcaption {
+	@include caption-style-theme();
+}

packages/block-library/src/style.scss

@@ -120,7 +120,7 @@
 	font-size: 13px;
 }
 
-.has-regular-font-size, // not used now, kept because of backward compatibility.
+.has-regular-font-size, // Not used now, kept because of backward compatibility.
 .has-normal-font-size {
 	font-size: 16px;
 }
@@ -133,7 +133,22 @@
 	font-size: 36px;
 }
 
-.has-larger-font-size, // not used now, kept because of backward compatibility.
+.has-larger-font-size, // Not used now, kept because of backward compatibility.
 .has-huge-font-size {
 	font-size: 42px;
 }
+
+
+/**
+ * Vanilla Block Styles
+ * These are base styles that apply across blocks.
+ * We should have as few of these as possible.
+ */
+
+// 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;
+	margin-bottom: 1em;
+}

packages/block-library/src/theme.scss

@@ -1,7 +1,11 @@
+@import "./audio/theme.scss";
 @import "./code/theme.scss";
+@import "./embed/theme.scss";
+@import "./image/theme.scss";
 @import "./preformatted/theme.scss";
 @import "./pullquote/theme.scss";
 @import "./quote/theme.scss";
 @import "./search/theme.scss";
 @import "./separator/theme.scss";
 @import "./table/theme.scss";
+@import "./video/theme.scss";

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

@@ -16,11 +16,4 @@
 	&.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/block-library/src/video/theme.scss

@@ -0,0 +1,3 @@
+.wp-block-video figcaption {
+	@include caption-style-theme();
+}

packages/edit-post/src/style.scss

@@ -68,8 +68,8 @@ body.block-editor-page {
 }
 
 .block-editor__container {
-	// on mobile the main content area has to scroll
-	// otherwise you can invoke the overscroll bounce on the non-scrolling container, causing (ノಠ益ಠ)ノ彡┻━┻
+	// On mobile the main content area has to scroll, otherwise you can invoke
+	// the overscroll bounce on the non-scrolling container, for a bad experience.
 	@include break-small {
 		position: absolute;
 		top: 0;
@@ -79,7 +79,7 @@ body.block-editor-page {
 		min-height: calc(100vh - #{ $admin-bar-height-big });
 	}
 
-	// The WP header height changes at this breakpoint
+	// The WP header height changes at this breakpoint.
 	@include break-medium {
 		min-height: calc(100vh - #{ $admin-bar-height });
 
@@ -102,7 +102,8 @@ body.block-editor-page {
 	}
 }
 
-// These are default editor styles in case the theme doesn't provide them.
+
+// These are default block editor styles in case the theme doesn't provide them.
 .wp-block {
 	max-width: $content-width;