SelectControl: Hard deprecate 40px default size

packages/block-editor/src/components/dimensions-tool/aspect-ratio-tool.js

@@ -92,7 +92,6 @@ export default function AspectRatioTool( {
 				value={ displayValue }
 				options={ options ?? aspectRatioOptions }
 				onChange={ onChange }
-				size="__unstable-large"
 			/>
 		</ToolsPanelItem>
 	);

packages/block-editor/src/components/html-element-control/index.js

@@ -88,7 +88,6 @@ export default function HTMLElementControl( {
 	return (
 		<VStack spacing={ 2 } className="block-editor-html-element-control">
 			<SelectControl
-				__next40pxDefaultSize
 				label={ __( 'HTML element' ) }
 				options={ modifiedOptions }
 				value={ tagName }

packages/block-editor/src/components/image-size-control/index.js

@@ -96,7 +96,6 @@ export default function ImageSizeControl( {
 					options={ imageSizeOptions }
 					onChange={ onChangeImage }
 					help={ imageSizeHelp }
-					size="__unstable-large"
 				/>
 			) }
 			{ isResizable && (

packages/block-editor/src/components/resolution-tool/index.js

@@ -51,7 +51,6 @@ export default function ResolutionTool( {
 				options={ options }
 				onChange={ onChange }
 				help={ __( 'Select the size of the source image.' ) }
-				size="__unstable-large"
 			/>
 		</ToolsPanelItem>
 	);

packages/block-editor/src/components/responsive-block-control/test/index.js

@@ -39,11 +39,7 @@ const sizeOptions = [
 const renderTestDefaultControlComponent = ( labelComponent, device ) => {
 	return (
 		<>
-			<SelectControl
-				__next40pxDefaultSize
-				label={ labelComponent }
-				options={ sizeOptions }
-			/>
+			<SelectControl label={ labelComponent } options={ sizeOptions } />
 			<p id={ device.id }>
 				{ device.label } is used here for testing purposes to ensure we
 				have access to details about the device.

packages/block-library/src/archives/edit.js

@@ -116,7 +116,6 @@ export default function ArchivesEdit( { attributes, setAttributes, name } ) {
 						}
 					>
 						<SelectControl
-							__next40pxDefaultSize
 							label={ __( 'Group by' ) }
 							options={ [
 								{ label: __( 'Year' ), value: 'yearly' },

packages/block-library/src/audio/edit.js

@@ -223,7 +223,6 @@ function AudioEdit( {
 						}
 					>
 						<SelectControl
-							__next40pxDefaultSize
 							label={ _x(
 								'Preload',
 								'noun; Audio block parameter'

packages/block-library/src/categories/edit.js

@@ -236,7 +236,6 @@ export default function CategoriesEdit( {
 							isShownByDefault
 						>
 							<SelectControl
-								__next40pxDefaultSize
 								label={ __( 'Taxonomy' ) }
 								options={ taxonomies.map( ( t ) => ( {
 									label: t.name,

packages/block-library/src/file/inspector.js

@@ -109,7 +109,6 @@ export default function FileBlockInspector( {
 						onDeselect={ () => changeLinkDestinationOption( href ) }
 					>
 						<SelectControl
-							__next40pxDefaultSize
 							label={ __( 'Link to' ) }
 							value={ textLinkHref }
 							options={ linkDestinationOptions }

packages/block-library/src/form/edit.js

@@ -108,7 +108,6 @@ const Edit = ( { attributes, setAttributes, clientId } ) => {
 						isShownByDefault
 					>
 						<SelectControl
-							__next40pxDefaultSize
 							label={ __( 'Submissions method' ) }
 							options={ [
 								// TODO: Allow plugins to add their own submission methods.
@@ -173,7 +172,6 @@ const Edit = ( { attributes, setAttributes, clientId } ) => {
 			{ submissionMethod !== 'email' && (
 				<InspectorControls group="advanced">
 					<SelectControl
-						__next40pxDefaultSize
 						label={ __( 'Method' ) }
 						options={ [
 							{ label: 'Get', value: 'get' },

packages/block-library/src/gallery/dynamic-gallery.js

@@ -63,7 +63,6 @@ const ORDER_OPTIONS = [
 function OrderControl( { orderby, order, onChange } ) {
 	return (
 		<SelectControl
-			__next40pxDefaultSize
 			label={ __( 'Order by' ) }
 			value={ `${ orderby }/${ order }` }
 			options={ ORDER_OPTIONS }

packages/block-library/src/gallery/edit.js

@@ -787,7 +787,6 @@ export default function GalleryEdit( props ) {
 								options={ imageSizeOptions }
 								onChange={ updateImagesSize }
 								hideCancelButton
-								size="__unstable-large"
 							/>
 						</ToolsPanelItem>
 					) }
@@ -843,7 +842,6 @@ export default function GalleryEdit( props ) {
 							isShownByDefault
 						>
 							<SelectControl
-								__next40pxDefaultSize
 								label={ __( 'Aspect ratio' ) }
 								help={ __(
 									'Set a consistent aspect ratio for all images in the gallery.'

packages/block-library/src/latest-comments/edit.js

@@ -114,7 +114,6 @@ export default function LatestComments( { attributes, setAttributes, name } ) {
 						isShownByDefault
 					>
 						<SelectControl
-							__next40pxDefaultSize
 							label={ __( 'Display content' ) }
 							value={ displayContent }
 							options={ [

packages/block-library/src/list/ordered-list-settings.js

@@ -66,7 +66,6 @@ const OrderedListSettings = ( { setAttributes, reversed, start, type } ) => {
 					}
 				>
 					<SelectControl
-						__next40pxDefaultSize
 						label={ __( 'List style' ) }
 						options={ LIST_STYLE_OPTIONS }
 						value={ type || 'decimal' }

packages/block-library/src/navigation/edit/overlay-template-part-selector.js

@@ -309,7 +309,6 @@ export default function OverlayTemplatePartSelector( {
 					>
 						<FlexBlock>
 							<SelectControl
-								__next40pxDefaultSize
 								label={ __( 'Overlay template' ) }
 								hideLabelFromVision
 								aria-labelledby={ headingId }

packages/block-library/src/playlist/edit.js

@@ -347,7 +347,6 @@ const PlaylistEdit = ( {
 						onDeselect={ () => setAttributes( { order: 'asc' } ) }
 					>
 						<SelectControl
-							__next40pxDefaultSize
 							label={ __( 'Order' ) }
 							value={ order }
 							options={ [

packages/block-library/src/post-author/edit.js

@@ -267,7 +267,6 @@ function PostAuthorEdit( {
 							}
 						>
 							<SelectControl
-								__next40pxDefaultSize
 								label={ __( 'Avatar size' ) }
 								value={ avatarSize }
 								options={ avatarSizes }

packages/block-library/src/post-navigation-link/edit.js

@@ -182,7 +182,6 @@ export default function PostNavigationLinkEdit( {
 			</InspectorControls>
 			<InspectorControls group="advanced">
 				<SelectControl
-					__next40pxDefaultSize
 					label={ __( 'Filter by taxonomy' ) }
 					value={ taxonomy }
 					options={ getTaxonomyOptions() }

packages/block-library/src/query/edit/inspector-controls/index.js

@@ -268,7 +268,6 @@ export default function QueryInspectorControls( props ) {
 						>
 							{ postTypesSelectOptions.length > 2 ? (
 								<SelectControl
-									__next40pxDefaultSize
 									options={ postTypesSelectOptions }
 									value={ postType }
 									label={ postTypeControlLabel }

packages/block-library/src/query/edit/inspector-controls/order-control.js

@@ -33,7 +33,6 @@ function OrderControl( {
 } ) {
 	return (
 		<SelectControl
-			__next40pxDefaultSize
 			label={ __( 'Order by' ) }
 			value={ `${ orderBy }/${ order }` }
 			options={ orderByOptions }

packages/block-library/src/query/edit/inspector-controls/sticky-control.js

@@ -14,7 +14,6 @@ const stickyOptions = [
 export default function StickyControl( { value, onChange } ) {
 	return (
 		<SelectControl
-			__next40pxDefaultSize
 			label={ __( 'Sticky posts' ) }
 			options={ stickyOptions }
 			value={ value }

packages/block-library/src/search/edit.js

@@ -376,7 +376,6 @@ export default function SearchEdit( {
 					>
 						<SelectControl
 							value={ buttonPosition }
-							__next40pxDefaultSize
 							label={ __( 'Button position' ) }
 							onChange={ ( value ) => {
 								setAttributes( {
@@ -493,7 +492,6 @@ export default function SearchEdit( {
 			</InspectorControls>
 			<InspectorControls group="advanced">
 				<SelectControl
-					__next40pxDefaultSize
 					label={ __( 'HTML element' ) }
 					value={ tagName ?? '' }
 					options={ [

packages/block-library/src/separator/edit.js

@@ -39,7 +39,6 @@ const HtmlElementControl = ( { tagName, setAttributes } ) => {
 							'The <div> element should only be used if the block is a design element with no semantic meaning.'
 					  )
 			}
-			__next40pxDefaultSize
 		/>
 	);
 };

packages/block-library/src/social-links/edit.js

@@ -181,7 +181,6 @@ export function SocialLinksEdit( props ) {
 						}
 					>
 						<SelectControl
-							__next40pxDefaultSize
 							label={ __( 'Icon size' ) }
 							onChange={ ( newSize ) => {
 								setAttributes( {

packages/block-library/src/table-of-contents/edit.js

@@ -190,7 +190,6 @@ export default function TableOfContentsEdit( {
 					isShownByDefault
 				>
 					<SelectControl
-						__next40pxDefaultSize
 						label={ __( 'Include headings down to level' ) }
 						value={ maxLevel || '' }
 						options={ [

packages/block-library/src/tag-cloud/edit.js

@@ -139,7 +139,6 @@ function TagCloudEdit( { attributes, setAttributes, name } ) {
 					isShownByDefault
 				>
 					<SelectControl
-						__next40pxDefaultSize
 						label={ __( 'Taxonomy' ) }
 						options={ getTaxonomyOptions() }
 						value={ taxonomy }

packages/block-library/src/template-part/edit/advanced-controls.js

@@ -65,7 +65,6 @@ export function TemplatePartAdvancedControls( {
 						onFocus={ ( event ) => event.target.select() }
 					/>
 					<SelectControl
-						__next40pxDefaultSize
 						label={ __( 'Area' ) }
 						labelPosition="top"
 						options={ areaOptions }

packages/block-library/src/template-part/edit/import-controls.js

@@ -147,7 +147,6 @@ export function TemplatePartImportControls( { area, setAttributes } ) {
 						options={ options }
 						onChange={ ( value ) => setSelectedSidebar( value ) }
 						disabled={ ! options.length }
-						__next40pxDefaultSize
 					/>
 				</FlexBlock>
 				<FlexItem

packages/block-library/src/terms-query/edit/inspector-controls/order-control.js

@@ -7,7 +7,6 @@ import { SelectControl } from '@wordpress/components';
 export default function OrderControl( { orderBy, order, onChange, ...props } ) {
 	return (
 		<SelectControl
-			__next40pxDefaultSize
 			options={ [
 				{
 					label: __( 'Name: A → Z' ),

packages/block-library/src/terms-query/edit/inspector-controls/taxonomy-control.js

@@ -17,7 +17,6 @@ export default function TaxonomyControl( { value, onChange, ...props } ) {
 
 	return (
 		<SelectControl
-			__next40pxDefaultSize
 			options={ taxonomyOptions }
 			value={ value }
 			onChange={ onChange }

packages/block-library/src/video/edit-common-settings.js

@@ -150,7 +150,6 @@ const VideoSettings = ( { setAttributes, attributes } ) => {
 				} }
 			>
 				<SelectControl
-					__next40pxDefaultSize
 					label={ __( 'Preload' ) }
 					value={ preload }
 					onChange={ onChangePreload }

packages/block-library/src/video/tracks-editor.js

@@ -144,7 +144,6 @@ function SingleTrackEditor( {
 			</Grid>
 			<VStack spacing="4">
 				<SelectControl
-					__next40pxDefaultSize
 					className="block-library-video-tracks-editor__single-track-editor-kind-select"
 					options={ KIND_OPTIONS }
 					value={ kind }

packages/components/CHANGELOG.md

@@ -21,6 +21,7 @@
     -   `FormTokenField` ([#79720](https://github.com/WordPress/gutenberg/pull/79720))
     -   `RangeControl` ([#79590](https://github.com/WordPress/gutenberg/pull/79590))
     -   `Radio` ([#79657](https://github.com/WordPress/gutenberg/pull/79657))
+    -   `SelectControl` ([#79797](https://github.com/WordPress/gutenberg/pull/79797))
     -   `ToggleGroupControl` ([#79656](https://github.com/WordPress/gutenberg/pull/79656))
     -   `TreeSelect` ([#79550](https://github.com/WordPress/gutenberg/pull/79550))
     -   `UnitControl` ([#79721](https://github.com/WordPress/gutenberg/pull/79721))

packages/components/src/custom-gradient-picker/index.tsx

@@ -120,7 +120,6 @@ const GradientTypePicker = ( {
 			labelPosition="top"
 			onChange={ handleOnChange }
 			options={ GRADIENT_OPTIONS }
-			size="__unstable-large"
 			value={ hasGradient ? type : undefined }
 		/>
 	);

packages/components/src/date-time/time-picker/index.tsx

@@ -156,7 +156,6 @@ export function TimePicker( {
 				className="components-datetime__time-field components-datetime__time-field-month" // Unused, for backwards compatibility.
 				label={ __( 'Month' ) }
 				hideLabelFromVision
-				__next40pxDefaultSize
 				value={ month }
 				options={ monthOptions }
 				onChange={ ( value ) => {

packages/components/src/disabled/stories/index.story.tsx

@@ -56,7 +56,6 @@ const Form = () => {
 				onChange={ setTextAreaValue }
 			/>
 			<SelectControl
-				__next40pxDefaultSize
 				label="Select Control"
 				onChange={ () => {} }
 				options={ [

packages/components/src/query-controls/index.tsx

@@ -103,7 +103,6 @@ export function QueryControls( {
 			{ [
 				onOrderChange && onOrderByChange && (
 					<SelectControl
-						__next40pxDefaultSize
 						key="query-controls-order-select"
 						label={ __( 'Order by' ) }
 						value={

packages/components/src/select-control/README.md

@@ -92,7 +92,6 @@ const MySelectControl = () => {
 				{ label: 'Small', value: '25%' },
 			] }
 			onChange={ ( newSize ) => setSize( newSize ) }
-			__next40pxDefaultSize
 		/>
 	);
 };
@@ -114,7 +113,6 @@ Render a user interface to select multiple users from a list.
 		{ value: 'b', label: 'User B' },
 		{ value: 'c', label: 'User c' },
 	] }
-	__next40pxDefaultSize
 />
 ```
 
@@ -129,7 +127,6 @@ const [ item, setItem ] = useState( '' );
     label={ __( 'My dinosaur' ) }
     value={ item } // e.g: value = 'a'
     onChange={ ( selection ) => { setItem( selection ) } }
-    __next40pxDefaultSize
 >
 	<optgroup label="Theropods">
 		<option value="Tyrannosaurus">Tyrannosaurus</option>
@@ -229,14 +226,6 @@ The style variant of the control.
 -   Required: No
 -   Default: `'default'`
 
-### __next40pxDefaultSize
-
-Start opting into the larger default height that will become the default size in a future version.
-
--   Type: `Boolean`
--   Required: No
--   Default: `false`
-
 ## Related components
 
 -   To select one option from a set, and you want to show them all the available options at once, use the `Radio` component.