diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index 47159ec62d079d..0daf321eb4e17b 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -2,6 +2,10 @@
## Unreleased
+### Breaking Changes
+
+- `AnglePickerControl`: Deprecate bottom margin style. Add a `__nextHasNoMarginBottom` prop to start opting into the margin-free styles that will become the default in a future version, currently scheduled to be WordPress 6.4 ([#43867](https://github.com/WordPress/gutenberg/pull/43867)).
+
### Bug Fix
- `Popover`: enable auto-updating every animation frame ([#43617](https://github.com/WordPress/gutenberg/pull/43617)).
diff --git a/packages/components/src/angle-picker-control/README.md b/packages/components/src/angle-picker-control/README.md
index d929eb7de7054e..c4b63e56ed044a 100644
--- a/packages/components/src/angle-picker-control/README.md
+++ b/packages/components/src/angle-picker-control/README.md
@@ -11,7 +11,7 @@ import { AnglePickerControl } from '@wordpress/components';
const MyAnglePicker = () => {
const [ angle, setAngle ] = useState();
- return ;
+ return ;
};
```
@@ -39,3 +39,11 @@ A function that receives the new value of the input.
- Type: `function`
- Required: Yes
+
+### __nextHasNoMarginBottom
+
+Start opting into the new margin-free styles that will become the default in a future version, currently scheduled to be WordPress 6.4. (The prop can be safely removed once this happens.)
+
+- Type: `boolean`
+- Required: No
+- Default: `false`
\ No newline at end of file
diff --git a/packages/components/src/angle-picker-control/index.js b/packages/components/src/angle-picker-control/index.js
index 1cc3085cd7af56..151ad0edeab020 100644
--- a/packages/components/src/angle-picker-control/index.js
+++ b/packages/components/src/angle-picker-control/index.js
@@ -6,6 +6,7 @@ import classnames from 'classnames';
/**
* WordPress dependencies
*/
+import deprecated from '@wordpress/deprecated';
import { __ } from '@wordpress/i18n';
/**
@@ -27,6 +28,17 @@ export default function AnglePickerControl( {
onChange,
value,
} ) {
+ if ( ! __nextHasNoMarginBottom ) {
+ deprecated(
+ 'Bottom margin styles for wp.components.AnglePickerControl',
+ {
+ since: '6.1',
+ version: '6.4',
+ hint: 'Set the `__nextHasNoMarginBottom` prop to true to start opting into the new styles, which will become the default in a future version.',
+ }
+ );
+ }
+
const handleOnNumberChange = ( unprocessedValue ) => {
const inputValue =
unprocessedValue !== '' ? parseInt( unprocessedValue, 10 ) : 0;
diff --git a/packages/components/src/angle-picker-control/stories/index.js b/packages/components/src/angle-picker-control/stories/index.js
index f2de7c4d77bc23..74694459abaac8 100644
--- a/packages/components/src/angle-picker-control/stories/index.js
+++ b/packages/components/src/angle-picker-control/stories/index.js
@@ -11,9 +11,6 @@ import AnglePickerControl from '../';
export default {
title: 'Components/AnglePickerControl',
component: AnglePickerControl,
- argTypes: {
- __nextHasNoMarginBottom: { control: { type: 'boolean' } },
- },
};
const AnglePickerWithState = ( args ) => {
@@ -24,3 +21,6 @@ const AnglePickerWithState = ( args ) => {
};
export const Default = AnglePickerWithState.bind( {} );
+Default.args = {
+ __nextHasNoMarginBottom: true,
+};