Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Deprecate DimensionControl #64951

Merged
merged 8 commits into from
Sep 3, 2024
Merged

Deprecate DimensionControl #64951

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
b66e095
Update readme
mirka Aug 30, 2024
3fc01c9
Mark as `@deprecated`
mirka Aug 30, 2024
2fb04dd
Remove mentions in ResponsiveBlockControl readme
mirka Aug 30, 2024
5e3201c
Move to deprecated group in Storybook
mirka Aug 30, 2024
cbbd54d
Fixup JSDocs
mirka Aug 30, 2024
227d358
Throw deprecation warning
mirka Aug 30, 2024
38fd778
Fix test
mirka Aug 30, 2024
44142aa
Add changelog
mirka Aug 30, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 3 additions & 27 deletions packages/block-editor/src/components/responsive-block-control/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,44 +27,20 @@ import {
InspectorControls,
__experimentalResponsiveBlockControl as ResponsiveBlockControl,
} from '@wordpress/block-editor';
import {
DimensionControl,
} from '@wordpress/components';
Comment on lines -30 to -32
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This ResponsiveBlockControl component itself is also obsolete, but updating the example in this readme anyway.

Here is a story if you want to see what this component does:

/**
 * WordPress dependencies
 */
import { useState } from '@wordpress/element';

/**
 * Internal dependencies
 */
import ResponsiveBlockControl from '../';

export default {
	title: 'BlockEditor/ResponsiveBlockControl',
	component: ResponsiveBlockControl,
};

export const Default = () => {
	const [ isResponsive, setIsResponsive ] = useState( false );

	return (
		<ResponsiveBlockControl
			title="Padding"
			property="padding"
			isResponsive={ isResponsive }
			onIsResponsiveChange={ () => {
				setIsResponsive( ! isResponsive );
			} }
			renderDefaultControl={ ( labelComponent, viewport ) => {
				return (
					<>
						<label htmlFor={ viewport.id }>
							{ labelComponent }
						</label>
						<input type="number" id={ viewport.id } />
					</>
				);
			} }
		/>
	);
};


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 }
Expand Down Expand Up @@ -155,7 +131,7 @@ const renderDefaultControl = ( labelComponent, viewport ) => {
// id: 'small',
// label: 'All'
// }
return <DimensionControl label={ labelComponent } />;
return <SelectControl label={ labelComponent } />;
};
```

Expand Down
1 change: 1 addition & 0 deletions packages/components/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
4 changes: 4 additions & 0 deletions packages/components/src/dimension-control/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,9 @@
# DimensionControl

<div class="callout callout-alert">
This component is deprecated.
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm refraining from issuing any "Use ___ instead" guidance, because nobody uses this anyway (also I don't know 😇).

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

At most we could say "Use SelectControl or CustomSelectControl with and pass this set of options"

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Given that the original code example is for padding, I'm guessing most extenders would just use a Dimensions hook now. Doesn't cover the responsive case though 😕

</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>
Expand Down
8 changes: 7 additions & 1 deletion packages/components/src/dimension-control/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand All @@ -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';
Expand Down Expand Up @@ -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 );
Expand Down
9 changes: 7 additions & 2 deletions packages/components/src/dimension-control/stories/index.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 } },
Expand All @@ -42,7 +48,6 @@ const Template: StoryFn< typeof DimensionControl > = ( args ) => (
);

export const Default = Template.bind( {} );

Default.args = {
__nextHasNoMarginBottom: true,
label: 'Please select a size',
Expand Down
1 change: 1 addition & 0 deletions packages/components/src/dimension-control/test/index.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ describe( 'DimensionControl', () => {
const { container } = render(
<DimensionControl instanceId={ instanceId } label="Padding" />
);
expect( console ).toHaveWarned();
expect( container ).toMatchSnapshot();
} );

Expand Down
1 change: 1 addition & 0 deletions storybook/manager-head.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
const PREVIOUSLY_EXPERIMENTAL_COMPONENTS = [
'alignmentmatrixcontrol',
'customselectcontrol-v2',
'dimensioncontrol',
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this redirect going to work? Usually we change from "experimental" to "stable", but in this instance we're changing to "deprecated" — would this affect the new URL?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Unless I misunderstand, this is unnecessary.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good question. For the components moved to the Deprecated section, we're explicitly setting an id in the story meta so it won't include the word "deprecated" in the URL.

'navigation',
'progressbar',
'theme',
Expand Down
Loading