SelectControl: remove margin overrides and add new opt-in prop

WordPress · Dec 10, 2022 · ac7db75 · ac7db75
1 parent b333d1d
commit ac7db75
Show file tree

Hide file tree

Showing 30 changed files with 74 additions and 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -111,6 +111,7 @@ export default function PostTemplateForm( { onClose } ) {
 				</Notice>
 			) : (
 				<SelectControl
+					__nextHasNoMarginBottom
 					hideLabelFromVision
 					label={ __( 'Template' ) }
 					value={ selectedOption?.value ?? '' }

diff --git a/...dit-site/src/components/sidebar-edit-mode/navigation-menu-sidebar/navigation-inspector.js b/...dit-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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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;
 	}
 }