Fix: Block paddings on the widget screen. (#16944)

WordPress · Aug 10, 2019 · 399e5e1 · 399e5e1
1 parent be95231
commit 399e5e1
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 1 deletion.
diff --git a/assets/stylesheets/_variables.scss b/assets/stylesheets/_variables.scss
@@ -66,3 +66,6 @@ $block-bg-padding--h: $block-side-ui-width + $block-side-ui-clearance; // paddin
 // Buttons & UI Widgets
 $radius-round-rectangle: 4px;
 $radius-round: 50%;
+
+// Widgets screen
+$widget-area-width: 700px;
diff --git a/packages/edit-widgets/src/components/widget-area/style.scss b/packages/edit-widgets/src/components/widget-area/style.scss
@@ -1,6 +1,18 @@
 .edit-widgets-widget-area {
-	max-width: $content-width;
+	max-width: $widget-area-width;
 	margin: 0 auto 30px;
+
+	// Reduce padding inside widget areas
+	.block-editor-block-list__layout {
+		padding-left: 0;
+		padding-right: 0;
+	}
+	// 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,
+	.block-editor-block-list__empty-block-inserter {
+		left: 0;
+	}
 }
 .edit-widgets-main-block-list {
 	padding-top: $block-toolbar-height + 2 * $grid-size;