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:

#13989 (comment)
https://github.com/WordPress/gutenberg/pull/8350/files

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;

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 {

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%;
+}

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%;
 	}