Restore previous way of adding block-layout padding

packages/base-styles/_variables.scss

@@ -75,7 +75,7 @@ $block-toolbar-height: $grid-unit-60;
 $mobile-block-toolbar-height: 44px;
 $block-padding: 14px; // Space between block footprint and focus boundaries. These are drawn outside the block footprint, and do not affect the size.
 $block-spacing: 4px; // Vertical space between blocks.
-$block-side-ui-width: 28px; // Width of the movers/drag handle UI.
+$block-side-ui-width: $button-size; // Width of the movers/drag handle UI.
 $block-side-ui-clearance: 2px; // Space between movers/drag handle UI, and block.
 $block-container-side-padding: $block-side-ui-width + $block-padding + 2 * $block-side-ui-clearance; // Total space left and right of the block footprint.
 $block-bg-padding--v: $block-padding + $block-spacing + $block-side-ui-clearance; // padding for Blocks with a background color (eg: paragraph or group)

packages/block-editor/src/components/block-list/root-container.js

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
@@ -85,7 +90,7 @@ function RootContainer( { children, className, hasPopover = true }, ref ) {
 				{ hasPopover ? <BlockPopover /> : null }
 				<div
 					ref={ ref }
-					className={ className }
+					className={ classnames( className, 'is-root-container' ) }
 					onFocus={ onFocus }
 					onDragStart={ onDragStart }
 				>

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

@@ -118,6 +118,7 @@
  */
 
 .block-editor-block-list__layout {
+	position: relative;
 
 	// The primary indicator of selection in text is the native selection marker.
 	// When selecting multiple blocks, we provide an additional selection indicator.
@@ -630,3 +631,32 @@
 .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.
+.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;
+	}
+}
+
+.block-editor-block-list__layout.is-root-container {
+	// Full-wide. (to account for the padddings added above)
+	> .block-editor-block-list__block[data-align="full"],
+	> .block-editor-block-list__block.alignfull {
+		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/index.js

@@ -39,7 +39,9 @@ function VisualEditor() {
 					<WritingFlow>
 						<ObserveTyping>
 							<CopyHandler>
-								<PostTitle />
+								<div className="edit-post-visual-editor__post-title-wrapper">
+									<PostTitle />
+								</div>
 								<BlockList />
 							</CopyHandler>
 						</ObserveTyping>

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

@@ -42,31 +42,27 @@
 	margin-right: auto;
 }
 
-.edit-post-visual-editor .editor-post-title {
-	// Center.
-	margin-left: auto;
-	margin-right: auto;
-
-	// Apply default block margin below the post title.
-	// This ensures the first block on the page is in a good position.
-	// This rule can be retired once the title becomes an actual block.
-	margin-bottom: ($block-padding * 2) + $block-spacing; // This matches 2em in the vanilla style.
-}
-
-// 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.
-.edit-post-visual-editor {
+// Ideally this wrapper div is not needed but if we waant to match the positionning 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;
 
-	// Full-wide. (to account for the padddings added above)
-	.block-editor-block-list__block[data-align="full"],
-	.block-editor-block-list__block.alignfull {
-		margin-left: -$block-padding;
-		margin-right: -$block-padding;
+	@include break-small() {
+		padding-left: $block-side-ui-width;
+		padding-right: $block-side-ui-width;
 	}
 
-	position: relative;
+	.editor-post-title {
+		// Center.
+		margin-left: auto;
+		margin-right: auto;
+
+		// Apply default block margin below the post title.
+		// This ensures the first block on the page is in a good position.
+		// This rule can be retired once the title becomes an actual block.
+		margin-bottom: ($block-padding * 2) + $block-spacing; // This matches 2em in the vanilla style.
+	}
 }

packages/edit-widgets/src/components/widget-area/style.scss

@@ -2,11 +2,6 @@
 	max-width: $widget-area-width;
 	margin: 0 auto 30px;
 
-	// Reduce padding inside widget areas
-	.block-editor-block-list__layout {
-		padding-left: $block-side-ui-width + $block-padding;
-		padding-right: $block-side-ui-width + $block-padding;
-	}
 	// By default the default block appender inserter has a negative position,
 	// but given that on the widget screen we have 0 padding we need to remove the negative position.
 	.block-editor-default-block-appender .block-editor-inserter,