@elementor/editor-editing-panel 1.50.0 → 3.32.0-21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-editing-panel",
-  "version": "1.50.0",
+  "version": "3.32.0-21",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -18,11 +18,11 @@
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/elementor/elementor-packages.git",
+    "url": "git+https://github.com/elementor/elementor.git",
     "directory": "packages/core/editor-editing-panel"
   },
   "bugs": {
-    "url": "https://github.com/elementor/elementor-packages/issues"
+    "url": "https://github.com/elementor/elementor/issues"
   },
   "publishConfig": {
     "access": "public"
@@ -39,26 +39,26 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor": "0.21.1",
-    "@elementor/editor-canvas": "0.28.0",
-    "@elementor/editor-controls": "1.5.0",
-    "@elementor/editor-documents": "0.13.10",
-    "@elementor/editor-elements": "0.9.2",
-    "@elementor/editor-panels": "0.17.1",
-    "@elementor/editor-props": "0.18.0",
-    "@elementor/editor-responsive": "0.13.6",
-    "@elementor/editor-styles": "0.6.14",
-    "@elementor/editor-styles-repository": "0.10.7",
-    "@elementor/editor-ui": "0.14.2",
-    "@elementor/editor-v1-adapters": "0.12.1",
+    "@elementor/editor": "3.32.0-21",
+    "@elementor/editor-canvas": "3.32.0-21",
+    "@elementor/editor-controls": "3.32.0-21",
+    "@elementor/editor-documents": "3.32.0-21",
+    "@elementor/editor-elements": "3.32.0-21",
+    "@elementor/editor-panels": "3.32.0-21",
+    "@elementor/editor-props": "3.32.0-21",
+    "@elementor/editor-responsive": "3.32.0-21",
+    "@elementor/editor-styles": "3.32.0-21",
+    "@elementor/editor-styles-repository": "3.32.0-21",
+    "@elementor/editor-ui": "3.32.0-21",
+    "@elementor/editor-v1-adapters": "3.32.0-21",
     "@elementor/icons": "1.46.0",
-    "@elementor/locations": "0.8.0",
-    "@elementor/menus": "0.1.5",
-    "@elementor/schema": "0.1.2",
-    "@elementor/session": "0.1.0",
-    "@elementor/ui": "1.36.0",
-    "@elementor/utils": "0.5.0",
-    "@elementor/wp-media": "0.6.1",
+    "@elementor/locations": "3.32.0-21",
+    "@elementor/menus": "3.32.0-21",
+    "@elementor/schema": "3.32.0-21",
+    "@elementor/session": "3.32.0-21",
+    "@elementor/ui": "1.36.2",
+    "@elementor/utils": "3.32.0-21",
+    "@elementor/wp-media": "3.32.0-21",
     "@wordpress/i18n": "^5.13.0"
   },
   "peerDependencies": {

package/src/components/css-classes/css-class-convert-local.tsx

@@ -0,0 +1,77 @@
+import * as React from 'react';
+import { deleteElementStyle, getElementSetting, updateElementSettings } from '@elementor/editor-elements';
+import { classesPropTypeUtil, type ClassesPropValue } from '@elementor/editor-props';
+import { type StyleDefinition } from '@elementor/editor-styles';
+import { createLocation } from '@elementor/locations';
+import { useSessionStorage } from '@elementor/session';
+
+import { useClassesProp } from '../../contexts/classes-prop-context';
+import { useElement } from '../../contexts/element-context';
+import { useStyle } from '../../contexts/style-context';
+
+export const { Slot: CssClassConvertSlot, inject: injectIntoCssClassConvert } = createLocation< {
+	styleDef: StyleDefinition | null;
+	successCallback: ( newId: string ) => void;
+	canConvert: boolean;
+} >();
+
+type OwnProps = {
+	styleDef: StyleDefinition | null;
+	closeMenu: () => void;
+	canConvert: boolean;
+};
+
+/**
+ * Convert a local class to a global class injection point
+ * @param props
+ */
+export const CssClassConvert = ( props: OwnProps ) => {
+	const { element } = useElement();
+	const elementId = element.id;
+	const currentClassesProp = useClassesProp();
+	const { setId: setActiveId } = useStyle();
+	const [ , saveValue ] = useSessionStorage( `last-converted-class-generated-name` );
+
+	const successCallback = ( newId: string ) => {
+		if ( ! props.styleDef ) {
+			throw new Error( 'Style definition is required for converting local class to global class.' );
+		}
+
+		onConvert( {
+			newId,
+			elementId,
+			classesProp: currentClassesProp,
+			styleDef: props.styleDef,
+		} );
+
+		saveValue( newId );
+		setActiveId( newId );
+		props.closeMenu();
+	};
+
+	return (
+		<CssClassConvertSlot
+			canConvert={ !! props.canConvert }
+			styleDef={ props.styleDef }
+			successCallback={ successCallback }
+		/>
+	);
+};
+
+type OnConvertOptions = {
+	newId: string;
+	elementId: string;
+	classesProp: string;
+	styleDef: StyleDefinition;
+};
+
+const onConvert = ( opts: OnConvertOptions ) => {
+	const { newId, elementId, classesProp } = opts;
+	deleteElementStyle( elementId, opts.styleDef.id );
+	const currentUsedClasses = getElementSetting< ClassesPropValue >( elementId, classesProp ) || { value: [] };
+	updateElementSettings( {
+		id: elementId,
+		props: { [ classesProp ]: classesPropTypeUtil.create( [ newId, ...currentUsedClasses.value ] ) },
+		withHistory: false,
+	} );
+};

package/src/components/css-classes/css-class-item.tsx

@@ -1,8 +1,9 @@
 import * as React from 'react';
-import { type ReactElement, useState } from 'react';
+import { type ReactElement, useEffect, useState } from 'react';
 import { stylesRepository, useUserStylesCapability, validateStyleLabel } from '@elementor/editor-styles-repository';
 import { EditableField, EllipsisWithTooltip, useEditable } from '@elementor/editor-ui';
 import { DotsVerticalIcon } from '@elementor/icons';
+import { useSessionStorage } from '@elementor/session';
 import {
 	type AutocompleteRenderGetTagProps,
 	bindTrigger,
@@ -49,6 +50,10 @@ export function CssClassItem( props: CssClassItemProps ) {
 
 	const { userCan } = useUserStylesCapability();
 
+	const [ convertedFromLocalId, , clearConvertedFromLocalId ] = useSessionStorage(
+		`last-converted-class-generated-name`
+	);
+
 	const {
 		ref,
 		isEditing,
@@ -69,6 +74,15 @@ export function CssClassItem( props: CssClassItemProps ) {
 
 	const isShowingState = isActive && meta.state;
 
+	useEffect( () => {
+		if ( convertedFromLocalId && id === convertedFromLocalId ) {
+			clearConvertedFromLocalId();
+			openEditMode();
+		}
+		// eslint-disable-next-line react-compiler/react-compiler
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [ id ] );
+
 	return (
 		<ThemeProvider palette="default">
 			<UnstableChipGroup

package/src/components/css-classes/css-class-menu.tsx

@@ -1,6 +1,10 @@
 import * as React from 'react';
 import { type StyleDefinitionState } from '@elementor/editor-styles';
-import { stylesRepository, useUserStylesCapability } from '@elementor/editor-styles-repository';
+import {
+	isElementsStylesProvider,
+	stylesRepository,
+	useUserStylesCapability,
+} from '@elementor/editor-styles-repository';
 import { MenuItemInfotip, MenuListItem } from '@elementor/editor-ui';
 import { bindMenu, Divider, Menu, MenuSubheader, type PopupState, Stack } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
@@ -10,6 +14,7 @@ import { type StyleDefinitionStateWithNormal } from '../../styles-inheritance/ty
 import { getTempStylesProviderThemeColor } from '../../utils/get-styles-provider-color';
 import { StyleIndicator } from '../style-indicator';
 import { useCssClass } from './css-class-context';
+import { LocalClassSubMenu } from './local-class-sub-menu';
 import { useUnapplyClass } from './use-apply-and-unapply-class';
 
 type State = {
@@ -32,6 +37,7 @@ type CssClassMenuProps = {
 
 export function CssClassMenu( { popupState, anchorEl, fixed }: CssClassMenuProps ) {
 	const { provider } = useCssClass();
+	const isLocalStyle = provider ? isElementsStylesProvider( provider ) : true;
 
 	const handleKeyDown = ( e: React.KeyboardEvent< HTMLElement > ) => {
 		e.stopPropagation();
@@ -54,6 +60,7 @@ export function CssClassMenu( { popupState, anchorEl, fixed }: CssClassMenuProps
 			// Workaround for focus-visible issue.
 			disableAutoFocusItem
 		>
+			{ isLocalStyle && <LocalClassSubMenu popupState={ popupState } /> }
 			{ /* It has to be an array since MUI menu doesn't accept a Fragment as a child, and wrapping the items with an HTML element disrupts keyboard navigation */ }
 			{ getMenuItemsByProvider( { provider, closeMenu: popupState.close, fixed } ) }
 			<MenuSubheader sx={ { typography: 'caption', color: 'text.secondary', pb: 0.5, pt: 1 } }>

package/src/components/css-classes/local-class-sub-menu.tsx

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { MenuSubheader, type PopupState } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { CssClassConvert } from './css-class-convert-local';
+import { useCanConvertLocalClassToGlobal } from './use-can-convert-local-class-to-global';
+
+type OwnProps = {
+	popupState: PopupState;
+};
+
+export const LocalClassSubMenu = ( props: OwnProps ) => {
+	const { canConvert, styleDef } = useCanConvertLocalClassToGlobal();
+
+	return (
+		<>
+			<MenuSubheader sx={ { typography: 'caption', color: 'text.secondary', pb: 0.5, pt: 1 } }>
+				{ __( 'Local Class', 'elementor' ) }
+			</MenuSubheader>
+			<CssClassConvert canConvert={ canConvert } styleDef={ styleDef } closeMenu={ props.popupState.close } />
+		</>
+	);
+};

package/src/components/css-classes/use-apply-and-unapply-class.ts

@@ -4,13 +4,12 @@ import { getElementLabel, getElementSetting, updateElementSettings } from '@elem
 import { classesPropTypeUtil, type ClassesPropValue } from '@elementor/editor-props';
 import { type StyleDefinitionID } from '@elementor/editor-styles';
 import { useGetStylesRepositoryCreateAction } from '@elementor/editor-styles-repository';
-import { isExperimentActive, undoable } from '@elementor/editor-v1-adapters';
+import { undoable } from '@elementor/editor-v1-adapters';
 import { __ } from '@wordpress/i18n';
 
 import { useClassesProp } from '../../contexts/classes-prop-context';
 import { useElement } from '../../contexts/element-context';
 import { useStyle } from '../../contexts/style-context';
-import { EXPERIMENTAL_FEATURES } from '../../sync/experiments-flags';
 
 type UndoableClassActionPayload = {
 	classId: StyleDefinitionID;
@@ -30,12 +29,10 @@ export function useApplyClass() {
 	const { id: activeId, setId: setActiveId } = useStyle();
 	const { element } = useElement();
 
-	const isVersion330Active = isExperimentActive( EXPERIMENTAL_FEATURES.V_3_30 );
-
 	const applyClass = useApply();
 	const unapplyClass = useUnapply();
 
-	const undoableApply = useMemo( () => {
+	return useMemo( () => {
 		return undoable(
 			{
 				do: ( { classId }: UndoableClassActionPayload ) => {
@@ -59,27 +56,16 @@ export function useApplyClass() {
 			}
 		);
 	}, [ activeId, applyClass, element.id, unapplyClass, setActiveId ] );
-
-	const applyWithoutHistory = useCallback(
-		( { classId }: UndoableClassActionPayload ) => {
-			applyClass( classId );
-		},
-		[ applyClass ]
-	);
-
-	return isVersion330Active ? undoableApply : applyWithoutHistory;
 }
 
 export function useUnapplyClass() {
 	const { id: activeId, setId: setActiveId } = useStyle();
 	const { element } = useElement();
 
-	const isVersion330Active = isExperimentActive( EXPERIMENTAL_FEATURES.V_3_30 );
-
 	const applyClass = useApply();
 	const unapplyClass = useUnapply();
 
-	const undoableUnapply = useMemo( () => {
+	return useMemo( () => {
 		return undoable(
 			{
 				do: ( { classId }: UndoableClassActionPayload ) => {
@@ -103,22 +89,11 @@ export function useUnapplyClass() {
 			}
 		);
 	}, [ activeId, applyClass, element.id, unapplyClass, setActiveId ] );
-
-	const unapplyWithoutHistory = useCallback(
-		( { classId }: UndoableClassActionPayload ) => {
-			unapplyClass( classId );
-		},
-		[ unapplyClass ]
-	);
-
-	return isVersion330Active ? undoableUnapply : unapplyWithoutHistory;
 }
 
 export function useCreateAndApplyClass() {
 	const { id: activeId, setId: setActiveId } = useStyle();
 
-	const isVersion330Active = isExperimentActive( EXPERIMENTAL_FEATURES.V_3_30 );
-
 	const [ provider, createAction ] = useGetStylesRepositoryCreateAction() ?? [ null, null ];
 	const deleteAction = provider?.actions.delete;
 
@@ -157,25 +132,11 @@ export function useCreateAndApplyClass() {
 		);
 	}, [ activeId, applyClass, createAction, deleteAction, provider, setActiveId, unapplyClass ] );
 
-	const createAndApplyWithoutHistory = useCallback(
-		( { classLabel }: CreateAndApplyClassPayload ) => {
-			if ( ! createAction ) {
-				return;
-			}
-
-			const createdId = createAction( classLabel );
-			applyClass( createdId );
-		},
-		[ applyClass, createAction ]
-	);
-
 	if ( ! provider || ! undoableCreateAndApply ) {
 		return [ null, null ];
 	}
 
-	return isVersion330Active
-		? ( [ provider, undoableCreateAndApply ] as const )
-		: ( [ provider, createAndApplyWithoutHistory ] as const );
+	return [ provider, undoableCreateAndApply ] as const;
 }
 
 function useApply() {
@@ -231,24 +192,20 @@ function useClasses() {
 	const { element } = useElement();
 	const currentClassesProp = useClassesProp();
 
-	const isVersion330Active = isExperimentActive( EXPERIMENTAL_FEATURES.V_3_30 );
-
 	return useMemo( () => {
 		const setClasses = ( ids: StyleDefinitionID[] ) => {
 			updateElementSettings( {
 				id: element.id,
 				props: { [ currentClassesProp ]: classesPropTypeUtil.create( ids ) },
-				withHistory: isVersion330Active ? false : true,
+				withHistory: false,
 			} );
 
-			if ( isVersion330Active ) {
-				setDocumentModifiedStatus( true );
-			}
+			setDocumentModifiedStatus( true );
 		};
 
 		const getAppliedClasses = () =>
 			getElementSetting< ClassesPropValue >( element.id, currentClassesProp )?.value || [];
 
 		return { setClasses, getAppliedClasses };
-	}, [ currentClassesProp, element.id, isVersion330Active ] );
+	}, [ currentClassesProp, element.id ] );
 }

package/src/components/css-classes/use-can-convert-local-class-to-global.ts

@@ -0,0 +1,22 @@
+import { isElementsStylesProvider } from '@elementor/editor-styles-repository';
+
+import { useElement } from '../../contexts/element-context';
+import { useStyle } from '../../contexts/style-context';
+
+export const useCanConvertLocalClassToGlobal = () => {
+	const { element } = useElement();
+	const { provider, id, meta } = useStyle();
+	const styleDef = provider?.actions.get( id, { elementId: element.id, ...meta } );
+
+	const isLocalStylesProvider = provider && isElementsStylesProvider( provider?.getKey() );
+	const variants = styleDef?.variants || [];
+
+	const canConvert = !! ( isLocalStylesProvider && variants.length );
+
+	return {
+		canConvert,
+		isLocalStylesProvider,
+		id,
+		styleDef: styleDef || null,
+	};
+};

package/src/components/custom-css.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { TextField } from '@elementor/ui';
+
+import { useCustomCss } from '../hooks/use-custom-css';
+import { SectionContent } from './section-content';
+
+export const CustomCss = () => {
+	const { customCss, setCustomCss } = useCustomCss();
+
+	return (
+		<SectionContent>
+			<TextField
+				value={ customCss?.raw || '' }
+				onChange={ ( ev: React.ChangeEvent< HTMLInputElement > ) =>
+					setCustomCss( ev.target.value, { history: { propDisplayName: 'Custom CSS' } } )
+				}
+				multiline
+			/>
+		</SectionContent>
+	);
+};

package/src/components/editing-panel-tabs.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { Fragment } from 'react';
-import { isExperimentActive } from '@elementor/editor-v1-adapters';
 import { Divider, Stack, Tab, TabPanel, Tabs, useTabs } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
@@ -8,7 +7,6 @@ import { useElement } from '../contexts/element-context';
 import { ScrollProvider } from '../contexts/scroll-context';
 import { useDefaultPanelSettings } from '../hooks/use-default-panel-settings';
 import { useStateByElement } from '../hooks/use-state-by-element';
-import { EXPERIMENTAL_FEATURES } from '../sync/experiments-flags';
 import { SettingsTab } from './settings-tab';
 import { stickyHeaderStyles, StyleTab } from './style-tab';
 
@@ -27,9 +25,7 @@ export const EditingPanelTabs = () => {
 
 const PanelTabContent = () => {
 	const editorDefaults = useDefaultPanelSettings();
-	const defaultComponentTab = isExperimentActive( EXPERIMENTAL_FEATURES.V_3_30 )
-		? ( editorDefaults.defaultTab as TabValue )
-		: 'settings';
+	const defaultComponentTab = editorDefaults.defaultTab as TabValue;
 
 	const [ currentTab, setCurrentTab ] = useStateByElement< TabValue >( 'tab', defaultComponentTab );
 	const { getTabProps, getTabPanelProps, getTabsProps } = useTabs< TabValue >( currentTab );

package/src/components/section.tsx

@@ -1,11 +1,9 @@
 import * as React from 'react';
 import { type PropsWithChildren, type ReactNode, useId, useRef } from 'react';
-import { isExperimentActive } from '@elementor/editor-v1-adapters';
 import { Collapse, Divider, ListItemButton, ListItemText, Stack } from '@elementor/ui';
 
 import { SectionRefContext } from '../contexts/section-context';
 import { useStateByElement } from '../hooks/use-state-by-element';
-import { EXPERIMENTAL_FEATURES } from '../sync/experiments-flags';
 import { CollapseIcon } from './collapse-icon';
 import { type CollapsibleValue, getCollapsibleValue } from './collapsible-content';
 
@@ -27,8 +25,6 @@ export function Section( { title, children, defaultExpanded = false, titleEnd }:
 	const labelId = `label-${ id }`;
 	const contentId = `content-${ id }`;
 
-	const isUsingTitleEnd = isExperimentActive( EXPERIMENTAL_FEATURES.V_3_30 );
-
 	return (
 		<>
 			<ListItemButton
@@ -43,7 +39,7 @@ export function Section( { title, children, defaultExpanded = false, titleEnd }:
 						secondaryTypographyProps={ { color: 'text.primary', variant: 'caption', fontWeight: 'bold' } }
 						sx={ { flexGrow: 0, flexShrink: 1, marginInlineEnd: 1 } }
 					/>
-					{ isUsingTitleEnd ? getCollapsibleValue( titleEnd, isOpen ) : null }
+					{ getCollapsibleValue( titleEnd, isOpen ) }
 				</Stack>
 				<CollapseIcon open={ isOpen } color="secondary" fontSize="tiny" />
 			</ListItemButton>

package/src/components/settings-tab.tsx

@@ -1,22 +1,15 @@
 import * as React from 'react';
 import { ControlFormLabel } from '@elementor/editor-controls';
 import { type Control } from '@elementor/editor-elements';
-import { isExperimentActive } from '@elementor/editor-v1-adapters';
 import { SessionStorageProvider } from '@elementor/session';
 import { Divider } from '@elementor/ui';
 
 import { useElement } from '../contexts/element-context';
 import { Control as BaseControl } from '../controls-registry/control';
 import { ControlTypeContainer } from '../controls-registry/control-type-container';
-import {
-	type ControlType,
-	getControl,
-	getDefaultLayout,
-	getPropTypeUtil,
-} from '../controls-registry/controls-registry';
+import { controlsRegistry, type ControlType } from '../controls-registry/controls-registry';
 import { SettingsField } from '../controls-registry/settings-field';
 import { useDefaultPanelSettings } from '../hooks/use-default-panel-settings';
-import { EXPERIMENTAL_FEATURES } from '../sync/experiments-flags';
 import { Section } from './section';
 import { SectionsList } from './sections-list';
 
@@ -25,9 +18,7 @@ export const SettingsTab = () => {
 	const settingsDefault = useDefaultPanelSettings();
 
 	const isDefaultExpanded = ( sectionId: string ) =>
-		isExperimentActive( EXPERIMENTAL_FEATURES.V_3_30 )
-			? settingsDefault.defaultSectionsExpanded.settings?.includes( sectionId )
-			: true;
+		settingsDefault.defaultSectionsExpanded.settings?.includes( sectionId );
 
 	return (
 		<SessionStorageProvider prefix={ element.id }>
@@ -64,11 +55,11 @@ export const SettingsTab = () => {
 };
 
 const Control = ( { control }: { control: Control[ 'value' ] } ) => {
-	if ( ! getControl( control.type as ControlType ) ) {
+	if ( ! controlsRegistry.get( control.type as ControlType ) ) {
 		return null;
 	}
 
-	const layout = control.meta?.layout || getDefaultLayout( control.type as ControlType );
+	const layout = control.meta?.layout || controlsRegistry.getLayout( control.type as ControlType );
 	const controlProps = populateChildControlProps( control.props );
 	if ( layout === 'custom' ) {
 		controlProps.label = control.label;
@@ -87,8 +78,8 @@ const Control = ( { control }: { control: Control[ 'value' ] } ) => {
 
 function populateChildControlProps( props: Record< string, unknown > ) {
 	if ( props.childControlType ) {
-		const childComponent = getControl( props.childControlType as ControlType );
-		const childPropType = getPropTypeUtil( props.childControlType as ControlType );
+		const childComponent = controlsRegistry.get( props.childControlType as ControlType );
+		const childPropType = controlsRegistry.getPropTypeUtil( props.childControlType as ControlType );
 		props = {
 			...props,
 			childControlConfig: {

package/src/components/style-sections/effects-section/effects-section.tsx

@@ -1,49 +1,57 @@
 import * as React from 'react';
-import { BoxShadowRepeaterControl, FilterRepeaterControl, TransformRepeaterControl } from '@elementor/editor-controls';
-import { isExperimentActive } from '@elementor/editor-v1-adapters';
+import {
+	BoxShadowRepeaterControl,
+	FilterRepeaterControl,
+	TransformRepeaterControl,
+	TransitionRepeaterControl,
+	UnstableTransformRepeaterControl,
+} from '@elementor/editor-controls';
+import { EXPERIMENTAL_FEATURES, isExperimentActive } from '@elementor/editor-v1-adapters';
 import { __ } from '@wordpress/i18n';
 
 import { StylesField } from '../../../controls-registry/styles-field';
-import { EXPERIMENTAL_FEATURES } from '../../../sync/experiments-flags';
 import { PanelDivider } from '../../panel-divider';
 import { SectionContent } from '../../section-content';
-import { OpacityControlField } from '../layout-section/opacity-control-field';
+import { OpacityControlField } from './opacity-control-field';
 
 const BOX_SHADOW_LABEL = __( 'Box shadow', 'elementor' );
 const FILTER_LABEL = __( 'Filters', 'elementor' );
 const TRANSFORM_LABEL = __( 'Transform', 'elementor' );
 const BACKDROP_FILTER_LABEL = __( 'Backdrop filters', 'elementor' );
+const TRANSITIONS_LABEL = __( 'Transitions', 'elementor' );
 
 export const EffectsSection = () => {
-	const isVersion331Active = isExperimentActive( EXPERIMENTAL_FEATURES.V_3_31 );
+	const shouldShowTransition = isExperimentActive( EXPERIMENTAL_FEATURES.TRANSITIONS );
+
+	const isUnstableRepeaterActive = isExperimentActive( EXPERIMENTAL_FEATURES.UNSTABLE_REPEATER );
 
 	return (
 		<SectionContent>
-			{ isVersion331Active && (
-				<>
-					<OpacityControlField />
-					<PanelDivider />
-				</>
-			) }
+			<OpacityControlField />
+			<PanelDivider />
 			<StylesField bind="box-shadow" propDisplayName={ BOX_SHADOW_LABEL }>
 				<BoxShadowRepeaterControl />
 			</StylesField>
-			{ isVersion331Active && (
+			<PanelDivider />
+			<StylesField bind="transform" propDisplayName={ TRANSFORM_LABEL }>
+				{ isUnstableRepeaterActive ? <UnstableTransformRepeaterControl /> : <TransformRepeaterControl /> }
+			</StylesField>
+			{ shouldShowTransition && (
 				<>
 					<PanelDivider />
-					<StylesField bind="transform" propDisplayName={ TRANSFORM_LABEL }>
-						<TransformRepeaterControl />
-					</StylesField>
-					<PanelDivider />
-					<StylesField bind="filter" propDisplayName={ FILTER_LABEL }>
-						<FilterRepeaterControl />
-					</StylesField>
-					<PanelDivider />
-					<StylesField bind="backdrop-filter" propDisplayName={ BACKDROP_FILTER_LABEL }>
-						<FilterRepeaterControl filterPropName="backdrop-filter" />
+					<StylesField bind="transition" propDisplayName={ TRANSITIONS_LABEL }>
+						<TransitionRepeaterControl />
 					</StylesField>
 				</>
 			) }
+			<PanelDivider />
+			<StylesField bind="filter" propDisplayName={ FILTER_LABEL }>
+				<FilterRepeaterControl />
+			</StylesField>
+			<PanelDivider />
+			<StylesField bind="backdrop-filter" propDisplayName={ BACKDROP_FILTER_LABEL }>
+				<FilterRepeaterControl filterPropName="backdrop-filter" />
+			</StylesField>
 		</SectionContent>
 	);
 };