From 429558ad320c55e3e8b5236dfb6ce139fa3a7d25 Mon Sep 17 00:00:00 2001
From: Joen Asmussen <joen@automattic.com>
Date: Thu, 21 Mar 2019 15:37:54 +0100
Subject: [PATCH] Try: Move color and font size from captions to theme (#14366)

* Try: Move color and font size from captions to theme

This PR moves the color and font size styles for captions to a separate CSS file that themes opt in to.

As a reminder, we have style.scss, which contains structural and base styles that are loaded in the editor and the theme.
There's editor.scss which is only loaded in the editor.
There's theme.scss, which is loaded in the editor and the theme if the theme opts in to them.

Addresses one item surfaced in https://github.com/WordPress/gutenberg/issues/12299#issuecomment-471201071, props @joyously.

* Address feedback.

* Address feedback. Create new vanilla block styles location.

* Address margin feedback.

* Address feedback.
---
 assets/stylesheets/_mixins.scss               |  7 +++----
 .../src/components/rich-text/style.scss       |  1 -
 packages/block-library/src/audio/editor.scss  |  4 +++-
 packages/block-library/src/audio/style.scss   |  7 -------
 packages/block-library/src/audio/theme.scss   |  3 +++
 packages/block-library/src/embed/editor.scss  |  4 +++-
 packages/block-library/src/embed/style.scss   |  6 ------
 packages/block-library/src/embed/theme.scss   |  3 +++
 packages/block-library/src/image/style.scss   |  7 -------
 packages/block-library/src/image/theme.scss   |  3 +++
 packages/block-library/src/style.scss         | 19 +++++++++++++++++--
 packages/block-library/src/theme.scss         |  4 ++++
 packages/block-library/src/video/style.scss   |  7 -------
 packages/block-library/src/video/theme.scss   |  3 +++
 packages/edit-post/src/style.scss             |  9 +++++----
 15 files changed, 47 insertions(+), 40 deletions(-)
 create mode 100644 packages/block-library/src/audio/theme.scss
 create mode 100644 packages/block-library/src/embed/theme.scss
 create mode 100644 packages/block-library/src/image/theme.scss
 create mode 100644 packages/block-library/src/video/theme.scss

diff --git a/assets/stylesheets/_mixins.scss b/assets/stylesheets/_mixins.scss
index 75d38e971ef15d..bce11c94e994aa 100644
--- a/assets/stylesheets/_mixins.scss
+++ b/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() {
diff --git a/packages/block-editor/src/components/rich-text/style.scss b/packages/block-editor/src/components/rich-text/style.scss
index 16fdc282020e0c..437bb95557c49e 100644
--- a/packages/block-editor/src/components/rich-text/style.scss
+++ b/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
diff --git a/packages/block-library/src/audio/editor.scss b/packages/block-library/src/audio/editor.scss
index e09d789e3c9ea5..f99b695f6c9dd2 100644
--- a/packages/block-library/src/audio/editor.scss
+++ b/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;
 }
diff --git a/packages/block-library/src/audio/style.scss b/packages/block-library/src/audio/style.scss
index 64d79cafd85dc9..4bec2b85225387 100644
--- a/packages/block-library/src/audio/style.scss
+++ b/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%;
diff --git a/packages/block-library/src/audio/theme.scss b/packages/block-library/src/audio/theme.scss
new file mode 100644
index 00000000000000..03e2b5e04333ab
--- /dev/null
+++ b/packages/block-library/src/audio/theme.scss
@@ -0,0 +1,3 @@
+.wp-block-audio figcaption {
+	@include caption-style-theme();
+}
diff --git a/packages/block-library/src/embed/editor.scss b/packages/block-library/src/embed/editor.scss
index d26b048b862eb4..507d38c256688f 100644
--- a/packages/block-library/src/embed/editor.scss
+++ b/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.
diff --git a/packages/block-library/src/embed/style.scss b/packages/block-library/src/embed/style.scss
index 31c568c48b0b70..6f3478f3bb1089 100644
--- a/packages/block-library/src/embed/style.scss
+++ b/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;
diff --git a/packages/block-library/src/embed/theme.scss b/packages/block-library/src/embed/theme.scss
new file mode 100644
index 00000000000000..a23337bcc55c11
--- /dev/null
+++ b/packages/block-library/src/embed/theme.scss
@@ -0,0 +1,3 @@
+.wp-block-embed figcaption {
+	@include caption-style-theme();
+}
diff --git a/packages/block-library/src/image/style.scss b/packages/block-library/src/image/style.scss
index 01c3585be4a1fc..0ce4d929d426dc 100644
--- a/packages/block-library/src/image/style.scss
+++ b/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();
-	}
 }
diff --git a/packages/block-library/src/image/theme.scss b/packages/block-library/src/image/theme.scss
new file mode 100644
index 00000000000000..95ed74e1ee2ffe
--- /dev/null
+++ b/packages/block-library/src/image/theme.scss
@@ -0,0 +1,3 @@
+.wp-block-image figcaption {
+	@include caption-style-theme();
+}
diff --git a/packages/block-library/src/style.scss b/packages/block-library/src/style.scss
index f9a53b92214177..5599dafd7c463f 100644
--- a/packages/block-library/src/style.scss
+++ b/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;
+}
diff --git a/packages/block-library/src/theme.scss b/packages/block-library/src/theme.scss
index 7a4dcce562f8ac..5aa1b7281537cf 100644
--- a/packages/block-library/src/theme.scss
+++ b/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";
diff --git a/packages/block-library/src/video/style.scss b/packages/block-library/src/video/style.scss
index de4e9499dd67c5..e426eaa6e2f70e 100644
--- a/packages/block-library/src/video/style.scss
+++ b/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();
-	}
 }
diff --git a/packages/block-library/src/video/theme.scss b/packages/block-library/src/video/theme.scss
new file mode 100644
index 00000000000000..174535bdf09163
--- /dev/null
+++ b/packages/block-library/src/video/theme.scss
@@ -0,0 +1,3 @@
+.wp-block-video figcaption {
+	@include caption-style-theme();
+}
diff --git a/packages/edit-post/src/style.scss b/packages/edit-post/src/style.scss
index a0703d07b00d0f..ae0225bc6c97e7 100644
--- a/packages/edit-post/src/style.scss
+++ b/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;