From 9e8da8452028ab073063f9d8c3b8ab5720b5c566 Mon Sep 17 00:00:00 2001
From: Andrew Duthie <andrew@andrewduthie.com>
Date: Tue, 5 Nov 2019 10:28:04 -0500
Subject: [PATCH] Block Library: Restore non-theme front-end margins for
 figcaption

---
 packages/base-styles/_mixins.scss           | 5 +++++
 packages/block-library/src/audio/style.scss | 7 +++++++
 packages/block-library/src/embed/style.scss | 6 ++++++
 packages/block-library/src/image/style.scss | 7 +++++++
 packages/block-library/src/video/style.scss | 7 +++++++
 5 files changed, 32 insertions(+)

diff --git a/packages/base-styles/_mixins.scss b/packages/base-styles/_mixins.scss
index dd90c086f5624..fda485a779275 100644
--- a/packages/base-styles/_mixins.scss
+++ b/packages/base-styles/_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;
diff --git a/packages/block-library/src/audio/style.scss b/packages/block-library/src/audio/style.scss
index 4bec2b8522538..64d79cafd85dc 100644
--- a/packages/block-library/src/audio/style.scss
+++ b/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%;
diff --git a/packages/block-library/src/embed/style.scss b/packages/block-library/src/embed/style.scss
index 5409085faf020..a3e9ee13f4d94 100644
--- a/packages/block-library/src/embed/style.scss
+++ b/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;
diff --git a/packages/block-library/src/image/style.scss b/packages/block-library/src/image/style.scss
index 461b6dc8a5ffd..01356391e9cfa 100644
--- a/packages/block-library/src/image/style.scss
+++ b/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
diff --git a/packages/block-library/src/video/style.scss b/packages/block-library/src/video/style.scss
index e426eaa6e2f70..de4e9499dd67c 100644
--- a/packages/block-library/src/video/style.scss
+++ b/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();
+	}
 }