From 64ca9b25d41a04833511ad013b23fa75c2ecfe40 Mon Sep 17 00:00:00 2001
From: Aki Hamano <tetsuaki.hamano@gmail.com>
Date: Mon, 23 Sep 2024 00:02:19 +0900
Subject: [PATCH] Add __nextHasNoMarginBottom to BaseControl-based components

---
 src/editor-sidebar/create-panel.js           | 132 ++++++++++---------
 src/editor-sidebar/create-variation-panel.js |   4 +-
 src/editor-sidebar/metadata-editor-modal.js  |  17 ++-
 src/editor-sidebar/reset-theme.js            |   5 +-
 src/editor-sidebar/save-panel.js             |  10 +-
 src/landing-page/create-modal.js             |  10 +-
 6 files changed, 106 insertions(+), 72 deletions(-)

diff --git a/src/editor-sidebar/create-panel.js b/src/editor-sidebar/create-panel.js
index 951c03a0..41135665 100644
--- a/src/editor-sidebar/create-panel.js
+++ b/src/editor-sidebar/create-panel.js
@@ -139,6 +139,7 @@ export const CreateThemePanel = ( { createType } ) => {
 			/>
 			<VStack>
 				<TextControl
+					__nextHasNoMarginBottom
 					label={ __( 'Theme name', 'create-block-theme' ) }
 					value={ theme.name }
 					onChange={ ( value ) =>
@@ -153,67 +154,76 @@ export const CreateThemePanel = ( { createType } ) => {
 						) }
 					</summary>
 					<Spacer />
-					<TextareaControl
-						label={ __(
-							'Theme description',
-							'create-block-theme'
-						) }
-						value={ theme.description }
-						onChange={ ( value ) =>
-							setTheme( { ...theme, description: value } )
-						}
-						placeholder={ __(
-							'A short description of the theme',
-							'create-block-theme'
-						) }
-					/>
-					<TextControl
-						label={ __( 'Theme URI', 'create-block-theme' ) }
-						value={ theme.uri }
-						onChange={ ( value ) =>
-							setTheme( { ...theme, uri: value } )
-						}
-						placeholder={ __(
-							'https://github.com/wordpress/twentytwentythree/',
-							'create-block-theme'
-						) }
-					/>
-					<TextControl
-						label={ __( 'Author', 'create-block-theme' ) }
-						value={ theme.author }
-						onChange={ ( value ) =>
-							setTheme( { ...theme, author: value } )
-						}
-						placeholder={ __(
-							'the WordPress team',
-							'create-block-theme'
-						) }
-					/>
-					<TextControl
-						label={ __( 'Author URI', 'create-block-theme' ) }
-						value={ theme.author_uri }
-						onChange={ ( value ) =>
-							setTheme( { ...theme, author_uri: value } )
-						}
-						placeholder={ __(
-							'https://wordpress.org/',
-							'create-block-theme'
-						) }
-					/>
-					<SelectControl
-						label={ __(
-							'Minimum WordPress version',
-							'create-block-theme'
-						) }
-						value={ theme.requires_wp }
-						options={ WP_MINIMUM_VERSIONS.map( ( version ) => ( {
-							label: version,
-							value: version,
-						} ) ) }
-						onChange={ ( value ) => {
-							setTheme( { ...theme, requires_wp: value } );
-						} }
-					/>
+					<VStack spacing={ 4 }>
+						<TextareaControl
+							__nextHasNoMarginBottom
+							label={ __(
+								'Theme description',
+								'create-block-theme'
+							) }
+							value={ theme.description }
+							onChange={ ( value ) =>
+								setTheme( { ...theme, description: value } )
+							}
+							placeholder={ __(
+								'A short description of the theme',
+								'create-block-theme'
+							) }
+						/>
+						<TextControl
+							__nextHasNoMarginBottom
+							label={ __( 'Theme URI', 'create-block-theme' ) }
+							value={ theme.uri }
+							onChange={ ( value ) =>
+								setTheme( { ...theme, uri: value } )
+							}
+							placeholder={ __(
+								'https://github.com/wordpress/twentytwentythree/',
+								'create-block-theme'
+							) }
+						/>
+						<TextControl
+							__nextHasNoMarginBottom
+							label={ __( 'Author', 'create-block-theme' ) }
+							value={ theme.author }
+							onChange={ ( value ) =>
+								setTheme( { ...theme, author: value } )
+							}
+							placeholder={ __(
+								'the WordPress team',
+								'create-block-theme'
+							) }
+						/>
+						<TextControl
+							__nextHasNoMarginBottom
+							label={ __( 'Author URI', 'create-block-theme' ) }
+							value={ theme.author_uri }
+							onChange={ ( value ) =>
+								setTheme( { ...theme, author_uri: value } )
+							}
+							placeholder={ __(
+								'https://wordpress.org/',
+								'create-block-theme'
+							) }
+						/>
+						<SelectControl
+							__nextHasNoMarginBottom
+							label={ __(
+								'Minimum WordPress version',
+								'create-block-theme'
+							) }
+							value={ theme.requires_wp }
+							options={ WP_MINIMUM_VERSIONS.map(
+								( version ) => ( {
+									label: version,
+									value: version,
+								} )
+							) }
+							onChange={ ( value ) => {
+								setTheme( { ...theme, requires_wp: value } );
+							} }
+						/>
+					</VStack>
 				</details>
 				<br />
 				{ createType === 'createClone' && (
diff --git a/src/editor-sidebar/create-variation-panel.js b/src/editor-sidebar/create-variation-panel.js
index daa00221..a4e9f17d 100644
--- a/src/editor-sidebar/create-variation-panel.js
+++ b/src/editor-sidebar/create-variation-panel.js
@@ -101,8 +101,9 @@ export const CreateVariationPanel = () => {
 
 				<View>
 					<Spacer paddingY={ 4 }>
-						<VStack>
+						<VStack spacing={ 4 }>
 							<TextControl
+								__nextHasNoMarginBottom
 								label={ __(
 									'Variation name',
 									'create-block-theme'
@@ -114,6 +115,7 @@ export const CreateVariationPanel = () => {
 							/>
 
 							<CheckboxControl
+								__nextHasNoMarginBottom
 								label={ __(
 									'Save Fonts',
 									'create-block-theme'
diff --git a/src/editor-sidebar/metadata-editor-modal.js b/src/editor-sidebar/metadata-editor-modal.js
index 2cc2b87f..01836ee3 100644
--- a/src/editor-sidebar/metadata-editor-modal.js
+++ b/src/editor-sidebar/metadata-editor-modal.js
@@ -150,7 +150,7 @@ export const ThemeMetadataEditorModal = ( { onRequestClose } ) => {
 			onRequestClose={ onRequestClose }
 			className="create-block-theme__metadata-editor-modal"
 		>
-			<VStack>
+			<VStack spacing={ 4 }>
 				<Text>
 					{ __(
 						'Edit Metadata properties of the current theme.',
@@ -159,11 +159,13 @@ export const ThemeMetadataEditorModal = ( { onRequestClose } ) => {
 				</Text>
 				<Spacer />
 				<TextControl
+					__nextHasNoMarginBottom
 					disabled
 					label={ __( 'Theme name', 'create-block-theme' ) }
 					value={ theme.name }
 				/>
 				<TextareaControl
+					__nextHasNoMarginBottom
 					label={ __( 'Theme description', 'create-block-theme' ) }
 					value={ theme.description }
 					onChange={ ( value ) =>
@@ -175,6 +177,7 @@ export const ThemeMetadataEditorModal = ( { onRequestClose } ) => {
 					) }
 				/>
 				<TextControl
+					__nextHasNoMarginBottom
 					label={ __( 'Theme URI', 'create-block-theme' ) }
 					value={ theme.uri }
 					onChange={ ( value ) =>
@@ -186,6 +189,7 @@ export const ThemeMetadataEditorModal = ( { onRequestClose } ) => {
 					) }
 				/>
 				<TextControl
+					__nextHasNoMarginBottom
 					label={ __( 'Author', 'create-block-theme' ) }
 					value={ theme.author }
 					onChange={ ( value ) =>
@@ -197,6 +201,7 @@ export const ThemeMetadataEditorModal = ( { onRequestClose } ) => {
 					) }
 				/>
 				<TextControl
+					__nextHasNoMarginBottom
 					label={ __( 'Author URI', 'create-block-theme' ) }
 					value={ theme.author_uri }
 					onChange={ ( value ) =>
@@ -208,6 +213,7 @@ export const ThemeMetadataEditorModal = ( { onRequestClose } ) => {
 					) }
 				/>
 				<TextControl
+					__nextHasNoMarginBottom
 					label={ __( 'Version', 'create-block-theme' ) }
 					value={ theme.version }
 					onChange={ ( value ) =>
@@ -219,6 +225,7 @@ export const ThemeMetadataEditorModal = ( { onRequestClose } ) => {
 					) }
 				/>
 				<SelectControl
+					__nextHasNoMarginBottom
 					label={ __(
 						'Minimum WordPress version',
 						'create-block-theme'
@@ -233,6 +240,7 @@ export const ThemeMetadataEditorModal = ( { onRequestClose } ) => {
 					} }
 				/>
 				<FormTokenField
+					__nextHasNoMarginBottom
 					label={ __( 'Theme tags', 'create-block-theme' ) }
 					value={
 						theme.tags_custom ? theme.tags_custom.split( ', ' ) : []
@@ -242,7 +250,6 @@ export const ThemeMetadataEditorModal = ( { onRequestClose } ) => {
 				<HStack
 					style={ {
 						marginTop: '-20px',
-						marginBottom: '1rem',
 					} }
 				>
 					<ExternalLink
@@ -256,6 +263,7 @@ export const ThemeMetadataEditorModal = ( { onRequestClose } ) => {
 					</ExternalLink>
 				</HStack>
 				<TextareaControl
+					__nextHasNoMarginBottom
 					label={ __( 'Recommended Plugins', 'create-block-theme' ) }
 					help={
 						<>
@@ -288,6 +296,7 @@ Plugin Description`,
 				/>
 
 				<TextareaControl
+					__nextHasNoMarginBottom
 					label={ __( 'Font credits', 'create-block-theme' ) }
 					help={
 						<>
@@ -327,6 +336,7 @@ ${ __( 'Source', 'create-block-theme' ) }` }
 				/>
 
 				<TextareaControl
+					__nextHasNoMarginBottom
 					label={ __( 'Image Credits', 'create-block-theme' ) }
 					help={
 						<>
@@ -358,7 +368,7 @@ Image license`,
 					}
 				/>
 
-				<BaseControl>
+				<BaseControl __nextHasNoMarginBottom>
 					<BaseControl.VisualLabel>
 						{ __( 'Screenshot', 'create-block-theme' ) }
 					</BaseControl.VisualLabel>
@@ -408,6 +418,7 @@ Image license`,
 					</MediaUploadCheck>
 				</BaseControl>
 				<TextControl
+					__nextHasNoMarginBottom
 					label={ __( 'Theme Subfolder', 'create-block-theme' ) }
 					value={ theme.subfolder }
 					onChange={ ( value ) =>
diff --git a/src/editor-sidebar/reset-theme.js b/src/editor-sidebar/reset-theme.js
index 3ee5501b..fa770371 100644
--- a/src/editor-sidebar/reset-theme.js
+++ b/src/editor-sidebar/reset-theme.js
@@ -94,8 +94,9 @@ function ResetTheme() {
 				<ScreenHeader
 					title={ __( 'Reset Theme', 'create-block-theme' ) }
 				/>
-				<VStack>
+				<VStack spacing={ 4 }>
 					<CheckboxControl
+						__nextHasNoMarginBottom
 						label={ __(
 							'Reset theme styles',
 							'create-block-theme'
@@ -111,6 +112,7 @@ function ResetTheme() {
 					/>
 
 					<CheckboxControl
+						__nextHasNoMarginBottom
 						label={ __(
 							'Reset theme templates',
 							'create-block-theme'
@@ -126,6 +128,7 @@ function ResetTheme() {
 					/>
 
 					<CheckboxControl
+						__nextHasNoMarginBottom
 						label={ __(
 							'Reset theme template-parts',
 							'create-block-theme'
diff --git a/src/editor-sidebar/save-panel.js b/src/editor-sidebar/save-panel.js
index 8266f91e..90c95abd 100644
--- a/src/editor-sidebar/save-panel.js
+++ b/src/editor-sidebar/save-panel.js
@@ -102,8 +102,9 @@ export const SaveThemePanel = () => {
 			<ScreenHeader
 				title={ __( 'Save Changes', 'create-block-theme' ) }
 			/>
-			<VStack>
+			<VStack spacing={ 4 }>
 				<CheckboxControl
+					__nextHasNoMarginBottom
 					label={ __( 'Save Fonts', 'create-block-theme' ) }
 					help={ __(
 						'Save activated fonts in the Font Library to the theme. Remove deactivated theme fonts from the theme.',
@@ -113,6 +114,7 @@ export const SaveThemePanel = () => {
 					onChange={ () => handleTogglePreference( 'saveFonts' ) }
 				/>
 				<CheckboxControl
+					__nextHasNoMarginBottom
 					label={ __( 'Save Style Changes', 'create-block-theme' ) }
 					help={ __(
 						'Save Global Styles values set in the Editor to the theme.',
@@ -122,6 +124,7 @@ export const SaveThemePanel = () => {
 					onChange={ () => handleTogglePreference( 'saveStyle' ) }
 				/>
 				<CheckboxControl
+					__nextHasNoMarginBottom
 					label={ __(
 						'Save Template Changes',
 						'create-block-theme'
@@ -134,6 +137,7 @@ export const SaveThemePanel = () => {
 					onChange={ () => handleTogglePreference( 'saveTemplates' ) }
 				/>
 				<CheckboxControl
+					__nextHasNoMarginBottom
 					label={ __(
 						'Process Only Modified Templates',
 						'create-block-theme'
@@ -152,6 +156,7 @@ export const SaveThemePanel = () => {
 					}
 				/>
 				<CheckboxControl
+					__nextHasNoMarginBottom
 					label={ __( 'Save Synced Patterns', 'create-block-theme' ) }
 					help={ __(
 						'Any synced patterns created in the Editor will be moved to the theme. Note that this will delete all synced patterns from the Editor and any references in templates will be made relative to the theme.',
@@ -161,6 +166,7 @@ export const SaveThemePanel = () => {
 					onChange={ () => handleTogglePreference( 'savePatterns' ) }
 				/>
 				<CheckboxControl
+					__nextHasNoMarginBottom
 					label={ __( 'Localize Text', 'create-block-theme' ) }
 					help={ __(
 						'Any text in a template or pattern will be localized in a pattern.',
@@ -177,6 +183,7 @@ export const SaveThemePanel = () => {
 					onChange={ () => handleTogglePreference( 'localizeText' ) }
 				/>
 				<CheckboxControl
+					__nextHasNoMarginBottom
 					label={ __( 'Localize Images', 'create-block-theme' ) }
 					help={ __(
 						'Any images in a template or pattern will be copied to a local /assets folder and referenced from there via a pattern.',
@@ -195,6 +202,7 @@ export const SaveThemePanel = () => {
 					}
 				/>
 				<CheckboxControl
+					__nextHasNoMarginBottom
 					label={ __(
 						'Remove Navigation Refs',
 						'create-block-theme'
diff --git a/src/landing-page/create-modal.js b/src/landing-page/create-modal.js
index c1ff0ed1..4daf2765 100644
--- a/src/landing-page/create-modal.js
+++ b/src/landing-page/create-modal.js
@@ -111,6 +111,7 @@ export const CreateThemeModal = ( { onRequestClose, creationType } ) => {
 					) }
 				</Text>
 				<TextControl
+					__nextHasNoMarginBottom
 					label={ __(
 						'Theme name (required)',
 						'create-block-theme'
@@ -120,15 +121,13 @@ export const CreateThemeModal = ( { onRequestClose, creationType } ) => {
 					onChange={ ( value ) =>
 						setTheme( { ...theme, name: value } )
 					}
-				/>
-
-				<Text variant="muted">
-					{ __(
+					help={ __(
 						'(Tip: You can edit all of this and more in the Editor later.)',
 						'create-block-theme'
 					) }
-				</Text>
+				/>
 				<TextareaControl
+					__nextHasNoMarginBottom
 					label={ __( 'Theme description', 'create-block-theme' ) }
 					value={ theme.description }
 					onChange={ ( value ) =>
@@ -140,6 +139,7 @@ export const CreateThemeModal = ( { onRequestClose, creationType } ) => {
 					) }
 				/>
 				<TextControl
+					__nextHasNoMarginBottom
 					label={ __( 'Author', 'create-block-theme' ) }
 					value={ theme.author }
 					onChange={ ( value ) =>