From 2cd2b3a2a02fdfc43b68b0bcc6d1380f62a376f6 Mon Sep 17 00:00:00 2001
From: jasmussen <joen@automattic.com>
Date: Wed, 13 Mar 2019 12:10:45 +0100
Subject: [PATCH] Try: Remove intrinsic block margins, rely on cascade

This PR is round 2 of #8350. The ultimate goal is to make it easier for themes to style the editor, and to do less CSS overriding in order to do so.

Problem: Currently, every single block is born with an intrinsic top and bottom margin. This margin matches the padding that sits between the block and the "selected block" border, plus 2px of space. This margin is the same regardless of whether the block needs a margin or not, and it is applied to nesting containers as well. In the case of the Columns block for example, that means the _column_ block (singular) has top and bottom margin, even though it shouldn't have that.

Since then a number of changes have been made to the editor to make it a good time to revisit this:

- The block outlines and toolbars have been refactored to not rely on margins at all to position themselves. These will still be painted correctly outside of the block, though they may overlap content visibly if a zero margin block is selected.
- A more solid editor style system has been introduced that makes it easier to customize the editor to look like the front-end. As a result of this, feedback around CSS specificity and having to override these margins have surfaced to a higher degree.

Proposed solution: By removing the intrinsic margin, we can re-apply it only to the blocks that actually _should_ be born with an intrinsic margin, such as paragraphs, lists, quotes ,etc.

Some discussion points that are likely to surface: where should those vanilla styles be stored? How should they be structured so that themes can easily override them? Should these _not_ be loaded if a theme provides its own editor styles? Should we leverage the cascade and store these generically in one location or should these be applied in the style.scss file for every block in the library? Given these intrinsic margins have been present since day one, can we expect plugin authors to remember to add these margins themselves for every block they make? Is there a back-compat way we provide these default margins to blocks that rely on them?

This is a try branch, in order to figure out answers to those questions. This first commit only does a few things:

- It rearranges some CSS to put things in more logical locations.
- It removes the intrinsic margins, then blanket reapplies them in that new vanilla stylesheet location with a new CSS variable.

Next commits will explore how to remove that blanket reapplication, and try to provide those vanilla styles in a per-block basis.

See also:

https://github.com/WordPress/gutenberg/pull/13989#issuecomment-466359105
https://github.com/WordPress/gutenberg/pull/8350/files
---
 assets/stylesheets/_variables.scss            |  1 +
 .../src/components/block-list/style.scss      |  9 --
 .../default-block-appender/style.scss         |  2 +
 packages/block-library/src/button/editor.scss |  7 +-
 packages/block-library/src/button/style.scss  |  2 +-
 packages/block-library/src/code/theme.scss    |  1 +
 packages/block-library/src/columns/style.scss |  1 +
 packages/block-library/src/cover/style.scss   |  2 +-
 packages/block-library/src/editor.scss        |  1 -
 packages/block-library/src/embed/style.scss   |  2 +-
 .../block-library/src/heading/editor.scss     | 47 ---------
 packages/block-library/src/more/editor.scss   |  2 +
 .../block-library/src/nextpage/editor.scss    |  2 +
 .../block-library/src/pullquote/style.scss    |  1 +
 .../block-library/src/separator/theme.scss    |  2 +-
 .../block-library/src/shortcode/editor.scss   |  2 +
 packages/block-library/src/style.scss         | 15 ++-
 packages/block-library/src/table/style.scss   |  2 +
 .../components/src/placeholder/style.scss     | 14 ++-
 .../src/components/text-editor/style.scss     |  2 +-
 .../src/components/visual-editor/style.scss   |  7 +-
 packages/edit-post/src/style.scss             |  9 --
 packages/editor/src/editor-styles.scss        | 97 ++++++++++++++++++-
 23 files changed, 146 insertions(+), 84 deletions(-)
 delete mode 100644 packages/block-library/src/heading/editor.scss

diff --git a/assets/stylesheets/_variables.scss b/assets/stylesheets/_variables.scss
index 6e9a40c31034e3..93be3872211d7d 100644
--- a/assets/stylesheets/_variables.scss
+++ b/assets/stylesheets/_variables.scss
@@ -9,6 +9,7 @@ $default-line-height: 1.4;
 $editor-font: "Noto Serif", serif;
 $editor-html-font: Menlo, Consolas, monaco, monospace;
 $editor-font-size: 16px;
+$default-block-margin: 2em; // Becomes 32px with the 16px base font size, which gives a nice 2px gap with the 14px block padding.
 $text-editor-font-size: 14px;
 $editor-line-height: 1.8;
 $big-font-size: 18px;
diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss
index 7e1a87bc2febd3..cbd3098e765d6e 100644
--- a/packages/block-editor/src/components/block-list/style.scss
+++ b/packages/block-editor/src/components/block-list/style.scss
@@ -56,15 +56,6 @@
 		margin-left: -$block-padding;
 		margin-right: -$block-padding;
 	}
-
-	// Space every block, and the default appender, using margins.
-	// This allows margins to collapse, which gives a better representation of how it looks on the frontend.
-	.block-editor-default-block-appender > .block-editor-default-block-appender__content,
-	> .block-editor-block-list__block > .block-editor-block-list__block-edit,
-	> .block-editor-block-list__layout > .block-editor-block-list__block > .block-editor-block-list__block-edit {
-		margin-top: $block-padding * 2 + $block-spacing;
-		margin-bottom: $block-padding * 2 + $block-spacing;
-	}
 }
 
 .block-editor-block-list__layout .block-editor-block-list__block {
diff --git a/packages/block-editor/src/components/default-block-appender/style.scss b/packages/block-editor/src/components/default-block-appender/style.scss
index d9728e201c1eca..aa1d934d7bb06b 100644
--- a/packages/block-editor/src/components/default-block-appender/style.scss
+++ b/packages/block-editor/src/components/default-block-appender/style.scss
@@ -13,6 +13,8 @@
 		outline: $border-width solid transparent;
 		transition: 0.2s outline;
 		resize: none;
+		margin-top: $default-block-margin;
+		margin-bottom: $default-block-margin;
 
 		// Emulate the dimensions of a paragraph block.
 		// On mobile and in nested contexts, the plus to add blocks shows up on the right.
diff --git a/packages/block-library/src/button/editor.scss b/packages/block-library/src/button/editor.scss
index 713e508bef0553..62034a5cfc8e63 100644
--- a/packages/block-library/src/button/editor.scss
+++ b/packages/block-library/src/button/editor.scss
@@ -10,14 +10,17 @@
 }
 
 .wp-block-button {
-	display: inline-block;
-	margin-bottom: 0;
 	position: relative;
 
 	[contenteditable] {
 		cursor: text;
 	}
 
+	// Don't let placeholder expand parent width.
+	.block-editor-rich-text {
+		display: inline-block;
+	}
+
 	// Make placeholder text white unless custom colors or outline versions are chosen.
 	&:not(.has-text-color):not(.is-style-outline) .block-editor-rich-text__editable[data-is-placeholder-visible="true"] + .block-editor-rich-text__editable {
 		color: $white;
diff --git a/packages/block-library/src/button/style.scss b/packages/block-library/src/button/style.scss
index 9fb53733a2d132..f30429c3666df5 100644
--- a/packages/block-library/src/button/style.scss
+++ b/packages/block-library/src/button/style.scss
@@ -2,7 +2,7 @@ $blocks-button__height: 56px;
 
 .wp-block-button {
 	color: $white;
-	margin-bottom: 1.5em;
+	margin-bottom: $default-block-margin;
 
 	&.aligncenter {
 		text-align: center;
diff --git a/packages/block-library/src/code/theme.scss b/packages/block-library/src/code/theme.scss
index 3a0760f29dd793..45fc200e99d865 100644
--- a/packages/block-library/src/code/theme.scss
+++ b/packages/block-library/src/code/theme.scss
@@ -5,4 +5,5 @@
 	padding: 0.8em 1em;
 	border: 1px solid $light-gray-500;
 	border-radius: 4px;
+	margin-bottom: $default-block-margin;
 }
diff --git a/packages/block-library/src/columns/style.scss b/packages/block-library/src/columns/style.scss
index 2cc0cf0ec4999e..ab2ec375ca1e8e 100644
--- a/packages/block-library/src/columns/style.scss
+++ b/packages/block-library/src/columns/style.scss
@@ -1,5 +1,6 @@
 .wp-block-columns {
 	display: flex;
+	margin-bottom: $default-block-margin;
 
 	// Responsiveness: Allow wrapping on mobile.
 	flex-wrap: wrap;
diff --git a/packages/block-library/src/cover/style.scss b/packages/block-library/src/cover/style.scss
index e3fc37169eaeab..e0a119fdacd625 100644
--- a/packages/block-library/src/cover/style.scss
+++ b/packages/block-library/src/cover/style.scss
@@ -6,7 +6,7 @@
 	background-position: center center;
 	min-height: 430px;
 	width: 100%;
-	margin: 0 0 1.5em 0;
+	margin-bottom: $default-block-margin;
 	display: flex;
 	justify-content: center;
 	align-items: center;
diff --git a/packages/block-library/src/editor.scss b/packages/block-library/src/editor.scss
index cbdcda4e203ac2..bd01eff6c56ff0 100644
--- a/packages/block-library/src/editor.scss
+++ b/packages/block-library/src/editor.scss
@@ -10,7 +10,6 @@
 @import "./classic/editor.scss";
 @import "./gallery/editor.scss";
 @import "./group/editor.scss";
-@import "./heading/editor.scss";
 @import "./html/editor.scss";
 @import "./image/editor.scss";
 @import "./latest-comments/editor.scss";
diff --git a/packages/block-library/src/embed/style.scss b/packages/block-library/src/embed/style.scss
index 6f3478f3bb1089..bf15f878048509 100644
--- a/packages/block-library/src/embed/style.scss
+++ b/packages/block-library/src/embed/style.scss
@@ -11,7 +11,7 @@
 .wp-block-embed {
 	// 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;
+	margin-bottom: $default-block-margin;
 }
 
 .wp-embed-responsive {
diff --git a/packages/block-library/src/heading/editor.scss b/packages/block-library/src/heading/editor.scss
deleted file mode 100644
index 2a58a2a4155ba5..00000000000000
--- a/packages/block-library/src/heading/editor.scss
+++ /dev/null
@@ -1,47 +0,0 @@
-.wp-block-heading {
-	h1,
-	h2,
-	h3,
-	h4,
-	h5,
-	h6 {
-		color: inherit;
-		margin: 0;
-	}
-
-	// These follow a Major Third type scale
-	h1 {
-		font-size: 2.44em;
-	}
-
-	h2 {
-		font-size: 1.95em;
-	}
-
-	h3 {
-		font-size: 1.56em;
-	}
-
-	h4 {
-		font-size: 1.25em;
-	}
-
-	h5 {
-		font-size: 1em;
-	}
-
-	h6 {
-		font-size: 0.8em;
-	}
-
-	// Adjust line spacing for larger headings.
-	h1,
-	h2,
-	h3 {
-		line-height: 1.4;
-	}
-
-	h4 {
-		line-height: 1.5;
-	}
-}
diff --git a/packages/block-library/src/more/editor.scss b/packages/block-library/src/more/editor.scss
index b4706db6866790..5b5edb5b5c310c 100644
--- a/packages/block-library/src/more/editor.scss
+++ b/packages/block-library/src/more/editor.scss
@@ -1,6 +1,8 @@
 .block-editor-block-list__block[data-type="core/more"] {
 	max-width: 100%;
 	text-align: center;
+	margin-top: $default-block-margin;
+	margin-bottom: $default-block-margin;
 }
 
 .block-editor .wp-block-more { // needs specificity
diff --git a/packages/block-library/src/nextpage/editor.scss b/packages/block-library/src/nextpage/editor.scss
index 3b5dd437e6f869..99f3679e5ae60d 100644
--- a/packages/block-library/src/nextpage/editor.scss
+++ b/packages/block-library/src/nextpage/editor.scss
@@ -1,5 +1,7 @@
 .block-editor-block-list__block[data-type="core/nextpage"] {
 	max-width: 100%;
+	margin-top: $default-block-margin;
+	margin-bottom: $default-block-margin;
 }
 
 .wp-block-nextpage {
diff --git a/packages/block-library/src/pullquote/style.scss b/packages/block-library/src/pullquote/style.scss
index 4394548bfd2afd..7164ff8b640478 100644
--- a/packages/block-library/src/pullquote/style.scss
+++ b/packages/block-library/src/pullquote/style.scss
@@ -2,6 +2,7 @@
 	padding: 3em 0;
 	margin-left: 0;
 	margin-right: 0;
+	margin-bottom: $default-block-margin;
 	text-align: center;
 
 	&.alignleft,
diff --git a/packages/block-library/src/separator/theme.scss b/packages/block-library/src/separator/theme.scss
index 1d679a32ece8fc..1e228e844e5819 100644
--- a/packages/block-library/src/separator/theme.scss
+++ b/packages/block-library/src/separator/theme.scss
@@ -1,7 +1,7 @@
 .wp-block-separator {
 	border: none;
 	border-bottom: 2px solid $dark-gray-100;
-	margin: 1.65em auto;
+	margin: $default-block-margin auto;
 
 	// Default, thin style
 	&:not(.is-style-wide):not(.is-style-dots) {
diff --git a/packages/block-library/src/shortcode/editor.scss b/packages/block-library/src/shortcode/editor.scss
index ffa3592b848688..e84012b5e89ee9 100644
--- a/packages/block-library/src/shortcode/editor.scss
+++ b/packages/block-library/src/shortcode/editor.scss
@@ -5,6 +5,8 @@
 	background-color: $dark-opacity-light-200;
 	font-size: $default-font-size;
 	font-family: $default-font;
+	margin-top: $default-block-margin;
+	margin-bottom: $default-block-margin;
 
 	label {
 		display: flex;
diff --git a/packages/block-library/src/style.scss b/packages/block-library/src/style.scss
index 285c139b3b0fa4..3bab8832f2c229 100644
--- a/packages/block-library/src/style.scss
+++ b/packages/block-library/src/style.scss
@@ -141,8 +141,9 @@
 
 /**
  * Vanilla Block Styles
- * These are base styles that apply across blocks.
- * We should have as few of these as possible.
+ * 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.
@@ -151,3 +152,13 @@
 figcaption {
 	margin-top: 0.5em;
 }
+
+// Apply some base margins to blocks that need them.
+img {
+	max-width: 100%;
+	height: auto;
+}
+
+iframe {
+	width: 100%;
+}
diff --git a/packages/block-library/src/table/style.scss b/packages/block-library/src/table/style.scss
index 3fda38e27b8604..5427b70fd3aaaf 100644
--- a/packages/block-library/src/table/style.scss
+++ b/packages/block-library/src/table/style.scss
@@ -1,4 +1,6 @@
 .wp-block-table {
+	margin-bottom: $default-block-margin;
+
 	$subtle-light-gray: #f3f4f5;
 	$subtle-pale-green: #e9fbe5;
 	$subtle-pale-blue: #e7f5fe;
diff --git a/packages/components/src/placeholder/style.scss b/packages/components/src/placeholder/style.scss
index 895ea0d4065c80..edb3248fca752b 100644
--- a/packages/components/src/placeholder/style.scss
+++ b/packages/components/src/placeholder/style.scss
@@ -1,5 +1,6 @@
 .components-placeholder {
-	margin: 0;
+	margin-top: $default-block-margin;
+	margin-bottom: $default-block-margin;
 	display: flex;
 	flex-direction: column;
 	align-items: center;
@@ -8,10 +9,8 @@
 	min-height: 200px;
 	width: 100%;
 	text-align: center;
-	font-family: $default-font;
-	font-size: $default-font-size;
 
-	// use opacity to work in various editor styles
+	// Use opacity to work in various editor styles.
 	background: $dark-opacity-light-200;
 
 	.is-dark-theme & {
@@ -19,6 +18,13 @@
 	}
 }
 
+.components-placeholder__instructions,
+.components-placeholder__label,
+.components-placeholder__fieldset {
+	font-family: $default-font;
+	font-size: $default-font-size;
+}
+
 .components-placeholder__label {
 	display: flex;
 	align-items: center;
diff --git a/packages/edit-post/src/components/text-editor/style.scss b/packages/edit-post/src/components/text-editor/style.scss
index 159d208c4fd105..234eb46917b247 100644
--- a/packages/edit-post/src/components/text-editor/style.scss
+++ b/packages/edit-post/src/components/text-editor/style.scss
@@ -30,7 +30,7 @@
 	.editor-post-title__block {
 		textarea {
 			border: $border-width solid $light-gray-500;
-			margin-bottom: 4px;
+			margin-bottom: $block-spacing;
 			padding: $block-padding;
 
 			&:focus {
diff --git a/packages/edit-post/src/components/visual-editor/style.scss b/packages/edit-post/src/components/visual-editor/style.scss
index d0ec876d553152..61fc3f17f78b1a 100644
--- a/packages/edit-post/src/components/visual-editor/style.scss
+++ b/packages/edit-post/src/components/visual-editor/style.scss
@@ -63,9 +63,10 @@
 	margin-left: auto;
 	margin-right: auto;
 
-	// Space title similarly to other blocks.
-	// This uses negative margins so as to not affect the default block margins.
-	margin-bottom: -$block-padding - $block-spacing - $border-width - $border-width;
+	// Apply default block margin below the post title.
+	// This ensures the first block on the page is almost in a good position.
+	// This rule can be retired once the title becomes an actual block.
+	margin-bottom: ($block-padding * 2) + $block-spacing; // This matches 2em in the vanilla style.
 
 	// Stack borders.
 	> div {
diff --git a/packages/edit-post/src/style.scss b/packages/edit-post/src/style.scss
index ae0225bc6c97e7..be47d4c70dc96d 100644
--- a/packages/edit-post/src/style.scss
+++ b/packages/edit-post/src/style.scss
@@ -88,15 +88,6 @@ body.block-editor-page {
 		}
 	}
 
-	img {
-		max-width: 100%;
-		height: auto;
-	}
-
-	iframe {
-		width: 100%;
-	}
-
 	.components-navigate-regions {
 		height: 100%;
 	}
diff --git a/packages/editor/src/editor-styles.scss b/packages/editor/src/editor-styles.scss
index 1efafd9445f49a..5bd3190468b83c 100644
--- a/packages/editor/src/editor-styles.scss
+++ b/packages/editor/src/editor-styles.scss
@@ -1,3 +1,12 @@
+/**
+ * Normalization Styles
+ *
+ * Why do these exist? Why not rely on browser defaults?
+ * These styles are necessary so long as CSS can bleed from the wp-admin into the editing canvas itself.
+ *
+ * Let's continue working to refactor these away, whether through Shadow DOM or better scoping of upstream styles.
+ */
+
 body {
 	font-family: $editor-font;
 	font-size: $editor-font-size;
@@ -5,15 +14,99 @@ body {
 	color: $dark-gray-900;
 }
 
+/* Headings */
+// These follow a Major Third type scale
+// https://type-scale.com/?size=16&scale=1.250&text=A%20Visual%20Type%20Scale&font=Noto%20Serif&fontweight=600
+h1 {
+	font-size: 2.44em;
+}
+
+h2 {
+	font-size: 1.95em;
+}
+
+h3 {
+	font-size: 1.56em;
+}
+
+h4 {
+	font-size: 1.25em;
+}
+
+h5 {
+	font-size: 1em;
+}
+
+h6 {
+	font-size: 0.8em;
+}
+
+// Adjust line spacing for larger headings.
+h1,
+h2,
+h3 {
+	line-height: 1.4;
+}
+
+h4 {
+	line-height: 1.5;
+}
+
+// Default margins.
+h1 {
+	margin-top: 0.67em;
+	margin-bottom: 0.67em;
+}
+
+h2 {
+	margin-top: 0.83em;
+	margin-bottom: 0.83em;
+}
+
+h3 {
+	margin-top: 1em;
+	margin-bottom: 1em;
+}
+
+h4 {
+	margin-top: 1.33em;
+	margin-bottom: 1.33em;
+}
+
+h5 {
+	margin-top: 1.67em;
+	margin-bottom: 1.67em;
+}
+
+h6 {
+	margin-top: 2.33em;
+	margin-bottom: 2.33em;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+	color: inherit;
+}
+
 p {
 	font-size: inherit;
 	line-height: inherit;
+	margin-top: $default-block-margin;
+	margin-bottom: $default-block-margin;
+}
+
+pre {
+	margin-bottom: $default-block-margin;
 }
 
 ul,
 ol {
-	margin: 0;
-	padding: 0;
+	margin-bottom: $default-block-margin;
+	padding: inherit;
 
 	li {
 		// This overrides a bottom margin globally applied to list items in wp-admin.