diff --git a/.eslintrc.js b/.eslintrc.js
index 2cdbb5c056cb14..42bb0accd72f1a 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -313,6 +313,7 @@ module.exports = {
 					...[
 						'BorderBoxControl',
 						'BorderControl',
+						'CustomSelectControl',
 						'DimensionControl',
 						'FontSizePicker',
 						'ToggleGroupControl',
diff --git a/packages/block-editor/src/components/date-format-picker/index.js b/packages/block-editor/src/components/date-format-picker/index.js
index 63c977b111e01c..edefd6249f1aae 100644
--- a/packages/block-editor/src/components/date-format-picker/index.js
+++ b/packages/block-editor/src/components/date-format-picker/index.js
@@ -129,6 +129,7 @@ function NonDefaultControls( { format, onChange } ) {
 	return (
 		<VStack>
 			<CustomSelectControl
+				__next40pxDefaultSize
 				label={ __( 'Choose a format' ) }
 				options={ [ ...suggestedOptions, customOption ] }
 				value={
diff --git a/packages/block-editor/src/components/font-appearance-control/index.js b/packages/block-editor/src/components/font-appearance-control/index.js
index 418d43e322ac89..38cb42e394a3bd 100644
--- a/packages/block-editor/src/components/font-appearance-control/index.js
+++ b/packages/block-editor/src/components/font-appearance-control/index.js
@@ -39,6 +39,8 @@ const getFontAppearanceLabel = ( hasFontStyles, hasFontWeights ) => {
  */
 export default function FontAppearanceControl( props ) {
 	const {
+		/** Start opting into the larger default height that will become the default size in a future version. */
+		__next40pxDefaultSize = false,
 		onChange,
 		hasFontStyles = true,
 		hasFontWeights = true,
@@ -150,6 +152,7 @@ export default function FontAppearanceControl( props ) {
 			<CustomSelectControl
 				{ ...otherProps }
 				className="components-font-appearance-control"
+				__next40pxDefaultSize={ __next40pxDefaultSize }
 				label={ label }
 				describedBy={ getDescribedBy() }
 				options={ selectOptions }