@elementor/editor-editing-panel 1.45.0 → 1.46.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-editing-panel",
-  "version": "1.45.0",
+  "version": "1.46.0",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -39,31 +39,32 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor": "0.19.4",
-    "@elementor/editor-canvas": "0.23.0",
-    "@elementor/editor-controls": "1.0.0",
+    "@elementor/editor": "0.20.0",
+    "@elementor/editor-canvas": "0.24.0",
+    "@elementor/editor-controls": "1.1.0",
     "@elementor/editor-current-user": "0.5.0",
-    "@elementor/editor-documents": "0.13.6",
-    "@elementor/editor-elements": "0.8.5",
-    "@elementor/editor-panels": "0.15.4",
-    "@elementor/editor-props": "0.13.0",
+    "@elementor/editor-documents": "0.13.7",
+    "@elementor/editor-elements": "0.8.6",
+    "@elementor/editor-panels": "0.16.0",
+    "@elementor/editor-props": "0.14.0",
     "@elementor/editor-responsive": "0.13.5",
-    "@elementor/editor-styles": "0.6.9",
-    "@elementor/editor-styles-repository": "0.10.2",
-    "@elementor/editor-ui": "0.11.0",
+    "@elementor/editor-styles": "0.6.10",
+    "@elementor/editor-styles-repository": "0.10.3",
+    "@elementor/editor-ui": "0.12.0",
     "@elementor/editor-v1-adapters": "0.12.0",
     "@elementor/icons": "1.44.0",
     "@elementor/locations": "0.8.0",
     "@elementor/menus": "0.1.5",
     "@elementor/schema": "0.1.2",
     "@elementor/session": "0.1.0",
-    "@elementor/ui": "1.34.5",
+    "@elementor/ui": "1.35.5",
     "@elementor/utils": "0.4.0",
     "@elementor/wp-media": "0.6.0",
     "@wordpress/i18n": "^5.13.0"
   },
   "peerDependencies": {
-    "react": "^18.3.1"
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
   },
   "devDependencies": {
     "tsup": "^8.3.5"

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

@@ -1,16 +1,13 @@
 import * as React from 'react';
 import { type StyleDefinitionState } from '@elementor/editor-styles';
-import {
-	isElementsStylesProvider,
-	stylesRepository,
-	useUserStylesCapability,
-} from '@elementor/editor-styles-repository';
+import { 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';
 
 import { useStyle } from '../../contexts/style-context';
 import { type StyleDefinitionStateWithNormal } from '../../styles-inheritance/types';
+import { getStylesProviderThemeColor } from '../../utils/get-styles-provider-color';
 import { StyleIndicator } from '../style-indicator';
 import { useCssClass } from './css-class-context';
 import { useUnapplyClass } from './use-apply-and-unapply-class';
@@ -135,8 +132,6 @@ function StateMenuItem( { state, closeMenu, ...props }: StateMenuItemProps ) {
 
 	const isUpdateAllowed = ! state || userCan( provider ?? '' ).updateProps;
 
-	const indicatorVariant = ! provider || isElementsStylesProvider( provider ) ? 'local' : 'global';
-
 	const isStyled = modifiedStates[ state ?? 'normal' ] ?? false;
 	const disabled = ! isUpdateAllowed && ! isStyled;
 	const isActive = styleId === activeId;
@@ -164,7 +159,10 @@ function StateMenuItem( { state, closeMenu, ...props }: StateMenuItemProps ) {
 			>
 				<Stack gap={ 0.75 } direction="row" alignItems="center">
 					{ isStyled && (
-						<StyleIndicator aria-label={ __( 'Has style', 'elementor' ) } variant={ indicatorVariant } />
+						<StyleIndicator
+							aria-label={ __( 'Has style', 'elementor' ) }
+							getColor={ getStylesProviderThemeColor( provider ?? '' ) }
+						/>
 					) }
 					{ state ?? 'normal' }
 				</Stack>

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

@@ -14,12 +14,22 @@ import {
 import { InfoAlert, WarningInfotip } from '@elementor/editor-ui';
 import { ColorSwatchIcon, MapPinIcon } from '@elementor/icons';
 import { createLocation } from '@elementor/locations';
-import { type AutocompleteChangeReason, Box, Chip, FormLabel, Link, Stack, Typography } from '@elementor/ui';
+import {
+	type AutocompleteChangeReason,
+	Box,
+	Chip,
+	type ChipOwnProps,
+	FormLabel,
+	Link,
+	Stack,
+	Typography,
+} from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { useClassesProp } from '../../contexts/classes-prop-context';
 import { useElement } from '../../contexts/element-context';
 import { useStyle } from '../../contexts/style-context';
+import { getStylesProviderColorName } from '../../utils/get-styles-provider-color';
 import {
 	CreatableAutocomplete,
 	type CreatableAutocompleteProps,
@@ -34,7 +44,7 @@ const ID = 'elementor-css-class-selector';
 const TAGS_LIMIT = 50;
 
 type StyleDefOption = Option & {
-	color: 'accent' | 'global';
+	color: ChipOwnProps[ 'color' ];
 	icon: ReactElement | null;
 	provider: string | null;
 };
@@ -141,13 +151,9 @@ export function CssClassSelector() {
 				/>
 			</WarningInfotip>
 			{ ! canEdit && (
-				<InfoAlert
-					content={ __(
-						'With your current role, you can use existing classes but can’t modify them.',
-						'elementor'
-					) }
-					sx={ { mt: 1 } }
-				/>
+				<InfoAlert sx={ { mt: 1 } }>
+					{ __( 'With your current role, you can use existing classes but can’t modify them.', 'elementor' ) }
+				</InfoAlert>
 			) }
 		</Stack>
 	);
@@ -205,7 +211,7 @@ function useOptions() {
 			const isElements = isElementsStylesProvider( provider.getKey() );
 			const styleDefs = provider.actions.all( { elementId: element.id } );
 
-			// Add empty local option for elements, as fallback.
+			// Add an empty local option for elements, as fallback.
 			if ( isElements && styleDefs.length === 0 ) {
 				return [ EMPTY_OPTION ];
 			}
@@ -215,7 +221,7 @@ function useOptions() {
 					label: styleDef.label,
 					value: styleDef.id,
 					fixed: isElements,
-					color: isElements ? 'accent' : 'global',
+					color: getStylesProviderColorName( provider.getKey() ),
 					icon: isElements ? <MapPinIcon /> : null,
 					provider: provider.getKey(),
 				};

package/src/components/settings-tab.tsx

@@ -8,7 +8,12 @@ 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 } from '../controls-registry/controls-registry';
+import {
+	type ControlType,
+	getControl,
+	getDefaultLayout,
+	getPropTypeUtil,
+} 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';
@@ -64,14 +69,32 @@ const Control = ( { control }: { control: Control[ 'value' ] } ) => {
 	}
 
 	const layout = control.meta?.layout || getDefaultLayout( control.type as ControlType );
+	const controlProps = populateChildControlProps( control.props );
 
 	return (
 		<SettingsField bind={ control.bind }>
 			{ control.meta?.topDivider && <Divider /> }
 			<ControlTypeContainer layout={ layout }>
 				{ control.label ? <ControlFormLabel>{ control.label }</ControlFormLabel> : null }
-				<BaseControl type={ control.type as ControlType } props={ control.props } />
+				<BaseControl type={ control.type as ControlType } props={ controlProps } />
 			</ControlTypeContainer>
 		</SettingsField>
 	);
 };
+
+function populateChildControlProps( props: Record< string, unknown > ) {
+	if ( props.childControlType ) {
+		const childComponent = getControl( props.childControlType as ControlType );
+		const childPropType = getPropTypeUtil( props.childControlType as ControlType );
+		props = {
+			...props,
+			childControlConfig: {
+				component: childComponent,
+				props: props.childControlProps || {},
+				propTypeUtil: childPropType,
+			},
+		};
+	}
+
+	return props;
+}

package/src/components/style-indicator.tsx

@@ -1,23 +1,27 @@
-import { styled } from '@elementor/ui';
-
-type StyleIndicatorVariant = 'overridden' | 'local' | 'global';
+import { styled, type Theme } from '@elementor/ui';
 
 export const StyleIndicator = styled( 'div', {
-	shouldForwardProp: ( prop ) => prop !== 'variant',
-} )< { variant?: StyleIndicatorVariant } >`
+	shouldForwardProp: ( prop: string ) => ! [ 'isOverridden', 'getColor' ].includes( prop ),
+} )<
+	| {
+			isOverridden?: boolean;
+			getColor?: never;
+	  }
+	| {
+			isOverridden?: boolean;
+			getColor?: ( ( theme: Theme ) => string ) | null;
+	  }
+>`
 	width: 5px;
 	height: 5px;
 	border-radius: 50%;
-	background-color: ${ ( { theme, variant } ) => {
-		switch ( variant ) {
-			case 'overridden':
-				return theme.palette.warning.light;
-			case 'global':
-				return theme.palette.global.dark;
-			case 'local':
-				return theme.palette.accent.main;
-			default:
-				return theme.palette.text.disabled;
+	background-color: ${ ( { theme, isOverridden, getColor } ) => {
+		if ( isOverridden ) {
+			return theme.palette.warning.light;
 		}
+
+		const providerColor = getColor?.( theme );
+
+		return providerColor ?? theme.palette.text.disabled;
 	} };
 `;

package/src/components/style-sections/border-section/border-field.tsx

@@ -2,7 +2,6 @@ import * as React from 'react';
 import { ControlFormLabel } from '@elementor/editor-controls';
 import { __ } from '@wordpress/i18n';
 
-import { useStyle } from '../../../contexts/style-context';
 import { useStylesFields } from '../../../hooks/use-styles-fields';
 import { AddOrRemoveContent } from '../../add-or-remove-content';
 import { BorderColorField } from './border-color-field';
@@ -16,22 +15,21 @@ const initialBorder = {
 };
 
 export const BorderField = () => {
-	const { canEdit } = useStyle();
-	const [ border, setBorder ] = useStylesFields( Object.keys( initialBorder ) );
+	const { values, setValues, canEdit } = useStylesFields( Object.keys( initialBorder ) );
 
 	const addBorder = () => {
-		setBorder( initialBorder );
+		setValues( initialBorder );
 	};
 
 	const removeBorder = () => {
-		setBorder( {
+		setValues( {
 			'border-width': null,
 			'border-color': null,
 			'border-style': null,
 		} );
 	};
 
-	const hasBorder = Object.values( border ?? {} ).some( Boolean );
+	const hasBorder = Object.values( values ?? {} ).some( Boolean );
 
 	return (
 		<AddOrRemoveContent

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

@@ -2,11 +2,17 @@ import * as React from 'react';
 import { BoxShadowRepeaterControl } from '@elementor/editor-controls';
 
 import { StylesField } from '../../../controls-registry/styles-field';
+import { PanelDivider } from '../../panel-divider';
 import { SectionContent } from '../../section-content';
+import { OpacityControlField } from '../layout-section/opacity-control-field';
 
 export const EffectsSection = () => {
 	return (
 		<SectionContent>
+			<StylesField bind="opacity">
+				<OpacityControlField />
+			</StylesField>
+			<PanelDivider />
 			<StylesField bind="box-shadow">
 				<BoxShadowRepeaterControl />
 			</StylesField>

package/src/components/style-sections/layout-section/flex-order-field.tsx

@@ -6,7 +6,6 @@ import { ArrowDownSmallIcon, ArrowUpSmallIcon, PencilIcon } from '@elementor/ico
 import { Grid } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
-import { useStyle } from '../../../contexts/style-context';
 import { StylesField } from '../../../controls-registry/styles-field';
 import { useStylesField } from '../../../hooks/use-styles-field';
 import { UiProviders } from '../../../styles-inheritance/components/ui-providers';
@@ -48,8 +47,7 @@ const items: ToggleButtonGroupItem< GroupControlItemOption >[] = [
 ];
 
 export const FlexOrderField = () => {
-	const [ order, setOrder ] = useStylesField< NumberPropValue | null >( 'order' );
-	const { canEdit } = useStyle();
+	const { value: order, setValue: setOrder, canEdit } = useStylesField< NumberPropValue | null >( 'order' );
 
 	const [ groupControlValue, setGroupControlValue ] = useState( getGroupControlValue( order?.value || null ) );
 

package/src/components/style-sections/layout-section/flex-size-field.tsx

@@ -11,7 +11,6 @@ import { ExpandIcon, PencilIcon, ShrinkIcon } from '@elementor/icons';
 import { Grid } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
-import { useStyle } from '../../../contexts/style-context';
 import { StylesField } from '../../../controls-registry/styles-field';
 import { useStylesFields } from '../../../hooks/use-styles-fields';
 import { UiProviders } from '../../../styles-inheritance/components/ui-providers';
@@ -44,17 +43,15 @@ const items: ToggleButtonGroupItem< GroupItem >[] = [
 ];
 
 export const FlexSizeField = () => {
-	const { canEdit } = useStyle();
-
-	const [ fields, setFields ] = useStylesFields< {
+	const { values, setValues, canEdit } = useStylesFields< {
 		'flex-grow': NumberPropValue | null;
 		'flex-shrink': NumberPropValue | null;
 		'flex-basis': SizePropValue | null;
 	} >( [ 'flex-grow', 'flex-shrink', 'flex-basis' ] );
 
-	const grow = fields?.[ 'flex-grow' ]?.value || null;
-	const shrink = fields?.[ 'flex-shrink' ]?.value || null;
-	const basis = fields?.[ 'flex-basis' ]?.value || null;
+	const grow = values?.[ 'flex-grow' ]?.value || null;
+	const shrink = values?.[ 'flex-shrink' ]?.value || null;
+	const basis = values?.[ 'flex-basis' ]?.value || null;
 
 	const currentGroup = useMemo( () => getActiveGroup( { grow, shrink, basis } ), [ grow, shrink, basis ] ),
 		[ activeGroup, setActiveGroup ] = useState( currentGroup );
@@ -63,7 +60,7 @@ export const FlexSizeField = () => {
 		setActiveGroup( group );
 
 		if ( ! group || group === 'custom' ) {
-			setFields( {
+			setValues( {
 				'flex-basis': null,
 				'flex-grow': null,
 				'flex-shrink': null,
@@ -73,7 +70,7 @@ export const FlexSizeField = () => {
 		}
 
 		if ( group === 'flex-grow' ) {
-			setFields( {
+			setValues( {
 				'flex-basis': null,
 				'flex-grow': numberPropTypeUtil.create( DEFAULT ),
 				'flex-shrink': null,
@@ -82,7 +79,7 @@ export const FlexSizeField = () => {
 			return;
 		}
 
-		setFields( {
+		setValues( {
 			'flex-basis': null,
 			'flex-grow': null,
 			'flex-shrink': numberPropTypeUtil.create( DEFAULT ),

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

@@ -21,7 +21,7 @@ import { JustifyContentField } from './justify-content-field';
 import { WrapField } from './wrap-field';
 
 export const LayoutSection = () => {
-	const [ display ] = useStylesField< StringPropValue >( 'display' );
+	const { value: display } = useStylesField< StringPropValue >( 'display' );
 	const displayPlaceholder = useDisplayPlaceholderValue();
 	const isDisplayFlex = shouldDisplayFlexFields( display, displayPlaceholder as StringPropValue );
 	const { element } = useElement();
@@ -39,7 +39,7 @@ export const LayoutSection = () => {
 };
 
 const FlexFields = () => {
-	const [ flexWrap ] = useStylesField< StringPropValue >( 'flex-wrap' );
+	const { value: flexWrap } = useStylesField< StringPropValue >( 'flex-wrap' );
 
 	return (
 		<>

package/src/components/style-sections/layout-section/opacity-control-field.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { type MutableRefObject, useRef } from 'react';
+import { SizeControl } from '@elementor/editor-controls';
+import { Grid } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { StylesField } from '../../../controls-registry/styles-field';
+import { ControlLabel } from '../../control-label';
+
+export const OpacityControlField = () => {
+	const rowRef: MutableRefObject< HTMLElement | undefined > = useRef();
+
+	return (
+		<StylesField bind={ 'opacity' }>
+			<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap" ref={ rowRef }>
+				<Grid item xs={ 6 }>
+					<ControlLabel>{ __( 'Opacity', 'elementor' ) }</ControlLabel>
+				</Grid>
+				<Grid item xs={ 6 }>
+					<SizeControl units={ [ '%' ] } anchorRef={ rowRef } defaultUnit="%" />
+				</Grid>
+			</Grid>
+		</StylesField>
+	);
+};

package/src/components/style-sections/layout-section/utils/rotated-icon.tsx

@@ -48,7 +48,7 @@ const useGetTargetAngle = (
 	disableRotationForReversed: boolean,
 	existingRef?: React.MutableRefObject< number >
 ) => {
-	const [ direction ] = useStylesField< StringPropValue >( 'flex-direction' );
+	const { value: direction } = useStylesField< StringPropValue >( 'flex-direction' );
 	const isRtl = 'rtl' === useTheme().direction;
 	const rotationMultiplier = isRtl ? -1 : 1;
 	const angleMap = isClockwise ? CLOCKWISE_ANGLES : COUNTER_CLOCKWISE_ANGLES;

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

@@ -29,8 +29,8 @@ type DimensionsValues = {
 };
 
 export const PositionSection = () => {
-	const [ positionValue ] = useStylesField< StringPropValue >( 'position' );
-	const [ dimensionsValues, setDimensionsValues ] = useStylesFields< DimensionsValues >( [
+	const { value: positionValue } = useStylesField< StringPropValue >( 'position' );
+	const { values: dimensions, setValues: setDimensions } = useStylesFields< DimensionsValues >( [
 		'inset-block-start',
 		'inset-block-end',
 		'inset-inline-start',
@@ -42,9 +42,9 @@ export const PositionSection = () => {
 
 	const onPositionChange = ( newPosition: string | null, previousPosition: string | null | undefined ) => {
 		if ( newPosition === 'static' ) {
-			if ( dimensionsValues ) {
-				updateDimensionsHistory( dimensionsValues );
-				setDimensionsValues( {
+			if ( dimensions ) {
+				updateDimensionsHistory( dimensions );
+				setDimensions( {
 					'inset-block-start': undefined,
 					'inset-block-end': undefined,
 					'inset-inline-start': undefined,
@@ -53,7 +53,7 @@ export const PositionSection = () => {
 			}
 		} else if ( previousPosition === 'static' ) {
 			if ( dimensionsValuesFromHistory ) {
-				setDimensionsValues( dimensionsValuesFromHistory );
+				setDimensions( dimensionsValuesFromHistory );
 				clearDimensionsHistory();
 			}
 		}

package/src/components/style-sections/size-section/object-position-field.tsx

@@ -1,34 +1,12 @@
 import * as React from 'react';
-import { SelectControl } from '@elementor/editor-controls';
-import { Grid } from '@elementor/ui';
-import { __ } from '@wordpress/i18n';
+import { PositionControl } from '@elementor/editor-controls';
 
 import { StylesField } from '../../../controls-registry/styles-field';
-import { ControlLabel } from '../../control-label';
-
-const positionOptions = [
-	{ label: __( 'Center center', 'elementor' ), value: 'center center' },
-	{ label: __( 'Center left', 'elementor' ), value: 'center left' },
-	{ label: __( 'Center right', 'elementor' ), value: 'center right' },
-	{ label: __( 'Top center', 'elementor' ), value: 'top center' },
-	{ label: __( 'Top left', 'elementor' ), value: 'top left' },
-	{ label: __( 'Top right', 'elementor' ), value: 'top right' },
-	{ label: __( 'Bottom center', 'elementor' ), value: 'bottom center' },
-	{ label: __( 'Bottom left', 'elementor' ), value: 'bottom left' },
-	{ label: __( 'Bottom right', 'elementor' ), value: 'bottom right' },
-];
 
 export const ObjectPositionField = () => {
 	return (
 		<StylesField bind="object-position">
-			<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
-				<Grid item xs={ 6 }>
-					<ControlLabel>{ __( 'Object position', 'elementor' ) }</ControlLabel>
-				</Grid>
-				<Grid item xs={ 6 } sx={ { overflow: 'hidden' } }>
-					<SelectControl options={ positionOptions } />
-				</Grid>
-			</Grid>
+			<PositionControl />
 		</StylesField>
 	);
 };

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

@@ -52,7 +52,7 @@ const CssSizeProps = [
 ];
 
 export const SizeSection = () => {
-	const [ fitValue ] = useStylesField< StringPropValue >( 'object-fit' );
+	const { value: fitValue } = useStylesField< StringPropValue >( 'object-fit' );
 
 	const isNotFill = fitValue && fitValue?.value !== 'fill';
 

package/src/components/style-sections/typography-section/text-stroke-field.tsx

@@ -2,7 +2,6 @@ import * as React from 'react';
 import { StrokeControl } from '@elementor/editor-controls';
 import { __ } from '@wordpress/i18n';
 
-import { useStyle } from '../../../contexts/style-context';
 import { StylesField } from '../../../controls-registry/styles-field';
 import { useStylesField } from '../../../hooks/use-styles-field';
 import { AddOrRemoveContent } from '../../add-or-remove-content';
@@ -26,18 +25,17 @@ const initTextStroke = {
 };
 
 export const TextStrokeField = () => {
-	const { canEdit } = useStyle();
-	const [ textStroke, setTextStroke ] = useStylesField( 'stroke' );
+	const { value, setValue, canEdit } = useStylesField( 'stroke' );
 
 	const addTextStroke = () => {
-		setTextStroke( initTextStroke );
+		setValue( initTextStroke );
 	};
 
 	const removeTextStroke = () => {
-		setTextStroke( null );
+		setValue( null );
 	};
 
-	const hasTextStroke = Boolean( textStroke );
+	const hasTextStroke = Boolean( value );
 
 	return (
 		<StylesField bind={ 'stroke' }>

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

@@ -23,9 +23,11 @@ import { TransformField } from './transform-field';
 import { WordSpacingField } from './word-spacing-field';
 
 export const TypographySection = () => {
-	const [ columnCount ] = useStylesField< NumberPropValue >( 'column-count' );
-	const isVersion330Active = isExperimentActive( 'e_v_3_30' );
+	const { value: columnCount } = useStylesField< NumberPropValue >( 'column-count' );
 	const hasMultiColumns = !! ( columnCount?.value && columnCount?.value > 1 );
+
+	const isVersion330Active = isExperimentActive( 'e_v_3_30' );
+
 	return (
 		<SectionContent>
 			<FontFamilyField />

package/src/controls-registry/controls-registry.tsx

@@ -1,7 +1,9 @@
 import {
 	type ControlComponent,
 	ImageControl,
+	KeyValueControl,
 	LinkControl,
+	RepeatableControl,
 	SelectControl,
 	SizeControl,
 	SvgMediaControl,
@@ -11,19 +13,35 @@ import {
 	UrlControl,
 } from '@elementor/editor-controls';
 import { type ControlLayout } from '@elementor/editor-elements';
+import {
+	booleanPropTypeUtil,
+	imagePropTypeUtil,
+	imageSrcPropTypeUtil,
+	keyValuePropTypeUtil,
+	linkPropTypeUtil,
+	type PropTypeUtil,
+	sizePropTypeUtil,
+	stringPropTypeUtil,
+} from '@elementor/editor-props';
 
-type ControlRegistry = Record< string, { component: ControlComponent; layout: ControlLayout } >;
+type ControlRegistry = Record<
+	string,
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	{ component: ControlComponent; layout: ControlLayout; propTypeUtil?: PropTypeUtil< string, any > }
+>;
 
 const controlTypes = {
-	image: { component: ImageControl, layout: 'full' },
-	'svg-media': { component: SvgMediaControl, layout: 'full' },
-	text: { component: TextControl, layout: 'full' },
-	textarea: { component: TextAreaControl, layout: 'full' },
-	size: { component: SizeControl, layout: 'two-columns' },
-	select: { component: SelectControl, layout: 'two-columns' },
-	link: { component: LinkControl, layout: 'full' },
-	url: { component: UrlControl, layout: 'full' },
-	switch: { component: SwitchControl, layout: 'two-columns' },
+	image: { component: ImageControl, layout: 'full', propTypeUtil: imagePropTypeUtil },
+	'svg-media': { component: SvgMediaControl, layout: 'full', propTypeUtil: imageSrcPropTypeUtil },
+	text: { component: TextControl, layout: 'full', propTypeUtil: stringPropTypeUtil },
+	textarea: { component: TextAreaControl, layout: 'full', propTypeUtil: stringPropTypeUtil },
+	size: { component: SizeControl, layout: 'two-columns', propTypeUtil: sizePropTypeUtil },
+	select: { component: SelectControl, layout: 'two-columns', propTypeUtil: stringPropTypeUtil },
+	link: { component: LinkControl, layout: 'full', propTypeUtil: linkPropTypeUtil },
+	url: { component: UrlControl, layout: 'full', propTypeUtil: stringPropTypeUtil },
+	switch: { component: SwitchControl, layout: 'two-columns', propTypeUtil: booleanPropTypeUtil },
+	repeatable: { component: RepeatableControl, layout: 'full', propTypeUtil: undefined },
+	'key-value': { component: KeyValueControl, layout: 'full', propTypeUtil: keyValuePropTypeUtil },
 } as const satisfies ControlRegistry;
 
 export type ControlType = keyof typeof controlTypes;
@@ -35,3 +53,5 @@ export type ControlTypes = {
 export const getControl = ( type: ControlType ) => controlTypes[ type ]?.component;
 
 export const getDefaultLayout = ( type: ControlType ) => controlTypes[ type ].layout;
+
+export const getPropTypeUtil = ( type: ControlType ) => controlTypes[ type ]?.propTypeUtil;

package/src/controls-registry/styles-field.tsx

@@ -3,7 +3,6 @@ import { ControlAdornmentsProvider, PropKeyProvider, PropProvider } from '@eleme
 import { type PropKey, type PropValue } from '@elementor/editor-props';
 import { getStylesSchema } from '@elementor/editor-styles';
 
-import { useStyle } from '../contexts/style-context';
 import { useStylesField } from '../hooks/use-styles-field';
 import { StylesInheritanceIndicator } from '../styles-inheritance/components/styles-inheritance-indicator';
 import { createTopLevelOjectType } from './create-top-level-object-type';
@@ -15,8 +14,7 @@ export type StylesFieldProps = {
 };
 
 export const StylesField = ( { bind, placeholder, children }: StylesFieldProps ) => {
-	const [ value, setValue ] = useStylesField( bind );
-	const { canEdit } = useStyle();
+	const { value, setValue, canEdit } = useStylesField( bind );
 
 	const stylesSchema = getStylesSchema();