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 #12299 (comment), props @joyously. * Address feedback. * Address feedback. Create new vanilla block styles location. * Address margin feedback. * Address feedback.
WordPress · Mar 21, 2019 · 429558a · 429558a
1 parent 9d3292b
commit 429558a
Show file tree

Hide file tree

Showing 15 changed files with 47 additions and 40 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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;