Full Site Editing / Varia, Maywood: Adjust the Content block vertical margins (#1371)

Adjust the Content block vertical margin in the editor to look as close as possible to the front end.

maywood/sass/_full-site-editing-editor.scss

@@ -43,4 +43,8 @@
 			}
 		}
 	}
-}
+}
+
+.post-content__block {
+	margin-top: -36px;
+}

maywood/style-editor.css

@@ -1459,6 +1459,12 @@ b, strong {
 	font-size: 21.6px;
 }
 
+.post-content__block {
+	margin-bottom: 160px;
+	margin-top: 36px;
+	z-index: 20;
+}
+
 @media only screen and (min-width: 640px) {
 	.site-footer {
 		display: block;
@@ -1536,3 +1542,7 @@ b, strong {
 		font-size: 13.8px;
 	}
 }
+
+.post-content__block {
+	margin-top: -36px;
+}

varia/sass/full-site-editing/_editor.scss

@@ -45,6 +45,16 @@
 	}
 }
 
+.post-content__block {
+	margin-bottom: 160px;
+	margin-top: 36px;
+
+	// Minimum z-index to appear above the Template block overlay.
+	// @see https://github.com/WordPress/gutenberg/blob/f198997e2c8e377423beb230ce5283914076d396/packages/block-editor/src/components/block-list/style.scss#L495-L496
+	// @see https://github.com/WordPress/gutenberg/blob/f198997e2c8e377423beb230ce5283914076d396/assets/stylesheets/_z-index.scss#L8
+	z-index: 20;
+}
+
 .site-footer {
 	@include media(tablet) {
 		display: block;

varia/style-editor.css

@@ -1344,6 +1344,12 @@ table th,
 	font-size: 21.6px;
 }
 
+.post-content__block {
+	margin-bottom: 160px;
+	margin-top: 36px;
+	z-index: 20;
+}
+
 @media only screen and (min-width: 640px) {
 	.site-footer {
 		display: block;