Deprecate DimensionControl (#64951)

* Update readme

* Mark as `@deprecated`

* Remove mentions in ResponsiveBlockControl readme

* Move to deprecated group in Storybook

* Fixup JSDocs

* Throw deprecation warning

* Fix test

* Add changelog

Co-authored-by: mirka <0mirka00@git.wordpress.org>
Co-authored-by: ciampo <mciampini@git.wordpress.org>
Co-authored-by: tyxla <tyxla@git.wordpress.org>

packages/block-editor/src/components/responsive-block-control/README.md

@@ -27,44 +27,20 @@ import {
 	InspectorControls,
 	__experimentalResponsiveBlockControl as ResponsiveBlockControl,
 } from '@wordpress/block-editor';
-import {
-	DimensionControl,
-} from '@wordpress/components';
 
 registerBlockType( 'my-plugin/my-block', {
 	// ...
 
 	edit( { attributes, setAttributes } ) {
 
 		const [ isResponsive, setIsResponsive ] = useState( false );
-
-		// Used for example purposes only
-		const sizeOptions = [
-			{
-				label: 'Small',
-				value: 'small',
-			},
-			{
-				label: 'Medium',
-				value: 'medium',
-			},
-			{
-				label: 'Large',
-				value: 'large',
-			},
-		];
-
 		const { paddingSize } = attributes;
 
-
 		// Your custom control can be anything you'd like to use.
-		// You are not restricted to `DimensionControl`s, but this
-		// makes life easier if dealing with standard CSS values.
-		// see `packages/components/src/dimension-control/README.md`
 		const paddingControl = ( labelComponent, viewport ) => {
 			return (
-				<DimensionControl
-					__nextHasNoMarginBottom
+				<input
+					type="number"
 					label={ viewport.label }
 					onChange={ // handle update to padding value here  }
 					value={ paddingSize }
@@ -155,7 +131,7 @@ const renderDefaultControl = ( labelComponent, viewport ) => {
 	// 	id: 'small',
 	// 	label: 'All'
 	// }
-	return <DimensionControl label={ labelComponent } />;
+	return <SelectControl label={ labelComponent } />;
 };
 ```
 

packages/components/CHANGELOG.md

@@ -7,6 +7,7 @@
 -   Deprecate `replace` from the options accepted by `useNavigator().goTo()` ([#64675](https://github.com/WordPress/gutenberg/pull/64675)).
 -   Soft deprecate `size` prop on `AlignmentMatrixControl.Icon` ([#64827](https://github.com/WordPress/gutenberg/pull/64827)).
 -   `__experimentalAlignmentMatrixControl` can now be imported as a stable `AlignmentMatrixControl` ([#60913](https://github.com/WordPress/gutenberg/pull/60913)).
+-   Deprecate `DimensionControl`, scheduled to be removed in WordPress 7.0 ([#64951](https://github.com/WordPress/gutenberg/pull/64951)).
 
 ### Enhancements
 

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

@@ -1,5 +1,9 @@
 # DimensionControl
 
+<div class="callout callout-alert">
+This component is deprecated.
+</div>
+
 <div class="callout callout-alert">
 This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.
 </div>

packages/components/src/dimension-control/index.tsx

@@ -17,6 +17,7 @@ import sizesTable, { findSizeBySlug } from './sizes';
 import type { DimensionControlProps, Size } from './types';
 import type { SelectControlSingleSelectionProps } from '../select-control/types';
 import { ContextSystemProvider } from '../context';
+import deprecated from '@wordpress/deprecated';
 
 const CONTEXT_VALUE = {
 	BaseControl: {
@@ -29,7 +30,7 @@ const CONTEXT_VALUE = {
 /**
  * `DimensionControl` is a component designed to provide a UI to control spacing and/or dimensions.
  *
- * This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.
+ * @deprecated
  *
  * ```jsx
  * import { __experimentalDimensionControl as DimensionControl } from '@wordpress/components';
@@ -62,6 +63,11 @@ export function DimensionControl( props: DimensionControlProps ) {
 		className = '',
 	} = props;
 
+	deprecated( 'wp.components.DimensionControl', {
+		since: '6.7',
+		version: '7.0',
+	} );
+
 	const onChangeSpacingSize: SelectControlSingleSelectionProps[ 'onChange' ] =
 		( val ) => {
 			const theSize = findSizeBySlug( sizes, val );

packages/components/src/dimension-control/stories/index.story.tsx

@@ -13,9 +13,15 @@ import sizes from '../sizes';
  */
 import { desktop, tablet, mobile } from '@wordpress/icons';
 
+/**
+ * `DimensionControl` is a component designed to provide a UI to control spacing and/or dimensions.
+ *
+ * This component is deprecated.
+ */
 const meta: Meta< typeof DimensionControl > = {
 	component: DimensionControl,
-	title: 'Components (Experimental)/DimensionControl',
+	title: 'Components (Deprecated)/DimensionControl',
+	id: 'components-dimensioncontrol',
 	argTypes: {
 		onChange: { action: 'onChange' },
 		value: { control: { type: null } },
@@ -42,7 +48,6 @@ const Template: StoryFn< typeof DimensionControl > = ( args ) => (
 );
 
 export const Default = Template.bind( {} );
-
 Default.args = {
 	__nextHasNoMarginBottom: true,
 	label: 'Please select a size',

packages/components/src/dimension-control/test/index.test.js

@@ -31,6 +31,7 @@ describe( 'DimensionControl', () => {
 			const { container } = render(
 				<DimensionControl instanceId={ instanceId } label="Padding" />
 			);
+			expect( console ).toHaveWarned();
 			expect( container ).toMatchSnapshot();
 		} );
 

storybook/manager-head.html

@@ -3,6 +3,7 @@
 		const PREVIOUSLY_EXPERIMENTAL_COMPONENTS = [
 			'alignmentmatrixcontrol',
 			'customselectcontrol-v2',
+			'dimensioncontrol',
 			'navigation',
 			'progressbar',
 			'theme',