Skip to content

Commit 43b2ec7

Browse files
mirkajorgefilipecosta
authored and
widoz
committed
Components: Deprecate ResponsiveWrapper (WordPress#83347)
* Components: Deprecate ResponsiveWrapper Log a deprecation warning so external consumers see it before removal in WordPress 7.4. Gutenberg does not use the component. * Components: Link the ResponsiveWrapper deprecation changelog entries Co-authored-by: mirka <0mirka00@git.wordpress.org> Co-authored-by: jorgefilipecosta <jorgefilipecosta@git.wordpress.org>
1 parent a9f124e commit 43b2ec7

6 files changed

Lines changed: 18 additions & 3 deletions

File tree

‎packages/components/CHANGELOG.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@
2222

2323
### Deprecations
2424

25+
- `ResponsiveWrapper`: Deprecate the component, planned for removal in WordPress 7.4. Use the CSS `aspect-ratio` property instead ([#83347](https://github.com/WordPress/gutenberg/pull/83347)).
2526
- `Scrollable`: Deprecate the component, planned for removal in WordPress 7.4 ([#83273](https://github.com/WordPress/gutenberg/pull/83273)).
2627
- `Elevation`: Deprecate the component, planned for removal in WordPress 7.4 ([#83269](https://github.com/WordPress/gutenberg/pull/83269)).
2728
- `Divider`: Deprecate the component, planned for removal in WordPress 7.4 ([#83040](https://github.com/WordPress/gutenberg/pull/83040)).

‎packages/components/src/responsive-wrapper/README.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
# ResponsiveWrapper
22

3+
<p class="callout callout-alert">This component is deprecated. Use the CSS <code>aspect-ratio</code> property instead.</p>
4+
35
A wrapper component that maintains its aspect ratio when resized.
46

57
## Usage

‎packages/components/src/responsive-wrapper/index.tsx‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,15 @@
11
import clsx from 'clsx';
2+
import deprecated from '@wordpress/deprecated';
23
import { cloneElement, Children } from '@wordpress/element';
34
import type { ResponsiveWrapperProps } from './types';
45

56
/**
67
* A wrapper component that maintains its aspect ratio when resized.
78
*
9+
* This component is deprecated. Use the CSS `aspect-ratio` property instead.
10+
*
11+
* @deprecated
12+
*
813
* ```jsx
914
* import { ResponsiveWrapper } from '@wordpress/components';
1015
*
@@ -24,6 +29,12 @@ function ResponsiveWrapper( {
2429
children,
2530
isInline = false,
2631
}: ResponsiveWrapperProps ) {
32+
deprecated( 'wp.components.ResponsiveWrapper', {
33+
since: '7.2',
34+
version: '7.4',
35+
alternative: 'the CSS aspect-ratio property',
36+
} );
37+
2738
if ( Children.count( children ) !== 1 ) {
2839
return null;
2940
}

‎packages/components/src/responsive-wrapper/stories/index.story.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import ResponsiveWrapper from '..';
33

44
const meta: Meta< typeof ResponsiveWrapper > = {
55
component: ResponsiveWrapper,
6-
title: 'Components/@wordpress-components/Layout/ResponsiveWrapper',
6+
title: 'Components/@wordpress-components/Deprecated/ResponsiveWrapper',
77
id: 'components-responsivewrapper',
88
argTypes: {
99
children: { control: false },
@@ -14,7 +14,7 @@ const meta: Meta< typeof ResponsiveWrapper > = {
1414
componentStatus: {
1515
status: 'not-recommended',
1616
whereUsed: 'global',
17-
notes: 'Planned for deprecation.',
17+
notes: 'Deprecated. Use the CSS `aspect-ratio` property instead.',
1818
},
1919
},
2020
};

‎packages/eslint-plugin/CHANGELOG.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88

99
### Enhancements
1010

11+
- Update `use-recommended-components` deprecation message for `ResponsiveWrapper` to point to the CSS `aspect-ratio` property ([#83347](https://github.com/WordPress/gutenberg/pull/83347)).
1112
- Update `use-recommended-components` deprecation message for `__experimentalScrollable` to point to writing CSS ([#83273](https://github.com/WordPress/gutenberg/pull/83273)).
1213
- Update `use-recommended-components` deprecation message for `__experimentalDivider` to point to `Separator` subcomponents and design tokens ([#83040](https://github.com/WordPress/gutenberg/pull/83040)).
1314
- Update `use-recommended-components` rule to mark `Select` and `SelectControl` from `@wordpress/ui` as recommended ([#83030](https://github.com/WordPress/gutenberg/pull/83030)).

‎packages/eslint-plugin/rules/use-recommended-components.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -104,7 +104,7 @@ const DENYLIST = {
104104
'For use cases not covered by `Stack` from `@wordpress/ui`, write your own CSS instead.',
105105
__experimentalInputControl:
106106
'Use `InputControl` from `@wordpress/ui` instead. See migration guide in the lint rule documentation.',
107-
ResponsiveWrapper: '{{ name }} is planned for deprecation.',
107+
ResponsiveWrapper: 'Use the CSS `aspect-ratio` property instead.',
108108
TabPanel: 'Use `Tabs` from `@wordpress/ui` instead.',
109109
TabbableContainer: '{{ name }} is planned for deprecation.',
110110
Tabs: 'Use `Tabs` from `@wordpress/ui` instead.',

0 commit comments

Comments
 (0)