From 58d619238ae9cfb9737f4c7af5b7b39ff2574902 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 1c30d4f053d66..039c709f6ec5c 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 03ed0f07bd5de..20efaffd7402f 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 d9728e201c1ec..aa1d934d7bb06 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 713e508bef055..62034a5cfc8e6 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 1519c6a11ddce..86ff4020d7ec9 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 3a0760f29dd79..45fc200e99d86 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 2cc0cf0ec4999..ab2ec375ca1e8 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 c11243504016a..f0a7f235d8a54 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 bc8bbd83911ad..a63652bf404bd 100644
--- a/packages/block-library/src/editor.scss
+++ b/packages/block-library/src/editor.scss
@@ -9,7 +9,6 @@
 @import "./file/editor.scss";
 @import "./classic/editor.scss";
 @import "./gallery/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 6f3478f3bb108..bf15f87804850 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 2a58a2a4155ba..0000000000000
--- 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 b4706db686679..5b5edb5b5c310 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 3b5dd437e6f86..99f3679e5ae60 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 4394548bfd2af..7164ff8b64047 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 1d679a32ece8f..1e228e844e581 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 d623927605d40..ce858164ef0f7 100644
--- a/packages/block-library/src/shortcode/editor.scss
+++ b/packages/block-library/src/shortcode/editor.scss
@@ -5,6 +5,8 @@
 	background-color: $light-gray-100;
 	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 285c139b3b0fa..3bab8832f2c22 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 3fda38e27b860..5427b70fd3aaa 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 9bdc0e93fa26b..ad805cea9fe5c 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 e925344dc9e3a..4168a23c297a9 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;
 		}
 
diff --git a/packages/edit-post/src/components/visual-editor/style.scss b/packages/edit-post/src/components/visual-editor/style.scss
index d0ec876d55315..61fc3f17f78b1 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 ae0225bc6c97e..be47d4c70dc96 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 1efafd9445f49..5bd3190468b83 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.