From da2f1460c6782c9342dc120874f20e2db7c619e5 Mon Sep 17 00:00:00 2001
From: jasmussen <joen@automattic.com>
Date: Mon, 9 Nov 2020 13:18:14 +0100
Subject: [PATCH 1/8] Audit variables stylesheet.

---
 packages/base-styles/_variables.scss                          | 2 --
 packages/block-editor/src/components/block-compare/style.scss | 4 ++--
 packages/edit-site/src/components/header/style.scss           | 2 ++
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/base-styles/_variables.scss b/packages/base-styles/_variables.scss
index f50a31d426f622..7e677b97c3d0e1 100644
--- a/packages/base-styles/_variables.scss
+++ b/packages/base-styles/_variables.scss
@@ -13,7 +13,6 @@ $editor-font-size: 16px;
 $default-block-margin: 28px; // This value provides a consistent, contiguous spacing between blocks (it's 2x $block-padding).
 $text-editor-font-size: 15px;
 $editor-line-height: 1.8;
-$big-font-size: 18px;
 $mobile-text-min-font-size: 16px; // Any font size below 16px will cause Mobile Safari to "zoom in"
 $border-width: 1px;
 $border-width-focus: 1.5px;
@@ -67,7 +66,6 @@ $mobile-color-swatch: 48px;
 $shadow-popover: 0 2px 6px rgba($black, 0.05);
 $shadow-modal: 0 3px 30px rgba($black, 0.2);
 
-
 /**
  * Editor widths.
  */
diff --git a/packages/block-editor/src/components/block-compare/style.scss b/packages/block-editor/src/components/block-compare/style.scss
index 90301874000653..5474ad6a264162 100644
--- a/packages/block-editor/src/components/block-compare/style.scss
+++ b/packages/block-editor/src/components/block-compare/style.scss
@@ -60,7 +60,7 @@
 
 	.block-editor-block-compare__preview {
 		padding: 0;
-		padding-top: $block-padding;
+		padding-top: $grid-unit-20;
 
 		p {
 			font-size: 12px;
@@ -69,7 +69,7 @@
 	}
 
 	.block-editor-block-compare__action {
-		margin-top: $block-padding;
+		margin-top: $grid-unit-20;
 	}
 
 	.block-editor-block-compare__heading {
diff --git a/packages/edit-site/src/components/header/style.scss b/packages/edit-site/src/components/header/style.scss
index 2431fe656f286d..130f2a069b744a 100644
--- a/packages/edit-site/src/components/header/style.scss
+++ b/packages/edit-site/src/components/header/style.scss
@@ -1,3 +1,5 @@
+$header-toolbar-min-width: 335px;
+
 .edit-site-header {
 	align-items: center;
 	background-color: $white;

From 01bb598dbcb045a3f469097e4ca8748b67b2c44e Mon Sep 17 00:00:00 2001
From: jasmussen <joen@automattic.com>
Date: Mon, 9 Nov 2020 13:21:58 +0100
Subject: [PATCH 2/8] Dead CSS.

---
 .../src/components/block-list/style.scss       | 18 +-----------------
 1 file changed, 1 insertion(+), 17 deletions(-)

diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss
index d9fc7a18b4eeb5..027337857332ff 100644
--- a/packages/block-editor/src/components/block-list/style.scss
+++ b/packages/block-editor/src/components/block-list/style.scss
@@ -251,7 +251,7 @@
 
 	// Warnings
 	&.has-warning {
-		min-height: ( $block-padding + $block-spacing ) * 2;
+		min-height: $grid-unit-60;
 
 		// When a block has a warning, you shouldn't be able to manipulate the contents.
 		> * {
@@ -496,22 +496,6 @@
 	}
 }
 
-// This is the edge-to-edge hover area that contains the plus.
-.block-editor-block-list__block {
-	> .block-editor-block-list__insertion-point {
-		position: absolute;
-		top: -$block-padding - $block-spacing / 2;
-
-		// Matches the whole empty space between two blocks.
-		height: $block-padding * 2;
-		bottom: auto;
-
-		// Match width of actual content.
-		left: $block-padding;
-		right: $block-padding;
-	}
-}
-
 .block-editor-block-list__block .block-editor-block-list__block-html-textarea {
 	display: block;
 	margin: 0;

From dbb99421d783072a5131f0de4ad20674fb78bd96 Mon Sep 17 00:00:00 2001
From: jasmussen <joen@automattic.com>
Date: Mon, 9 Nov 2020 13:29:18 +0100
Subject: [PATCH 3/8] CSS appears dead.

See #14943.
---
 .../src/components/block-list-appender/style.scss           | 6 ------
 packages/edit-post/src/components/visual-editor/style.scss  | 2 +-
 2 files changed, 1 insertion(+), 7 deletions(-)

diff --git a/packages/block-editor/src/components/block-list-appender/style.scss b/packages/block-editor/src/components/block-list-appender/style.scss
index f5eb38c57f8f47..1b893c26875d7e 100644
--- a/packages/block-editor/src/components/block-list-appender/style.scss
+++ b/packages/block-editor/src/components/block-list-appender/style.scss
@@ -3,12 +3,6 @@
 .block-editor-block-list__block .block-list-appender {
 	margin: $grid-unit-10 0;
 
-	// Add additional margin to the appender when inside a group with a background color.
-	// If changing this, be sure to sync up with group/editor.scss line 13.
-	.has-background & {
-		margin: ($grid-unit-20 + $block-spacing) $grid-unit-10;
-	}
-
 	// Animate appearance.
 	.block-list-appender__toggle {
 		padding: 0;
diff --git a/packages/edit-post/src/components/visual-editor/style.scss b/packages/edit-post/src/components/visual-editor/style.scss
index 51099a6c339407..6894839d78b0b5 100644
--- a/packages/edit-post/src/components/visual-editor/style.scss
+++ b/packages/edit-post/src/components/visual-editor/style.scss
@@ -52,6 +52,6 @@
 		// Apply default block margin below the post title.
 		// This ensures the first block on the page is 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.
+		margin-bottom: $default-block-margin;
 	}
 }

From a2d4bafdae63a7017427e85cd5800f68a0f5becd Mon Sep 17 00:00:00 2001
From: jasmussen <joen@automattic.com>
Date: Mon, 9 Nov 2020 13:30:07 +0100
Subject: [PATCH 4/8] Retire $block-spacing.

---
 packages/base-styles/_variables.scss                 | 1 -
 packages/block-library/src/button/editor.native.scss | 1 +
 2 files changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/base-styles/_variables.scss b/packages/base-styles/_variables.scss
index 7e677b97c3d0e1..3dc123a1efadda 100644
--- a/packages/base-styles/_variables.scss
+++ b/packages/base-styles/_variables.scss
@@ -82,7 +82,6 @@ $widget-area-width: 700px;
 $block-toolbar-height: $grid-unit-60;
 $mobile-block-toolbar-height: 44px;
 $block-padding: 14px; // Space between block footprint and focus boundaries. These are drawn outside the block footprint, and do not affect the size.
-$block-spacing: 4px; // Vertical space between blocks.
 $block-side-ui-width: $button-size; // Width of the movers/drag handle UI.
 $block-side-ui-clearance: 2px; // Space between movers/drag handle UI, and block.
 $dimmed-opacity: 1;
diff --git a/packages/block-library/src/button/editor.native.scss b/packages/block-library/src/button/editor.native.scss
index 64521de2d4ddc1..8e8c439922dbc7 100644
--- a/packages/block-library/src/button/editor.native.scss
+++ b/packages/block-library/src/button/editor.native.scss
@@ -3,6 +3,7 @@
 	align-self: flex-start;
 }
 
+$block-spacing: 4px;
 .outline {
 	// Border Width has to be spread since width is thicker
 	// on Android when border radius is decreased to 0

From feaea3f7336c5051df9db8eef35cebdd8f6d8142 Mon Sep 17 00:00:00 2001
From: jasmussen <joen@automattic.com>
Date: Mon, 9 Nov 2020 13:56:23 +0100
Subject: [PATCH 5/8] Retire a few unused variables.

---
 packages/base-styles/_variables.scss | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/packages/base-styles/_variables.scss b/packages/base-styles/_variables.scss
index 3dc123a1efadda..0df2b0833f4614 100644
--- a/packages/base-styles/_variables.scss
+++ b/packages/base-styles/_variables.scss
@@ -21,6 +21,7 @@ $helptext-font-size: 12px;
 $radio-input-size: 20px;
 $radio-input-size-sm: 24px; // Width & height for small viewports.
 
+
 /**
  * Grid System.
  * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
@@ -36,6 +37,7 @@ $grid-unit-40: 4 * $grid-unit;		// 32px
 $grid-unit-50: 5 * $grid-unit;		// 40px
 $grid-unit-60: 6 * $grid-unit;		// 48px
 
+
 /**
  * Dimensions.
  */
@@ -59,6 +61,7 @@ $mobile-floating-toolbar-height: 44px;
 $mobile-floating-toolbar-margin: 8px;
 $mobile-color-swatch: 48px;
 
+
 /**
  * Shadows.
  */
@@ -66,6 +69,7 @@ $mobile-color-swatch: 48px;
 $shadow-popover: 0 2px 6px rgba($black, 0.05);
 $shadow-modal: 0 3px 30px rgba($black, 0.2);
 
+
 /**
  * Editor widths.
  */
@@ -75,15 +79,13 @@ $content-width: 840px;
 $wide-content-width: 1100px;
 $widget-area-width: 700px;
 
+
 /**
  * Block UI.
  */
 
 $block-toolbar-height: $grid-unit-60;
 $mobile-block-toolbar-height: 44px;
-$block-padding: 14px; // Space between block footprint and focus boundaries. These are drawn outside the block footprint, and do not affect the size.
-$block-side-ui-width: $button-size; // Width of the movers/drag handle UI.
-$block-side-ui-clearance: 2px; // Space between movers/drag handle UI, and block.
 $dimmed-opacity: 1;
 
 $block-edge-to-content: 16px;
@@ -95,6 +97,10 @@ $block-selected-padding: 0;
 $block-selected-child-margin: 5px;
 $block-selected-to-content: $block-edge-to-content - $block-selected-margin - $block-selected-border-width;
 
+// Deprecated, please avoid using these.
+$block-padding: 14px; // Used to define space between block footprint and surrouding borders.
+
+
 /**
  * Border radii.
  */
@@ -102,6 +108,7 @@ $block-selected-to-content: $block-edge-to-content - $block-selected-margin - $b
 $radius-round: 50%;
 $radius-block-ui: 2px;
 
+
 /**
  * Block paddings.
  */

From b7449a680f7984986350d089ddce2de28de53887 Mon Sep 17 00:00:00 2001
From: jasmussen <joen@automattic.com>
Date: Mon, 14 Dec 2020 08:25:38 +0100
Subject: [PATCH 6/8] Move React Native variables to separate section.

---
 packages/base-styles/_variables.scss | 73 ++++++++++++++++------------
 1 file changed, 42 insertions(+), 31 deletions(-)

diff --git a/packages/base-styles/_variables.scss b/packages/base-styles/_variables.scss
index 0df2b0833f4614..a8f22314dfc430 100644
--- a/packages/base-styles/_variables.scss
+++ b/packages/base-styles/_variables.scss
@@ -1,3 +1,10 @@
+/**
+ * SCSS Variables.
+ *
+ * Please use variables from this sheet to ensure consistency across the UI.
+ * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
+ */
+
 @import "./colors";
 
 /**
@@ -10,16 +17,10 @@ $default-line-height: 1.4;
 $editor-font: "Noto Serif", serif;
 $editor-html-font: Menlo, Consolas, monaco, monospace;
 $editor-font-size: 16px;
-$default-block-margin: 28px; // This value provides a consistent, contiguous spacing between blocks (it's 2x $block-padding).
+$default-block-margin: 28px; // This value provides a consistent, contiguous spacing between blocks.
 $text-editor-font-size: 15px;
 $editor-line-height: 1.8;
-$mobile-text-min-font-size: 16px; // Any font size below 16px will cause Mobile Safari to "zoom in"
-$border-width: 1px;
-$border-width-focus: 1.5px;
-$border-width-tab: 4px;
-$helptext-font-size: 12px;
-$radio-input-size: 20px;
-$radio-input-size-sm: 24px; // Width & height for small viewports.
+$mobile-text-min-font-size: 16px; // Any font size below 16px will cause Mobile Safari to "zoom in".
 
 
 /**
@@ -56,10 +57,6 @@ $admin-sidebar-width-big: 190px;
 $admin-sidebar-width-collapsed: 36px;
 $modal-min-width: 360px;
 $spinner-size: 18px;
-$mobile-header-toolbar-height: 44px;
-$mobile-floating-toolbar-height: 44px;
-$mobile-floating-toolbar-margin: 8px;
-$mobile-color-swatch: 48px;
 
 
 /**
@@ -81,37 +78,51 @@ $widget-area-width: 700px;
 
 
 /**
- * Block UI.
+ * Block & Editor UI.
  */
 
 $block-toolbar-height: $grid-unit-60;
-$mobile-block-toolbar-height: 44px;
-$dimmed-opacity: 1;
-
-$block-edge-to-content: 16px;
-$solid-border-space: 12px;
-$dashed-border-space: 6px;
-$block-selected-margin: 3px;
-$block-selected-border-width: 1px;
-$block-selected-padding: 0;
-$block-selected-child-margin: 5px;
-$block-selected-to-content: $block-edge-to-content - $block-selected-margin - $block-selected-border-width;
+$border-width: 1px;
+$border-width-focus: 1.5px;
+$border-width-tab: 4px;
+$helptext-font-size: 12px;
+$radius-round: 50%;
+$radius-block-ui: 2px;
+$radio-input-size: 20px;
+$radio-input-size-sm: 24px; // Width & height for small viewports.
 
 // Deprecated, please avoid using these.
 $block-padding: 14px; // Used to define space between block footprint and surrouding borders.
 
 
 /**
- * Border radii.
+ * Block paddings.
  */
 
-$radius-round: 50%;
-$radius-block-ui: 2px;
+// Padding for blocks with a background color (e.g. paragraph or group).
+$block-bg-padding--v: 1.25em;
+$block-bg-padding--h: 2.375em;
 
 
 /**
- * Block paddings.
+ * React Native specific.
+ * These variables do not appear to be used anywhere else.
  */
-// Padding for blocks with a background color (e.g. paragraph or group).
-$block-bg-padding--v: 1.25em;
-$block-bg-padding--h: 2.375em;
+
+// Dimensions.
+$mobile-header-toolbar-height: 44px;
+$mobile-floating-toolbar-height: 44px;
+$mobile-floating-toolbar-margin: 8px;
+$mobile-color-swatch: 48px;
+
+// Block UI.
+$mobile-block-toolbar-height: 44px;
+$dimmed-opacity: 1;
+$block-edge-to-content: 16px;
+$solid-border-space: 12px;
+$dashed-border-space: 6px;
+$block-selected-margin: 3px;
+$block-selected-border-width: 1px;
+$block-selected-padding: 0;
+$block-selected-child-margin: 5px;
+$block-selected-to-content: $block-edge-to-content - $block-selected-margin - $block-selected-border-width;

From d8244bcff315adaa659986a6a691777ea164cfc7 Mon Sep 17 00:00:00 2001
From: jasmussen <joen@automattic.com>
Date: Mon, 14 Dec 2020 10:41:25 +0100
Subject: [PATCH 7/8] Fix for native.

---
 packages/block-library/src/button/editor.native.scss | 2 ++
 packages/block-library/src/file/style.native.scss    | 4 ++++
 2 files changed, 6 insertions(+)

diff --git a/packages/block-library/src/button/editor.native.scss b/packages/block-library/src/button/editor.native.scss
index 8e8c439922dbc7..31ce81004e09aa 100644
--- a/packages/block-library/src/button/editor.native.scss
+++ b/packages/block-library/src/button/editor.native.scss
@@ -3,6 +3,8 @@
 	align-self: flex-start;
 }
 
+// Block spacing used to indicate the space between blocks in the editor.
+// The variable has been retired.
 $block-spacing: 4px;
 .outline {
 	// Border Width has to be spread since width is thicker
diff --git a/packages/block-library/src/file/style.native.scss b/packages/block-library/src/file/style.native.scss
index 02b5cb296949a9..cbace293fd4285 100644
--- a/packages/block-library/src/file/style.native.scss
+++ b/packages/block-library/src/file/style.native.scss
@@ -1,3 +1,7 @@
+// Block spacing used to indicate the space between blocks in the editor.
+// The variable has been retired.
+$block-spacing: 4px;
+
 .container {
 	margin-top: 2px;
 }

From dd83c4a99d38e7e305e2a60a9104dd7698f82695 Mon Sep 17 00:00:00 2001
From: Dratwas <drapich.piotr@gmail.com>
Date: Mon, 14 Dec 2020 12:55:17 +0100
Subject: [PATCH 8/8] use grid variable for the file block styles

---
 packages/block-library/src/file/style.native.scss | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/packages/block-library/src/file/style.native.scss b/packages/block-library/src/file/style.native.scss
index cbace293fd4285..957956ba645d80 100644
--- a/packages/block-library/src/file/style.native.scss
+++ b/packages/block-library/src/file/style.native.scss
@@ -1,14 +1,10 @@
-// Block spacing used to indicate the space between blocks in the editor.
-// The variable has been retired.
-$block-spacing: 4px;
-
 .container {
 	margin-top: 2px;
 }
 
 .defaultButton {
 	border-radius: $border-width * 4;
-	padding: $block-spacing * 2;
+	padding: $grid-unit-10;
 	margin-top: $grid-unit-20;
 	background-color: $button-fallback-bg;
 }