CustomSelectControl: Hard deprecate 40px default size

packages/block-editor/src/components/date-format-picker/index.js

@@ -123,7 +123,6 @@ function NonDefaultControls( { format, onChange } ) {
 	return (
 		<VStack>
 			<CustomSelectControl
-				__next40pxDefaultSize
 				label={ __( 'Choose a format' ) }
 				options={ [ ...suggestedOptions, customOption ] }
 				value={

packages/block-editor/src/components/font-appearance-control/index.js

@@ -155,7 +155,6 @@ export default function FontAppearanceControl( props ) {
 		hasStylesOrWeights && (
 			<CustomSelectControl
 				{ ...otherProps }
-				__next40pxDefaultSize
 				className="components-font-appearance-control"
 				label={ label }
 				describedBy={ getDescribedBy() }

packages/block-editor/src/components/font-family/index.js

@@ -52,7 +52,6 @@ export default function FontFamilyControl( {
 		options.find( ( option ) => option.key === value ) ?? '';
 	return (
 		<CustomSelectControl
-			__next40pxDefaultSize
 			label={ __( 'Font' ) }
 			value={ selectedValue }
 			onChange={ ( { selectedItem } ) => onChange( selectedItem.key ) }

packages/block-editor/src/components/preset-input-control/index.js

@@ -294,7 +294,6 @@ export default function PresetInputControl( {
 					onMouseOut={ onMouseOut }
 					onMouseOver={ onMouseOver }
 					options={ options }
-					size="__unstable-large"
 					value={
 						// passing empty string as a fallback to continue using the
 						// component in controlled mode

packages/block-editor/src/hooks/position.js

@@ -268,7 +268,6 @@ export function PositionPanelPure( {
 		<InspectorControls group="position">
 			<BaseControl help={ stickyHelpText }>
 				<CustomSelectControl
-					__next40pxDefaultSize
 					label={ __( 'Position' ) }
 					hideLabelFromVision
 					describedBy={ sprintf(
@@ -281,7 +280,6 @@ export function PositionPanelPure( {
 					onChange={ ( { selectedItem } ) => {
 						onChangeType( selectedItem.value );
 					} }
-					size="__unstable-large"
 				/>
 			</BaseControl>
 		</InspectorControls>

packages/components/CHANGELOG.md

@@ -15,6 +15,7 @@
     -   `BorderBoxControl` ([#79420](https://github.com/WordPress/gutenberg/pull/79420))
     -   `BorderControl` ([#79418](https://github.com/WordPress/gutenberg/pull/79418))
     -   `ComboboxControl` ([#79636](https://github.com/WordPress/gutenberg/pull/79636)).
+    -   `CustomSelectControl` ([#79796](https://github.com/WordPress/gutenberg/pull/79796)).
     -   `FontSizePicker` ([#79481](https://github.com/WordPress/gutenberg/pull/79481))
     -   `FormFileUpload` ([#79655](https://github.com/WordPress/gutenberg/pull/79655))
     -   `FormTokenField` ([#79720](https://github.com/WordPress/gutenberg/pull/79720))

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

@@ -41,7 +41,6 @@ function MyCustomSelectControl() {
 	const [ , setFontSize ] = useState();
 	return (
 		<CustomSelectControl
-			__next40pxDefaultSize
 			label="Font Size"
 			options={ options }
 			onChange={ ( { selectedItem } ) => setFontSize( selectedItem ) }
@@ -53,7 +52,6 @@ function MyControlledCustomSelectControl() {
 	const [ fontSize, setFontSize ] = useState( options[ 0 ] );
 	return (
 		<CustomSelectControl
-			__next40pxDefaultSize
 			label="Font Size"
 			options={ options }
 			onChange={ ( { selectedItem } ) => setFontSize( selectedItem ) }
@@ -144,13 +142,6 @@ A handler for `blur` events on the trigger button.
 
 -   Required: No
 
-#### `__next40pxDefaultSize`: `boolean`
-
-Start opting into the larger default height that will become the default size in a future version.
-
-- Required: No
-- Default: `false`
-
 ## Related components
 
 -   Like this component, but implemented using a native `<select>` for when custom styling is not necessary, the `SelectControl` component.

packages/components/src/custom-select-control/index.tsx

@@ -18,7 +18,6 @@ import CustomSelectItem from '../custom-select-control-v2/item';
 import * as Styled from '../custom-select-control-v2/styles';
 import type { CustomSelectProps, CustomSelectOption } from './types';
 import { VisuallyHidden } from '../visually-hidden';
-import { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size';
 
 function useDeprecatedProps< T extends CustomSelectOption >( {
 	__experimentalShowSelectedHint,
@@ -61,8 +60,9 @@ function CustomSelectControl< T extends CustomSelectOption >(
 	props: CustomSelectProps< T >
 ) {
 	const {
-		__next40pxDefaultSize = false,
-		__shouldNotWarnDeprecated36pxSize,
+		// Prevent passing legacy props to internal component.
+		__next40pxDefaultSize: _next40pxDefaultSize,
+		__shouldNotWarnDeprecated36pxSize: _shouldNotWarnDeprecated36pxSize,
 		describedBy,
 		options,
 		onChange,
@@ -73,13 +73,6 @@ function CustomSelectControl< T extends CustomSelectOption >(
 		...restProps
 	} = useDeprecatedProps( props );
 
-	maybeWarnDeprecated36pxSize( {
-		componentName: 'CustomSelectControl',
-		__next40pxDefaultSize,
-		size,
-		__shouldNotWarnDeprecated36pxSize,
-	} );
-
 	const descriptionId = useInstanceId(
 		CustomSelectControl,
 		'custom-select-control__description'
@@ -179,25 +172,12 @@ function CustomSelectControl< T extends CustomSelectOption >(
 		);
 	};
 
-	const translatedSize = ( () => {
-		if (
-			( __next40pxDefaultSize && size === 'default' ) ||
-			size === '__unstable-large'
-		) {
-			return 'default';
-		}
-		if ( ! __next40pxDefaultSize && size === 'default' ) {
-			return 'compact';
-		}
-		return size;
-	} )();
-
 	return (
 		<>
 			<CustomSelect
 				aria-describedby={ descriptionId }
 				renderSelectedValue={ renderSelectedValue }
-				size={ translatedSize }
+				size={ size === '__unstable-large' ? 'default' : size }
 				store={ store }
 				className={ clsx(
 					// Keeping the classname for legacy reasons

packages/components/src/custom-select-control/stories/index.story.tsx

@@ -63,7 +63,6 @@ const Template: StoryFn< typeof CustomSelectControl > = ( props ) => {
 
 	return (
 		<CustomSelectControl
-			__next40pxDefaultSize
 			{ ...props }
 			onChange={ onChange }
 			value={ value }
@@ -73,7 +72,6 @@ const Template: StoryFn< typeof CustomSelectControl > = ( props ) => {
 
 export const Default = Template.bind( {} );
 Default.args = {
-	__next40pxDefaultSize: true,
 	label: 'Label',
 	options: [
 		{

packages/components/src/custom-select-control/test/index.tsx

@@ -17,7 +17,7 @@ import _CustomSelectControl from '..';
 
 const UncontrolledCustomSelectControl = (
 	props: React.ComponentProps< typeof _CustomSelectControl >
-) => <_CustomSelectControl __next40pxDefaultSize { ...props } />;
+) => <_CustomSelectControl { ...props } />;
 
 const customClassName = 'amber-skies';
 const customStyles = {

packages/components/src/custom-select-control/types.ts

@@ -117,7 +117,8 @@ export type CustomSelectProps< T extends CustomSelectOption > = {
 	/**
 	 * Start opting into the larger default height that will become the default size in a future version.
 	 *
-	 * @default false
+	 * @deprecated Default behavior since WordPress 7.1. Prop can be safely removed.
+	 * @ignore
 	 */
 	__next40pxDefaultSize?: boolean;
 	/**

packages/components/src/font-size-picker/font-size-picker-select.tsx

@@ -60,7 +60,6 @@ const FontSizePickerSelect = ( props: FontSizePickerSelectProps ) => {
 
 	return (
 		<StyledCustomSelectControl
-			__next40pxDefaultSize
 			className="components-font-size-picker__select"
 			label={ __( 'Font size' ) }
 			hideLabelFromVision

packages/components/src/validated-form-controls/components/custom-select-control.tsx

@@ -16,10 +16,7 @@ const UnforwardedValidatedCustomSelectControl = (
 		customValidity,
 		markWhenOptional,
 		...restProps
-	}: Omit<
-		React.ComponentProps< typeof CustomSelectControl >,
-		'__next40pxDefaultSize'
-	> &
+	}: React.ComponentProps< typeof CustomSelectControl > &
 		ValidatedControlProps,
 	forwardedRef: React.ForwardedRef< HTMLDivElement >
 ) => {
@@ -39,7 +36,6 @@ const UnforwardedValidatedCustomSelectControl = (
 				<CustomSelectControl
 					// TODO: Upstream limitation - Required isn't passed down correctly,
 					// so it needs to be set on a delegate element.
-					__next40pxDefaultSize
 					{ ...restProps }
 				/>
 			</ControlWithError>

packages/eslint-plugin/docs/rules/components-no-missing-40px-size-prop.md

@@ -9,7 +9,6 @@ This is a temporary rule to help migrate components to the new default size. Onc
 The following components are checked by this rule:
 
 -   Button
--   CustomSelectControl
 -   InputControl
 -   NumberControl
 -   SelectControl

packages/eslint-plugin/rules/__tests__/components-no-missing-40px-size-prop.js

@@ -96,15 +96,13 @@ ruleTester.run( 'components-no-missing-40px-size-prop', rule, {
 		{
 			code: `
 				import {
-					CustomSelectControl,
 					InputControl,
 					NumberControl,
 					RangeControl,
 					SelectControl,
 					ToggleGroupControl,
 				} from '@wordpress/components';
 				<>
-					<CustomSelectControl __next40pxDefaultSize />
 					<FormTokenField />
 					<InputControl __next40pxDefaultSize />
 					<NumberControl __next40pxDefaultSize />

packages/eslint-plugin/rules/components-no-missing-40px-size-prop.js

@@ -14,7 +14,6 @@ const { hasTruthyJsxAttribute } = require( '../utils' );
 const COMPONENTS_REQUIRING_40PX = new Set( [
 	'Button',
 	'ClipboardButton',
-	'CustomSelectControl',
 	'IconButton',
 	'InputControl',
 	'NumberControl',

tools/eslint/config.mjs

@@ -186,6 +186,7 @@ const restrictedSyntax = [
 		'BorderControl',
 		'BoxControl',
 		'ComboboxControl',
+		'CustomSelectControl',
 		'FocalPointPicker',
 		'FontAppearanceControl',
 		'FontFamilyControl',