From 8fd3d63e215c55c4cea75df628f6005089cfa82a Mon Sep 17 00:00:00 2001
From: hbhalodia <hit.bhalodia@rtcamp.com>
Date: Wed, 6 Nov 2024 17:11:01 +0530
Subject: [PATCH 01/10] Add the console warning for 36px size variation

---
 packages/components/src/unit-control/README.md             | 2 +-
 packages/components/src/unit-control/index.tsx             | 7 +++++++
 .../components/src/unit-control/stories/index.story.tsx    | 1 +
 packages/components/src/unit-control/test/index.tsx        | 2 +-
 4 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/packages/components/src/unit-control/README.md b/packages/components/src/unit-control/README.md
index dd54de80357d8e..c10bdb5995f671 100644
--- a/packages/components/src/unit-control/README.md
+++ b/packages/components/src/unit-control/README.md
@@ -15,7 +15,7 @@ import { __experimentalUnitControl as UnitControl } from '@wordpress/components'
 const Example = () => {
 	const [ value, setValue ] = useState( '10px' );
 
-	return <UnitControl onChange={ setValue } value={ value } />;
+	return <UnitControl __next40pxDefaultSize onChange={ setValue } value={ value } />;
 };
 ```
 
diff --git a/packages/components/src/unit-control/index.tsx b/packages/components/src/unit-control/index.tsx
index 2dd08cc155225f..5a6a781cbaf5e4 100644
--- a/packages/components/src/unit-control/index.tsx
+++ b/packages/components/src/unit-control/index.tsx
@@ -27,6 +27,7 @@ import { useControlledState } from '../utils/hooks';
 import { escapeRegExp } from '../utils/strings';
 import type { UnitControlProps, UnitControlOnChangeCallback } from './types';
 import { useDeprecated36pxDefaultSizeProp } from '../utils/use-deprecated-props';
+import { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size';
 
 function UnforwardedUnitControl(
 	unitControlProps: WordPressComponentProps<
@@ -58,6 +59,12 @@ function UnforwardedUnitControl(
 		...props
 	} = useDeprecated36pxDefaultSizeProp( unitControlProps );
 
+	maybeWarnDeprecated36pxSize( {
+		componentName: 'UnitControl',
+		__next40pxDefaultSize: props.__next40pxDefaultSize,
+		size,
+	} );
+
 	if ( 'unit' in unitControlProps ) {
 		deprecated( 'UnitControl unit prop', {
 			since: '5.6',
diff --git a/packages/components/src/unit-control/stories/index.story.tsx b/packages/components/src/unit-control/stories/index.story.tsx
index 5134d4902144da..cf3b2a235d3e40 100644
--- a/packages/components/src/unit-control/stories/index.story.tsx
+++ b/packages/components/src/unit-control/stories/index.story.tsx
@@ -58,6 +58,7 @@ export const Default: StoryFn< typeof UnitControl > = DefaultTemplate.bind(
 );
 Default.args = {
 	label: 'Label',
+	__next40pxDefaultSize: true,
 };
 
 /**
diff --git a/packages/components/src/unit-control/test/index.tsx b/packages/components/src/unit-control/test/index.tsx
index d91498d46478b3..05be571b7ec7b5 100644
--- a/packages/components/src/unit-control/test/index.tsx
+++ b/packages/components/src/unit-control/test/index.tsx
@@ -86,7 +86,7 @@ const ControlledSyncUnits = () => {
 describe( 'UnitControl', () => {
 	describe( 'Basic rendering', () => {
 		it( 'should render', () => {
-			render( <UnitControl /> );
+			render( <UnitControl __next40pxDefaultSize /> );
 			const input = getInput();
 			const select = getSelect();
 

From df15bad8646d9abca7018681bb4dd5ea6ba947df Mon Sep 17 00:00:00 2001
From: hbhalodia <hit.bhalodia@rtcamp.com>
Date: Wed, 6 Nov 2024 17:18:06 +0530
Subject: [PATCH 02/10] Add the changelog for the deprecation

---
 packages/components/CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index 93b191bff269d6..ac39b7bc85443c 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -5,6 +5,7 @@
 ### Deprecations
 
 -   `Radio`: Deprecate 36px default size ([#66572](https://github.com/WordPress/gutenberg/pull/66572)).
+-   `UnitControl`: Deprecate 36px default size ([#66791](https://github.com/WordPress/gutenberg/pull/66791)).
 
 ### Enhancements
 

From a689cd5c74e9e5fbe92641b65751e10785cb661a Mon Sep 17 00:00:00 2001
From: hbhalodia <hit.bhalodia@rtcamp.com>
Date: Thu, 28 Nov 2024 11:10:55 +0530
Subject: [PATCH 03/10] Update the unit test for the unitcontrol to use default
 40px size

---
 .../src/unit-control/test/index.tsx           | 77 ++++++++++++-------
 1 file changed, 51 insertions(+), 26 deletions(-)

diff --git a/packages/components/src/unit-control/test/index.tsx b/packages/components/src/unit-control/test/index.tsx
index 05be571b7ec7b5..b04d815cdb83fc 100644
--- a/packages/components/src/unit-control/test/index.tsx
+++ b/packages/components/src/unit-control/test/index.tsx
@@ -14,6 +14,7 @@ import { useState } from '@wordpress/element';
  */
 import UnitControl from '..';
 import { CSS_UNITS, parseQuantityAndUnitFromRawValue } from '../utils';
+import type { UnitControlProps } from '../types';
 
 const getInput = ( {
 	isInputTypeText = false,
@@ -70,11 +71,13 @@ const ControlledSyncUnits = () => {
 	return (
 		<>
 			<UnitControl
+				__next40pxDefaultSize
 				label="Field A"
 				value={ state.valueA }
 				onChange={ ( v ) => onUnitControlChange( 'valueA', v ) }
 			/>
 			<UnitControl
+				__next40pxDefaultSize
 				label="Field B"
 				value={ state.valueB }
 				onChange={ ( v ) => onUnitControlChange( 'valueB', v ) }
@@ -83,10 +86,14 @@ const ControlledSyncUnits = () => {
 	);
 };
 
+const ControlledUnitControl = ( { ...props }: UnitControlProps ) => {
+	return <UnitControl __next40pxDefaultSize { ...props } />;
+};
+
 describe( 'UnitControl', () => {
 	describe( 'Basic rendering', () => {
 		it( 'should render', () => {
-			render( <UnitControl __next40pxDefaultSize /> );
+			render( <ControlledUnitControl /> );
 			const input = getInput();
 			const select = getSelect();
 
@@ -95,10 +102,12 @@ describe( 'UnitControl', () => {
 		} );
 
 		it( 'should render custom className', () => {
-			const { container: withoutClassName } = render( <UnitControl /> );
+			const { container: withoutClassName } = render(
+				<ControlledUnitControl />
+			);
 
 			const { container: withClassName } = render(
-				<UnitControl className="hello" />
+				<ControlledUnitControl className="hello" />
 			);
 
 			expect(
@@ -112,7 +121,7 @@ describe( 'UnitControl', () => {
 		} );
 
 		it( 'should not render select, if units are disabled', () => {
-			render( <UnitControl value="3em" units={ [] } /> );
+			render( <ControlledUnitControl value="3em" units={ [] } /> );
 			const input = getInput();
 			// Using `queryByRole` instead of `getSelect` because we need to test
 			// for this element NOT to be in the document.
@@ -123,7 +132,11 @@ describe( 'UnitControl', () => {
 		} );
 
 		it( 'should render label if single units', () => {
-			render( <UnitControl units={ [ { value: '%', label: '%' } ] } /> );
+			render(
+				<ControlledUnitControl
+					units={ [ { value: '%', label: '%' } ] }
+				/>
+			);
 
 			const select = screen.queryByRole( 'combobox' );
 			const label = screen.getByText( '%' );
@@ -138,7 +151,9 @@ describe( 'UnitControl', () => {
 			const user = userEvent.setup();
 			const onChangeSpy = jest.fn();
 
-			render( <UnitControl value="50px" onChange={ onChangeSpy } /> );
+			render(
+				<ControlledUnitControl value="50px" onChange={ onChangeSpy } />
+			);
 
 			const input = getInput();
 			await user.clear( input );
@@ -159,7 +174,9 @@ describe( 'UnitControl', () => {
 			const user = userEvent.setup();
 			const onChangeSpy = jest.fn();
 
-			render( <UnitControl value="50px" onChange={ onChangeSpy } /> );
+			render(
+				<ControlledUnitControl value="50px" onChange={ onChangeSpy } />
+			);
 
 			const input = getInput();
 			await user.type( input, '{ArrowUp}' );
@@ -175,7 +192,9 @@ describe( 'UnitControl', () => {
 			const user = userEvent.setup();
 			const onChangeSpy = jest.fn();
 
-			render( <UnitControl value="50px" onChange={ onChangeSpy } /> );
+			render(
+				<ControlledUnitControl value="50px" onChange={ onChangeSpy } />
+			);
 
 			const input = getInput();
 			await user.type( input, '{Shift>}{ArrowUp}{/Shift}' );
@@ -191,7 +210,9 @@ describe( 'UnitControl', () => {
 			const user = userEvent.setup();
 			const onChangeSpy = jest.fn();
 
-			render( <UnitControl value={ 50 } onChange={ onChangeSpy } /> );
+			render(
+				<ControlledUnitControl value={ 50 } onChange={ onChangeSpy } />
+			);
 
 			const input = getInput();
 			await user.type( input, '{ArrowDown}' );
@@ -207,7 +228,9 @@ describe( 'UnitControl', () => {
 			const user = userEvent.setup();
 			const onChangeSpy = jest.fn();
 
-			render( <UnitControl value={ 50 } onChange={ onChangeSpy } /> );
+			render(
+				<ControlledUnitControl value={ 50 } onChange={ onChangeSpy } />
+			);
 
 			const input = getInput();
 			await user.type( input, '{Shift>}{ArrowDown}{/Shift}' );
@@ -224,7 +247,7 @@ describe( 'UnitControl', () => {
 			const onChangeSpy = jest.fn();
 
 			render(
-				<UnitControl
+				<ControlledUnitControl
 					value={ 50 }
 					onChange={ onChangeSpy }
 					isPressEnterToChange
@@ -252,7 +275,7 @@ describe( 'UnitControl', () => {
 			const onBlurSpy = jest.fn();
 
 			render(
-				<UnitControl
+				<ControlledUnitControl
 					value="33%"
 					onChange={ onChangeSpy }
 					onBlur={ onBlurSpy }
@@ -281,7 +304,7 @@ describe( 'UnitControl', () => {
 			const onChangeSpy = jest.fn();
 
 			render(
-				<UnitControl
+				<ControlledUnitControl
 					value="15px"
 					onChange={ onChangeSpy }
 					isPressEnterToChange
@@ -314,7 +337,7 @@ describe( 'UnitControl', () => {
 			render(
 				<>
 					<button>Click me</button>
-					<UnitControl
+					<ControlledUnitControl
 						units={ [ { value: '%', label: '%' } ] }
 						onChange={ onChangeSpy }
 					/>
@@ -347,7 +370,7 @@ describe( 'UnitControl', () => {
 			const onUnitChangeSpy = jest.fn();
 
 			render(
-				<UnitControl
+				<ControlledUnitControl
 					value="14rem"
 					onChange={ onChangeSpy }
 					onUnitChange={ onUnitChangeSpy }
@@ -377,7 +400,7 @@ describe( 'UnitControl', () => {
 				{ value: '+', label: '+', default: 10 },
 			];
 
-			render( <UnitControl units={ units } /> );
+			render( <ControlledUnitControl units={ units } /> );
 
 			const options = getSelectOptions();
 
@@ -400,7 +423,7 @@ describe( 'UnitControl', () => {
 			];
 
 			render(
-				<UnitControl
+				<ControlledUnitControl
 					isResetValueOnUnitChange
 					units={ units }
 					onChange={ onChangeSpy }
@@ -436,7 +459,7 @@ describe( 'UnitControl', () => {
 			];
 
 			render(
-				<UnitControl
+				<ControlledUnitControl
 					isResetValueOnUnitChange={ false }
 					value={ 50 }
 					units={ units }
@@ -467,7 +490,7 @@ describe( 'UnitControl', () => {
 			const onChangeSpy = jest.fn();
 
 			render(
-				<UnitControl
+				<ControlledUnitControl
 					value="50%"
 					units={ [ { value: '%', label: '%' } ] }
 					onChange={ onChangeSpy }
@@ -527,7 +550,7 @@ describe( 'UnitControl', () => {
 				{ value: 'vmax', label: 'vmax' },
 			];
 
-			render( <UnitControl units={ units } value="5" /> );
+			render( <ControlledUnitControl units={ units } value="5" /> );
 
 			const select = getSelect();
 			await user.selectOptions( select, [ 'vmax' ] );
@@ -545,7 +568,7 @@ describe( 'UnitControl', () => {
 			const onBlurSpy = jest.fn();
 
 			render(
-				<UnitControl
+				<ControlledUnitControl
 					value="15px"
 					onUnitChange={ onUnitChangeSpy }
 					onBlur={ onBlurSpy }
@@ -570,26 +593,28 @@ describe( 'UnitControl', () => {
 
 	describe( 'Unit Parser', () => {
 		it( 'should update unit after initial render and with new unit prop', async () => {
-			const { rerender } = render( <UnitControl value="10%" /> );
+			const { rerender } = render(
+				<ControlledUnitControl value="10%" />
+			);
 
 			const select = getSelect();
 
 			expect( select.value ).toBe( '%' );
 
-			rerender( <UnitControl value="20vh" /> );
+			rerender( <ControlledUnitControl value="20vh" /> );
 
 			expect( select.value ).toBe( 'vh' );
 		} );
 
 		it( 'should fallback to default unit if parsed unit is invalid', () => {
-			render( <UnitControl value="10null" /> );
+			render( <ControlledUnitControl value="10null" /> );
 
 			expect( getSelect().value ).toBe( 'px' );
 		} );
 
 		it( 'should display valid CSS unit when not explicitly included in units list', () => {
 			render(
-				<UnitControl
+				<ControlledUnitControl
 					value="10%"
 					units={ [
 						{ value: 'px', label: 'px' },
@@ -615,7 +640,7 @@ describe( 'UnitControl', () => {
 				const onUnitChangeSpy = jest.fn();
 
 				render(
-					<UnitControl
+					<ControlledUnitControl
 						value="10%"
 						onChange={ onChangeSpy }
 						onUnitChange={ onUnitChangeSpy }

From 9fe06c477e61d783f344be345c3335228eb39825 Mon Sep 17 00:00:00 2001
From: hbhalodia <hit.bhalodia@rtcamp.com>
Date: Thu, 28 Nov 2024 11:37:09 +0530
Subject: [PATCH 04/10] Use __shouldNotWarnDeprecated36pxSize to not throw
 redundant warning from parent component used

---
 packages/components/src/box-control/all-input-control.tsx  | 1 +
 .../components/src/box-control/axial-input-controls.tsx    | 1 +
 packages/components/src/box-control/input-controls.tsx     | 1 +
 packages/components/src/unit-control/index.tsx             | 2 ++
 packages/components/src/unit-control/types.ts              | 7 +++++++
 5 files changed, 12 insertions(+)

diff --git a/packages/components/src/box-control/all-input-control.tsx b/packages/components/src/box-control/all-input-control.tsx
index 057cf3c15d8c38..0cfaea21915f6d 100644
--- a/packages/components/src/box-control/all-input-control.tsx
+++ b/packages/components/src/box-control/all-input-control.tsx
@@ -74,6 +74,7 @@ export default function AllInputControl( {
 		<>
 			<StyledUnitControl
 				{ ...props }
+				__shouldNotWarnDeprecated36pxSize
 				__next40pxDefaultSize={ __next40pxDefaultSize }
 				className="component-box-control__unit-control"
 				disableUnits={ isMixed }
diff --git a/packages/components/src/box-control/axial-input-controls.tsx b/packages/components/src/box-control/axial-input-controls.tsx
index 40b39840b464b5..f8cbc5635c9b55 100644
--- a/packages/components/src/box-control/axial-input-controls.tsx
+++ b/packages/components/src/box-control/axial-input-controls.tsx
@@ -106,6 +106,7 @@ export default function AxialInputControls( {
 						<Tooltip placement="top-end" text={ LABELS[ side ] }>
 							<StyledUnitControl
 								{ ...props }
+								__shouldNotWarnDeprecated36pxSize
 								__next40pxDefaultSize={ __next40pxDefaultSize }
 								className="component-box-control__unit-control"
 								id={ inputId }
diff --git a/packages/components/src/box-control/input-controls.tsx b/packages/components/src/box-control/input-controls.tsx
index 1f005f6c6c01bd..8f4518d717dbed 100644
--- a/packages/components/src/box-control/input-controls.tsx
+++ b/packages/components/src/box-control/input-controls.tsx
@@ -108,6 +108,7 @@ export default function BoxInputControls( {
 						<Tooltip placement="top-end" text={ LABELS[ side ] }>
 							<StyledUnitControl
 								{ ...props }
+								__shouldNotWarnDeprecated36pxSize
 								__next40pxDefaultSize={ __next40pxDefaultSize }
 								className="component-box-control__unit-control"
 								id={ inputId }
diff --git a/packages/components/src/unit-control/index.tsx b/packages/components/src/unit-control/index.tsx
index 5a6a781cbaf5e4..d6fd0bb65d38a4 100644
--- a/packages/components/src/unit-control/index.tsx
+++ b/packages/components/src/unit-control/index.tsx
@@ -56,6 +56,7 @@ function UnforwardedUnitControl(
 		units: unitsProp = CSS_UNITS,
 		value: valueProp,
 		onFocus: onFocusProp,
+		__shouldNotWarnDeprecated36pxSize,
 		...props
 	} = useDeprecated36pxDefaultSizeProp( unitControlProps );
 
@@ -63,6 +64,7 @@ function UnforwardedUnitControl(
 		componentName: 'UnitControl',
 		__next40pxDefaultSize: props.__next40pxDefaultSize,
 		size,
+		__shouldNotWarnDeprecated36pxSize,
 	} );
 
 	if ( 'unit' in unitControlProps ) {
diff --git a/packages/components/src/unit-control/types.ts b/packages/components/src/unit-control/types.ts
index 9164502668a2b0..891945b422862a 100644
--- a/packages/components/src/unit-control/types.ts
+++ b/packages/components/src/unit-control/types.ts
@@ -107,4 +107,11 @@ export type UnitControlProps = Pick< InputControlProps, 'size' > &
 		 * Callback when either the quantity or the unit inputs gains focus.
 		 */
 		onFocus?: FocusEventHandler< HTMLInputElement | HTMLSelectElement >;
+		/**
+		 * Do not throw a warning for the deprecated 36px default size.
+		 * For internal components of other components that already throw the warning.
+		 *
+		 * @ignore
+		 */
+		__shouldNotWarnDeprecated36pxSize?: boolean;
 	};

From 105f6b07d8a33ee41dc1b6b2de1a09672623bf5f Mon Sep 17 00:00:00 2001
From: hbhalodia <hit.bhalodia@rtcamp.com>
Date: Fri, 29 Nov 2024 09:59:02 +0530
Subject: [PATCH 05/10] Add the missing prop for __next40pxDefaultSize on the
 index file and updated readme as well

---
 packages/components/src/unit-control/README.md | 4 ++--
 packages/components/src/unit-control/index.tsx | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/components/src/unit-control/README.md b/packages/components/src/unit-control/README.md
index c10bdb5995f671..65d9e4b74062dd 100644
--- a/packages/components/src/unit-control/README.md
+++ b/packages/components/src/unit-control/README.md
@@ -128,7 +128,7 @@ const Example = () => {
 	];
 
 	return (
-		<UnitControl onChange={ setValue } value={ value } units={ units } />
+		<UnitControl __next40pxDefaultSize onChange={ setValue } value={ value } units={ units } />
 	);
 };
 ```
@@ -143,7 +143,7 @@ For example, a `value` of `50%` will set the current unit to `%`.
 Example:
 
 ```jsx
-<UnitControl value="50%" />
+<UnitControl __next40pxDefaultSize value="50%" />
 ```
 
 -   Required: No
diff --git a/packages/components/src/unit-control/index.tsx b/packages/components/src/unit-control/index.tsx
index d6fd0bb65d38a4..9845c4eb04ef26 100644
--- a/packages/components/src/unit-control/index.tsx
+++ b/packages/components/src/unit-control/index.tsx
@@ -255,7 +255,7 @@ function UnforwardedUnitControl(
  * const Example = () => {
  *   const [ value, setValue ] = useState( '10px' );
  *
- *   return <UnitControl onChange={ setValue } value={ value } />;
+ *   return <UnitControl __next40pxDefaultSize onChange={ setValue } value={ value } />;
  * };
  * ```
  */

From f57aca1be6a8c7ff726455262d245eef568c37f8 Mon Sep 17 00:00:00 2001
From: hbhalodia <hit.bhalodia@rtcamp.com>
Date: Fri, 29 Nov 2024 10:01:20 +0530
Subject: [PATCH 06/10] Add changelog to unreleased section

---
 packages/components/CHANGELOG.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index a20d3581d53436..28298c8bb8cd14 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -6,6 +6,7 @@
 
 -   `BoxControl`: Passive deprecate `onMouseOver`/`onMouseOut`. Pass to the `inputProps` prop instead ([#67332](https://github.com/WordPress/gutenberg/pull/67332)).
 -   `BoxControl`: Deprecate 36px default size ([#66704](https://github.com/WordPress/gutenberg/pull/66704)).
+-   `UnitControl`: Deprecate 36px default size ([#66791](https://github.com/WordPress/gutenberg/pull/66791)).
 
 ### Internal
 
@@ -20,7 +21,7 @@
 -   `FontSizePicker`: Deprecate 36px default size ([#66920](https://github.com/WordPress/gutenberg/pull/66920)).
 -   `ComboboxControl`: Deprecate 36px default size ([#66900](https://github.com/WordPress/gutenberg/pull/66900)).
 -   `ToggleGroupControl`: Deprecate 36px default size ([#66747](https://github.com/WordPress/gutenberg/pull/66747)).
--   `RangeControl`: Deprecate 36px default size ([#66721](https://github.com/WordPress/gutenberg/pull/66721)). 
+-   `RangeControl`: Deprecate 36px default size ([#66721](https://github.com/WordPress/gutenberg/pull/66721)).
 
 ### Bug Fixes
 
@@ -63,7 +64,6 @@
 ### Deprecations
 
 -   `Radio`: Deprecate 36px default size ([#66572](https://github.com/WordPress/gutenberg/pull/66572)).
--   `UnitControl`: Deprecate 36px default size ([#66791](https://github.com/WordPress/gutenberg/pull/66791)).
 
 ### Bug Fixes
 

From 9a24a0bb5b2faeafe898af711cd579f4355303e3 Mon Sep 17 00:00:00 2001
From: hbhalodia <hit.bhalodia@rtcamp.com>
Date: Fri, 29 Nov 2024 10:43:17 +0530
Subject: [PATCH 07/10] Add __shouldNotWarnDeprecated36pxSize prop to supress
 console warning from child component

---
 .../components/src/border-control/border-control/component.tsx  | 2 ++
 packages/components/src/font-size-picker/index.native.js        | 2 ++
 packages/components/src/font-size-picker/index.tsx              | 1 +
 3 files changed, 5 insertions(+)

diff --git a/packages/components/src/border-control/border-control/component.tsx b/packages/components/src/border-control/border-control/component.tsx
index 2ba338c2bb30cb..f71599b274778d 100644
--- a/packages/components/src/border-control/border-control/component.tsx
+++ b/packages/components/src/border-control/border-control/component.tsx
@@ -75,6 +75,8 @@ const UnconnectedBorderControl = (
 			/>
 			<HStack spacing={ 4 } className={ innerWrapperClassName }>
 				<UnitControl
+					__next40pxDefaultSize={ __next40pxDefaultSize }
+					__shouldNotWarnDeprecated36pxSize
 					prefix={
 						<Spacer marginRight={ 1 } marginBottom={ 0 }>
 							<BorderControlDropdown
diff --git a/packages/components/src/font-size-picker/index.native.js b/packages/components/src/font-size-picker/index.native.js
index 5c22cb86175dbd..61603e1fbb5a4f 100644
--- a/packages/components/src/font-size-picker/index.native.js
+++ b/packages/components/src/font-size-picker/index.native.js
@@ -163,6 +163,8 @@ function FontSizePicker( {
 					} ) }
 					{ ! disableCustomFontSizes && (
 						<UnitControl
+							__next40pxDefaultSize
+							__shouldNotWarnDeprecated36pxSize
 							label={ __( 'Custom' ) }
 							min={ 0 }
 							max={ 200 }
diff --git a/packages/components/src/font-size-picker/index.tsx b/packages/components/src/font-size-picker/index.tsx
index a71e60cd6719c8..a47812640f1a29 100644
--- a/packages/components/src/font-size-picker/index.tsx
+++ b/packages/components/src/font-size-picker/index.tsx
@@ -212,6 +212,7 @@ const UnforwardedFontSizePicker = (
 						<FlexItem isBlock>
 							<UnitControl
 								__next40pxDefaultSize={ __next40pxDefaultSize }
+								__shouldNotWarnDeprecated36pxSize
 								label={ __( 'Custom' ) }
 								labelPosition="top"
 								hideLabelFromVision

From 19b5dbd8d5ee434f0a0992d2c052448455e1478c Mon Sep 17 00:00:00 2001
From: hbhalodia <hit.bhalodia@rtcamp.com>
Date: Fri, 29 Nov 2024 10:52:53 +0530
Subject: [PATCH 08/10] Update tools panel storybook and docs to use
 __next40pxDefaultSize for UnitControl

---
 .../src/tools-panel/stories/index.story.tsx          | 12 ++++++++++++
 .../components/src/tools-panel/tools-panel/README.md |  2 ++
 .../src/tools-panel/tools-panel/component.tsx        |  2 ++
 3 files changed, 16 insertions(+)

diff --git a/packages/components/src/tools-panel/stories/index.story.tsx b/packages/components/src/tools-panel/stories/index.story.tsx
index 787585ac716b51..0fbdae794d838d 100644
--- a/packages/components/src/tools-panel/stories/index.story.tsx
+++ b/packages/components/src/tools-panel/stories/index.story.tsx
@@ -74,6 +74,7 @@ export const Default: StoryFn< typeof ToolsPanel > = ( {
 						isShownByDefault
 					>
 						<UnitControl
+							__next40pxDefaultSize
 							label="Width"
 							value={ width }
 							onChange={ ( next ) => setWidth( next ) }
@@ -86,6 +87,7 @@ export const Default: StoryFn< typeof ToolsPanel > = ( {
 						isShownByDefault
 					>
 						<UnitControl
+							__next40pxDefaultSize
 							label="Height"
 							value={ height }
 							onChange={ ( next ) => setHeight( next ) }
@@ -98,6 +100,7 @@ export const Default: StoryFn< typeof ToolsPanel > = ( {
 						isShownByDefault
 					>
 						<UnitControl
+							__next40pxDefaultSize
 							label="Minimum height"
 							value={ minHeight }
 							onChange={ ( next ) => setMinHeight( next ) }
@@ -167,6 +170,7 @@ export const WithNonToolsPanelItems: StoryFn< typeof ToolsPanel > = ( {
 						isShownByDefault
 					>
 						<UnitControl
+							__next40pxDefaultSize
 							label="Width"
 							value={ width }
 							onChange={ ( next ) => setWidth( next ) }
@@ -179,6 +183,7 @@ export const WithNonToolsPanelItems: StoryFn< typeof ToolsPanel > = ( {
 						isShownByDefault
 					>
 						<UnitControl
+							__next40pxDefaultSize
 							label="Height"
 							value={ height }
 							onChange={ ( next ) => setHeight( next ) }
@@ -237,6 +242,7 @@ export const WithOptionalItemsPlusIcon: StoryFn< typeof ToolsPanel > = ( {
 							}
 						>
 							<UnitControl
+								__next40pxDefaultSize
 								label="Minimum width"
 								value={ minWidth }
 								onChange={ ( next ) => setMinWidth( next ) }
@@ -249,6 +255,7 @@ export const WithOptionalItemsPlusIcon: StoryFn< typeof ToolsPanel > = ( {
 							isShownByDefault={ false }
 						>
 							<UnitControl
+								__next40pxDefaultSize
 								label="Width"
 								value={ width }
 								onChange={ ( next ) => setWidth( next ) }
@@ -261,6 +268,7 @@ export const WithOptionalItemsPlusIcon: StoryFn< typeof ToolsPanel > = ( {
 							isShownByDefault={ false }
 						>
 							<UnitControl
+								__next40pxDefaultSize
 								label="Height"
 								value={ height }
 								onChange={ ( next ) => setHeight( next ) }
@@ -341,6 +349,7 @@ export const WithSlotFillItems: StoryFn< typeof ToolsPanel > = ( {
 					panelId={ panelId }
 				>
 					<UnitControl
+						__next40pxDefaultSize
 						label="Injected Width"
 						value={ width }
 						onChange={ ( next ) =>
@@ -356,6 +365,7 @@ export const WithSlotFillItems: StoryFn< typeof ToolsPanel > = ( {
 					panelId={ panelId }
 				>
 					<UnitControl
+						__next40pxDefaultSize
 						label="Injected Height"
 						value={ height }
 						onChange={ ( next ) =>
@@ -441,6 +451,7 @@ export const WithConditionalDefaultControl: StoryFn< typeof ToolsPanel > = ( {
 					isShownByDefault
 				>
 					<UnitControl
+						__next40pxDefaultSize
 						label="Injected Height"
 						value={ height }
 						onChange={ ( next ) =>
@@ -541,6 +552,7 @@ export const WithConditionallyRenderedControl: StoryFn<
 					isShownByDefault
 				>
 					<UnitControl
+						__next40pxDefaultSize
 						label="Injected Height"
 						value={ height }
 						onChange={ ( next ) =>
diff --git a/packages/components/src/tools-panel/tools-panel/README.md b/packages/components/src/tools-panel/tools-panel/README.md
index 1895f5ccc843ec..b5e6860e2bd072 100644
--- a/packages/components/src/tools-panel/tools-panel/README.md
+++ b/packages/components/src/tools-panel/tools-panel/README.md
@@ -101,6 +101,7 @@ export function DimensionPanel() {
 				isShownByDefault
 			>
 				<UnitControl
+					__next40pxDefaultSize
 					label={ __( 'Height' ) }
 					onChange={ setHeight }
 					value={ height }
@@ -113,6 +114,7 @@ export function DimensionPanel() {
 				isShownByDefault
 			>
 				<UnitControl
+					__next40pxDefaultSize
 					label={ __( 'Width' ) }
 					onChange={ setWidth }
 					value={ width }
diff --git a/packages/components/src/tools-panel/tools-panel/component.tsx b/packages/components/src/tools-panel/tools-panel/component.tsx
index 4e01e39ffffb43..c094d593dd4c24 100644
--- a/packages/components/src/tools-panel/tools-panel/component.tsx
+++ b/packages/components/src/tools-panel/tools-panel/component.tsx
@@ -75,6 +75,7 @@ const UnconnectedToolsPanel = (
  *         onDeselect={ () => setHeight() }
  *       >
  *         <UnitControl
+ *           __next40pxDefaultSize
  *           label={ __( 'Height' ) }
  *           onChange={ setHeight }
  *           value={ height }
@@ -86,6 +87,7 @@ const UnconnectedToolsPanel = (
  *         onDeselect={ () => setWidth() }
  *       >
  *         <UnitControl
+ *           __next40pxDefaultSize
  *           label={ __( 'Width' ) }
  *           onChange={ setWidth }
  *           value={ width }

From 42eabc9f50a07936f171c1fb5636d21b50cd15cb Mon Sep 17 00:00:00 2001
From: hbhalodia <hit.bhalodia@rtcamp.com>
Date: Fri, 29 Nov 2024 10:57:18 +0530
Subject: [PATCH 09/10] Updated the unit test to minimise the file changes

---
 .../src/unit-control/test/index.tsx           | 83 +++++++------------
 1 file changed, 31 insertions(+), 52 deletions(-)

diff --git a/packages/components/src/unit-control/test/index.tsx b/packages/components/src/unit-control/test/index.tsx
index b04d815cdb83fc..ad98d57cae6405 100644
--- a/packages/components/src/unit-control/test/index.tsx
+++ b/packages/components/src/unit-control/test/index.tsx
@@ -12,9 +12,12 @@ import { useState } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import UnitControl from '..';
+import _UnitControl from '..';
 import { CSS_UNITS, parseQuantityAndUnitFromRawValue } from '../utils';
-import type { UnitControlProps } from '../types';
+
+const UnitControl = ( props: React.ComponentProps< typeof _UnitControl > ) => (
+	<_UnitControl __next40pxDefaultSize { ...props } />
+);
 
 const getInput = ( {
 	isInputTypeText = false,
@@ -71,13 +74,11 @@ const ControlledSyncUnits = () => {
 	return (
 		<>
 			<UnitControl
-				__next40pxDefaultSize
 				label="Field A"
 				value={ state.valueA }
 				onChange={ ( v ) => onUnitControlChange( 'valueA', v ) }
 			/>
 			<UnitControl
-				__next40pxDefaultSize
 				label="Field B"
 				value={ state.valueB }
 				onChange={ ( v ) => onUnitControlChange( 'valueB', v ) }
@@ -86,14 +87,10 @@ const ControlledSyncUnits = () => {
 	);
 };
 
-const ControlledUnitControl = ( { ...props }: UnitControlProps ) => {
-	return <UnitControl __next40pxDefaultSize { ...props } />;
-};
-
 describe( 'UnitControl', () => {
 	describe( 'Basic rendering', () => {
 		it( 'should render', () => {
-			render( <ControlledUnitControl /> );
+			render( <UnitControl /> );
 			const input = getInput();
 			const select = getSelect();
 
@@ -102,12 +99,10 @@ describe( 'UnitControl', () => {
 		} );
 
 		it( 'should render custom className', () => {
-			const { container: withoutClassName } = render(
-				<ControlledUnitControl />
-			);
+			const { container: withoutClassName } = render( <UnitControl /> );
 
 			const { container: withClassName } = render(
-				<ControlledUnitControl className="hello" />
+				<UnitControl className="hello" />
 			);
 
 			expect(
@@ -121,7 +116,7 @@ describe( 'UnitControl', () => {
 		} );
 
 		it( 'should not render select, if units are disabled', () => {
-			render( <ControlledUnitControl value="3em" units={ [] } /> );
+			render( <UnitControl value="3em" units={ [] } /> );
 			const input = getInput();
 			// Using `queryByRole` instead of `getSelect` because we need to test
 			// for this element NOT to be in the document.
@@ -132,11 +127,7 @@ describe( 'UnitControl', () => {
 		} );
 
 		it( 'should render label if single units', () => {
-			render(
-				<ControlledUnitControl
-					units={ [ { value: '%', label: '%' } ] }
-				/>
-			);
+			render( <UnitControl units={ [ { value: '%', label: '%' } ] } /> );
 
 			const select = screen.queryByRole( 'combobox' );
 			const label = screen.getByText( '%' );
@@ -151,9 +142,7 @@ describe( 'UnitControl', () => {
 			const user = userEvent.setup();
 			const onChangeSpy = jest.fn();
 
-			render(
-				<ControlledUnitControl value="50px" onChange={ onChangeSpy } />
-			);
+			render( <UnitControl value="50px" onChange={ onChangeSpy } /> );
 
 			const input = getInput();
 			await user.clear( input );
@@ -174,9 +163,7 @@ describe( 'UnitControl', () => {
 			const user = userEvent.setup();
 			const onChangeSpy = jest.fn();
 
-			render(
-				<ControlledUnitControl value="50px" onChange={ onChangeSpy } />
-			);
+			render( <UnitControl value="50px" onChange={ onChangeSpy } /> );
 
 			const input = getInput();
 			await user.type( input, '{ArrowUp}' );
@@ -192,9 +179,7 @@ describe( 'UnitControl', () => {
 			const user = userEvent.setup();
 			const onChangeSpy = jest.fn();
 
-			render(
-				<ControlledUnitControl value="50px" onChange={ onChangeSpy } />
-			);
+			render( <UnitControl value="50px" onChange={ onChangeSpy } /> );
 
 			const input = getInput();
 			await user.type( input, '{Shift>}{ArrowUp}{/Shift}' );
@@ -210,9 +195,7 @@ describe( 'UnitControl', () => {
 			const user = userEvent.setup();
 			const onChangeSpy = jest.fn();
 
-			render(
-				<ControlledUnitControl value={ 50 } onChange={ onChangeSpy } />
-			);
+			render( <UnitControl value={ 50 } onChange={ onChangeSpy } /> );
 
 			const input = getInput();
 			await user.type( input, '{ArrowDown}' );
@@ -228,9 +211,7 @@ describe( 'UnitControl', () => {
 			const user = userEvent.setup();
 			const onChangeSpy = jest.fn();
 
-			render(
-				<ControlledUnitControl value={ 50 } onChange={ onChangeSpy } />
-			);
+			render( <UnitControl value={ 50 } onChange={ onChangeSpy } /> );
 
 			const input = getInput();
 			await user.type( input, '{Shift>}{ArrowDown}{/Shift}' );
@@ -247,7 +228,7 @@ describe( 'UnitControl', () => {
 			const onChangeSpy = jest.fn();
 
 			render(
-				<ControlledUnitControl
+				<UnitControl
 					value={ 50 }
 					onChange={ onChangeSpy }
 					isPressEnterToChange
@@ -275,7 +256,7 @@ describe( 'UnitControl', () => {
 			const onBlurSpy = jest.fn();
 
 			render(
-				<ControlledUnitControl
+				<UnitControl
 					value="33%"
 					onChange={ onChangeSpy }
 					onBlur={ onBlurSpy }
@@ -304,7 +285,7 @@ describe( 'UnitControl', () => {
 			const onChangeSpy = jest.fn();
 
 			render(
-				<ControlledUnitControl
+				<UnitControl
 					value="15px"
 					onChange={ onChangeSpy }
 					isPressEnterToChange
@@ -337,7 +318,7 @@ describe( 'UnitControl', () => {
 			render(
 				<>
 					<button>Click me</button>
-					<ControlledUnitControl
+					<UnitControl
 						units={ [ { value: '%', label: '%' } ] }
 						onChange={ onChangeSpy }
 					/>
@@ -370,7 +351,7 @@ describe( 'UnitControl', () => {
 			const onUnitChangeSpy = jest.fn();
 
 			render(
-				<ControlledUnitControl
+				<UnitControl
 					value="14rem"
 					onChange={ onChangeSpy }
 					onUnitChange={ onUnitChangeSpy }
@@ -400,7 +381,7 @@ describe( 'UnitControl', () => {
 				{ value: '+', label: '+', default: 10 },
 			];
 
-			render( <ControlledUnitControl units={ units } /> );
+			render( <UnitControl units={ units } /> );
 
 			const options = getSelectOptions();
 
@@ -423,7 +404,7 @@ describe( 'UnitControl', () => {
 			];
 
 			render(
-				<ControlledUnitControl
+				<UnitControl
 					isResetValueOnUnitChange
 					units={ units }
 					onChange={ onChangeSpy }
@@ -459,7 +440,7 @@ describe( 'UnitControl', () => {
 			];
 
 			render(
-				<ControlledUnitControl
+				<UnitControl
 					isResetValueOnUnitChange={ false }
 					value={ 50 }
 					units={ units }
@@ -490,7 +471,7 @@ describe( 'UnitControl', () => {
 			const onChangeSpy = jest.fn();
 
 			render(
-				<ControlledUnitControl
+				<UnitControl
 					value="50%"
 					units={ [ { value: '%', label: '%' } ] }
 					onChange={ onChangeSpy }
@@ -550,7 +531,7 @@ describe( 'UnitControl', () => {
 				{ value: 'vmax', label: 'vmax' },
 			];
 
-			render( <ControlledUnitControl units={ units } value="5" /> );
+			render( <UnitControl units={ units } value="5" /> );
 
 			const select = getSelect();
 			await user.selectOptions( select, [ 'vmax' ] );
@@ -568,7 +549,7 @@ describe( 'UnitControl', () => {
 			const onBlurSpy = jest.fn();
 
 			render(
-				<ControlledUnitControl
+				<UnitControl
 					value="15px"
 					onUnitChange={ onUnitChangeSpy }
 					onBlur={ onBlurSpy }
@@ -593,28 +574,26 @@ describe( 'UnitControl', () => {
 
 	describe( 'Unit Parser', () => {
 		it( 'should update unit after initial render and with new unit prop', async () => {
-			const { rerender } = render(
-				<ControlledUnitControl value="10%" />
-			);
+			const { rerender } = render( <UnitControl value="10%" /> );
 
 			const select = getSelect();
 
 			expect( select.value ).toBe( '%' );
 
-			rerender( <ControlledUnitControl value="20vh" /> );
+			rerender( <UnitControl value="20vh" /> );
 
 			expect( select.value ).toBe( 'vh' );
 		} );
 
 		it( 'should fallback to default unit if parsed unit is invalid', () => {
-			render( <ControlledUnitControl value="10null" /> );
+			render( <UnitControl value="10null" /> );
 
 			expect( getSelect().value ).toBe( 'px' );
 		} );
 
 		it( 'should display valid CSS unit when not explicitly included in units list', () => {
 			render(
-				<ControlledUnitControl
+				<UnitControl
 					value="10%"
 					units={ [
 						{ value: 'px', label: 'px' },
@@ -640,7 +619,7 @@ describe( 'UnitControl', () => {
 				const onUnitChangeSpy = jest.fn();
 
 				render(
-					<ControlledUnitControl
+					<UnitControl
 						value="10%"
 						onChange={ onChangeSpy }
 						onUnitChange={ onUnitChangeSpy }

From 57ba863cb387323d55d8d75ec906d8e1c54d4f08 Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Fri, 29 Nov 2024 23:43:07 +0900
Subject: [PATCH 10/10] Revert changes on mobile FontSizePicker

---
 packages/components/src/font-size-picker/index.native.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/components/src/font-size-picker/index.native.js b/packages/components/src/font-size-picker/index.native.js
index 61603e1fbb5a4f..5c22cb86175dbd 100644
--- a/packages/components/src/font-size-picker/index.native.js
+++ b/packages/components/src/font-size-picker/index.native.js
@@ -163,8 +163,6 @@ function FontSizePicker( {
 					} ) }
 					{ ! disableCustomFontSizes && (
 						<UnitControl
-							__next40pxDefaultSize
-							__shouldNotWarnDeprecated36pxSize
 							label={ __( 'Custom' ) }
 							min={ 0 }
 							max={ 200 }