Try adapting the padding to work in the classic inspector.

WordPress · Dec 1, 2021 · 29c49a8 · 29c49a8
1 parent 6344651
commit 29c49a8
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 13 deletions.
diff --git a/packages/block-editor/src/hooks/color.scss b/packages/block-editor/src/hooks/color.scss
@@ -1,14 +1,23 @@
-.block-editor__hooks-colors-panel .component-color-indicator {
-	margin-left: 0;
-	display: block;
-	border-radius: 50%;
-	border: 0;
-	height: 24px;
-	width: 24px;
-	padding: 0;
-	background-image:
-		repeating-linear-gradient(45deg, $gray-200 25%, transparent 25%, transparent 75%, $gray-200 75%, $gray-200),
-		repeating-linear-gradient(45deg, $gray-200 25%, transparent 25%, transparent 75%, $gray-200 75%, $gray-200);
-	background-position: 0 0, 25px 25px;
-	background-size: calc(2 * 5px) calc(2 * 5px);
+.block-editor__hooks-colors-panel {
+
+	// Allow horizontal overflow so the size-increasing color indicators don't cause a scrollbar.
+	.components-navigator-screen {
+		overflow-x: visible;
+	}
+
+	// @todo: this can be removed when https://github.com/WordPress/gutenberg/pull/37028 lands.
+	.component-color-indicator {
+		margin-left: 0;
+		display: block;
+		border-radius: 50%;
+		border: 0;
+		height: 24px;
+		width: 24px;
+		padding: 0;
+		background-image:
+			repeating-linear-gradient(45deg, $gray-200 25%, transparent 25%, transparent 75%, $gray-200 75%, $gray-200),
+			repeating-linear-gradient(45deg, $gray-200 25%, transparent 25%, transparent 75%, $gray-200 75%, $gray-200);
+		background-position: 0 0, 25px 25px;
+		background-size: calc(2 * 5px) calc(2 * 5px);
+	}
 }
diff --git a/packages/components/src/panel/style.scss b/packages/components/src/panel/style.scss
@@ -28,6 +28,11 @@
 	&.is-opened {
 		padding: $grid-unit-20;
 	}
+
+	// Don't cascade the padding into nested panels.
+	.components-panel__body {
+		padding: 0;
+	}
 }
 
 .components-panel__header {