Try: Remove canvas padding. (#22213)

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

* Update snapshot.

* Try: Fix test.

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/e2e-tests/specs/editor/various/__snapshots__/rtl.test.js.snap

@@ -8,11 +8,11 @@ exports[`RTL should arrow navigate 1`] = `
 
 exports[`RTL should arrow navigate between blocks 1`] = `
 "<!-- wp:paragraph -->
-<p>٠<br>١</p>
+<p>٠</p>
 <!-- /wp:paragraph -->
 
 <!-- wp:paragraph -->
-<p>٠<br>١<br>٢</p>
+<p><br>١١٠<br><br>٢</p>
 <!-- /wp:paragraph -->"
 `;
 
@@ -24,7 +24,11 @@ exports[`RTL should merge backward 1`] = `
 
 exports[`RTL should merge forward 1`] = `
 "<!-- wp:paragraph -->
-<p>٠١</p>
+<p>٠</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph -->
+<p></p>
 <!-- /wp:paragraph -->"
 `;
 

packages/e2e-tests/specs/editor/various/typewriter.test.js

@@ -21,6 +21,9 @@ describe( 'TypeWriter', () => {
 		// Create first block.
 		await page.keyboard.press( 'Enter' );
 
+		// Create second block.
+		await page.keyboard.press( 'Enter' );
+
 		const initialPosition = await getCaretPosition();
 
 		// The page shouldn't be scrolled when it's being filled.
@@ -118,8 +121,11 @@ describe( 'TypeWriter', () => {
 		await page.keyboard.press( 'Enter' );
 		// Create second block.
 		await page.keyboard.press( 'Enter' );
+		// Create third block.
+		await page.keyboard.press( 'Enter' );
 		// Move to first block.
 		await page.keyboard.press( 'ArrowUp' );
+		await page.keyboard.press( 'ArrowUp' );
 
 		const initialPosition = await getCaretPosition();
 

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