From 7cfbdfdff1b94ce9794ed738db55c0e38040456d Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Mon, 30 Jan 2023 12:31:00 +0800
Subject: [PATCH] Inspector Controls: Stabilize the experimental control groups
 (#47105)

---
 .../src/components/block-inspector/index.js    | 18 ++++++++++--------
 .../advanced-controls-panel.js                 |  2 +-
 .../inspector-controls-tabs/index.js           |  4 +---
 .../position-controls-panel.js                 |  2 +-
 .../inspector-controls-tabs/styles-tab.js      | 12 +++++-------
 .../use-inspector-controls-tabs.js             |  2 ++
 .../src/components/inspector-controls/fill.js  | 16 +++++++++++++++-
 .../inspector-controls/fill.native.js          | 15 ++++++++++++++-
 .../components/inspector-controls/groups.js    |  3 +++
 .../src/components/inspector-controls/index.js |  8 ++------
 .../src/components/inspector-controls/slot.js  | 15 ++++++++++++++-
 .../inspector-controls/slot.native.js          | 15 ++++++++++++++-
 packages/block-editor/src/hooks/anchor.js      |  2 +-
 packages/block-editor/src/hooks/border.js      |  2 +-
 packages/block-editor/src/hooks/color-panel.js |  2 +-
 .../src/hooks/custom-class-name.js             |  2 +-
 packages/block-editor/src/hooks/dimensions.js  |  2 +-
 packages/block-editor/src/hooks/position.js    |  2 +-
 packages/block-editor/src/hooks/typography.js  |  2 +-
 packages/block-library/src/button/edit.js      |  2 +-
 .../edit/comments-inspector-controls.js        |  2 +-
 .../src/cover/edit/inspector-controls.js       |  6 +++---
 packages/block-library/src/group/edit.js       |  2 +-
 packages/block-library/src/image/image.js      |  2 +-
 .../block-library/src/navigation/edit/index.js |  4 ++--
 .../navigation/edit/menu-inspector-controls.js |  2 +-
 packages/block-library/src/paragraph/edit.js   |  2 +-
 .../post-featured-image/dimension-controls.js  |  2 +-
 .../src/post-featured-image/overlay.js         |  2 +-
 packages/block-library/src/post-terms/edit.js  |  2 +-
 .../src/query/edit/query-content.js            |  2 +-
 packages/block-library/src/social-link/edit.js |  2 +-
 .../block-library/src/social-links/edit.js     |  2 +-
 .../template-part/edit/advanced-controls.js    |  2 +-
 34 files changed, 107 insertions(+), 55 deletions(-)

diff --git a/packages/block-editor/src/components/block-inspector/index.js b/packages/block-editor/src/components/block-inspector/index.js
index e37f6fb09efff..e7a769f51cec7 100644
--- a/packages/block-editor/src/components/block-inspector/index.js
+++ b/packages/block-editor/src/components/block-inspector/index.js
@@ -198,22 +198,23 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => {
 					<>
 						<InspectorControls.Slot />
 						<InspectorControls.Slot
-							__experimentalGroup="color"
+							group="color"
 							label={ __( 'Color' ) }
 							className="color-block-support-panel__inner-wrapper"
 						/>
 						<InspectorControls.Slot
-							__experimentalGroup="typography"
+							group="typography"
 							label={ __( 'Typography' ) }
 						/>
 						<InspectorControls.Slot
-							__experimentalGroup="dimensions"
+							group="dimensions"
 							label={ __( 'Dimensions' ) }
 						/>
 						<InspectorControls.Slot
-							__experimentalGroup="border"
+							group="border"
 							label={ __( 'Border' ) }
 						/>
+						<InspectorControls.Slot group="styles" />
 					</>
 				) }
 			</div>
@@ -356,22 +357,23 @@ const BlockInspectorSingleBlock = ( { clientId, blockName } ) => {
 					) }
 					<InspectorControls.Slot />
 					<InspectorControls.Slot
-						__experimentalGroup="color"
+						group="color"
 						label={ __( 'Color' ) }
 						className="color-block-support-panel__inner-wrapper"
 					/>
 					<InspectorControls.Slot
-						__experimentalGroup="typography"
+						group="typography"
 						label={ __( 'Typography' ) }
 					/>
 					<InspectorControls.Slot
-						__experimentalGroup="dimensions"
+						group="dimensions"
 						label={ __( 'Dimensions' ) }
 					/>
 					<InspectorControls.Slot
-						__experimentalGroup="border"
+						group="border"
 						label={ __( 'Border' ) }
 					/>
+					<InspectorControls.Slot group="styles" />
 					<PositionControls />
 					<div>
 						<AdvancedControls />
diff --git a/packages/block-editor/src/components/inspector-controls-tabs/advanced-controls-panel.js b/packages/block-editor/src/components/inspector-controls-tabs/advanced-controls-panel.js
index 83027861e9d19..6807a776b0ee6 100644
--- a/packages/block-editor/src/components/inspector-controls-tabs/advanced-controls-panel.js
+++ b/packages/block-editor/src/components/inspector-controls-tabs/advanced-controls-panel.js
@@ -29,7 +29,7 @@ const AdvancedControls = () => {
 			title={ __( 'Advanced' ) }
 			initialOpen={ false }
 		>
-			<InspectorControls.Slot __experimentalGroup="advanced" />
+			<InspectorControls.Slot group="advanced" />
 		</PanelBody>
 	);
 };
diff --git a/packages/block-editor/src/components/inspector-controls-tabs/index.js b/packages/block-editor/src/components/inspector-controls-tabs/index.js
index efdaed591b4fe..74f89754428cb 100644
--- a/packages/block-editor/src/components/inspector-controls-tabs/index.js
+++ b/packages/block-editor/src/components/inspector-controls-tabs/index.js
@@ -52,9 +52,7 @@ export default function InspectorControlsTabs( {
 				}
 
 				if ( tab.name === TAB_LIST_VIEW.name ) {
-					return (
-						<InspectorControls.Slot __experimentalGroup="list" />
-					);
+					return <InspectorControls.Slot group="list" />;
 				}
 			} }
 		</TabPanel>
diff --git a/packages/block-editor/src/components/inspector-controls-tabs/position-controls-panel.js b/packages/block-editor/src/components/inspector-controls-tabs/position-controls-panel.js
index 5fc71fab5960f..f145d961e1f30 100644
--- a/packages/block-editor/src/components/inspector-controls-tabs/position-controls-panel.js
+++ b/packages/block-editor/src/components/inspector-controls-tabs/position-controls-panel.js
@@ -29,7 +29,7 @@ const PositionControls = () => {
 			title={ __( 'Position' ) }
 			initialOpen={ false }
 		>
-			<InspectorControls.Slot __experimentalGroup="position" />
+			<InspectorControls.Slot group="position" />
 		</PanelBody>
 	);
 };
diff --git a/packages/block-editor/src/components/inspector-controls-tabs/styles-tab.js b/packages/block-editor/src/components/inspector-controls-tabs/styles-tab.js
index f2eac99680b9a..3a7f625d10de2 100644
--- a/packages/block-editor/src/components/inspector-controls-tabs/styles-tab.js
+++ b/packages/block-editor/src/components/inspector-controls-tabs/styles-tab.js
@@ -28,22 +28,20 @@ const StylesTab = ( { blockName, clientId, hasBlockStyles } ) => {
 				</div>
 			) }
 			<InspectorControls.Slot
-				__experimentalGroup="color"
+				group="color"
 				label={ __( 'Color' ) }
 				className="color-block-support-panel__inner-wrapper"
 			/>
 			<InspectorControls.Slot
-				__experimentalGroup="typography"
+				group="typography"
 				label={ __( 'Typography' ) }
 			/>
 			<InspectorControls.Slot
-				__experimentalGroup="dimensions"
+				group="dimensions"
 				label={ __( 'Dimensions' ) }
 			/>
-			<InspectorControls.Slot
-				__experimentalGroup="border"
-				label={ __( 'Border' ) }
-			/>
+			<InspectorControls.Slot group="border" label={ __( 'Border' ) } />
+			<InspectorControls.Slot group="styles" />
 		</>
 	);
 };
diff --git a/packages/block-editor/src/components/inspector-controls-tabs/use-inspector-controls-tabs.js b/packages/block-editor/src/components/inspector-controls-tabs/use-inspector-controls-tabs.js
index 42b0474af1b0e..3d78d4fa70ebe 100644
--- a/packages/block-editor/src/components/inspector-controls-tabs/use-inspector-controls-tabs.js
+++ b/packages/block-editor/src/components/inspector-controls-tabs/use-inspector-controls-tabs.js
@@ -38,6 +38,7 @@ export default function useInspectorControlsTabs( blockName ) {
 		dimensions: dimensionsGroup,
 		list: listGroup,
 		position: positionGroup,
+		styles: stylesGroup,
 		typography: typographyGroup,
 	} = InspectorControlsGroups;
 
@@ -55,6 +56,7 @@ export default function useInspectorControlsTabs( blockName ) {
 		...( useSlotFills( borderGroup.Slot.__unstableName ) || [] ),
 		...( useSlotFills( colorGroup.Slot.__unstableName ) || [] ),
 		...( useSlotFills( dimensionsGroup.Slot.__unstableName ) || [] ),
+		...( useSlotFills( stylesGroup.Slot.__unstableName ) || [] ),
 		...( useSlotFills( typographyGroup.Slot.__unstableName ) || [] ),
 	];
 
diff --git a/packages/block-editor/src/components/inspector-controls/fill.js b/packages/block-editor/src/components/inspector-controls/fill.js
index af3478252de6d..8b3e3f600bd84 100644
--- a/packages/block-editor/src/components/inspector-controls/fill.js
+++ b/packages/block-editor/src/components/inspector-controls/fill.js
@@ -11,6 +11,7 @@ import {
 	__experimentalToolsPanelContext as ToolsPanelContext,
 } from '@wordpress/components';
 import warning from '@wordpress/warning';
+import deprecated from '@wordpress/deprecated';
 
 /**
  * Internal dependencies
@@ -19,9 +20,22 @@ import useDisplayBlockControls from '../use-display-block-controls';
 import groups from './groups';
 
 export default function InspectorControlsFill( {
-	__experimentalGroup: group = 'default',
 	children,
+	group = 'default',
+	__experimentalGroup,
 } ) {
+	if ( __experimentalGroup ) {
+		deprecated(
+			'`__experimentalGroup` property in `InspectorControlsFill`',
+			{
+				since: '6.2',
+				version: '6.4',
+				alternative: '`group`',
+			}
+		);
+		group = __experimentalGroup;
+	}
+
 	const isDisplayed = useDisplayBlockControls();
 	const Fill = groups[ group ]?.Fill;
 	if ( ! Fill ) {
diff --git a/packages/block-editor/src/components/inspector-controls/fill.native.js b/packages/block-editor/src/components/inspector-controls/fill.native.js
index 01d3fc9c10472..37c084806da68 100644
--- a/packages/block-editor/src/components/inspector-controls/fill.native.js
+++ b/packages/block-editor/src/components/inspector-controls/fill.native.js
@@ -9,6 +9,7 @@ import { View } from 'react-native';
 import { Children } from '@wordpress/element';
 import { BottomSheetConsumer } from '@wordpress/components';
 import warning from '@wordpress/warning';
+import deprecated from '@wordpress/deprecated';
 
 /**
  * Internal dependencies
@@ -19,9 +20,21 @@ import { BlockSettingsButton } from '../block-settings';
 
 export default function InspectorControlsFill( {
 	children,
-	__experimentalGroup: group = 'default',
+	group = 'default',
+	__experimentalGroup,
 	...props
 } ) {
+	if ( __experimentalGroup ) {
+		deprecated(
+			'`__experimentalGroup` property in `InspectorControlsFill`',
+			{
+				since: '6.2',
+				version: '6.4',
+				alternative: '`group`',
+			}
+		);
+		group = __experimentalGroup;
+	}
 	const isDisplayed = useDisplayBlockControls();
 
 	const Fill = groups[ group ]?.Fill;
diff --git a/packages/block-editor/src/components/inspector-controls/groups.js b/packages/block-editor/src/components/inspector-controls/groups.js
index 46fca564925aa..f1adbb66252b5 100644
--- a/packages/block-editor/src/components/inspector-controls/groups.js
+++ b/packages/block-editor/src/components/inspector-controls/groups.js
@@ -15,6 +15,7 @@ const InspectorControlsTypography = createSlotFill(
 	'InspectorControlsTypography'
 );
 const InspectorControlsListView = createSlotFill( 'InspectorControlsListView' );
+const InspectorControlsStyles = createSlotFill( 'InspectorControlsStyles' );
 
 const groups = {
 	default: InspectorControlsDefault,
@@ -23,6 +24,8 @@ const groups = {
 	color: InspectorControlsColor,
 	dimensions: InspectorControlsDimensions,
 	list: InspectorControlsListView,
+	settings: InspectorControlsDefault, // Alias for default.
+	styles: InspectorControlsStyles,
 	typography: InspectorControlsTypography,
 	position: InspectorControlsPosition,
 };
diff --git a/packages/block-editor/src/components/inspector-controls/index.js b/packages/block-editor/src/components/inspector-controls/index.js
index 4cb36cdc84399..f066f05923506 100644
--- a/packages/block-editor/src/components/inspector-controls/index.js
+++ b/packages/block-editor/src/components/inspector-controls/index.js
@@ -10,14 +10,10 @@ InspectorControls.Slot = InspectorControlsSlot;
 
 // This is just here for backward compatibility.
 export const InspectorAdvancedControls = ( props ) => {
-	return (
-		<InspectorControlsFill { ...props } __experimentalGroup="advanced" />
-	);
+	return <InspectorControlsFill { ...props } group="advanced" />;
 };
 InspectorAdvancedControls.Slot = ( props ) => {
-	return (
-		<InspectorControlsSlot { ...props } __experimentalGroup="advanced" />
-	);
+	return <InspectorControlsSlot { ...props } group="advanced" />;
 };
 InspectorAdvancedControls.slotName = 'InspectorAdvancedControls';
 
diff --git a/packages/block-editor/src/components/inspector-controls/slot.js b/packages/block-editor/src/components/inspector-controls/slot.js
index 010332c0a3112..883421cacec23 100644
--- a/packages/block-editor/src/components/inspector-controls/slot.js
+++ b/packages/block-editor/src/components/inspector-controls/slot.js
@@ -6,6 +6,7 @@ import {
 	__experimentalUseSlotFills as useSlotFills,
 } from '@wordpress/components';
 import warning from '@wordpress/warning';
+import deprecated from '@wordpress/deprecated';
 
 /**
  * Internal dependencies
@@ -15,10 +16,22 @@ import BlockSupportSlotContainer from './block-support-slot-container';
 import groups from './groups';
 
 export default function InspectorControlsSlot( {
-	__experimentalGroup: group = 'default',
+	__experimentalGroup,
+	group = 'default',
 	label,
 	...props
 } ) {
+	if ( __experimentalGroup ) {
+		deprecated(
+			'`__experimentalGroup` property in `InspectorControlsSlot`',
+			{
+				since: '6.2',
+				version: '6.4',
+				alternative: '`group`',
+			}
+		);
+		group = __experimentalGroup;
+	}
 	const Slot = groups[ group ]?.Slot;
 	const slot = useSlot( Slot?.__unstableName );
 	const fills = useSlotFills( Slot?.__unstableName );
diff --git a/packages/block-editor/src/components/inspector-controls/slot.native.js b/packages/block-editor/src/components/inspector-controls/slot.native.js
index adf4da06965e4..4354e08165d91 100644
--- a/packages/block-editor/src/components/inspector-controls/slot.native.js
+++ b/packages/block-editor/src/components/inspector-controls/slot.native.js
@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import warning from '@wordpress/warning';
+import deprecated from '@wordpress/deprecated';
 
 /**
  * Internal dependencies
@@ -9,9 +10,21 @@ import warning from '@wordpress/warning';
 import groups from './groups';
 
 export default function InspectorControlsSlot( {
-	__experimentalGroup: group = 'default',
+	__experimentalGroup,
+	group = 'default',
 	...props
 } ) {
+	if ( __experimentalGroup ) {
+		deprecated(
+			'`__experimentalGroup` property in `InspectorControlsSlot`',
+			{
+				since: '6.2',
+				version: '6.4',
+				alternative: '`group`',
+			}
+		);
+		group = __experimentalGroup;
+	}
 	const Slot = groups[ group ]?.Slot;
 	if ( ! Slot ) {
 		warning( `Unknown InspectorControl group "${ group }" provided.` );
diff --git a/packages/block-editor/src/hooks/anchor.js b/packages/block-editor/src/hooks/anchor.js
index 027b17d0c243e..65e227ab107eb 100644
--- a/packages/block-editor/src/hooks/anchor.js
+++ b/packages/block-editor/src/hooks/anchor.js
@@ -105,7 +105,7 @@ export const withInspectorControl = createHigherOrderComponent(
 					<>
 						<BlockEdit { ...props } />
 						{ isWeb && (
-							<InspectorControls __experimentalGroup="advanced">
+							<InspectorControls group="advanced">
 								{ textControl }
 							</InspectorControls>
 						) }
diff --git a/packages/block-editor/src/hooks/border.js b/packages/block-editor/src/hooks/border.js
index 74e79ecec8048..d99416e6cd665 100644
--- a/packages/block-editor/src/hooks/border.js
+++ b/packages/block-editor/src/hooks/border.js
@@ -255,7 +255,7 @@ export function BorderPanel( props ) {
 	const hydratedBorder = getBorderObject( attributes, colors );
 
 	return (
-		<InspectorControls __experimentalGroup="border">
+		<InspectorControls group="border">
 			{ ( isWidthSupported || isColorSupported ) && (
 				<ToolsPanelItem
 					hasValue={ () => hasBorderValue( props ) }
diff --git a/packages/block-editor/src/hooks/color-panel.js b/packages/block-editor/src/hooks/color-panel.js
index 6bf9ff036280d..97113b5a060f0 100644
--- a/packages/block-editor/src/hooks/color-panel.js
+++ b/packages/block-editor/src/hooks/color-panel.js
@@ -75,7 +75,7 @@ export default function ColorPanel( {
 	const colorGradientSettings = useMultipleOriginColorsAndGradients();
 
 	return (
-		<InspectorControls __experimentalGroup="color">
+		<InspectorControls group="color">
 			<ColorGradientSettingsDropdown
 				enableAlpha={ enableAlpha }
 				panelId={ clientId }
diff --git a/packages/block-editor/src/hooks/custom-class-name.js b/packages/block-editor/src/hooks/custom-class-name.js
index 5fd06c2121f63..b28ded7b9d066 100644
--- a/packages/block-editor/src/hooks/custom-class-name.js
+++ b/packages/block-editor/src/hooks/custom-class-name.js
@@ -59,7 +59,7 @@ export const withInspectorControl = createHigherOrderComponent(
 				return (
 					<>
 						<BlockEdit { ...props } />
-						<InspectorControls __experimentalGroup="advanced">
+						<InspectorControls group="advanced">
 							<TextControl
 								__nextHasNoMarginBottom
 								autoComplete="off"
diff --git a/packages/block-editor/src/hooks/dimensions.js b/packages/block-editor/src/hooks/dimensions.js
index c3ff2a25a38c4..7c270ec9bd445 100644
--- a/packages/block-editor/src/hooks/dimensions.js
+++ b/packages/block-editor/src/hooks/dimensions.js
@@ -137,7 +137,7 @@ export function DimensionsPanel( props ) {
 
 	return (
 		<>
-			<InspectorControls __experimentalGroup="dimensions">
+			<InspectorControls group="dimensions">
 				{ ! isPaddingDisabled && (
 					<ToolsPanelItem
 						className={ spacingClassnames }
diff --git a/packages/block-editor/src/hooks/position.js b/packages/block-editor/src/hooks/position.js
index fd71ce3ac6494..0da4e78d2bbfc 100644
--- a/packages/block-editor/src/hooks/position.js
+++ b/packages/block-editor/src/hooks/position.js
@@ -274,7 +274,7 @@ export function PositionPanel( props ) {
 	return Platform.select( {
 		web:
 			options.length > 1 ? (
-				<InspectorControls __experimentalGroup="position">
+				<InspectorControls group="position">
 					<BaseControl className="block-editor-hooks__position-selection">
 						<CustomSelectControl
 							__nextUnconstrainedWidth
diff --git a/packages/block-editor/src/hooks/typography.js b/packages/block-editor/src/hooks/typography.js
index bbdadaed3ba52..43fb56ccc008e 100644
--- a/packages/block-editor/src/hooks/typography.js
+++ b/packages/block-editor/src/hooks/typography.js
@@ -111,7 +111,7 @@ export function TypographyPanel( props ) {
 	} );
 
 	return (
-		<InspectorControls __experimentalGroup="typography">
+		<InspectorControls group="typography">
 			{ ! isFontFamilyDisabled && (
 				<ToolsPanelItem
 					hasValue={ () => hasFontFamilyValue( props ) }
diff --git a/packages/block-library/src/button/edit.js b/packages/block-library/src/button/edit.js
index d204dd921a972..9eab35ff3c007 100644
--- a/packages/block-library/src/button/edit.js
+++ b/packages/block-library/src/button/edit.js
@@ -260,7 +260,7 @@ function ButtonEdit( props ) {
 					setAttributes={ setAttributes }
 				/>
 			</InspectorControls>
-			<InspectorControls __experimentalGroup="advanced">
+			<InspectorControls group="advanced">
 				<TextControl
 					__nextHasNoMarginBottom
 					label={ __( 'Link rel' ) }
diff --git a/packages/block-library/src/comments/edit/comments-inspector-controls.js b/packages/block-library/src/comments/edit/comments-inspector-controls.js
index 263e8bde69917..5dd7afab431ce 100644
--- a/packages/block-library/src/comments/edit/comments-inspector-controls.js
+++ b/packages/block-library/src/comments/edit/comments-inspector-controls.js
@@ -19,7 +19,7 @@ export default function CommentsInspectorControls( {
 	};
 	return (
 		<InspectorControls>
-			<InspectorControls __experimentalGroup="advanced">
+			<InspectorControls group="advanced">
 				<SelectControl
 					__nextHasNoMarginBottom
 					label={ __( 'HTML element' ) }
diff --git a/packages/block-library/src/cover/edit/inspector-controls.js b/packages/block-library/src/cover/edit/inspector-controls.js
index a5513bd4865f7..b07f257ebf903 100644
--- a/packages/block-library/src/cover/edit/inspector-controls.js
+++ b/packages/block-library/src/cover/edit/inspector-controls.js
@@ -248,7 +248,7 @@ export default function CoverInspectorControls( {
 					</PanelBody>
 				) }
 			</InspectorControls>
-			<InspectorControls __experimentalGroup="color">
+			<InspectorControls group="color">
 				<ColorGradientSettingsDropdown
 					__experimentalIsRenderedInSidebar
 					settings={ [
@@ -304,7 +304,7 @@ export default function CoverInspectorControls( {
 					/>
 				</ToolsPanelItem>
 			</InspectorControls>
-			<InspectorControls __experimentalGroup="dimensions">
+			<InspectorControls group="dimensions">
 				<ToolsPanelItem
 					hasValue={ () => !! minHeight }
 					label={ __( 'Minimum height' ) }
@@ -335,7 +335,7 @@ export default function CoverInspectorControls( {
 					/>
 				</ToolsPanelItem>
 			</InspectorControls>
-			<InspectorControls __experimentalGroup="advanced">
+			<InspectorControls group="advanced">
 				<SelectControl
 					__nextHasNoMarginBottom
 					label={ __( 'HTML element' ) }
diff --git a/packages/block-library/src/group/edit.js b/packages/block-library/src/group/edit.js
index a2cd8bd8cbaf2..1604d429fc6d6 100644
--- a/packages/block-library/src/group/edit.js
+++ b/packages/block-library/src/group/edit.js
@@ -49,7 +49,7 @@ function GroupEditControls( { tagName, onSelectTagName } ) {
 		),
 	};
 	return (
-		<InspectorControls __experimentalGroup="advanced">
+		<InspectorControls group="advanced">
 			<SelectControl
 				__nextHasNoMarginBottom
 				label={ __( 'HTML element' ) }
diff --git a/packages/block-library/src/image/image.js b/packages/block-library/src/image/image.js
index 1333f1a99d2c7..2357d4a7836d7 100644
--- a/packages/block-library/src/image/image.js
+++ b/packages/block-library/src/image/image.js
@@ -435,7 +435,7 @@ export default function Image( {
 					/>
 				</PanelBody>
 			</InspectorControls>
-			<InspectorControls __experimentalGroup="advanced">
+			<InspectorControls group="advanced">
 				<TextControl
 					__nextHasNoMarginBottom
 					label={ __( 'Title attribute' ) }
diff --git a/packages/block-library/src/navigation/edit/index.js b/packages/block-library/src/navigation/edit/index.js
index f973eb3121caa..3913f994229c5 100644
--- a/packages/block-library/src/navigation/edit/index.js
+++ b/packages/block-library/src/navigation/edit/index.js
@@ -650,7 +650,7 @@ function Navigation( {
 					</PanelBody>
 				) }
 			</InspectorControls>
-			<InspectorControls __experimentalGroup="color">
+			<InspectorControls group="color">
 				{ hasColorSettings && (
 					<>
 						<ColorGradientSettingsDropdown
@@ -854,7 +854,7 @@ function Navigation( {
 				/>
 				{ stylingInspectorControls }
 				{ isEntityAvailable && (
-					<InspectorControls __experimentalGroup="advanced">
+					<InspectorControls group="advanced">
 						{ hasResolvedCanUserUpdateNavigationMenu &&
 							canUserUpdateNavigationMenu && (
 								<NavigationMenuNameControl />
diff --git a/packages/block-library/src/navigation/edit/menu-inspector-controls.js b/packages/block-library/src/navigation/edit/menu-inspector-controls.js
index bdb969e990806..e83656af70f96 100644
--- a/packages/block-library/src/navigation/edit/menu-inspector-controls.js
+++ b/packages/block-library/src/navigation/edit/menu-inspector-controls.js
@@ -132,7 +132,7 @@ const DefaultControls = ( props ) => {
 const MenuInspectorControls = ( props ) => {
 	// Show the OffCanvasEditor controls if we're in the Gutenberg plugin. Previously used isOffCanvasNavigationEditorEnabled.
 	return (
-		<InspectorControls __experimentalGroup="list">
+		<InspectorControls group="list">
 			<PanelBody
 				title={ process.env.IS_GUTENBERG_PLUGIN ? null : __( 'Menu' ) }
 			>
diff --git a/packages/block-library/src/paragraph/edit.js b/packages/block-library/src/paragraph/edit.js
index 5340eb5e4ea54..5cb465dc6da66 100644
--- a/packages/block-library/src/paragraph/edit.js
+++ b/packages/block-library/src/paragraph/edit.js
@@ -99,7 +99,7 @@ function ParagraphBlock( {
 				/>
 			</BlockControls>
 			{ isDropCapFeatureEnabled && (
-				<InspectorControls __experimentalGroup="typography">
+				<InspectorControls group="typography">
 					<ToolsPanelItem
 						hasValue={ () => !! dropCap }
 						label={ __( 'Drop cap' ) }
diff --git a/packages/block-library/src/post-featured-image/dimension-controls.js b/packages/block-library/src/post-featured-image/dimension-controls.js
index 76bc9787bd587..171924ec5fb3d 100644
--- a/packages/block-library/src/post-featured-image/dimension-controls.js
+++ b/packages/block-library/src/post-featured-image/dimension-controls.js
@@ -71,7 +71,7 @@ const DimensionControls = ( {
 	};
 	const scaleLabel = _x( 'Scale', 'Image scaling options' );
 	return (
-		<InspectorControls __experimentalGroup="dimensions">
+		<InspectorControls group="dimensions">
 			<ToolsPanelItem
 				className="single-column"
 				hasValue={ () => !! height }
diff --git a/packages/block-library/src/post-featured-image/overlay.js b/packages/block-library/src/post-featured-image/overlay.js
index 4b523abfb4916..236038897439f 100644
--- a/packages/block-library/src/post-featured-image/overlay.js
+++ b/packages/block-library/src/post-featured-image/overlay.js
@@ -64,7 +64,7 @@ const Overlay = ( {
 					style={ overlayStyles }
 				/>
 			) }
-			<InspectorControls __experimentalGroup="color">
+			<InspectorControls group="color">
 				<ColorGradientSettingsDropdown
 					__experimentalIsRenderedInSidebar
 					settings={ [
diff --git a/packages/block-library/src/post-terms/edit.js b/packages/block-library/src/post-terms/edit.js
index f73467782742d..392b750c2e6f0 100644
--- a/packages/block-library/src/post-terms/edit.js
+++ b/packages/block-library/src/post-terms/edit.js
@@ -83,7 +83,7 @@ export default function PostTermsEdit( {
 					} }
 				/>
 			</BlockControls>
-			<InspectorControls __experimentalGroup="advanced">
+			<InspectorControls group="advanced">
 				<TextControl
 					__nextHasNoMarginBottom
 					autoComplete="off"
diff --git a/packages/block-library/src/query/edit/query-content.js b/packages/block-library/src/query/edit/query-content.js
index 193499709d068..055fe036ce416 100644
--- a/packages/block-library/src/query/edit/query-content.js
+++ b/packages/block-library/src/query/edit/query-content.js
@@ -122,7 +122,7 @@ export default function QueryContent( {
 					openPatternSelectionModal={ openPatternSelectionModal }
 				/>
 			</BlockControls>
-			<InspectorControls __experimentalGroup="advanced">
+			<InspectorControls group="advanced">
 				<SelectControl
 					__nextHasNoMarginBottom
 					label={ __( 'HTML element' ) }
diff --git a/packages/block-library/src/social-link/edit.js b/packages/block-library/src/social-link/edit.js
index 96714e55e2562..153cf33c79334 100644
--- a/packages/block-library/src/social-link/edit.js
+++ b/packages/block-library/src/social-link/edit.js
@@ -115,7 +115,7 @@ const SocialLinkEdit = ( {
 					</PanelRow>
 				</PanelBody>
 			</InspectorControls>
-			<InspectorControls __experimentalGroup="advanced">
+			<InspectorControls group="advanced">
 				<TextControl
 					__nextHasNoMarginBottom
 					label={ __( 'Link rel' ) }
diff --git a/packages/block-library/src/social-links/edit.js b/packages/block-library/src/social-links/edit.js
index 91d688d50d8ec..9ea51799c0fd5 100644
--- a/packages/block-library/src/social-links/edit.js
+++ b/packages/block-library/src/social-links/edit.js
@@ -224,7 +224,7 @@ export function SocialLinksEdit( props ) {
 					/>
 				</PanelBody>
 			</InspectorControls>
-			<InspectorControls __experimentalGroup="color">
+			<InspectorControls group="color">
 				{ colorSettings.map(
 					( { onChange, label, value, resetAllFilter } ) => (
 						<ColorGradientSettingsDropdown
diff --git a/packages/block-library/src/template-part/edit/advanced-controls.js b/packages/block-library/src/template-part/edit/advanced-controls.js
index 1c1b83d1a07a7..0b54e78e9aa8c 100644
--- a/packages/block-library/src/template-part/edit/advanced-controls.js
+++ b/packages/block-library/src/template-part/edit/advanced-controls.js
@@ -71,7 +71,7 @@ export function TemplatePartAdvancedControls( {
 	};
 
 	return (
-		<InspectorControls __experimentalGroup="advanced">
+		<InspectorControls group="advanced">
 			{ isEntityAvailable && (
 				<>
 					<TextControl