@elementor/editor-editing-panel 1.47.0 → 1.48.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-editing-panel",
-  "version": "1.47.0",
+  "version": "1.48.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.0",
+    "@elementor/editor-canvas": "0.26.0",
+    "@elementor/editor-controls": "1.3.0",
+    "@elementor/editor-documents": "0.13.9",
+    "@elementor/editor-elements": "0.9.0",
+    "@elementor/editor-panels": "0.17.0",
+    "@elementor/editor-props": "0.16.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.12",
+    "@elementor/editor-styles-repository": "0.10.5",
+    "@elementor/editor-ui": "0.14.0",
     "@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/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';
 
@@ -11,19 +11,28 @@ import { OpacityControlField } from '../layout-section/opacity-control-field';
 
 const BOX_SHADOW_LABEL = __( 'Box shadow', 'elementor' );
 const FILTER_LABEL = __( 'Filter', 'elementor' );
+const TRANSFORM_LABEL = __( 'Transform', '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 />

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

@@ -50,7 +50,13 @@ 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 ) );
 
@@ -69,8 +75,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 +84,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>
-						) }
-					</SectionContent>
-				</StylesFieldLayout>
+							<Grid item xs={ 6 } sx={ { display: 'flex', justifyContent: 'end' } }>
+								<NumberControl
+									min={ FIRST_DEFAULT_VALUE + 1 }
+									max={ LAST_DEFAULT_VALUE - 1 }
+									shouldForceInt={ true }
+								/>
+							</Grid>
+						</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>

package/src/hooks/use-styles-field.ts

@@ -3,7 +3,8 @@ import type { PropKey, PropValue } from '@elementor/editor-props';
 import { useStylesFields } from './use-styles-fields';
 
 export function useStylesField< T extends PropValue >(
-	propName: PropKey
+	propName: PropKey,
+	meta: { history: { propDisplayName: string } }
 ): {
 	value: T;
 	setValue: ( newValue: T ) => void;
@@ -14,9 +15,7 @@ export function useStylesField< T extends PropValue >(
 	const value = values?.[ propName ] ?? null;
 
 	const setValue = ( newValue: T ) => {
-		setValues( {
-			[ propName ]: newValue,
-		} );
+		setValues( { [ propName ]: newValue }, meta );
 	};
 
 	return { value: value as T, setValue, canEdit };