From b66e095093a0194c8de0f1571da25cca80de67d8 Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Sat, 31 Aug 2024 04:48:31 +0900 Subject: [PATCH 1/8] Update readme --- packages/components/src/dimension-control/README.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/components/src/dimension-control/README.md b/packages/components/src/dimension-control/README.md index 3cd0191a046068..78c1a60275c13a 100644 --- a/packages/components/src/dimension-control/README.md +++ b/packages/components/src/dimension-control/README.md @@ -1,5 +1,9 @@ # DimensionControl +
+This component is deprecated. +
+
This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.
From 3fc01c9432fd6756a09a97ad47d68aebe09d95ae Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Sat, 31 Aug 2024 05:13:30 +0900 Subject: [PATCH 2/8] Mark as `@deprecated` --- packages/components/src/dimension-control/index.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/components/src/dimension-control/index.tsx b/packages/components/src/dimension-control/index.tsx index 52662f31c3f24c..a93704ecc5b50c 100644 --- a/packages/components/src/dimension-control/index.tsx +++ b/packages/components/src/dimension-control/index.tsx @@ -29,6 +29,8 @@ const CONTEXT_VALUE = { /** * `DimensionControl` is a component designed to provide a UI to control spacing and/or dimensions. * + * @deprecated + * * This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes. * * ```jsx From 2fb04dd405555976184b3ba448a2ded66cabc1e2 Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Sat, 31 Aug 2024 05:13:48 +0900 Subject: [PATCH 3/8] Remove mentions in ResponsiveBlockControl readme --- .../responsive-block-control/README.md | 30 ++----------------- 1 file changed, 3 insertions(+), 27 deletions(-) diff --git a/packages/block-editor/src/components/responsive-block-control/README.md b/packages/block-editor/src/components/responsive-block-control/README.md index 379e245f03ff37..16183ccd6314f5 100644 --- a/packages/block-editor/src/components/responsive-block-control/README.md +++ b/packages/block-editor/src/components/responsive-block-control/README.md @@ -27,9 +27,6 @@ import { InspectorControls, __experimentalResponsiveBlockControl as ResponsiveBlockControl, } from '@wordpress/block-editor'; -import { - DimensionControl, -} from '@wordpress/components'; registerBlockType( 'my-plugin/my-block', { // ... @@ -37,34 +34,13 @@ 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 ( - { // id: 'small', // label: 'All' // } - return ; + return ; }; ``` From 5e3201cd863014f62d4ecd890d439643b5709ccd Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Sat, 31 Aug 2024 05:19:50 +0900 Subject: [PATCH 4/8] Move to deprecated group in Storybook --- .../components/src/dimension-control/stories/index.story.tsx | 3 ++- storybook/manager-head.html | 1 + 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/components/src/dimension-control/stories/index.story.tsx b/packages/components/src/dimension-control/stories/index.story.tsx index 3a6da44f461164..5ea0dc4284a8f2 100644 --- a/packages/components/src/dimension-control/stories/index.story.tsx +++ b/packages/components/src/dimension-control/stories/index.story.tsx @@ -15,7 +15,8 @@ import { desktop, tablet, mobile } from '@wordpress/icons'; 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 } }, diff --git a/storybook/manager-head.html b/storybook/manager-head.html index 174433776e27c9..ebf2d6891ba0bb 100644 --- a/storybook/manager-head.html +++ b/storybook/manager-head.html @@ -3,6 +3,7 @@ const PREVIOUSLY_EXPERIMENTAL_COMPONENTS = [ 'alignmentmatrixcontrol', 'customselectcontrol-v2', + 'dimensioncontrol', 'navigation', 'progressbar', 'theme', From cbbd54d5c5e7dac2967755e215763aeba9603cf6 Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Sat, 31 Aug 2024 05:31:47 +0900 Subject: [PATCH 5/8] Fixup JSDocs --- packages/components/src/dimension-control/index.tsx | 2 -- .../src/dimension-control/stories/index.story.tsx | 6 +++++- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/packages/components/src/dimension-control/index.tsx b/packages/components/src/dimension-control/index.tsx index a93704ecc5b50c..70c45dec944caf 100644 --- a/packages/components/src/dimension-control/index.tsx +++ b/packages/components/src/dimension-control/index.tsx @@ -31,8 +31,6 @@ const CONTEXT_VALUE = { * * @deprecated * - * This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes. - * * ```jsx * import { __experimentalDimensionControl as DimensionControl } from '@wordpress/components'; * import { useState } from '@wordpress/element'; diff --git a/packages/components/src/dimension-control/stories/index.story.tsx b/packages/components/src/dimension-control/stories/index.story.tsx index 5ea0dc4284a8f2..15a63fcf6ccf6c 100644 --- a/packages/components/src/dimension-control/stories/index.story.tsx +++ b/packages/components/src/dimension-control/stories/index.story.tsx @@ -13,6 +13,11 @@ 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 (Deprecated)/DimensionControl', @@ -43,7 +48,6 @@ const Template: StoryFn< typeof DimensionControl > = ( args ) => ( ); export const Default = Template.bind( {} ); - Default.args = { __nextHasNoMarginBottom: true, label: 'Please select a size', From 227d3580ab931f4375f14aee9f6f41a3d7f7dffa Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Sat, 31 Aug 2024 05:37:38 +0900 Subject: [PATCH 6/8] Throw deprecation warning --- packages/components/src/dimension-control/index.tsx | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/components/src/dimension-control/index.tsx b/packages/components/src/dimension-control/index.tsx index 70c45dec944caf..25880f9b4fdb38 100644 --- a/packages/components/src/dimension-control/index.tsx +++ b/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: { @@ -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 ); From 38fd778af15eaa535ba5559311b0e639580bc7cf Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Sat, 31 Aug 2024 05:40:16 +0900 Subject: [PATCH 7/8] Fix test --- packages/components/src/dimension-control/test/index.test.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/components/src/dimension-control/test/index.test.js b/packages/components/src/dimension-control/test/index.test.js index 1b34d2983ad0f1..14f1c509f70cf9 100644 --- a/packages/components/src/dimension-control/test/index.test.js +++ b/packages/components/src/dimension-control/test/index.test.js @@ -31,6 +31,7 @@ describe( 'DimensionControl', () => { const { container } = render( ); + expect( console ).toHaveWarned(); expect( container ).toMatchSnapshot(); } ); From 44142aa94a6b4fa24381bf0af203b2ee6de9b3e1 Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Sat, 31 Aug 2024 05:50:05 +0900 Subject: [PATCH 8/8] Add changelog --- packages/components/CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 00204111a1efd6..4702c5910e6a0f 100644 --- a/packages/components/CHANGELOG.md +++ b/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