From 9949085f987d7621fbea150699beb7eda41e61de Mon Sep 17 00:00:00 2001
From: Aki Hamano <tetsuaki.hamano@gmail.com>
Date: Tue, 4 Aug 2026 22:16:46 +0900
Subject: [PATCH 1/3] Color Panel: Restore the spacing below the panel header

The panel previously forced `display: block` on the ToolsPanel grid to
stop the grid row gap from being applied between the color dropdowns.
That also removed the grid's spacing below the panel header, so the
title sat flush against the first color row.

Use the ToolsPanel `hasInnerWrapper` prop with a dedicated inner wrapper
instead, so the panel keeps its own layout (and header spacing) while the
row gap is zeroed out only on the wrapper holding the color items.
---
 .../panel-color-gradient-settings.js          | 37 ++++++++++---------
 .../components/colors-gradients/style.scss    | 13 +++----
 2 files changed, 26 insertions(+), 24 deletions(-)

diff --git a/packages/block-editor/src/components/colors-gradients/panel-color-gradient-settings.js b/packages/block-editor/src/components/colors-gradients/panel-color-gradient-settings.js
index 4e581046585663..067c66f776d79c 100644
--- a/packages/block-editor/src/components/colors-gradients/panel-color-gradient-settings.js
+++ b/packages/block-editor/src/components/colors-gradients/panel-color-gradient-settings.js
@@ -65,6 +65,7 @@ export const PanelColorGradientSettingsInner = ( {
 				'block-editor-panel-color-gradient-settings',
 				className
 			) }
+			hasInnerWrapper
 			label={ showTitle ? title : undefined }
 			resetAll={ () => {
 				batch( () => {
@@ -88,23 +89,25 @@ export const PanelColorGradientSettingsInner = ( {
 			__experimentalFirstVisibleItemClass="first"
 			__experimentalLastVisibleItemClass="last"
 		>
-			<ColorGradientSettingsDropdown
-				settings={ settings }
-				panelId={ panelId }
-				{ ...{
-					colors,
-					gradients,
-					disableCustomColors,
-					disableCustomGradients,
-					__experimentalIsRenderedInSidebar,
-					enableAlpha,
-				} }
-			/>
-			{ !! children && (
-				<>
-					<Spacer marginY={ 4 } /> { children }
-				</>
-			) }
+			<div className="block-editor-panel-color-gradient-settings__inner-wrapper">
+				<ColorGradientSettingsDropdown
+					settings={ settings }
+					panelId={ panelId }
+					{ ...{
+						colors,
+						gradients,
+						disableCustomColors,
+						disableCustomGradients,
+						__experimentalIsRenderedInSidebar,
+						enableAlpha,
+					} }
+				/>
+				{ !! children && (
+					<>
+						<Spacer marginY={ 4 } /> { children }
+					</>
+				) }
+			</div>
 		</ToolsPanel>
 	);
 };
diff --git a/packages/block-editor/src/components/colors-gradients/style.scss b/packages/block-editor/src/components/colors-gradients/style.scss
index 0a1ce17eedab73..f5203df541c8ff 100644
--- a/packages/block-editor/src/components/colors-gradients/style.scss
+++ b/packages/block-editor/src/components/colors-gradients/style.scss
@@ -24,13 +24,6 @@ $swatch-gap: 12px;
 	min-width: 0;
 }
 
-.block-editor-panel-color-gradient-settings.block-editor-panel-color-gradient-settings {
-	&,
-	& > div:not(:first-of-type) {
-		display: block;
-	}
-}
-
 .block-editor-panel-color-gradient-settings {
 	@media screen and (min-width: $break-medium) {
 		.components-circular-option-picker__swatches {
@@ -46,6 +39,12 @@ $swatch-gap: 12px;
 		margin-bottom: inherit;
 	}
 
+	/* Increased specificity required to remove the slot wrapper's row gap */
+	&#{&} {
+		.block-editor-panel-color-gradient-settings__inner-wrapper {
+			row-gap: 0;
+		}
+	}
 }
 
 .block-editor-panel-color-gradient-settings__dropdown-content {

From ea6b2954945063cb632b81d970aad8944b5c2bb5 Mon Sep 17 00:00:00 2001
From: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
Date: Wed, 5 Aug 2026 12:11:16 +1000
Subject: [PATCH 2/3] Ensure full-width inner wrapper and children

---
 .../src/components/colors-gradients/style.scss        | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/packages/block-editor/src/components/colors-gradients/style.scss b/packages/block-editor/src/components/colors-gradients/style.scss
index f5203df541c8ff..6b3331b3f9a3f1 100644
--- a/packages/block-editor/src/components/colors-gradients/style.scss
+++ b/packages/block-editor/src/components/colors-gradients/style.scss
@@ -42,7 +42,18 @@ $swatch-gap: 12px;
 	/* Increased specificity required to remove the slot wrapper's row gap */
 	&#{&} {
 		.block-editor-panel-color-gradient-settings__inner-wrapper {
+			// `ToolsPanel` spans the inner wrapper across its grid via a
+			// positional selector that assumes a header is present. This panel
+			// can render without one (`showTitle={ false }`), so span it here.
+			grid-column: 1 / -1;
 			row-gap: 0;
+
+			// Unlike the other panels using an inner wrapper, this component
+			// accepts arbitrary children. Those carry no `ToolsPanelItem`
+			// class, so they'd otherwise be auto-placed into a single column.
+			> * {
+				grid-column: 1 / -1;
+			}
 		}
 	}
 }

From 8da5bc1d2145f4092b567ca5787c16d0f3c69c89 Mon Sep 17 00:00:00 2001
From: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
Date: Wed, 5 Aug 2026 12:28:51 +1000
Subject: [PATCH 3/3] Use explicit top margin as there is no longer any margin
 collapse

---
 .../colors-gradients/panel-color-gradient-settings.js          | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/block-editor/src/components/colors-gradients/panel-color-gradient-settings.js b/packages/block-editor/src/components/colors-gradients/panel-color-gradient-settings.js
index 067c66f776d79c..b5570b5a904a10 100644
--- a/packages/block-editor/src/components/colors-gradients/panel-color-gradient-settings.js
+++ b/packages/block-editor/src/components/colors-gradients/panel-color-gradient-settings.js
@@ -104,7 +104,8 @@ export const PanelColorGradientSettingsInner = ( {
 				/>
 				{ !! children && (
 					<>
-						<Spacer marginY={ 4 } /> { children }
+						<Spacer marginTop={ 4 } marginBottom={ 0 } />
+						{ children }
 					</>
 				) }
 			</div>