Blank Canvas Blocks: Remove vertical margins from blocks in the editor (#3471)

* Editor: Removes the vertical margins from blocks in the editor

blank-canvas-blocks/assets/ponyfill.css

@@ -147,6 +147,15 @@ body {
 	background-color: var(--wp--custom--color--selection);
 }
 
+.block-editor-block-list__block {
+	margin-bottom: 0;
+	margin-top: 0;
+}
+
+.block-editor-block-list__block .block-library-spacer__resize-container {
+	margin-bottom: 0;
+}
+
 *[class*="-background-color"]:not(.has-text-color) {
 	color: var(--wp--custom--color--background);
 }

blank-canvas-blocks/sass/base/_style.scss

@@ -10,6 +10,7 @@
 
 @import "alignment";
 @import "text-selection";
+@import "vertical-margins";
 
 //Colors
 

blank-canvas-blocks/sass/base/_vertical-margins.scss

@@ -1,121 +1,9 @@
-/**
- * Site Structure
- *
- * - Set vertical margins and responsive widths on
- *   top-level wrappers and content wrappers
- * - `--global--width-content` is a responsive veriable
- * - See: globals/_global-width-responsive.scss
- */
+// Remove editor margins
+.block-editor-block-list__block {
+	margin-bottom: 0;
+	margin-top: 0;
 
-/**
- * Site-main children wrappers
- * - Add double vertical margins here for clearer heirarchy
- */
-.site-main > * {
-	margin-top: calc(3 * var(--wp--custom--margin--vertical));
-	margin-bottom: calc(3 * var(--wp--custom--margin--vertical));
-
-	&:first-child {
-		margin-top: 0;
-	}
-
-	&:last-child {
-		margin-bottom: 0;
-	}
-}
-
-/*
- * Block & non-gutenberg content wrappers
- * - Set margins
- */
-.entry-header,
-.post-thumbnail,
-.entry-content,
-.entry-footer,
-.entry-author,
-.widget-area {
-	margin-top: var(--wp--custom--margin--vertical);
-	margin-right: auto;
-	margin-bottom: var(--wp--custom--margin--vertical);
-	margin-left: auto;
-}
-
-/*
- * Block & non-gutenberg content wrapper children
- * - Sets spacing-vertical margin logic
- */
-.site-footer > *,
-.site-main > article > *, // apply vertical margins to article level
-.site-main > .not-found > *, // apply vertical margins to article level
-.entry-content > *,
-[class*="inner-container"] > *,
-.wp-block-template-part > *,
-.widget-area > *,
-.widget-column > * {
-
-	margin-top: calc( 0.666 * var(--wp--custom--margin--vertical) );
-	margin-bottom: calc( 0.666 * var(--wp--custom--margin--vertical) );
-
-	@include media(mobile) {
-		margin-top: var(--wp--custom--margin--vertical);
-		margin-bottom: var(--wp--custom--margin--vertical);
-	}
-
-	&:first-child {
-		margin-top: 0;
-	}
-
-	&:last-child {
-		margin-bottom: 0;
-	}
-}
-
-/*
- * Block & non-gutenberg content wrapper children
- * - Sets spacing-unit margins
- */
-.site-header > *,
-.entry-header > *,
-.post-thumbnail > *,
-.page-content > *,
-.comment-content > *,
-.entry-author > *,
-.widget > * {
-	margin-top: var(--wp--custom--margin--vertical);
-	margin-bottom: var(--wp--custom--margin--vertical);
-
-	&:first-child {
-		margin-top: 0;
-	}
-
-	&:last-child {
-		margin-bottom: 0;
-	}
-}
-
-
-/*
- * .entry-content children specific controls
- * - Adds special margin overrides for alignment utility classes
- */
-.entry-content > * {
-
-	&.alignleft,
-	&.alignright,
-	&.alignleft:first-child + *,
-	&.alignright:first-child + *,
-	&.alignfull {
-		margin-top: 0;
-	}
-
-	&:last-child,
-	&.alignfull {
+	.block-library-spacer__resize-container {
 		margin-bottom: 0;
 	}
-
-	/* Reset alignleft and alignright margins after alignfull */
-	&.alignfull + .alignleft,
-	&.alignfull + .alignright {
-		margin-top: var(--wp--custom--margin--vertical);
-	}
 }