@elementor/editor-editing-panel 1.47.0 → 1.50.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-editing-panel",
-  "version": "1.47.0",
+  "version": "1.50.0",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -39,25 +39,24 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor": "0.20.1",
-    "@elementor/editor-canvas": "0.25.0",
-    "@elementor/editor-controls": "1.2.0",
-    "@elementor/editor-current-user": "0.5.0",
-    "@elementor/editor-documents": "0.13.8",
-    "@elementor/editor-elements": "0.8.7",
-    "@elementor/editor-panels": "0.16.1",
-    "@elementor/editor-props": "0.15.0",
+    "@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.11",
-    "@elementor/editor-styles-repository": "0.10.4",
-    "@elementor/editor-ui": "0.13.0",
+    "@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/icons": "1.44.0",
+    "@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.35.5",
+    "@elementor/ui": "1.36.0",
     "@elementor/utils": "0.5.0",
     "@elementor/wp-media": "0.6.1",
     "@wordpress/i18n": "^5.13.0"

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

@@ -10,6 +10,7 @@ import {
 	type ChipOwnProps,
 	Stack,
 	type Theme,
+	ThemeProvider,
 	Typography,
 	UnstableChipGroup,
 	usePopupState,
@@ -69,7 +70,7 @@ export function CssClassItem( props: CssClassItemProps ) {
 	const isShowingState = isActive && meta.state;
 
 	return (
-		<>
+		<ThemeProvider palette="default">
 			<UnstableChipGroup
 				ref={ setChipRef }
 				{ ...chipGroupProps }
@@ -144,7 +145,7 @@ export function CssClassItem( props: CssClassItemProps ) {
 			<CssClassProvider { ...classProps } handleRename={ openEditMode }>
 				<CssClassMenu popupState={ popupState } anchorEl={ chipRef } fixed={ fixed } />
 			</CssClassProvider>
-		</>
+		</ThemeProvider>
 	);
 }
 

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

@@ -7,7 +7,7 @@ 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 { getTempStylesProviderThemeColor } 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';
@@ -161,7 +161,7 @@ function StateMenuItem( { state, closeMenu, ...props }: StateMenuItemProps ) {
 					{ isStyled && (
 						<StyleIndicator
 							aria-label={ __( 'Has style', 'elementor' ) }
-							getColor={ getStylesProviderThemeColor( provider ?? '' ) }
+							getColor={ getTempStylesProviderThemeColor( provider ?? '' ) }
 						/>
 					) }
 					{ state ?? 'normal' }

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

@@ -53,7 +53,7 @@ const EMPTY_OPTION = {
 	label: __( 'local', 'elementor' ),
 	value: null,
 	fixed: true,
-	color: 'accent',
+	color: getTempStylesProviderColorName( 'accent' ),
 	icon: <MapPinIcon />,
 	provider: null,
 } satisfies StyleDefOption;
@@ -221,7 +221,7 @@ function useOptions() {
 					label: styleDef.label,
 					value: styleDef.id,
 					fixed: isElements,
-					color: getStylesProviderColorName( provider.getKey() ),
+					color: getTempStylesProviderColorName( getStylesProviderColorName( provider.getKey() ) ),
 					icon: isElements ? <MapPinIcon /> : null,
 					provider: provider.getKey(),
 				};
@@ -229,6 +229,14 @@ function useOptions() {
 		} );
 }
 
+function getTempStylesProviderColorName( color: ChipOwnProps[ 'color' ] ): ChipOwnProps[ 'color' ] {
+	if ( color === 'accent' ) {
+		return 'primary';
+	}
+
+	return color;
+}
+
 function useCreateAction() {
 	const [ provider, createAction ] = useCreateAndApplyClass();
 	if ( ! provider || ! createAction ) {

package/src/components/popover-body.tsx

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { PopoverBody as BasePopoverBody } from '@elementor/editor-ui';
+
+import { useSectionWidth } from '../contexts/section-context';
+
+type Props = React.ComponentProps< typeof BasePopoverBody >;
+
+export const PopoverBody = ( props: Props ) => {
+	const sectionWidth = useSectionWidth();
+
+	return <BasePopoverBody { ...props } width={ sectionWidth } />;
+};

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

@@ -8,6 +8,8 @@ import { BorderColorField } from './border-color-field';
 import { BorderStyleField } from './border-style-field';
 import { BorderWidthField } from './border-width-field';
 
+const BORDER_LABEL = __( 'Border', 'elementor' );
+
 const initialBorder = {
 	'border-width': { $$type: 'size', value: { size: 1, unit: 'px' } },
 	'border-color': { $$type: 'color', value: '#000000' },
@@ -17,16 +19,21 @@ const initialBorder = {
 export const BorderField = () => {
 	const { values, setValues, canEdit } = useStylesFields( Object.keys( initialBorder ) );
 
+	const meta = { history: { propDisplayName: BORDER_LABEL } };
+
 	const addBorder = () => {
-		setValues( initialBorder );
+		setValues( initialBorder, meta );
 	};
 
 	const removeBorder = () => {
-		setValues( {
-			'border-width': null,
-			'border-color': null,
-			'border-style': null,
-		} );
+		setValues(
+			{
+				'border-width': null,
+				'border-color': null,
+				'border-style': null,
+			},
+			meta
+		);
 	};
 
 	const hasBorder = Object.values( values ?? {} ).some( Boolean );
@@ -37,7 +44,7 @@ export const BorderField = () => {
 			onAdd={ addBorder }
 			onRemove={ removeBorder }
 			disabled={ ! canEdit }
-			renderLabel={ () => <ControlFormLabel>{ __( 'Border', 'elementor' ) }</ControlFormLabel> }
+			renderLabel={ () => <ControlFormLabel>{ BORDER_LABEL }</ControlFormLabel> }
 		>
 			<BorderWidthField />
 			<BorderColorField />

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { BoxShadowRepeaterControl, FilterRepeaterControl } from '@elementor/editor-controls';
+import { BoxShadowRepeaterControl, FilterRepeaterControl, TransformRepeaterControl } from '@elementor/editor-controls';
 import { isExperimentActive } from '@elementor/editor-v1-adapters';
 import { __ } from '@wordpress/i18n';
 
@@ -10,24 +10,38 @@ import { SectionContent } from '../../section-content';
 import { OpacityControlField } from '../layout-section/opacity-control-field';
 
 const BOX_SHADOW_LABEL = __( 'Box shadow', 'elementor' );
-const FILTER_LABEL = __( 'Filter', 'elementor' );
+const FILTER_LABEL = __( 'Filters', 'elementor' );
+const TRANSFORM_LABEL = __( 'Transform', 'elementor' );
+const BACKDROP_FILTER_LABEL = __( 'Backdrop filters', 'elementor' );
 
 export const EffectsSection = () => {
 	const isVersion331Active = isExperimentActive( EXPERIMENTAL_FEATURES.V_3_31 );
 
 	return (
 		<SectionContent>
-			<OpacityControlField />
-			<PanelDivider />
+			{ isVersion331Active && (
+				<>
+					<OpacityControlField />
+					<PanelDivider />
+				</>
+			) }
 			<StylesField bind="box-shadow" propDisplayName={ BOX_SHADOW_LABEL }>
 				<BoxShadowRepeaterControl />
 			</StylesField>
 			{ isVersion331Active && (
 				<>
+					<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>
 				</>
 			) }
 		</SectionContent>

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { ControlToggleButtonGroup, NumberControl, type ToggleButtonGroupItem } from '@elementor/editor-controls';
 import { type NumberPropValue } from '@elementor/editor-props';
 import { ArrowDownSmallIcon, ArrowUpSmallIcon, PencilIcon } from '@elementor/icons';
@@ -50,10 +50,21 @@ const items: ToggleButtonGroupItem< GroupControlItemOption >[] = [
 ];
 
 export const FlexOrderField = () => {
-	const { value: order, setValue: setOrder, canEdit } = useStylesField< NumberPropValue | null >( 'order' );
+	const {
+		value: order,
+		setValue: setOrder,
+		canEdit,
+	} = useStylesField< NumberPropValue | null >( 'order', {
+		history: { propDisplayName: ORDER_LABEL },
+	} );
 
 	const [ groupControlValue, setGroupControlValue ] = useState( getGroupControlValue( order?.value || null ) );
 
+	useEffect( () => {
+		const newGroupControlValue = getGroupControlValue( order?.value || null );
+		setGroupControlValue( newGroupControlValue );
+	}, [ order?.value ] );
+
 	const handleToggleButtonChange = ( group: GroupControlItemOption | null ) => {
 		setGroupControlValue( group );
 
@@ -69,8 +80,8 @@ export const FlexOrderField = () => {
 	return (
 		<StylesField bind="order" propDisplayName={ ORDER_LABEL }>
 			<UiProviders>
-				<StylesFieldLayout label={ ORDER_LABEL }>
-					<SectionContent>
+				<SectionContent>
+					<StylesFieldLayout label={ ORDER_LABEL }>
 						<ControlToggleButtonGroup
 							items={ items }
 							value={ groupControlValue }
@@ -78,22 +89,22 @@ export const FlexOrderField = () => {
 							exclusive={ true }
 							disabled={ ! canEdit }
 						/>
-						{ CUSTOM === groupControlValue && (
-							<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
-								<Grid item xs={ 6 }>
-									<ControlLabel>{ __( 'Custom order', 'elementor' ) }</ControlLabel>
-								</Grid>
-								<Grid item xs={ 6 } sx={ { display: 'flex', justifyContent: 'end' } }>
-									<NumberControl
-										min={ FIRST_DEFAULT_VALUE + 1 }
-										max={ LAST_DEFAULT_VALUE - 1 }
-										shouldForceInt={ true }
-									/>
-								</Grid>
+					</StylesFieldLayout>
+					{ CUSTOM === groupControlValue && (
+						<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
+							<Grid item xs={ 6 }>
+								<ControlLabel>{ __( 'Custom order', 'elementor' ) }</ControlLabel>
+							</Grid>
+							<Grid item xs={ 6 } sx={ { display: 'flex', justifyContent: 'end' } }>
+								<NumberControl
+									min={ FIRST_DEFAULT_VALUE + 1 }
+									max={ LAST_DEFAULT_VALUE - 1 }
+									shouldForceInt={ true }
+								/>
 							</Grid>
-						) }
-					</SectionContent>
-				</StylesFieldLayout>
+						</Grid>
+					) }
+				</SectionContent>
 			</UiProviders>
 		</StylesField>
 	);

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

@@ -60,31 +60,29 @@ export const FlexSizeField = () => {
 	const onChangeGroup = ( group: GroupItem | null = null ) => {
 		setActiveGroup( group );
 
+		let props;
+
 		if ( ! group || group === 'custom' ) {
-			setValues( {
+			props = {
 				'flex-basis': null,
 				'flex-grow': null,
 				'flex-shrink': null,
-			} );
-
-			return;
-		}
-
-		if ( group === 'flex-grow' ) {
-			setValues( {
+			};
+		} else if ( group === 'flex-grow' ) {
+			props = {
 				'flex-basis': null,
 				'flex-grow': numberPropTypeUtil.create( DEFAULT ),
 				'flex-shrink': null,
-			} );
-
-			return;
+			};
+		} else {
+			props = {
+				'flex-basis': null,
+				'flex-grow': null,
+				'flex-shrink': numberPropTypeUtil.create( DEFAULT ),
+			};
 		}
 
-		setValues( {
-			'flex-basis': null,
-			'flex-grow': null,
-			'flex-shrink': numberPropTypeUtil.create( DEFAULT ),
-		} );
+		setValues( props, { history: { propDisplayName: FLEX_SIZE_LABEL } } );
 	};
 
 	return (

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

@@ -20,8 +20,13 @@ import { GapControlField } from './gap-control-field';
 import { JustifyContentField } from './justify-content-field';
 import { WrapField } from './wrap-field';
 
+const DISPLAY_LABEL = __( 'Display', 'elementor' );
+const FLEX_WRAP_LABEL = __( 'Flex wrap', 'elementor' );
+
 export const LayoutSection = () => {
-	const { value: display } = useStylesField< StringPropValue >( 'display' );
+	const { value: display } = useStylesField< StringPropValue >( 'display', {
+		history: { propDisplayName: DISPLAY_LABEL },
+	} );
 	const displayPlaceholder = useDisplayPlaceholderValue();
 	const isDisplayFlex = shouldDisplayFlexFields( display, displayPlaceholder as StringPropValue );
 	const { element } = useElement();
@@ -39,7 +44,9 @@ export const LayoutSection = () => {
 };
 
 const FlexFields = () => {
-	const { value: flexWrap } = useStylesField< StringPropValue >( 'flex-wrap' );
+	const { value: flexWrap } = useStylesField< StringPropValue >( 'flex-wrap', {
+		history: { propDisplayName: FLEX_WRAP_LABEL },
+	} );
 
 	return (
 		<>

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

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { useRef } from 'react';
 import { type StringPropValue } from '@elementor/editor-props';
 import { type ToggleButtonProps, useTheme } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
 
 import { useStylesField } from '../../../../hooks/use-styles-field';
 import type { FlexDirection } from '../flex-direction-field';
@@ -14,6 +15,8 @@ type Props = {
 	disableRotationForReversed?: boolean;
 };
 
+const FLEX_DIRECTION_LABEL = __( 'Flex direction', 'elementor' );
+
 const CLOCKWISE_ANGLES: Record< FlexDirection, number > = {
 	row: 0,
 	column: 90,
@@ -48,7 +51,9 @@ const useGetTargetAngle = (
 	disableRotationForReversed: boolean,
 	existingRef?: React.MutableRefObject< number >
 ) => {
-	const { value: direction } = useStylesField< StringPropValue >( 'flex-direction' );
+	const { value: direction } = useStylesField< StringPropValue >( 'flex-direction', {
+		history: { propDisplayName: FLEX_DIRECTION_LABEL },
+	} );
 	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

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { type StringPropValue } from '@elementor/editor-props';
 import { isExperimentActive } from '@elementor/editor-v1-adapters';
 import { useSessionStorage } from '@elementor/session';
+import { __ } from '@wordpress/i18n';
 
 import { useStyle } from '../../../contexts/style-context';
 import { useStylesField } from '../../../hooks/use-styles-field';
@@ -28,8 +29,13 @@ type DimensionsValues = {
 	'inset-inline-end': DimensionValue;
 };
 
+const POSITION_LABEL = __( 'Position', 'elementor' );
+const DIMENSIONS_LABEL = __( 'Dimensions', 'elementor' );
+
 export const PositionSection = () => {
-	const { value: positionValue } = useStylesField< StringPropValue >( 'position' );
+	const { value: positionValue } = useStylesField< StringPropValue >( 'position', {
+		history: { propDisplayName: POSITION_LABEL },
+	} );
 	const { values: dimensions, setValues: setDimensions } = useStylesFields< DimensionsValues >( [
 		'inset-block-start',
 		'inset-block-end',
@@ -41,19 +47,24 @@ export const PositionSection = () => {
 	const isCssIdFeatureActive = isExperimentActive( 'e_v_3_30' );
 
 	const onPositionChange = ( newPosition: string | null, previousPosition: string | null | undefined ) => {
+		const meta = { history: { propDisplayName: DIMENSIONS_LABEL } };
+
 		if ( newPosition === 'static' ) {
 			if ( dimensions ) {
 				updateDimensionsHistory( dimensions );
-				setDimensions( {
-					'inset-block-start': undefined,
-					'inset-block-end': undefined,
-					'inset-inline-start': undefined,
-					'inset-inline-end': undefined,
-				} );
+				setDimensions(
+					{
+						'inset-block-start': undefined,
+						'inset-block-end': undefined,
+						'inset-inline-start': undefined,
+						'inset-inline-end': undefined,
+					},
+					meta
+				);
 			}
 		} else if ( previousPosition === 'static' ) {
 			if ( dimensionsValuesFromHistory ) {
-				setDimensions( dimensionsValuesFromHistory );
+				setDimensions( dimensionsValuesFromHistory, meta );
 				clearDimensionsHistory();
 			}
 		}

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

@@ -52,9 +52,12 @@ const CssSizeProps = [
 ];
 
 const ASPECT_RATIO_LABEL = __( 'Aspect Ratio', 'elementor' );
+const OBJECT_FIT_LABEL = __( 'Object fit', 'elementor' );
 
 export const SizeSection = () => {
-	const { value: fitValue } = useStylesField< StringPropValue >( 'object-fit' );
+	const { value: fitValue } = useStylesField< StringPropValue >( 'object-fit', {
+		history: { propDisplayName: OBJECT_FIT_LABEL },
+	} );
 
 	const isNotFill = fitValue && fitValue?.value !== 'fill';
 

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

@@ -27,7 +27,9 @@ const initTextStroke = {
 const TEXT_STROKE_LABEL = __( 'Text stroke', 'elementor' );
 
 export const TextStrokeField = () => {
-	const { value, setValue, canEdit } = useStylesField( 'stroke' );
+	const { value, setValue, canEdit } = useStylesField( 'stroke', {
+		history: { propDisplayName: TEXT_STROKE_LABEL },
+	} );
 
 	const addTextStroke = () => {
 		setValue( initTextStroke );

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

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import type { NumberPropValue } from '@elementor/editor-props';
 import { isExperimentActive } from '@elementor/editor-v1-adapters';
+import { __ } from '@wordpress/i18n';
 
 import { useStylesField } from '../../../hooks/use-styles-field';
 import { PanelDivider } from '../../panel-divider';
@@ -22,8 +23,12 @@ import { TextStrokeField } from './text-stroke-field';
 import { TransformField } from './transform-field';
 import { WordSpacingField } from './word-spacing-field';
 
+const COLUMN_COUNT_LABEL = __( 'Column count', 'elementor' );
+
 export const TypographySection = () => {
-	const { value: columnCount } = useStylesField< NumberPropValue >( 'column-count' );
+	const { value: columnCount } = useStylesField< NumberPropValue >( 'column-count', {
+		history: { propDisplayName: COLUMN_COUNT_LABEL },
+	} );
 	const hasMultiColumns = !! ( columnCount?.value && columnCount?.value > 1 );
 
 	const isVersion330Active = isExperimentActive( 'e_v_3_30' );

package/src/components/style-tab.tsx

@@ -29,7 +29,7 @@ const TABS_HEADER_HEIGHT = '37px';
 
 export const stickyHeaderStyles = {
 	position: 'sticky',
-	zIndex: 1,
+	zIndex: 1100,
 	opacity: 1,
 	backgroundColor: 'background.default',
 	transition: 'top 300ms ease',

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

@@ -7,9 +7,9 @@ import {
 	getElementLabel,
 	getElementSetting,
 	updateElementSettings,
-	useElementSetting,
+	useElementSettings,
 } from '@elementor/editor-elements';
-import { type PropKey, type PropValue } from '@elementor/editor-props';
+import { type PropKey, type PropType, type PropValue, shouldApplyEffect } from '@elementor/editor-props';
 import { isExperimentActive, undoable } from '@elementor/editor-v1-adapters';
 import { __ } from '@wordpress/i18n';
 
@@ -26,9 +26,9 @@ type Props = {
 export const SettingsField = ( { bind, children, propDisplayName }: Props ) => {
 	const { element, elementType } = useElement();
 
-	const settingsValue = useElementSetting< PropValue >( element.id, bind );
+	const elementSettingValues = useElementSettings< PropValue >( element.id, Object.keys( elementType.propsSchema ) );
 
-	const value = { [ bind ]: settingsValue };
+	const value = { [ bind ]: elementSettingValues?.[ bind ] };
 
 	const propType = createTopLevelOjectType( { schema: elementType.propsSchema } );
 
@@ -48,13 +48,29 @@ export const SettingsField = ( { bind, children, propDisplayName }: Props ) => {
 		}
 	};
 
+	const isDisabled = ( prop: PropType ) => getDisableState( prop, elementSettingValues );
+
 	return (
-		<PropProvider propType={ propType } value={ value } setValue={ setValue }>
+		<PropProvider propType={ propType } value={ value } setValue={ setValue } isDisabled={ isDisabled }>
 			<PropKeyProvider bind={ bind }>{ children }</PropKeyProvider>
 		</PropProvider>
 	);
 };
 
+function getDisableState( propType: PropType, elementValues: PropValue ): boolean | undefined {
+	const disablingDependencies = propType.dependencies?.filter( ( { effect } ) => effect === 'disable' ) || [];
+
+	if ( ! disablingDependencies.length ) {
+		return false;
+	}
+
+	if ( disablingDependencies.length > 1 ) {
+		throw new Error( 'Multiple disabling dependencies are not supported.' );
+	}
+
+	return shouldApplyEffect( disablingDependencies[ 0 ], elementValues );
+}
+
 type UndoableUpdateElementSettingsArgs = {
 	newValue: Record< string, PropValue >;
 };

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

@@ -16,8 +16,10 @@ export type StylesFieldProps = {
 	propDisplayName: string;
 };
 
-export const StylesField = ( { bind, placeholder, children }: StylesFieldProps ) => {
-	const { value, setValue, canEdit } = useStylesField( bind );
+export const StylesField = ( { bind, placeholder, propDisplayName, children }: StylesFieldProps ) => {
+	const { value, setValue, canEdit } = useStylesField( bind, {
+		history: { propDisplayName },
+	} );
 
 	const isVersion331Active = isExperimentActive( 'e_v_3_31' );
 	const stylesInheritanceChain = useStylesInheritanceChain( [ bind ] );
@@ -49,7 +51,7 @@ export const StylesField = ( { bind, placeholder, children }: StylesFieldProps )
 				value={ values }
 				setValue={ setValues }
 				placeholder={ placeholderValues }
-				disabled={ ! canEdit }
+				isDisabled={ () => ! canEdit }
 			>
 				<PropKeyProvider bind={ bind }>{ children }</PropKeyProvider>
 			</PropProvider>