From ac7db7528a80dbcc17407a977683ade0d62225d5 Mon Sep 17 00:00:00 2001
From: brookewp <brooke.kaminski@automattic.com>
Date: Fri, 9 Dec 2022 18:47:16 -0800
Subject: [PATCH] SelectControl: remove margin overrides and add new opt-in
 prop

---
 .../components/default-style-picker/index.js  |  1 +
 .../src/components/font-family/index.js       |  1 +
 .../components/image-size-control/index.js    |  1 +
 packages/block-library/src/archives/edit.js   |  1 +
 packages/block-library/src/audio/edit.js      |  1 +
 .../edit/comments-inspector-controls.js       |  1 +
 packages/block-library/src/file/inspector.js  |  1 +
 packages/block-library/src/gallery/edit.js    |  2 +
 packages/block-library/src/gallery/v1/edit.js |  2 +
 packages/block-library/src/group/edit.js      |  1 +
 .../block-library/src/post-author/edit.js     |  2 +
 .../post-featured-image/dimension-controls.js |  1 +
 .../query/edit/inspector-controls/index.js    |  1 +
 .../edit/inspector-controls/order-control.js  |  1 +
 .../edit/inspector-controls/sticky-control.js |  1 +
 .../src/query/edit/query-content.js           |  1 +
 packages/block-library/src/tag-cloud/edit.js  |  1 +
 .../template-part/edit/advanced-controls.js   |  2 +
 .../src/video/edit-common-settings.js         |  1 +
 .../block-library/src/video/tracks-editor.js  |  1 +
 .../components/sidebar/post-template/form.js  |  1 +
 .../navigation-inspector.js                   | 10 ++--
 .../components/template-details/style.scss    |  4 ++
 .../template-part-area-selector.js            |  2 +
 .../src/components/post-author/select.js      |  1 +
 .../src/components/post-format/index.js       |  1 +
 .../src/components/post-template/index.js     |  1 +
 .../src/blocks/legacy-widget/edit/index.js    | 50 ++++++++++---------
 .../edit/widget-type-selector.js              |  2 +
 .../src/blocks/legacy-widget/editor.scss      |  9 ++--
 30 files changed, 74 insertions(+), 31 deletions(-)

diff --git a/packages/block-editor/src/components/default-style-picker/index.js b/packages/block-editor/src/components/default-style-picker/index.js
index 4d4bbaac6a259c..0f3190a7a24f72 100644
--- a/packages/block-editor/src/components/default-style-picker/index.js
+++ b/packages/block-editor/src/components/default-style-picker/index.js
@@ -58,6 +58,7 @@ export default function DefaultStylePicker( { blockName } ) {
 		onUpdatePreferredStyleVariations && (
 			<div className="default-style-picker__default-switcher">
 				<SelectControl
+					__nextHasNoMarginBottom
 					options={ selectOptions }
 					value={ preferredStyle || '' }
 					label={ __( 'Default Style' ) }
diff --git a/packages/block-editor/src/components/font-family/index.js b/packages/block-editor/src/components/font-family/index.js
index 8d49de5bf0b168..f2327cec776d1f 100644
--- a/packages/block-editor/src/components/font-family/index.js
+++ b/packages/block-editor/src/components/font-family/index.js
@@ -40,6 +40,7 @@ export default function FontFamilyControl( {
 	];
 	return (
 		<SelectControl
+			__nextHasNoMarginBottom
 			label={ __( 'Font' ) }
 			options={ options }
 			value={ value }
diff --git a/packages/block-editor/src/components/image-size-control/index.js b/packages/block-editor/src/components/image-size-control/index.js
index 15337ef3887f14..b8c2d656070558 100644
--- a/packages/block-editor/src/components/image-size-control/index.js
+++ b/packages/block-editor/src/components/image-size-control/index.js
@@ -41,6 +41,7 @@ export default function ImageSizeControl( {
 		<>
 			{ ! isEmpty( imageSizeOptions ) && (
 				<SelectControl
+					__nextHasNoMarginBottom
 					label={ __( 'Image size' ) }
 					value={ slug }
 					options={ imageSizeOptions }
diff --git a/packages/block-library/src/archives/edit.js b/packages/block-library/src/archives/edit.js
index 118fa5cfa2d1ad..9f1f681e95a09b 100644
--- a/packages/block-library/src/archives/edit.js
+++ b/packages/block-library/src/archives/edit.js
@@ -48,6 +48,7 @@ export default function ArchivesEdit( { attributes, setAttributes } ) {
 						}
 					/>
 					<SelectControl
+						__nextHasNoMarginBottom
 						label={ __( 'Group by:' ) }
 						options={ [
 							{ label: __( 'Year' ), value: 'yearly' },
diff --git a/packages/block-library/src/audio/edit.js b/packages/block-library/src/audio/edit.js
index 47b2f36b2fb342..74429cac3364f3 100644
--- a/packages/block-library/src/audio/edit.js
+++ b/packages/block-library/src/audio/edit.js
@@ -218,6 +218,7 @@ function AudioEdit( {
 						checked={ loop }
 					/>
 					<SelectControl
+						__nextHasNoMarginBottom
 						label={ _x( 'Preload', 'noun; Audio block parameter' ) }
 						value={ preload || '' }
 						// `undefined` is required for the preload attribute to be unset.
diff --git a/packages/block-library/src/comments/edit/comments-inspector-controls.js b/packages/block-library/src/comments/edit/comments-inspector-controls.js
index acc2bbce4e7c46..e548fece552f9d 100644
--- a/packages/block-library/src/comments/edit/comments-inspector-controls.js
+++ b/packages/block-library/src/comments/edit/comments-inspector-controls.js
@@ -13,6 +13,7 @@ export default function CommentsInspectorControls( {
 		<InspectorControls>
 			<InspectorControls __experimentalGroup="advanced">
 				<SelectControl
+					__nextHasNoMarginBottom
 					label={ __( 'HTML element' ) }
 					options={ [
 						{ label: __( 'Default (<div>)' ), value: 'div' },
diff --git a/packages/block-library/src/file/inspector.js b/packages/block-library/src/file/inspector.js
index 71e0885eae1c6b..c09e3b7685aec0 100644
--- a/packages/block-library/src/file/inspector.js
+++ b/packages/block-library/src/file/inspector.js
@@ -71,6 +71,7 @@ export default function FileBlockInspector( {
 				) }
 				<PanelBody title={ __( 'Settings' ) }>
 					<SelectControl
+						__nextHasNoMarginBottom
 						label={ __( 'Link to' ) }
 						value={ textLinkHref }
 						options={ linkDestinationOptions }
diff --git a/packages/block-library/src/gallery/edit.js b/packages/block-library/src/gallery/edit.js
index 036f0c2133a5d3..9da144f81e0f8e 100644
--- a/packages/block-library/src/gallery/edit.js
+++ b/packages/block-library/src/gallery/edit.js
@@ -517,6 +517,7 @@ function GalleryEdit( props ) {
 						help={ getImageCropHelp }
 					/>
 					<SelectControl
+						__nextHasNoMarginBottom
 						label={ __( 'Link to' ) }
 						value={ linkTo }
 						onChange={ setLinkTo }
@@ -532,6 +533,7 @@ function GalleryEdit( props ) {
 					) }
 					{ imageSizeOptions?.length > 0 && (
 						<SelectControl
+							__nextHasNoMarginBottom
 							label={ __( 'Image size' ) }
 							value={ sizeSlug }
 							options={ imageSizeOptions }
diff --git a/packages/block-library/src/gallery/v1/edit.js b/packages/block-library/src/gallery/v1/edit.js
index e79760a544cd2c..50b1601aabbd79 100644
--- a/packages/block-library/src/gallery/v1/edit.js
+++ b/packages/block-library/src/gallery/v1/edit.js
@@ -420,6 +420,7 @@ function GalleryEdit( props ) {
 						help={ getImageCropHelp }
 					/>
 					<SelectControl
+						__nextHasNoMarginBottom
 						label={ __( 'Link to' ) }
 						value={ linkTo }
 						onChange={ setLinkTo }
@@ -428,6 +429,7 @@ function GalleryEdit( props ) {
 					/>
 					{ shouldShowSizeOptions && (
 						<SelectControl
+							__nextHasNoMarginBottom
 							label={ __( 'Image size' ) }
 							value={ sizeSlug }
 							options={ imageSizeOptions }
diff --git a/packages/block-library/src/group/edit.js b/packages/block-library/src/group/edit.js
index 8962d8a8a3bf16..a2cd8bd8cbaf22 100644
--- a/packages/block-library/src/group/edit.js
+++ b/packages/block-library/src/group/edit.js
@@ -51,6 +51,7 @@ function GroupEditControls( { tagName, onSelectTagName } ) {
 	return (
 		<InspectorControls __experimentalGroup="advanced">
 			<SelectControl
+				__nextHasNoMarginBottom
 				label={ __( 'HTML element' ) }
 				options={ [
 					{ label: __( 'Default (<div>)' ), value: 'div' },
diff --git a/packages/block-library/src/post-author/edit.js b/packages/block-library/src/post-author/edit.js
index b0a2fb2883f79a..9573eedde66cfe 100644
--- a/packages/block-library/src/post-author/edit.js
+++ b/packages/block-library/src/post-author/edit.js
@@ -112,6 +112,7 @@ function PostAuthorEdit( {
 							/>
 						) ) || (
 							<SelectControl
+								__nextHasNoMarginBottom
 								label={ __( 'Author' ) }
 								value={ authorId }
 								options={ authorOptions }
@@ -127,6 +128,7 @@ function PostAuthorEdit( {
 					/>
 					{ showAvatar && (
 						<SelectControl
+							__nextHasNoMarginBottom
 							label={ __( 'Avatar size' ) }
 							value={ attributes.avatarSize }
 							options={ avatarSizes }
diff --git a/packages/block-library/src/post-featured-image/dimension-controls.js b/packages/block-library/src/post-featured-image/dimension-controls.js
index 9d0b11a6318d26..76bc9787bd5874 100644
--- a/packages/block-library/src/post-featured-image/dimension-controls.js
+++ b/packages/block-library/src/post-featured-image/dimension-controls.js
@@ -160,6 +160,7 @@ const DimensionControls = ( {
 					panelId={ clientId }
 				>
 					<SelectControl
+						__nextHasNoMarginBottom
 						label={ __( 'Image size' ) }
 						value={ sizeSlug || DEFAULT_SIZE }
 						options={ imageSizeOptions }
diff --git a/packages/block-library/src/query/edit/inspector-controls/index.js b/packages/block-library/src/query/edit/inspector-controls/index.js
index 13cc70e9dc5428..3c0713f2ac986b 100644
--- a/packages/block-library/src/query/edit/inspector-controls/index.js
+++ b/packages/block-library/src/query/edit/inspector-controls/index.js
@@ -129,6 +129,7 @@ export default function QueryInspectorControls( {
 						) }
 						{ showPostTypeControl && (
 							<SelectControl
+								__nextHasNoMarginBottom
 								options={ postTypesSelectOptions }
 								value={ postType }
 								label={ __( 'Post type' ) }
diff --git a/packages/block-library/src/query/edit/inspector-controls/order-control.js b/packages/block-library/src/query/edit/inspector-controls/order-control.js
index 143e4c5f8dd8b0..71ddd290989728 100644
--- a/packages/block-library/src/query/edit/inspector-controls/order-control.js
+++ b/packages/block-library/src/query/edit/inspector-controls/order-control.js
@@ -27,6 +27,7 @@ const orderOptions = [
 function OrderControl( { order, orderBy, onChange } ) {
 	return (
 		<SelectControl
+			__nextHasNoMarginBottom
 			label={ __( 'Order by' ) }
 			value={ `${ orderBy }/${ order }` }
 			options={ orderOptions }
diff --git a/packages/block-library/src/query/edit/inspector-controls/sticky-control.js b/packages/block-library/src/query/edit/inspector-controls/sticky-control.js
index 8c0c95e19d56db..d3f29a66385931 100644
--- a/packages/block-library/src/query/edit/inspector-controls/sticky-control.js
+++ b/packages/block-library/src/query/edit/inspector-controls/sticky-control.js
@@ -13,6 +13,7 @@ const stickyOptions = [
 export default function StickyControl( { value, onChange } ) {
 	return (
 		<SelectControl
+			__nextHasNoMarginBottom
 			label={ __( 'Sticky posts' ) }
 			options={ stickyOptions }
 			value={ value }
diff --git a/packages/block-library/src/query/edit/query-content.js b/packages/block-library/src/query/edit/query-content.js
index bdb4dc3e734337..23a681ff9d4044 100644
--- a/packages/block-library/src/query/edit/query-content.js
+++ b/packages/block-library/src/query/edit/query-content.js
@@ -112,6 +112,7 @@ export default function QueryContent( {
 			</BlockControls>
 			<InspectorControls __experimentalGroup="advanced">
 				<SelectControl
+					__nextHasNoMarginBottom
 					label={ __( 'HTML element' ) }
 					options={ [
 						{ label: __( 'Default (<div>)' ), value: 'div' },
diff --git a/packages/block-library/src/tag-cloud/edit.js b/packages/block-library/src/tag-cloud/edit.js
index dd669a7e840b3f..e13c70b1a97f10 100644
--- a/packages/block-library/src/tag-cloud/edit.js
+++ b/packages/block-library/src/tag-cloud/edit.js
@@ -109,6 +109,7 @@ function TagCloudEdit( { attributes, setAttributes, taxonomies } ) {
 		<InspectorControls>
 			<PanelBody title={ __( 'Settings' ) }>
 				<SelectControl
+					__nextHasNoMarginBottom
 					label={ __( 'Taxonomy' ) }
 					options={ getTaxonomyOptions() }
 					value={ taxonomy }
diff --git a/packages/block-library/src/template-part/edit/advanced-controls.js b/packages/block-library/src/template-part/edit/advanced-controls.js
index d57d6b2f631807..e2f6973d370e67 100644
--- a/packages/block-library/src/template-part/edit/advanced-controls.js
+++ b/packages/block-library/src/template-part/edit/advanced-controls.js
@@ -57,6 +57,7 @@ export function TemplatePartAdvancedControls( {
 					/>
 
 					<SelectControl
+						__nextHasNoMarginBottom
 						label={ __( 'Area' ) }
 						labelPosition="top"
 						options={ areaOptions }
@@ -66,6 +67,7 @@ export function TemplatePartAdvancedControls( {
 				</>
 			) }
 			<SelectControl
+				__nextHasNoMarginBottom
 				label={ __( 'HTML element' ) }
 				options={ [
 					{
diff --git a/packages/block-library/src/video/edit-common-settings.js b/packages/block-library/src/video/edit-common-settings.js
index dbd8ab49c226eb..3aa2c174a9f390 100644
--- a/packages/block-library/src/video/edit-common-settings.js
+++ b/packages/block-library/src/video/edit-common-settings.js
@@ -74,6 +74,7 @@ const VideoSettings = ( { setAttributes, attributes } ) => {
 				checked={ playsInline }
 			/>
 			<SelectControl
+				__nextHasNoMarginBottom
 				label={ __( 'Preload' ) }
 				value={ preload }
 				onChange={ onChangePreload }
diff --git a/packages/block-library/src/video/tracks-editor.js b/packages/block-library/src/video/tracks-editor.js
index 4f8ebbdba3f243..a9c9e24c53f731 100644
--- a/packages/block-library/src/video/tracks-editor.js
+++ b/packages/block-library/src/video/tracks-editor.js
@@ -119,6 +119,7 @@ function SingleTrackEditor( { track, onChange, onClose, onRemove } ) {
 					/>
 				</div>
 				<SelectControl
+					__nextHasNoMarginBottom
 					className="block-library-video-tracks-editor__single-track-editor-kind-select"
 					options={ KIND_OPTIONS }
 					value={ kind }
diff --git a/packages/edit-post/src/components/sidebar/post-template/form.js b/packages/edit-post/src/components/sidebar/post-template/form.js
index 763ab229556661..14c1e6dee76c7d 100644
--- a/packages/edit-post/src/components/sidebar/post-template/form.js
+++ b/packages/edit-post/src/components/sidebar/post-template/form.js
@@ -111,6 +111,7 @@ export default function PostTemplateForm( { onClose } ) {
 				</Notice>
 			) : (
 				<SelectControl
+					__nextHasNoMarginBottom
 					hideLabelFromVision
 					label={ __( 'Template' ) }
 					value={ selectedOption?.value ?? '' }
diff --git a/packages/edit-site/src/components/sidebar-edit-mode/navigation-menu-sidebar/navigation-inspector.js b/packages/edit-site/src/components/sidebar-edit-mode/navigation-menu-sidebar/navigation-inspector.js
index 1f0c5fefbdc444..642a556fead744 100644
--- a/packages/edit-site/src/components/sidebar-edit-mode/navigation-menu-sidebar/navigation-inspector.js
+++ b/packages/edit-site/src/components/sidebar-edit-mode/navigation-menu-sidebar/navigation-inspector.js
@@ -3,7 +3,10 @@
  */
 import { useSelect } from '@wordpress/data';
 import { useState, useEffect } from '@wordpress/element';
-import { SelectControl } from '@wordpress/components';
+import {
+	SelectControl,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
 import { store as coreStore, useEntityBlockEditor } from '@wordpress/core-data';
 import {
 	store as blockEditorStore,
@@ -168,7 +171,7 @@ export default function NavigationInspector() {
 	}, [ isLoadingInnerBlocks, hasLoadedInnerBlocks ] );
 
 	return (
-		<div className="edit-site-navigation-inspector">
+		<VStack>
 			{ hasResolvedNavigationMenus && ! hasNavigationMenus && (
 				<p className="edit-site-navigation-inspector__empty-msg">
 					{ __( 'There are no Navigation Menus.' ) }
@@ -180,6 +183,7 @@ export default function NavigationInspector() {
 			) }
 			{ hasResolvedNavigationMenus && hasMoreThanOneNavigationMenu && (
 				<SelectControl
+					__nextHasNoMarginBottom
 					aria-controls={
 						// aria-controls should only apply when referenced element is in DOM
 						hasLoadedInnerBlocks ? navMenuListId : undefined
@@ -216,6 +220,6 @@ export default function NavigationInspector() {
 					{ __( 'Navigation Menu is empty.' ) }
 				</p>
 			) }
-		</div>
+		</VStack>
 	);
 }
diff --git a/packages/edit-site/src/components/template-details/style.scss b/packages/edit-site/src/components/template-details/style.scss
index ee840be7c43db7..60dedee84ecadf 100644
--- a/packages/edit-site/src/components/template-details/style.scss
+++ b/packages/edit-site/src/components/template-details/style.scss
@@ -2,6 +2,10 @@
 	.edit-site-template-details__group {
 		margin: 0;
 		padding: $grid-unit-20;
+
+		.edit-site-template-details__area-select {
+			margin-bottom: $grid-unit-10;
+		}
 	}
 
 	.edit-site-template-details__group + .edit-site-template-details__group {
diff --git a/packages/edit-site/src/components/template-details/template-part-area-selector.js b/packages/edit-site/src/components/template-details/template-part-area-selector.js
index 1eff28d2d4c976..61279a26ca2373 100644
--- a/packages/edit-site/src/components/template-details/template-part-area-selector.js
+++ b/packages/edit-site/src/components/template-details/template-part-area-selector.js
@@ -28,6 +28,8 @@ export default function TemplatePartAreaSelector( { id } ) {
 
 	return (
 		<SelectControl
+			__nextHasNoMarginBottom
+			className="edit-site-template-details__area-select"
 			label={ __( 'Area' ) }
 			labelPosition="top"
 			options={ areaOptions }
diff --git a/packages/editor/src/components/post-author/select.js b/packages/editor/src/components/post-author/select.js
index 4439f75e4e8009..a367f4fb8a4ede 100644
--- a/packages/editor/src/components/post-author/select.js
+++ b/packages/editor/src/components/post-author/select.js
@@ -40,6 +40,7 @@ function PostAuthorSelect() {
 
 	return (
 		<SelectControl
+			__nextHasNoMarginBottom
 			className="post-author-selector"
 			label={ __( 'Author' ) }
 			options={ authorOptions }
diff --git a/packages/editor/src/components/post-format/index.js b/packages/editor/src/components/post-format/index.js
index 4f3ec2c6966937..44a06b1405b96b 100644
--- a/packages/editor/src/components/post-format/index.js
+++ b/packages/editor/src/components/post-format/index.js
@@ -82,6 +82,7 @@ export default function PostFormat() {
 		<PostFormatCheck>
 			<div className="editor-post-format">
 				<SelectControl
+					__nextHasNoMarginBottom
 					label={ __( 'Post Format' ) }
 					value={ postFormat }
 					onChange={ ( format ) => onUpdatePostFormat( format ) }
diff --git a/packages/editor/src/components/post-template/index.js b/packages/editor/src/components/post-template/index.js
index c52fab6316ba2d..3e73135321b183 100644
--- a/packages/editor/src/components/post-template/index.js
+++ b/packages/editor/src/components/post-template/index.js
@@ -44,6 +44,7 @@ export function PostTemplate() {
 
 	return (
 		<SelectControl
+			__nextHasNoMarginBottom
 			label={ __( 'Template:' ) }
 			value={ selectedTemplate }
 			onChange={ ( templateSlug ) => {
diff --git a/packages/widgets/src/blocks/legacy-widget/edit/index.js b/packages/widgets/src/blocks/legacy-widget/edit/index.js
index a763bbd0dd4045..96399c03769222 100644
--- a/packages/widgets/src/blocks/legacy-widget/edit/index.js
+++ b/packages/widgets/src/blocks/legacy-widget/edit/index.js
@@ -57,30 +57,32 @@ function Empty( { attributes: { id, idBase }, setAttributes } ) {
 			icon={ <BlockIcon icon={ brushIcon } /> }
 			label={ __( 'Legacy Widget' ) }
 		>
-			<WidgetTypeSelector
-				selectedId={ id ?? idBase }
-				onSelect={ ( { selectedId, isMulti } ) => {
-					if ( ! selectedId ) {
-						setAttributes( {
-							id: null,
-							idBase: null,
-							instance: null,
-						} );
-					} else if ( isMulti ) {
-						setAttributes( {
-							id: null,
-							idBase: selectedId,
-							instance: {},
-						} );
-					} else {
-						setAttributes( {
-							id: selectedId,
-							idBase: null,
-							instance: null,
-						} );
-					}
-				} }
-			/>
+			<div className="wp-block-legacy-widget__selector-container">
+				<WidgetTypeSelector
+					selectedId={ id ?? idBase }
+					onSelect={ ( { selectedId, isMulti } ) => {
+						if ( ! selectedId ) {
+							setAttributes( {
+								id: null,
+								idBase: null,
+								instance: null,
+							} );
+						} else if ( isMulti ) {
+							setAttributes( {
+								id: null,
+								idBase: selectedId,
+								instance: {},
+							} );
+						} else {
+							setAttributes( {
+								id: selectedId,
+								idBase: null,
+								instance: null,
+							} );
+						}
+					} }
+				/>
+			</div>
 		</Placeholder>
 	);
 }
diff --git a/packages/widgets/src/blocks/legacy-widget/edit/widget-type-selector.js b/packages/widgets/src/blocks/legacy-widget/edit/widget-type-selector.js
index 4afe1ee1359eae..12c31befe46178 100644
--- a/packages/widgets/src/blocks/legacy-widget/edit/widget-type-selector.js
+++ b/packages/widgets/src/blocks/legacy-widget/edit/widget-type-selector.js
@@ -27,6 +27,8 @@ export default function WidgetTypeSelector( { selectedId, onSelect } ) {
 
 	return (
 		<SelectControl
+			__nextHasNoMarginBottom
+			className="wp-block-legacy-widget__select-widget"
 			label={ __( 'Select a legacy widget to display:' ) }
 			value={ selectedId ?? '' }
 			options={ [
diff --git a/packages/widgets/src/blocks/legacy-widget/editor.scss b/packages/widgets/src/blocks/legacy-widget/editor.scss
index 93e7ab374f70d1..65ab1582023c0e 100644
--- a/packages/widgets/src/blocks/legacy-widget/editor.scss
+++ b/packages/widgets/src/blocks/legacy-widget/editor.scss
@@ -164,11 +164,12 @@
 }
 
 .wp-block-legacy-widget {
-	.components-base-control {
+	.wp-block-legacy-widget__selector-container {
 		width: 100%;
 	}
-	.components-select-control__input {
-		padding: 0;
-		font-family: system-ui;
+
+	// Replaces margin on BaseControl
+	.wp-block-legacy-widget__select-widget {
+		margin-bottom: $grid-unit-10;
 	}
 }