From e5bc2a1a62e36acb8e4b96b2193682ee1175cf0a Mon Sep 17 00:00:00 2001
From: Aki Hamano <54422211+t-hamano@users.noreply.github.com>
Date: Wed, 25 Dec 2024 13:46:01 +0900
Subject: [PATCH] Columns: Add space above notice text (#68259)

Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
---
 packages/block-library/src/columns/edit.js | 42 ++++++++++++----------
 1 file changed, 24 insertions(+), 18 deletions(-)

diff --git a/packages/block-library/src/columns/edit.js b/packages/block-library/src/columns/edit.js
index cad79c356fe031..f454de2e5e1203 100644
--- a/packages/block-library/src/columns/edit.js
+++ b/packages/block-library/src/columns/edit.js
@@ -13,6 +13,7 @@ import {
 	ToggleControl,
 	__experimentalToolsPanel as ToolsPanel,
 	__experimentalToolsPanelItem as ToolsPanelItem,
+	__experimentalVStack as VStack,
 } from '@wordpress/components';
 
 import {
@@ -166,24 +167,29 @@ function ColumnInspectorControls( {
 					hasValue={ () => count }
 					onDeselect={ () => updateColumns( count, minCount ) }
 				>
-					<RangeControl
-						__nextHasNoMarginBottom
-						__next40pxDefaultSize
-						label={ __( 'Columns' ) }
-						value={ count }
-						onChange={ ( value ) =>
-							updateColumns( count, Math.max( minCount, value ) )
-						}
-						min={ Math.max( 1, minCount ) }
-						max={ Math.max( 6, count ) }
-					/>
-					{ count > 6 && (
-						<Notice status="warning" isDismissible={ false }>
-							{ __(
-								'This column count exceeds the recommended amount and may cause visual breakage.'
-							) }
-						</Notice>
-					) }
+					<VStack spacing={ 4 }>
+						<RangeControl
+							__nextHasNoMarginBottom
+							__next40pxDefaultSize
+							label={ __( 'Columns' ) }
+							value={ count }
+							onChange={ ( value ) =>
+								updateColumns(
+									count,
+									Math.max( minCount, value )
+								)
+							}
+							min={ Math.max( 1, minCount ) }
+							max={ Math.max( 6, count ) }
+						/>
+						{ count > 6 && (
+							<Notice status="warning" isDismissible={ false }>
+								{ __(
+									'This column count exceeds the recommended amount and may cause visual breakage.'
+								) }
+							</Notice>
+						) }
+					</VStack>
 				</ToolsPanelItem>
 			) }
 			<ToolsPanelItem