Try compensating nested blocks for block padding

As we make more and more blocks support nested blocks, we need to think about a way for nested blocks to compensate for their block padding. That's the 14px that surrounds the block itself, and on which the 1px selected-block border is painted.

If we don't, any block that goes from non-nested blocks to nested blocks will suddenly have an extra 14px amount of padding inside.

This PR is an experiment to fix that, and adds compensation before and after any nested context. What's missing here is a fix for collapsing margins — otherwise the negative top and bottom margins will apply to the _parent_, not the nesting context. The way to fix this is to apply a padding to any context in which childrens margins should not collapse into the parent. This PR adds that to the blockquote block itself, but if we think the general approach in this PR has merit, then we should find a way to make this more generic. For example a block that has nested children, if it had a `has-children` classname, then we could simply add the padding to that.

core-blocks/quote/editor.scss

@@ -1,6 +1,10 @@
 .wp-block-quote {
 	margin: 0;
 
+	// compensate nested blocks for collapsing margins
+	padding-top: 1px;
+	padding-bottom: 1px;
+
 	cite {
 		display: block;
 	}
@@ -9,4 +13,4 @@
 .wp-block-quote:not(.is-large) {
 	border-left: 4px solid $black;
 	padding-left: 1em;
-}
+}

editor/components/block-list/style.scss

@@ -111,10 +111,19 @@
 		padding-right: $block-side-ui-padding;
 	}
 
-	// Don't add side padding for nested blocks, @todo see if this can be scoped better
+	// Don't add side padding for nested blocks, and compensate for block padding
 	.editor-block-list__block & {
+		// compensate for side UI
 		padding-left: 0;
 		padding-right: 0;
+
+		// compensate for block padding horizontally
+		margin-left: -$block-padding;
+		margin-right: -$block-padding;
+
+		// compensate for block padding and collapsing margins vertically
+		margin-top: -$block-padding + 1px;
+		margin-top: -$block-padding + 1px;
 	}
 }