Try compensating nested blocks for block padding (#6408)

* 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.

* Fix regression in columns.

* Remove Quote specific styles.

core-blocks/columns/editor.scss

@@ -2,6 +2,9 @@
 // This is sort of an experiment at making sure the editor looks as much like the end result as possible
 // Potentially the rules here can apply to all nested blocks and enable stacking, in which case it should be moved elsewhere
 .wp-block-columns .editor-block-list__layout {
+	margin-left: 0;
+	margin-right: 0;
+
 	&:first-child {
 		margin-left: -$block-padding;
 	}
@@ -15,16 +18,6 @@
 	}
 }
 
-// Wide: show no left/right margin on wide, so they stack with the column side UI
-.editor-block-list__block[data-align="wide"] .wp-block-columns .editor-block-list__layout {
-	&:first-child {
-		margin-left: 0;
-	}
-	&:last-child {
-		margin-right: 0;
-	}
-}
-
 // Fullwide: show margin left/right to ensure there's room for the side UI
 // This is not a 1:1 preview with the front-end where these margins would presumably be zero
 // @todo this could be revisited, by for example showing this margin only when the parent block was selected first

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