Try: Remove canvas padding.

This PR removes the 14px on mobile, 36px on desktop breakpoints padding that is applied to the root container.

In the previous iteration of the editor, this padding was necessary to:

- on mobile, show the 14px block border that sat 14px outside of the selected block.
- on desktop breakpoints, show both the 14px block padding, and make room for the side UI (movers)

Because both of those elements are no longer present, we can remove this padding.

packages/block-editor/src/components/block-list/style.scss

@@ -694,31 +694,3 @@
 .is-dragging-components-draggable .components-tooltip {
 	display: none;
 }
-
-
-// Add side padding for the canvas, currently edit-post-visual-editor.
-// The purpose of this padding is to ensure that on small viewports, there is
-// room for the block border that sits 14px ($block-padding) offset from the
-// block footprint.
-// These paddings and margins are removed from the BlockPreview component's style
-// Any change need to be reflected there.
-.block-editor-block-list__layout.is-root-container {
-	padding-left: $block-padding;
-	padding-right: $block-padding;
-
-	@include break-small() {
-		padding-left: $block-side-ui-width;
-		padding-right: $block-side-ui-width;
-	}
-
-	// Full-wide. (to account for the paddings added above)
-	> .wp-block[data-align="full"] {
-		margin-left: -$block-padding;
-		margin-right: -$block-padding;
-
-		@include break-small() {
-			margin-left: -$block-side-ui-width;
-			margin-right: -$block-side-ui-width;
-		}
-	}
-}

packages/edit-post/src/components/visual-editor/style.scss

@@ -45,19 +45,10 @@
 	height: 0;
 }
 
-// Ideally this wrapper div is not needed but if we waant to match the positionning of blocks
+// Ideally this wrapper div is not needed but if we want to match the positioning of blocks
 // .block-editor-block-list__layout and block-editor-block-list__block
 // We need to have two DOM elements.
 .edit-post-visual-editor__post-title-wrapper {
-	// This padding is needed to match the block root container padding
-	padding-left: $block-padding;
-	padding-right: $block-padding;
-
-	@include break-small() {
-		padding-left: $block-side-ui-width;
-		padding-right: $block-side-ui-width;
-	}
-
 	.editor-post-title {
 		// Center.
 		margin-left: auto;

packages/editor/src/editor-styles.scss

@@ -13,8 +13,16 @@ body {
 	font-size: $editor-font-size;
 	line-height: $editor-line-height;
 	color: $dark-gray-primary;
+	padding: 10px;
 }
 
+// For full-wide blocks, we compensate for these 10px.
+.block-editor-block-list__layout.is-root-container > .wp-block[data-align="full"] {
+	margin-left: -10px;
+	margin-right: -10px;
+}
+
+
 /* Headings */
 // These follow a Major Third type scale
 // https://type-scale.com/?size=16&scale=1.250&text=A%20Visual%20Type%20Scale&font=Noto%20Serif&fontweight=600