diff --git a/assets/stylesheets/_variables.scss b/assets/stylesheets/_variables.scss
index 7fda170813addd..3c6ee25a4a468a 100644
--- a/assets/stylesheets/_variables.scss
+++ b/assets/stylesheets/_variables.scss
@@ -57,6 +57,7 @@ $block-spacing: 4px; // Vertical space between blocks.
 $block-side-ui-width: 28px; // Width of the movers/drag handle UI.
 $block-side-ui-clearance: 2px; // Space between movers/drag handle UI, and block.
 $block-container-side-padding: $block-side-ui-width + $block-padding + 2 * $block-side-ui-clearance; // Total space left and right of the block footprint.
+$default-block-margin: ($block-padding * 2) + $block-spacing; // This is the default margin between blocks.
 
 // Buttons & UI Widgets
 $radius-round-rectangle: 4px;
diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss
index 043ddd26136070..fd96103e2a6bac 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.
-	.editor-default-block-appender > .editor-default-block-appender__content,
-	> .editor-block-list__block > .editor-block-list__block-edit,
-	> .editor-block-list__layout > .editor-block-list__block > .editor-block-list__block-edit {
-		margin-top: $block-padding * 2 + $block-spacing;
-		margin-bottom: $block-padding * 2 + $block-spacing;
-	}
 }
 
 .editor-block-list__layout .editor-block-list__block {
diff --git a/packages/block-library/src/style.scss b/packages/block-library/src/style.scss
index f9a53b92214177..aff7bfd7e4c2bb 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,37 @@
 	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 Editor Styles
+ * 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.
+ */
+
+// Gutenberg specific elements
+.editor-default-block-appender__content,
+.components-placeholder {
+	margin-top: $default-block-margin;
+	margin-bottom: $default-block-margin;
+}
+
+// Re-apply margins to all blocks. This is a temporary step to get the surrounding stuff to work.
+// In upcoming pushes, this will be removed and replaced with actual individual block CSS styles.
+[class*="wp-block"] .editor-block-list__block-edit {
+	margin-top: $default-block-margin;
+	margin-bottom: $default-block-margin;
+}
+
+img {
+	max-width: 100%;
+	height: auto;
+}
+
+iframe {
+	width: 100%;
+}
diff --git a/packages/edit-post/src/style.scss b/packages/edit-post/src/style.scss
index bec0e8484c580c..743d72ec5b7b4f 100644
--- a/packages/edit-post/src/style.scss
+++ b/packages/edit-post/src/style.scss
@@ -111,8 +111,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;
@@ -131,15 +131,6 @@ body.block-editor-page {
 		}
 	}
 
-	img {
-		max-width: 100%;
-		height: auto;
-	}
-
-	iframe {
-		width: 100%;
-	}
-
 	.components-navigate-regions {
 		height: 100%;
 	}